_quarto_internal_scss_error.scss

// quarto-scss-analysis-annotation { "quarto-version": "1.7.32" }

// 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" }

// Base document colors
$body-bg: #2b282acf;
$body-color: #ffdc00;
$link-color: #75AADB;
$navbar-bg:  #ffdc00;

// Code blocks
$code-block-bg: #e2e5e9ff;
/*$code-block-bg-alpha: -.9;



// 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": "darkly (builtin theme)" }

$theme: "darkly" !default;

//
// Color system
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #ebebeb !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #888 !default;
$gray-700: #444 !default;
$gray-800: #303030 !default;
$gray-900: #222 !default;
$black:    #000 !default;

$blue:    #375a7f !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #e74c3c !default;
$orange:  #fd7e14 !default;
$yellow:  #f39c12 !default;
$green:   #00bc8c !default;
$teal:    #20c997 !default;
$cyan:    #3498db !default;

// Body

$body-bg:                   $gray-900 !default;
$body-color:                $white !default;
@function body-mix($weight) {
    @return mix($body-bg, $body-color, $weight);
}

$primary:       $blue !default;
$secondary:     body-mix(85%) !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
// This is inconsistent with Bootstrap semantics. That is, $dark
// should actually be a light color in a dark mode setting, :shrug:
// https://github.com/thomaspark/bootswatch/issues/989
$light:         body-mix(65%) !default;
$dark:          body-mix(95%) !default;

$min-contrast-ratio:   1.9 !default;

// Links

$link-color:                $success !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;
$h1-font-size:                3rem !default;
$h2-font-size:                2.5rem !default;
$h3-font-size:                2rem !default;
$text-muted:                  body-mix(75%) !default;

// Tables

$table-border-color:          body-mix(85%) !default;

$table-bg-scale:              0% !default;

// Forms

$input-bg:                          $body-color !default;
$input-color:                       body-mix(95%) !default;
$input-border-color:                $body-bg !default;
$input-group-addon-color:           body-mix(65%) !default;
$input-group-addon-bg:              body-mix(85%) !default;
$input-placeholder-color:           body-mix(75%) !default;

$form-check-input-bg:                     $body-color !default;
$form-check-input-border:                 none !default;

$form-select-disabled-color:        body-mix(75%) !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;

// Dropdowns

$dropdown-bg:                       $body-bg !default;
$dropdown-border-color:             body-mix(85%) !default;
$dropdown-divider-bg:               body-mix(85%) !default;
$dropdown-link-color:               $body-color !default;
$dropdown-link-hover-color:         $body-color !default;
$dropdown-link-hover-bg:            $primary !default;

// Navs

$nav-link-padding-x:                2rem !default;
$nav-link-disabled-color:           body-mix(65%) !default;
$nav-tabs-border-color:             body-mix(85%) !default;
$nav-tabs-link-hover-border-color:  $nav-tabs-border-color $nav-tabs-border-color transparent !default;
$nav-tabs-link-active-color:        $body-color !default;
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;

// Navbar

$navbar-padding-y:                  1rem !default;
$navbar-dark-color:                rgba($body-color, .6) !default;
$navbar-dark-hover-color:          $body-color !default;
$navbar-light-color:                rgba($body-bg, .7) !default;
$navbar-light-hover-color:          $body-bg !default;
$navbar-light-active-color:         $body-bg !default;
$navbar-light-toggler-border-color: rgba($body-bg, .1) !default;

// Pagination

$pagination-color:                  $body-color !default;
$pagination-bg:                     $success !default;
$pagination-border-width:           0 !default;
$pagination-border-color:           transparent !default;
$pagination-hover-color:            $body-color !default;
$pagination-hover-bg:               lighten($success, 10%) !default;
$pagination-hover-border-color:     transparent !default;
$pagination-active-bg:              $pagination-hover-bg !default;
$pagination-active-border-color:    transparent !default;
$pagination-disabled-color:         $body-color !default;
$pagination-disabled-bg:            darken($success, 15%) !default;
$pagination-disabled-border-color:  transparent !default;

// Cards

$card-cap-bg:                       body-mix(85%) !default;
$card-bg:                           body-mix(95%) !default;

// Popovers

$popover-bg:                        body-mix(95%) !default;
$popover-header-bg:                 body-mix(85%) !default;

// Toasts

$toast-background-color:            body-mix(85%) !default;
$toast-header-background-color:     body-mix(95%) !default;

// Modals

$modal-content-bg:                  body-mix(95%) !default;
$modal-content-border-color:        body-mix(85%) !default;
$modal-header-border-color:         body-mix(85%) !default;

// Progress bars

$progress-bg:                       body-mix(85%) !default;

// List group

$list-group-color:                  $body-color !default;
$list-group-bg:                     body-mix(95%) !default;
$list-group-border-color:           body-mix(85%) !default;
$list-group-hover-bg:               body-mix(85%) !default;
$list-group-action-hover-color:     $list-group-color !default;
$list-group-action-active-bg:       $body-bg !default;

// Breadcrumbs

$breadcrumb-padding-y:              .375rem !default;
$breadcrumb-padding-x:              .75rem !default;
$breadcrumb-bg:                     body-mix(85%) !default;
$breadcrumb-border-radius:          .25rem !default;

// Close

$btn-close-color:            $body-color !default;
$btn-close-opacity:          .4 !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: #5c6370 !default;
$btn-code-copy-color-active: #61afef !default;

// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }

$code-copy-selector: "" !default;
$code-white-space: pre-wrap !default;
$tbl-cap-location: top !default;
$code-block-bg: true !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-fg}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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
/// if a theme does not provide body-color or body-bg
/// defaults to boostrap own default value for theses variables (in _variables.scss)
$border-color: mix(
  if(variable-exists(body-color), $body-color, $gray-900),
  if(variable-exists(body-bg), $body-bg, $white),
  15%
) !default;
/// Make sure table border are the same as the border color (in case change in bootstrap 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 `<body>` 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;

$form-switch-checked-color:       $component-active-color !default;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !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;
















// 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 "light-dark";
@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";

$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;
        }
      }
    }
  }
}

// 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(--';
  }
}

$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;
}
.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;
  }
}

.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-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-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);
    }
  }
}

/* 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();
  }
}

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);
  }
}

.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-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;
}

$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;
      }
    }
  }
}

$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%);
  }
}

.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" }




.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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-fg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
}

.navbar .quarto-reader-toggle.reader .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-bg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
}

.sidebar-navigation .quarto-reader-toggle:not(.reader) .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($sidebar-fg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
}

.sidebar-navigation .quarto-reader-toggle.reader .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($sidebar-bg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
}

#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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($navbar-fg)}" class="bi bi-menu-button-wide" viewBox="0 0 16 16"><path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v2A1.5 1.5 0 0 1 14.5 5h-13A1.5 1.5 0 0 1 0 3.5v-2zM1.5 1a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-13z"/><path d="M2 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm10.823.323-.396-.396A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/></svg>');
    }

    .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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-up" viewBox="0 0 16 16"><path d="M3.5 12.5a.5.5 0 0 1-1 0V3.707L1.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 3.707V12.5zm3.5-9a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/></svg>');
    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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down" viewBox="0 0 16 16"><path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/></svg>');
    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 <code> 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-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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  }
  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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
  }
}

@if variable-exists(btn-code-copy-color-active) {
  #{$code-copy-selector} .code-copy-button:hover > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color-active)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  }
  #{$code-copy-selector} .code-copy-button-checked:hover > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color-active)}"  viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
  }
}

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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.code-tools-button:hover > .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($body-color)}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
}

#quarto-embedded-source-code-modal .code-copy-button > .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
}

#quarto-embedded-source-code-modal .code-copy-button-checked > .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
}

/* 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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
  }
  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":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>',
    ),
  // TIP
  "tip":
    (
      "color": $callout-color-tip,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/></svg>',
    ),
  // WARNING
  "warning":
    (
      "color": $callout-color-warning,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>',
    ),
  // CAUTION
  "caution":
    (
      "color": $callout-color-caution,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cone-striped" viewBox="0 0 16 16"><path d="M9.97 4.88l.953 3.811C10.158 8.878 9.14 9 8 9c-1.14 0-2.159-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.274 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/></svg>',
    ),
  // IMPORTANT
  "important":
    (
      "color": $callout-color-important,
      "icon":
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>',
    )
);

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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($body-color)}" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
  }
}

.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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.navbar .quarto-color-scheme-toggle.alternate .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

// 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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 35%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.quarto-color-scheme-toggle.alternate.top-right .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 20%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

// 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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($link-color)}" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
  } @else {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
  }
  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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB(bannerDim())}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
  }

  .code-tools-button:hover > .bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB(bannerColor())}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
  }

  .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:ital,wght@0,400;0,700;1,400&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

// Typography

.blockquote {
  &-footer {
    color: body-mix(75%);
  }
}

// Forms

@include color-mode(dark) {
  .input-group-text {
    // color: $body-color;
  }
}

.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.active,
  .nav-link.active:focus,
  .nav-link.active:hover,
  .nav-item.open .nav-link,
  .nav-item.open .nav-link:focus,
  .nav-item.open .nav-link:hover {
    color: $body-color;
  }
}

.breadcrumb a {
  color: $body-color;
}

.pagination {
  a:hover {
    text-decoration: none;
  }
}

// Indicators

.alert {
  color: $body-color;
  border: none;

  a,
  .alert-link {
    color: $body-color;
    text-decoration: underline;
  }

  @each $color, $value in $theme-colors {
    &-#{$color} {
      @if $enable-gradients {
        background: $value linear-gradient(180deg, mix($body-color, $value, 15%), $value) repeat-x;
      } @else {
        background-color: $value;
      }
    }
  }
}

.tooltip {
  --bs-tooltip-bg: var(--bs-tertiary-bg);
  --bs-tooltip-color: var(--bs-emphasis-color);
}


// quarto-scss-analysis-annotation { "origin": null }

.sitemap {
  margin: 1em 0;
  border: 2px solid gray;
  border-left: 10px solid teal; 
  border-radius: 10px;
  background-color: white;
  padding: 0; /* Ensure no unwanted padding */
}

/* Style the first child element (assumed to be the header) */
.sitemap > *:first-child {
  margin: 0;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 55px;
  color: black;
  background-color: white;
  border-top-right-radius: 10px;
  font-size: 1em;
  font-weight: bold;
  display: flex;
  align-items: center; /* Vertically center the icon with text */
  position: relative;
  min-height: 45px; /* Ensures space for the icon */


  /* Add the icon as a background image */
  background-image: url(https://unsw-coders.netlify.app/images/hexstickers-mixer.png);
  background-size: 35px auto; /* Ensures the image scales properly */
  background-repeat: no-repeat;
  background-position: 10px center; /* Adjust position */
}

/* Style the rest of the content */
.sitemap > *:not(:first-child) {
  padding-top: 10px;
  padding-left: 15px;
  color: black;
  background-color: white;
  border-bottom-right-radius: 10px;
}

// quarto-scss-analysis-annotation { "origin": null }