's hover style\n &:hover {\n color: var(--#{$prefix}btn-close-color);\n text-decoration: none;\n opacity: var(--#{$prefix}btn-close-hover-opacity);\n }\n\n &:focus {\n outline: 0;\n box-shadow: var(--#{$prefix}btn-close-focus-shadow);\n opacity: var(--#{$prefix}btn-close-focus-opacity);\n }\n\n &:disabled,\n &.disabled {\n pointer-events: none;\n user-select: none;\n opacity: var(--#{$prefix}btn-close-disabled-opacity);\n }\n}\n\n@mixin btn-close-white() {\n filter: var(--#{$prefix}btn-close-white-filter);\n}\n\n.btn-close-white {\n @include btn-close-white();\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark) {\n .btn-close {\n @include btn-close-white();\n }\n }\n}\n",".toast {\n // scss-docs-start toast-css-vars\n --#{$prefix}toast-zindex: #{$zindex-toast};\n --#{$prefix}toast-padding-x: #{$toast-padding-x};\n --#{$prefix}toast-padding-y: #{$toast-padding-y};\n --#{$prefix}toast-spacing: #{$toast-spacing};\n --#{$prefix}toast-max-width: #{$toast-max-width};\n @include rfs($toast-font-size, --#{$prefix}toast-font-size);\n --#{$prefix}toast-color: #{$toast-color};\n --#{$prefix}toast-bg: #{$toast-background-color};\n --#{$prefix}toast-border-width: #{$toast-border-width};\n --#{$prefix}toast-border-color: #{$toast-border-color};\n --#{$prefix}toast-border-radius: #{$toast-border-radius};\n --#{$prefix}toast-box-shadow: #{$toast-box-shadow};\n --#{$prefix}toast-header-color: #{$toast-header-color};\n --#{$prefix}toast-header-bg: #{$toast-header-background-color};\n --#{$prefix}toast-header-border-color: #{$toast-header-border-color};\n // scss-docs-end toast-css-vars\n\n width: var(--#{$prefix}toast-max-width);\n max-width: 100%;\n @include font-size(var(--#{$prefix}toast-font-size));\n color: var(--#{$prefix}toast-color);\n pointer-events: auto;\n background-color: var(--#{$prefix}toast-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);\n box-shadow: var(--#{$prefix}toast-box-shadow);\n @include border-radius(var(--#{$prefix}toast-border-radius));\n\n &.showing {\n opacity: 0;\n }\n\n &:not(.show) {\n display: none;\n }\n}\n\n.toast-container {\n --#{$prefix}toast-zindex: #{$zindex-toast};\n\n position: absolute;\n z-index: var(--#{$prefix}toast-zindex);\n width: max-content;\n max-width: 100%;\n pointer-events: none;\n\n > :not(:last-child) {\n margin-bottom: var(--#{$prefix}toast-spacing);\n }\n}\n\n.toast-header {\n display: flex;\n align-items: center;\n padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);\n color: var(--#{$prefix}toast-header-color);\n background-color: var(--#{$prefix}toast-header-bg);\n background-clip: padding-box;\n border-bottom: var(--#{$prefix}toast-border-width) solid\n var(--#{$prefix}toast-header-border-color);\n @include border-top-radius(\n calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))\n );\n\n .btn-close {\n margin-right: calc(\n -0.5 * var(--#{$prefix}toast-padding-x)\n ); // stylelint-disable-line function-disallowed-list\n margin-left: var(--#{$prefix}toast-padding-x);\n }\n}\n\n.toast-body {\n padding: var(--#{$prefix}toast-padding-x);\n word-wrap: break-word;\n}\n","// stylelint-disable function-disallowed-list\n\n// .modal-open - body class for killing the scroll\n// .modal - container to scroll within\n// .modal-dialog - positioning shell for the actual modal\n// .modal-content - actual modal w/ bg and corners and stuff\n\n// Container that the modal scrolls within\n.modal {\n // scss-docs-start modal-css-vars\n --#{$prefix}modal-zindex: #{$zindex-modal};\n --#{$prefix}modal-width: #{$modal-md};\n --#{$prefix}modal-padding: #{$modal-inner-padding};\n --#{$prefix}modal-margin: #{$modal-dialog-margin};\n --#{$prefix}modal-color: #{$modal-content-color};\n --#{$prefix}modal-bg: #{$modal-content-bg};\n --#{$prefix}modal-border-color: #{$modal-content-border-color};\n --#{$prefix}modal-border-width: #{$modal-content-border-width};\n --#{$prefix}modal-border-radius: #{$modal-content-border-radius};\n --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};\n --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};\n --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};\n --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};\n --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y\n --#{$prefix}modal-header-border-color: #{$modal-header-border-color};\n --#{$prefix}modal-header-border-width: #{$modal-header-border-width};\n --#{$prefix}modal-title-line-height: #{$modal-title-line-height};\n --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};\n --#{$prefix}modal-footer-bg: #{$modal-footer-bg};\n --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};\n --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};\n // scss-docs-end modal-css-vars\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--#{$prefix}modal-zindex);\n display: none;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n // Prevent Chrome on Windows from adding a focus outline. For details, see\n // https://github.com/twbs/bootstrap/pull/10951.\n outline: 0;\n // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a\n // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n // See also https://github.com/twbs/bootstrap/issues/17695\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n position: relative;\n width: auto;\n margin: var(--#{$prefix}modal-margin);\n // allow clicks to pass through for custom click handling to close modal\n pointer-events: none;\n\n // When fading in the modal, animate it to slide down\n .modal.fade & {\n @include transition($modal-transition);\n transform: $modal-fade-transform;\n }\n .modal.show & {\n transform: $modal-show-transform;\n }\n\n // When trying to close, animate focus to scale\n .modal.modal-static & {\n transform: $modal-scale-transform;\n }\n}\n\n.modal-dialog-scrollable {\n height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n\n .modal-content {\n max-height: 100%;\n overflow: hidden;\n }\n\n .modal-body {\n overflow-y: auto;\n }\n}\n\n.modal-dialog-centered {\n display: flex;\n align-items: center;\n min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n}\n\n// Actual modal\n.modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`\n // counteract the pointer-events: none; in the .modal-dialog\n color: var(--#{$prefix}modal-color);\n pointer-events: auto;\n background-color: var(--#{$prefix}modal-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);\n @include border-radius(var(--#{$prefix}modal-border-radius));\n @include box-shadow(var(--#{$prefix}modal-box-shadow));\n // Remove focus outline from opened modal\n outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n // scss-docs-start modal-backdrop-css-vars\n --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};\n --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};\n --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};\n // scss-docs-end modal-backdrop-css-vars\n\n @include overlay-backdrop(\n var(--#{$prefix}backdrop-zindex),\n var(--#{$prefix}backdrop-bg),\n var(--#{$prefix}backdrop-opacity)\n );\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding: var(--#{$prefix}modal-header-padding);\n border-bottom: var(--#{$prefix}modal-header-border-width) solid\n var(--#{$prefix}modal-header-border-color);\n @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));\n\n .btn-close {\n padding: calc(var(--#{$prefix}modal-header-padding-y) * 0.5)\n calc(var(--#{$prefix}modal-header-padding-x) * 0.5);\n margin: calc(-0.5 * var(--#{$prefix}modal-header-padding-y))\n calc(-0.5 * var(--#{$prefix}modal-header-padding-x))\n calc(-0.5 * var(--#{$prefix}modal-header-padding-y)) auto;\n }\n}\n\n// Title text within header\n.modal-title {\n margin-bottom: 0;\n line-height: var(--#{$prefix}modal-title-line-height);\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n position: relative;\n // Enable `flex-grow: 1` so that the body take up as much space as possible\n // when there should be a fixed height on `.modal-dialog`.\n flex: 1 1 auto;\n padding: var(--#{$prefix}modal-padding);\n}\n\n// Footer (for actions)\n.modal-footer {\n display: flex;\n flex-shrink: 0;\n flex-wrap: wrap;\n align-items: center; // vertically center\n justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items\n padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * 0.5);\n background-color: var(--#{$prefix}modal-footer-bg);\n border-top: var(--#{$prefix}modal-footer-border-width) solid\n var(--#{$prefix}modal-footer-border-color);\n @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));\n\n // Place margin between footer elements\n // This solution is far from ideal because of the universal selector usage,\n // but is needed to fix https://github.com/twbs/bootstrap/issues/24800\n > * {\n margin: calc(\n var(--#{$prefix}modal-footer-gap) * 0.5\n ); // Todo in v6: replace with gap on parent class\n }\n}\n\n// Scale up the modal\n@include media-breakpoint-up(sm) {\n .modal {\n --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};\n --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};\n }\n\n // Automatically set modal's width for larger viewports\n .modal-dialog {\n max-width: var(--#{$prefix}modal-width);\n margin-right: auto;\n margin-left: auto;\n }\n\n .modal-sm {\n --#{$prefix}modal-width: #{$modal-sm};\n }\n}\n\n@include media-breakpoint-up(lg) {\n .modal-lg,\n .modal-xl {\n --#{$prefix}modal-width: #{$modal-lg};\n }\n}\n\n@include media-breakpoint-up(xl) {\n .modal-xl {\n --#{$prefix}modal-width: #{$modal-xl};\n }\n}\n\n// scss-docs-start modal-fullscreen-loop\n@each $breakpoint in map-keys($grid-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n $postfix: if($infix != '', $infix + '-down', '');\n\n @include media-breakpoint-down($breakpoint) {\n .modal-fullscreen#{$postfix} {\n width: 100vw;\n max-width: none;\n height: 100%;\n margin: 0;\n\n .modal-content {\n height: 100%;\n border: 0;\n @include border-radius(0);\n }\n\n .modal-header,\n .modal-footer {\n @include border-radius(0);\n }\n\n .modal-body {\n overflow-y: auto;\n }\n }\n }\n}\n// scss-docs-end modal-fullscreen-loop\n","// Shared between modals and offcanvases\n@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {\n position: fixed;\n top: 0;\n left: 0;\n z-index: $zindex;\n width: 100vw;\n height: 100vh;\n background-color: $backdrop-bg;\n\n // Fade for backdrop\n &.fade {\n opacity: 0;\n }\n &.show {\n opacity: $backdrop-opacity;\n }\n}\n","// Base class\n.tooltip {\n // scss-docs-start tooltip-css-vars\n --#{$prefix}tooltip-zindex: #{$zindex-tooltip};\n --#{$prefix}tooltip-max-width: #{$tooltip-max-width};\n --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};\n --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};\n --#{$prefix}tooltip-margin: #{$tooltip-margin};\n @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);\n --#{$prefix}tooltip-color: #{$tooltip-color};\n --#{$prefix}tooltip-bg: #{$tooltip-bg};\n --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};\n --#{$prefix}tooltip-opacity: #{$tooltip-opacity};\n --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};\n --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};\n // scss-docs-end tooltip-css-vars\n\n z-index: var(--#{$prefix}tooltip-zindex);\n display: block;\n margin: var(--#{$prefix}tooltip-margin);\n @include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n @include reset-text();\n @include font-size(var(--#{$prefix}tooltip-font-size));\n // Allow breaking very long words so they don't overflow the tooltip's bounds\n word-wrap: break-word;\n opacity: 0;\n\n &.show {\n opacity: var(--#{$prefix}tooltip-opacity);\n }\n\n .tooltip-arrow {\n display: block;\n width: var(--#{$prefix}tooltip-arrow-width);\n height: var(--#{$prefix}tooltip-arrow-height);\n\n &::before {\n position: absolute;\n content: '';\n border-color: transparent;\n border-style: solid;\n }\n }\n}\n\n.bs-tooltip-top .tooltip-arrow {\n bottom: calc(\n -1 * var(--#{$prefix}tooltip-arrow-height)\n ); // stylelint-disable-line function-disallowed-list\n\n &::before {\n top: -1px;\n border-width: var(--#{$prefix}tooltip-arrow-height)\n calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list\n border-top-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/*!rtl:begin:ignore*/\n.bs-tooltip-end .tooltip-arrow {\n left: calc(\n -1 * var(--#{$prefix}tooltip-arrow-height)\n ); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}tooltip-arrow-height);\n height: var(--#{$prefix}tooltip-arrow-width);\n\n &::before {\n right: -1px;\n border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5)\n var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list\n border-right-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/*!rtl:end:ignore*/\n\n.bs-tooltip-bottom .tooltip-arrow {\n top: calc(\n -1 * var(--#{$prefix}tooltip-arrow-height)\n ); // stylelint-disable-line function-disallowed-list\n\n &::before {\n bottom: -1px;\n border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5)\n var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list\n border-bottom-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/*!rtl:begin:ignore*/\n.bs-tooltip-start .tooltip-arrow {\n right: calc(\n -1 * var(--#{$prefix}tooltip-arrow-height)\n ); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}tooltip-arrow-height);\n height: var(--#{$prefix}tooltip-arrow-width);\n\n &::before {\n left: -1px;\n border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0\n calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list\n border-left-color: var(--#{$prefix}tooltip-bg);\n }\n}\n\n/*!rtl:end:ignore*/\n\n.bs-tooltip-auto {\n &[data-popper-placement^='top'] {\n @extend .bs-tooltip-top;\n }\n &[data-popper-placement^='right'] {\n @extend .bs-tooltip-end;\n }\n &[data-popper-placement^='bottom'] {\n @extend .bs-tooltip-bottom;\n }\n &[data-popper-placement^='left'] {\n @extend .bs-tooltip-start;\n }\n}\n\n// Wrapper for the tooltip content\n.tooltip-inner {\n max-width: var(--#{$prefix}tooltip-max-width);\n padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);\n color: var(--#{$prefix}tooltip-color);\n text-align: center;\n background-color: var(--#{$prefix}tooltip-bg);\n @include border-radius(var(--#{$prefix}tooltip-border-radius));\n}\n","@mixin reset-text {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.\n font-style: normal;\n font-weight: $font-weight-normal;\n line-height: $line-height-base;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n white-space: normal;\n word-spacing: normal;\n line-break: auto;\n}\n",".popover {\n // scss-docs-start popover-css-vars\n --#{$prefix}popover-zindex: #{$zindex-popover};\n --#{$prefix}popover-max-width: #{$popover-max-width};\n @include rfs($popover-font-size, --#{$prefix}popover-font-size);\n --#{$prefix}popover-bg: #{$popover-bg};\n --#{$prefix}popover-border-width: #{$popover-border-width};\n --#{$prefix}popover-border-color: #{$popover-border-color};\n --#{$prefix}popover-border-radius: #{$popover-border-radius};\n --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};\n --#{$prefix}popover-box-shadow: #{$popover-box-shadow};\n --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};\n --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};\n @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);\n --#{$prefix}popover-header-color: #{$popover-header-color};\n --#{$prefix}popover-header-bg: #{$popover-header-bg};\n --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};\n --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};\n --#{$prefix}popover-body-color: #{$popover-body-color};\n --#{$prefix}popover-arrow-width: #{$popover-arrow-width};\n --#{$prefix}popover-arrow-height: #{$popover-arrow-height};\n --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);\n // scss-docs-end popover-css-vars\n\n z-index: var(--#{$prefix}popover-zindex);\n display: block;\n max-width: var(--#{$prefix}popover-max-width);\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n @include reset-text();\n @include font-size(var(--#{$prefix}popover-font-size));\n // Allow breaking very long words so they don't overflow the popover's bounds\n word-wrap: break-word;\n background-color: var(--#{$prefix}popover-bg);\n background-clip: padding-box;\n border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);\n @include border-radius(var(--#{$prefix}popover-border-radius));\n @include box-shadow(var(--#{$prefix}popover-box-shadow));\n\n .popover-arrow {\n display: block;\n width: var(--#{$prefix}popover-arrow-width);\n height: var(--#{$prefix}popover-arrow-height);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n content: '';\n border-color: transparent;\n border-style: solid;\n border-width: 0;\n }\n }\n}\n\n.bs-popover-top {\n > .popover-arrow {\n bottom: calc(\n -1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)\n ); // stylelint-disable-line function-disallowed-list\n\n &::before,\n &::after {\n border-width: var(--#{$prefix}popover-arrow-height)\n calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n bottom: 0;\n border-top-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n bottom: var(--#{$prefix}popover-border-width);\n border-top-color: var(--#{$prefix}popover-bg);\n }\n }\n}\n\n/*!rtl:begin:ignore*/\n.bs-popover-end {\n > .popover-arrow {\n left: calc(\n -1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)\n ); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}popover-arrow-height);\n height: var(--#{$prefix}popover-arrow-width);\n\n &::before,\n &::after {\n border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5)\n var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n left: 0;\n border-right-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n left: var(--#{$prefix}popover-border-width);\n border-right-color: var(--#{$prefix}popover-bg);\n }\n }\n}\n\n/*!rtl:end:ignore*/\n\n.bs-popover-bottom {\n > .popover-arrow {\n top: calc(\n -1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)\n ); // stylelint-disable-line function-disallowed-list\n\n &::before,\n &::after {\n border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5)\n var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n top: 0;\n border-bottom-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n top: var(--#{$prefix}popover-border-width);\n border-bottom-color: var(--#{$prefix}popover-bg);\n }\n }\n\n // This will remove the popover-header's border just below the arrow\n .popover-header::before {\n position: absolute;\n top: 0;\n left: 50%;\n display: block;\n width: var(--#{$prefix}popover-arrow-width);\n margin-left: calc(\n -0.5 * var(--#{$prefix}popover-arrow-width)\n ); // stylelint-disable-line function-disallowed-list\n content: '';\n border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);\n }\n}\n\n/*!rtl:begin:ignore*/\n.bs-popover-start {\n > .popover-arrow {\n right: calc(\n -1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)\n ); // stylelint-disable-line function-disallowed-list\n width: var(--#{$prefix}popover-arrow-height);\n height: var(--#{$prefix}popover-arrow-width);\n\n &::before,\n &::after {\n border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0\n calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list\n }\n\n &::before {\n right: 0;\n border-left-color: var(--#{$prefix}popover-arrow-border);\n }\n\n &::after {\n right: var(--#{$prefix}popover-border-width);\n border-left-color: var(--#{$prefix}popover-bg);\n }\n }\n}\n\n/*!rtl:end:ignore*/\n\n.bs-popover-auto {\n &[data-popper-placement^='top'] {\n @extend .bs-popover-top;\n }\n &[data-popper-placement^='right'] {\n @extend .bs-popover-end;\n }\n &[data-popper-placement^='bottom'] {\n @extend .bs-popover-bottom;\n }\n &[data-popper-placement^='left'] {\n @extend .bs-popover-start;\n }\n}\n\n// Offset the popover to account for the popover arrow\n.popover-header {\n padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);\n margin-bottom: 0; // Reset the default from Reboot\n @include font-size(var(--#{$prefix}popover-header-font-size));\n color: var(--#{$prefix}popover-header-color);\n background-color: var(--#{$prefix}popover-header-bg);\n border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);\n @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));\n\n &:empty {\n display: none;\n }\n}\n\n.popover-body {\n padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);\n color: var(--#{$prefix}popover-body-color);\n}\n","// Notes on the classes:\n//\n// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)\n// even when their scroll action started on a carousel, but for compatibility (with Firefox)\n// we're preventing all actions instead\n// 2. The .carousel-item-start and .carousel-item-end is used to indicate where\n// the active slide is heading.\n// 3. .active.carousel-item is the current slide.\n// 4. .active.carousel-item-start and .active.carousel-item-end is the current\n// slide in its in-transition state. Only one of these occurs at a time.\n// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end\n// is the upcoming slide in transition.\n\n.carousel {\n position: relative;\n}\n\n.carousel.pointer-event {\n touch-action: pan-y;\n}\n\n.carousel-inner {\n position: relative;\n width: 100%;\n overflow: hidden;\n @include clearfix();\n}\n\n.carousel-item {\n position: relative;\n display: none;\n float: left;\n width: 100%;\n margin-right: -100%;\n backface-visibility: hidden;\n @include transition($carousel-transition);\n}\n\n.carousel-item.active,\n.carousel-item-next,\n.carousel-item-prev {\n display: block;\n}\n\n.carousel-item-next:not(.carousel-item-start),\n.active.carousel-item-end {\n transform: translateX(100%);\n}\n\n.carousel-item-prev:not(.carousel-item-end),\n.active.carousel-item-start {\n transform: translateX(-100%);\n}\n\n//\n// Alternate transitions\n//\n\n.carousel-fade {\n .carousel-item {\n opacity: 0;\n transition-property: opacity;\n transform: none;\n }\n\n .carousel-item.active,\n .carousel-item-next.carousel-item-start,\n .carousel-item-prev.carousel-item-end {\n z-index: 1;\n opacity: 1;\n }\n\n .active.carousel-item-start,\n .active.carousel-item-end {\n z-index: 0;\n opacity: 0;\n @include transition(opacity 0s $carousel-transition-duration);\n }\n}\n\n//\n// Left/right controls for nav\n//\n\n.carousel-control-prev,\n.carousel-control-next {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n // Use flex for alignment (1-3)\n display: flex; // 1. allow flex styles\n align-items: center; // 2. vertically center contents\n justify-content: center; // 3. horizontally center contents\n width: $carousel-control-width;\n padding: 0;\n color: $carousel-control-color;\n text-align: center;\n background: none;\n border: 0;\n opacity: $carousel-control-opacity;\n @include transition($carousel-control-transition);\n\n // Hover/focus state\n &:hover,\n &:focus {\n color: $carousel-control-color;\n text-decoration: none;\n outline: 0;\n opacity: $carousel-control-hover-opacity;\n }\n}\n.carousel-control-prev {\n left: 0;\n background-image: if(\n $enable-gradients,\n linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)),\n null\n );\n}\n.carousel-control-next {\n right: 0;\n background-image: if(\n $enable-gradients,\n linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)),\n null\n );\n}\n\n// Icons for within\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n display: inline-block;\n width: $carousel-control-icon-width;\n height: $carousel-control-icon-width;\n background-repeat: no-repeat;\n background-position: 50%;\n background-size: 100% 100%;\n}\n\n.carousel-control-prev-icon {\n background-image: escape-svg($carousel-control-prev-icon-bg) #{'/*rtl:' +\n escape-svg($carousel-control-next-icon-bg) + '*/'};\n}\n.carousel-control-next-icon {\n background-image: escape-svg($carousel-control-next-icon-bg) #{'/*rtl:' +\n escape-svg($carousel-control-prev-icon-bg) + '*/'};\n}\n\n// Optional indicator pips/controls\n//\n// Add a container (such as a list) with the following class and add an item (ideally a focusable control,\n// like a button) with data-mdb-target for each slide your carousel holds.\n\n.carousel-indicators {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n padding: 0;\n // Use the .carousel-control's width as margin so we don't overlay those\n margin-right: $carousel-control-width;\n margin-bottom: 1rem;\n margin-left: $carousel-control-width;\n\n [data-mdb-target] {\n box-sizing: content-box;\n flex: 0 1 auto;\n width: $carousel-indicator-width;\n height: $carousel-indicator-height;\n padding: 0;\n margin-right: $carousel-indicator-spacer;\n margin-left: $carousel-indicator-spacer;\n text-indent: -999px;\n cursor: pointer;\n background-color: $carousel-indicator-active-bg;\n background-clip: padding-box;\n border: 0;\n // Use transparent borders to increase the hit area by 10px on top and bottom.\n border-top: $carousel-indicator-hit-area-height solid transparent;\n border-bottom: $carousel-indicator-hit-area-height solid transparent;\n opacity: $carousel-indicator-opacity;\n @include transition($carousel-indicator-transition);\n }\n\n .active {\n opacity: $carousel-indicator-active-opacity;\n }\n}\n\n// Optional captions\n//\n//\n\n.carousel-caption {\n position: absolute;\n right: (100% - $carousel-caption-width) * 0.5;\n bottom: $carousel-caption-spacer;\n left: (100% - $carousel-caption-width) * 0.5;\n padding-top: $carousel-caption-padding-y;\n padding-bottom: $carousel-caption-padding-y;\n color: $carousel-caption-color;\n text-align: center;\n}\n\n// Dark mode carousel\n\n@mixin carousel-dark() {\n .carousel-control-prev-icon,\n .carousel-control-next-icon {\n filter: $carousel-dark-control-icon-filter;\n }\n\n .carousel-indicators [data-mdb-target] {\n background-color: $carousel-dark-indicator-active-bg;\n }\n\n .carousel-caption {\n color: $carousel-dark-caption-color;\n }\n}\n\n.carousel-dark {\n @include carousel-dark();\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark) {\n @if $color-mode-type == 'media-query' {\n .carousel {\n @include carousel-dark();\n }\n } @else {\n .carousel,\n &.carousel {\n @include carousel-dark();\n }\n }\n }\n}\n","// scss-docs-start clearfix\n@mixin clearfix() {\n &::after {\n display: block;\n clear: both;\n content: '';\n }\n}\n// scss-docs-end clearfix\n","//\n// Rotating border\n//\n\n.spinner-grow,\n.spinner-border {\n display: inline-block;\n width: var(--#{$prefix}spinner-width);\n height: var(--#{$prefix}spinner-height);\n vertical-align: var(--#{$prefix}spinner-vertical-align);\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 50%;\n animation: var(--#{$prefix}spinner-animation-speed) linear infinite\n var(--#{$prefix}spinner-animation-name);\n}\n\n// scss-docs-start spinner-border-keyframes\n@keyframes spinner-border {\n to {\n transform: rotate(360deg) #{'/*!rtl:ignore*/'};\n }\n}\n// scss-docs-end spinner-border-keyframes\n\n.spinner-border {\n // scss-docs-start spinner-border-css-vars\n --#{$prefix}spinner-width: #{$spinner-width};\n --#{$prefix}spinner-height: #{$spinner-height};\n --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};\n --#{$prefix}spinner-border-width: #{$spinner-border-width};\n --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};\n --#{$prefix}spinner-animation-name: spinner-border;\n // scss-docs-end spinner-border-css-vars\n\n border: var(--#{$prefix}spinner-border-width) solid currentcolor;\n border-right-color: transparent;\n}\n\n.spinner-border-sm {\n // scss-docs-start spinner-border-sm-css-vars\n --#{$prefix}spinner-width: #{$spinner-width-sm};\n --#{$prefix}spinner-height: #{$spinner-height-sm};\n --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};\n // scss-docs-end spinner-border-sm-css-vars\n}\n\n//\n// Growing circle\n//\n\n// scss-docs-start spinner-grow-keyframes\n@keyframes spinner-grow {\n 0% {\n transform: scale(0);\n }\n 50% {\n opacity: 1;\n transform: none;\n }\n}\n// scss-docs-end spinner-grow-keyframes\n\n.spinner-grow {\n // scss-docs-start spinner-grow-css-vars\n --#{$prefix}spinner-width: #{$spinner-width};\n --#{$prefix}spinner-height: #{$spinner-height};\n --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};\n --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};\n --#{$prefix}spinner-animation-name: spinner-grow;\n // scss-docs-end spinner-grow-css-vars\n\n background-color: currentcolor;\n opacity: 0;\n}\n\n.spinner-grow-sm {\n --#{$prefix}spinner-width: #{$spinner-width-sm};\n --#{$prefix}spinner-height: #{$spinner-height-sm};\n}\n\n@if $enable-reduced-motion {\n @media (prefers-reduced-motion: reduce) {\n .spinner-border,\n .spinner-grow {\n --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};\n }\n }\n}\n","// stylelint-disable function-disallowed-list\n\n%offcanvas-css-vars {\n // scss-docs-start offcanvas-css-vars\n --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};\n --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};\n --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};\n --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};\n --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};\n --#{$prefix}offcanvas-color: #{$offcanvas-color};\n --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};\n --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};\n --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};\n --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};\n --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};\n --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};\n // scss-docs-end offcanvas-css-vars\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n $next: breakpoint-next($breakpoint, $grid-breakpoints);\n $infix: breakpoint-infix($next, $grid-breakpoints);\n\n .offcanvas#{$infix} {\n @extend %offcanvas-css-vars;\n }\n}\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n $next: breakpoint-next($breakpoint, $grid-breakpoints);\n $infix: breakpoint-infix($next, $grid-breakpoints);\n\n .offcanvas#{$infix} {\n @include media-breakpoint-down($next) {\n position: fixed;\n bottom: 0;\n z-index: var(--#{$prefix}offcanvas-zindex);\n display: flex;\n flex-direction: column;\n max-width: 100%;\n color: var(--#{$prefix}offcanvas-color);\n visibility: hidden;\n background-color: var(--#{$prefix}offcanvas-bg);\n background-clip: padding-box;\n outline: 0;\n @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));\n @include transition(var(--#{$prefix}offcanvas-transition));\n\n &.offcanvas-start {\n top: 0;\n left: 0;\n width: var(--#{$prefix}offcanvas-width);\n border-right: var(--#{$prefix}offcanvas-border-width) solid\n var(--#{$prefix}offcanvas-border-color);\n transform: translateX(-100%);\n }\n\n &.offcanvas-end {\n top: 0;\n right: 0;\n width: var(--#{$prefix}offcanvas-width);\n border-left: var(--#{$prefix}offcanvas-border-width) solid\n var(--#{$prefix}offcanvas-border-color);\n transform: translateX(100%);\n }\n\n &.offcanvas-top {\n top: 0;\n right: 0;\n left: 0;\n height: var(--#{$prefix}offcanvas-height);\n max-height: 100%;\n border-bottom: var(--#{$prefix}offcanvas-border-width) solid\n var(--#{$prefix}offcanvas-border-color);\n transform: translateY(-100%);\n }\n\n &.offcanvas-bottom {\n right: 0;\n left: 0;\n height: var(--#{$prefix}offcanvas-height);\n max-height: 100%;\n border-top: var(--#{$prefix}offcanvas-border-width) solid\n var(--#{$prefix}offcanvas-border-color);\n transform: translateY(100%);\n }\n\n &.showing,\n &.show:not(.hiding) {\n transform: none;\n }\n\n &.showing,\n &.hiding,\n &.show {\n visibility: visible;\n }\n }\n\n @if not($infix == '') {\n @include media-breakpoint-up($next) {\n --#{$prefix}offcanvas-height: auto;\n --#{$prefix}offcanvas-border-width: 0;\n background-color: transparent !important; // stylelint-disable-line declaration-no-important\n\n .offcanvas-header {\n display: none;\n }\n\n .offcanvas-body {\n display: flex;\n flex-grow: 0;\n padding: 0;\n overflow-y: visible;\n // Reset `background-color` in case `.bg-*` classes are used in offcanvas\n background-color: transparent !important; // stylelint-disable-line declaration-no-important\n }\n }\n }\n }\n}\n\n.offcanvas-backdrop {\n @include overlay-backdrop(\n $zindex-offcanvas-backdrop,\n $offcanvas-backdrop-bg,\n $offcanvas-backdrop-opacity\n );\n}\n\n.offcanvas-header {\n display: flex;\n align-items: center;\n padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);\n\n .btn-close {\n padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5)\n calc(var(--#{$prefix}offcanvas-padding-x) * 0.5);\n margin: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y))\n calc(-0.5 * var(--#{$prefix}offcanvas-padding-x))\n calc(-0.5 * var(--#{$prefix}offcanvas-padding-y)) auto;\n }\n}\n\n.offcanvas-title {\n margin-bottom: 0;\n line-height: var(--#{$prefix}offcanvas-title-line-height);\n}\n\n.offcanvas-body {\n flex-grow: 1;\n padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);\n overflow-y: auto;\n}\n",".placeholder {\n display: inline-block;\n min-height: 1em;\n vertical-align: middle;\n cursor: wait;\n background-color: currentcolor;\n opacity: $placeholder-opacity-max;\n\n &.btn::before {\n display: inline-block;\n content: '';\n }\n}\n\n// Sizing\n.placeholder-xs {\n min-height: 0.6em;\n}\n\n.placeholder-sm {\n min-height: 0.8em;\n}\n\n.placeholder-lg {\n min-height: 1.2em;\n}\n\n// Animation\n.placeholder-glow {\n .placeholder {\n animation: placeholder-glow 2s ease-in-out infinite;\n }\n}\n\n@keyframes placeholder-glow {\n 50% {\n opacity: $placeholder-opacity-min;\n }\n}\n\n.placeholder-wave {\n mask-image: linear-gradient(\n 130deg,\n $black 55%,\n rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,\n $black 95%\n );\n mask-size: 200% 100%;\n animation: placeholder-wave 2s linear infinite;\n}\n\n@keyframes placeholder-wave {\n 100% {\n mask-position: -200% 0%;\n }\n}\n","// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251\n@each $color, $value in $theme-colors {\n .text-bg-#{$color} {\n color: color-contrast($value) if($enable-important-utilities, !important, null);\n background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1))\n if($enable-important-utilities, !important, null);\n }\n}\n","// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251\n@each $color, $value in $theme-colors {\n .link-#{$color} {\n color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1))\n if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(\n var(--#{$prefix}#{$color}-rgb),\n var(--#{$prefix}link-underline-opacity, 1)\n )\n if($enable-important-utilities, !important, null);\n\n @if $link-shade-percentage != 0 {\n &:hover,\n &:focus {\n $hover-color: if(\n color-contrast($value) == $color-contrast-light,\n shade-color($value, $link-shade-percentage),\n tint-color($value, $link-shade-percentage)\n );\n color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1))\n if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(\n to-rgb($hover-color),\n var(--#{$prefix}link-underline-opacity, 1)\n )\n if($enable-important-utilities, !important, null);\n }\n }\n }\n}\n\n// One-off special link helper as a bridge until v6\n.link-body-emphasis {\n color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1))\n if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(\n var(--#{$prefix}emphasis-color-rgb),\n var(--#{$prefix}link-underline-opacity, 1)\n )\n if($enable-important-utilities, !important, null);\n\n @if $link-shade-percentage != 0 {\n &:hover,\n &:focus {\n color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 0.75))\n if($enable-important-utilities, !important, null);\n text-decoration-color: RGBA(\n var(--#{$prefix}emphasis-color-rgb),\n var(--#{$prefix}link-underline-opacity, 0.75)\n )\n if($enable-important-utilities, !important, null);\n }\n }\n}\n",".focus-ring:focus {\n outline: 0;\n // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values\n box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0)\n var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width)\n var(--#{$prefix}focus-ring-color);\n}\n",".icon-link {\n display: inline-flex;\n gap: $icon-link-gap;\n align-items: center;\n text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 0.5));\n text-underline-offset: $icon-link-underline-offset;\n backface-visibility: hidden;\n\n > .bi {\n flex-shrink: 0;\n width: $icon-link-icon-size;\n height: $icon-link-icon-size;\n fill: currentcolor;\n @include transition($icon-link-icon-transition);\n }\n}\n\n.icon-link-hover {\n &:hover,\n &:focus-visible {\n > .bi {\n transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);\n }\n }\n}\n","// Credit: Nicolas Gallagher and SUIT CSS.\n\n.ratio {\n position: relative;\n width: 100%;\n\n &::before {\n display: block;\n padding-top: var(--#{$prefix}aspect-ratio);\n content: '';\n }\n\n > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}\n\n@each $key, $ratio in $aspect-ratios {\n .ratio-#{$key} {\n --#{$prefix}aspect-ratio: #{$ratio};\n }\n}\n","// Shorthand\n\n.fixed-top {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: $zindex-fixed;\n}\n\n.fixed-bottom {\n position: fixed;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: $zindex-fixed;\n}\n\n// Responsive sticky top and bottom\n@each $breakpoint in map-keys($grid-breakpoints) {\n @include media-breakpoint-up($breakpoint) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n .sticky#{$infix}-top {\n position: sticky;\n top: 0;\n z-index: $zindex-sticky;\n }\n\n .sticky#{$infix}-bottom {\n position: sticky;\n bottom: 0;\n z-index: $zindex-sticky;\n }\n }\n}\n","// scss-docs-start stacks\n.hstack {\n display: flex;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n}\n\n.vstack {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n align-self: stretch;\n}\n// scss-docs-end stacks\n","//\n// Visually hidden\n//\n\n.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n @include visually-hidden();\n}\n","// stylelint-disable declaration-no-important\n\n// Hide content visually while keeping it accessible to assistive technologies\n//\n// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin visually-hidden() {\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n\n // Fix for positioned table caption that could become anonymous cells\n &:not(caption) {\n position: absolute !important;\n }\n}\n\n// Use to only display content when it's focused, or one of its child elements is focused\n// (i.e. when focus is within the element/container that the class was applied to)\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n\n@mixin visually-hidden-focusable() {\n &:not(:focus):not(:focus-within) {\n @include visually-hidden();\n }\n}\n","//\n// Stretched link\n//\n\n.stretched-link {\n &::#{$stretched-link-pseudo-element} {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: $stretched-link-z-index;\n content: '';\n }\n}\n","//\n// Text truncation\n//\n\n.text-truncate {\n @include text-truncate();\n}\n","// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n",".vr {\n display: inline-block;\n align-self: stretch;\n width: $vr-border-width;\n min-height: 1em;\n background-color: currentcolor;\n opacity: $hr-opacity;\n}\n","//\n// Utilities\n//\n\n$utilities: map-merge(\n $utilities,\n (\n 'margin-bottom':\n map-merge(\n map-get($utilities, 'margin-bottom'),\n (\n values:\n map-merge(\n map-get(map-get($utilities, 'margin-bottom'), 'values'),\n (\n 6: 3.5rem,\n 7: 4rem,\n 8: 5rem,\n 9: 6rem,\n 10: 8rem,\n 11: 10rem,\n 12: 12rem,\n 13: 14rem,\n 14: 16rem,\n )\n ),\n )\n ),\n )\n);\n\n$utilities: map-merge(\n $utilities,\n (\n 'rounded':\n map-merge(\n map-get($utilities, 'rounded'),\n (\n values:\n map-merge(\n map-get(map-get($utilities, 'rounded'), 'values'),\n (\n 4: 0.375rem,\n 5: 0.5rem,\n 6: 0.75rem,\n 7: 1rem,\n 8: 1.25rem,\n 9: 1.5rem,\n )\n ),\n )\n ),\n )\n);\n\n$utilities: map-merge(\n $utilities,\n (\n 'opacity': (\n property: opacity,\n values: (\n 0: 0,\n 5: 0.05,\n 10: 0.1,\n 15: 0.15,\n 20: 0.2,\n 25: 0.25,\n 30: 0.3,\n 35: 0.35,\n 40: 0.4,\n 45: 0.45,\n 50: 0.5,\n 55: 0.55,\n 60: 0.6,\n 65: 0.65,\n 70: 0.7,\n 75: 0.75,\n 80: 0.8,\n 85: 0.85,\n 90: 0.9,\n 95: 0.95,\n 100: 1,\n ),\n ),\n )\n);\n\n/* Numeric */\n.diagonal-fractions {\n font-variant-numeric: diagonal-fractions;\n}\n\n/* Background colors */\n.bg-super-light {\n --#{$prefix}bg-super-light: #fbfbfb;\n\n background-color: var(--#{$prefix}bg-super-light);\n}\n\n/* Background attachment */\n.bg-fixed {\n background-attachment: fixed;\n}\n.bg-local {\n background-attachment: local;\n}\n.bg-scroll {\n background-attachment: scroll;\n}\n\n/* Overflow */\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n\n.overflow-x-scroll {\n overflow-x: scroll;\n}\n\n/* Tables */\n.table-fixed {\n table-layout: fixed;\n}\n.table-auto {\n table-layout: auto;\n}\n\n$utilities: map-merge(\n $utilities,\n (\n 'shadow':\n map-merge(\n map-get($utilities, 'shadow'),\n (\n values:\n map-merge(\n map-get(map-get($utilities, 'shadow'), 'values'),\n (\n 0: $box-shadow-0,\n 1: $box-shadow-1,\n 2: $box-shadow-2,\n 3: $box-shadow-3,\n 4: $box-shadow-4,\n 5: $box-shadow-5,\n 6: $box-shadow-6,\n 1-soft: $box-shadow-1-soft,\n 2-soft: $box-shadow-2-soft,\n 3-soft: $box-shadow-3-soft,\n 4-soft: $box-shadow-4-soft,\n 5-soft: $box-shadow-5-soft,\n 6-soft: $box-shadow-6-soft,\n 1-strong: $box-shadow-1-strong,\n 2-strong: $box-shadow-2-strong,\n 3-strong: $box-shadow-3-strong,\n 4-strong: $box-shadow-4-strong,\n 5-strong: $box-shadow-5-strong,\n 6-strong: $box-shadow-6-strong,\n inner: $box-shadow-inner,\n )\n ),\n )\n ),\n )\n);\n\n$utilities: map-merge(\n $utilities,\n (\n 'letter-spacing': (\n property: letter-spacing,\n class: ls,\n values: (\n tighter: -0.05em,\n tight: -0.025em,\n normal: 0em,\n wide: 0.025em,\n wider: 0.05em,\n widest: 0.1em,\n ),\n ),\n )\n);\n\n$utilities: map-merge(\n $utilities,\n (\n 'object-fit': (\n property: object-fit,\n class: object,\n values: (\n cover: cover,\n ),\n ),\n )\n);\n\n$utilities: map-merge(\n $utilities,\n (\n 'object-position': (\n property: object-position,\n class: object,\n values: (\n top: top,\n center: center,\n bottom: bottom,\n ),\n ),\n )\n);\n\n@each $name, $color in $theme-colors {\n .link-#{$name} {\n transition: color 0.15s;\n }\n}\n","// Utility generator\n// Used to generate utilities & print utilities\n@mixin generate-utility($utility, $infix: '', $is-rfs-media-query: false) {\n $values: map-get($utility, values);\n\n // If the values are a list or string, convert it into a map\n @if type-of($values) == 'string' or type-of(nth($values, 1)) != 'list' {\n $values: zip($values, $values);\n }\n\n @each $key, $value in $values {\n $properties: map-get($utility, property);\n\n // Multiple properties are possible, for example with vertical or horizontal margins or paddings\n @if type-of($properties) == 'string' {\n $properties: append((), $properties);\n }\n\n // Use custom class if present\n $property-class: if(\n map-has-key($utility, class),\n map-get($utility, class),\n nth($properties, 1)\n );\n $property-class: if($property-class == null, '', $property-class);\n\n // Use custom CSS variable name if present, otherwise default to `class`\n $css-variable-name: if(\n map-has-key($utility, css-variable-name),\n map-get($utility, css-variable-name),\n map-get($utility, class)\n );\n\n // State params to generate pseudo-classes\n $state: if(map-has-key($utility, state), map-get($utility, state), ());\n\n $infix: if(\n $property-class == '' and str-slice($infix, 1, 1) == '-',\n str-slice($infix, 2),\n $infix\n );\n\n // Don't prefix if value key is null (e.g. with shadow class)\n $property-class-modifier: if(\n $key,\n if($property-class == '' and $infix == '', '', '-') + $key,\n ''\n );\n\n @if map-get($utility, rfs) {\n // Inside the media query\n @if $is-rfs-media-query {\n $val: rfs-value($value);\n\n // Do not render anything if fluid and non fluid values are the same\n $value: if($val == rfs-fluid-value($value), null, $val);\n } @else {\n $value: rfs-fluid-value($value);\n }\n }\n\n $is-css-var: map-get($utility, css-var);\n $is-local-vars: map-get($utility, local-vars);\n $is-rtl: map-get($utility, rtl);\n\n @if $value != null {\n @if $is-rtl == false {\n /*!rtl:begin:remove*/\n }\n\n @if $is-css-var {\n .#{$property-class + $infix + $property-class-modifier} {\n --#{$prefix}#{$css-variable-name}: #{$value};\n }\n\n @each $pseudo in $state {\n .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n --#{$prefix}#{$css-variable-name}: #{$value};\n }\n }\n } @else {\n .#{$property-class + $infix + $property-class-modifier} {\n @each $property in $properties {\n @if $is-local-vars {\n @each $local-var, $variable in $is-local-vars {\n --#{$prefix}#{$local-var}: #{$variable};\n }\n }\n #{$property}: $value if($enable-important-utilities, !important, null);\n }\n }\n\n @each $pseudo in $state {\n .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n @each $property in $properties {\n @if $is-local-vars {\n @each $local-var, $variable in $is-local-vars {\n --#{$prefix}#{$local-var}: #{$variable};\n }\n }\n #{$property}: $value if($enable-important-utilities, !important, null);\n }\n }\n }\n }\n\n @if $is-rtl == false {\n /*!rtl:end:remove*/\n }\n }\n }\n}\n","// Loop over each breakpoint\n@each $breakpoint in map-keys($grid-breakpoints) {\n // Generate media query if needed\n @include media-breakpoint-up($breakpoint) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n // Loop over each utility property\n @each $key, $utility in $utilities {\n // The utility can be disabled with `false`, thus check if the utility is a map first\n // Only proceed if responsive media queries are enabled or if it's the base media query\n @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {\n @include generate-utility($utility, $infix);\n }\n }\n }\n}\n\n// RFS rescaling\n@media (min-width: $rfs-mq-value) {\n @each $breakpoint in map-keys($grid-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {\n // Loop over each utility property\n @each $key, $utility in $utilities {\n // The utility can be disabled with `false`, thus check if the utility is a map first\n // Only proceed if responsive media queries are enabled or if it's the base media query\n @if type-of($utility) ==\n 'map' and\n map-get($utility, rfs) and\n (map-get($utility, responsive) or $infix == '')\n {\n @include generate-utility($utility, $infix, true);\n }\n }\n }\n }\n}\n\n// Print utilities\n@media print {\n @each $key, $utility in $utilities {\n // The utility can be disabled with `false`, thus check if the utility is a map first\n // Then check if the utility needs print styles\n @if type-of($utility) == 'map' and map-get($utility, print) == true {\n @include generate-utility($utility, '-print');\n }\n }\n}\n","//\n// Root and body\n//\n\n:root,\n[data-mdb-theme='light'] {\n --mdb-font-roboto: #{inspect($font-family-roboto)};\n --mdb-bg-opacity: 1;\n --mdb-text-hover-opacity: 0.8;\n\n --#{$prefix}surface-color: #{$surface-color};\n --#{$prefix}surface-color-rgb: #{to-rgb($surface-color)};\n --#{$prefix}surface-bg: #{$surface-bg};\n --#{$prefix}surface-inverted-color: #{$surface-inverted-color};\n --#{$prefix}surface-inverted-color-rgb: #{to-rgb($surface-inverted-color)};\n --#{$prefix}surface-inverted-bg: #{$surface-inverted-bg};\n --#{$prefix}divider-color: #{$divider-color};\n --#{$prefix}divider-blurry-color: #{$divider-blurry-color};\n --#{$prefix}highlight-bg-color: #{$highlight-bg-color};\n --#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg};\n --#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg};\n --#{$prefix}picker-header-bg: #{$picker-header-bg};\n --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg};\n --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity};\n --#{$prefix}form-control-border-color: #{$form-control-border-color};\n --#{$prefix}form-control-label-color: #{$form-control-label-color};\n --#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg};\n --#{$prefix}box-shadow-color: #{$box-shadow-color};\n --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color)};\n --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg};\n}\n\n@if $enable-dark-mode {\n @include color-mode(dark, true) {\n color-scheme: dark;\n\n // scss-docs-start root-dark-mode-vars\n --#{$prefix}surface-color: #{$surface-color-dark};\n --#{$prefix}surface-color-rgb: #{to-rgb($surface-color-dark)};\n --#{$prefix}surface-bg: #{$surface-bg-dark};\n --#{$prefix}surface-inverted-color: #{$surface-inverted-color-dark};\n --#{$prefix}surface-inverted-color-rgb: #{to-rgb($surface-inverted-color-dark)};\n --#{$prefix}surface-inverted-bg: #{$surface-inverted-bg-dark};\n --#{$prefix}divider-color: #{$divider-color-dark};\n --#{$prefix}divider-blurry-color: #{$divider-blurry-color-dark};\n --#{$prefix}highlight-bg-color: #{$highlight-bg-color-dark};\n --#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg-dark};\n --#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg-dark};\n --#{$prefix}picker-header-bg: #{$picker-header-bg-dark};\n --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg-dark};\n --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity-dark};\n --#{$prefix}form-control-border-color: #{$form-control-border-color-dark};\n --#{$prefix}form-control-label-color: #{$form-control-label-color-dark};\n --#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg-dark};\n --#{$prefix}box-shadow-color: #{$box-shadow-color-dark};\n --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color-dark)};\n --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg-dark};\n // scss-docs-end root-dark-mode-vars\n }\n}\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n\n// Dividers\n\nhr:not([size]) {\n &.hr {\n --#{$prefix}divider-height: #{$divider-height};\n --#{$prefix}divider-bg: #{$divider-bg};\n --#{$prefix}divider-opacity: #{$divider-opacity};\n --#{$prefix}divider-blurry-bg: transparent;\n --#{$prefix}divider-blurry-bg-image: #{$divider-blurry-bg-image};\n --#{$prefix}divider-blurry-height: #{$divider-blurry-height};\n --#{$prefix}divider-blurry-opacity: #{$divider-blurry-opacity};\n\n height: var(--#{$prefix}divider-height);\n background-color: var(--#{$prefix}divider-bg);\n opacity: var(--#{$prefix}divider-opacity);\n\n &.hr-blurry {\n background-color: var(--#{$prefix}divider-blurry-bg);\n background-image: var(--#{$prefix}divider-blurry-bg-image);\n height: var(--#{$prefix}divider-blurry-height);\n opacity: var(--#{$prefix}divider-blurry-opacity);\n }\n }\n\n &.vr {\n height: auto;\n }\n}\n\nhr.hr,\nhr.vr {\n border-top: none !important;\n}\n\n.vr {\n --#{$prefix}divider-width: #{$divider-width};\n --#{$prefix}divider-bg: #{$divider-bg};\n --#{$prefix}divider-opacity: #{$divider-opacity};\n\n width: var(--#{$prefix}divider-width);\n background-color: var(--#{$prefix}divider-bg);\n opacity: var(--#{$prefix}divider-opacity);\n}\n\n.vr-blurry {\n --#{$prefix}divider-blurry-vr-bg-image: #{$divider-blurry-vr-bg-image};\n --#{$prefix}divider-blurry-vr-width: #{$divider-blurry-vr-width};\n --#{$prefix}divider-blurry-opacity: #{$divider-blurry-opacity};\n\n background-image: var(--#{$prefix}divider-blurry-vr-bg-image);\n width: var(--#{$prefix}divider-blurry-vr-width);\n opacity: var(--#{$prefix}divider-blurry-opacity);\n}\n\n// Links\n\na {\n --#{$prefix}link-decoration: #{$link-decoration};\n\n text-decoration: var(--#{$prefix}link-decoration);\n}\n","// Type\n.note {\n --#{$prefix}note-padding: #{$note-padding};\n --#{$prefix}note-border-width: #{$note-border-width};\n --#{$prefix}note-border-radius: #{$note-border-radius};\n --#{$prefix}note-strong-font-weight: #{$note-strong-font-weight};\n\n padding: var(--#{$prefix}note-padding);\n border-left: var(--#{$prefix}note-border-width) solid;\n border-radius: var(--#{$prefix}note-border-radius);\n strong {\n font-weight: var(--#{$prefix}note-strong-font-weight);\n }\n}\n\n@each $color, $value in $theme-colors {\n .note-#{$color} {\n background-color: var(--#{$prefix}#{$color}-bg-subtle);\n color: var(--#{$prefix}#{$color}-text-emphasis);\n }\n}\n\n.w-responsive {\n @media (min-width: 1199px) {\n width: 75%;\n }\n}\n","//\n// Color styles\n//\n\n@each $color, $value in $theme-colors {\n .bg-#{$color} {\n --#{$prefix}-bg-opacity: 1;\n\n background-color: rgba($value, var(--#{$prefix}-bg-opacity));\n }\n}\n","/*!\n * # Semantic UI 2.4.2 - Flag\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Flag\n*******************************/\n#mdb-table-flag tr {\n cursor: pointer;\n}\n.mdb-flag-selected {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n text-align: center;\n max-width: 150px;\n margin: 0 auto;\n margin-top: 10px;\n}\n.mdb-selected-flag-text {\n margin: 0 auto;\n max-width: 150px;\n}\n\ni.flag:not(.icon) {\n display: inline-block;\n width: 16px;\n height: 11px;\n margin: 0 0.5em 0 0;\n line-height: 11px;\n text-decoration: inherit;\n vertical-align: baseline;\n backface-visibility: hidden;\n}\n\n/* Sprite */\ni.flag {\n &::before {\n display: inline-block;\n width: 16px;\n height: 11px;\n content: '';\n background: url('https://mdbootstrap.com/img/svg/flags.png') no-repeat -108px -1976px;\n }\n\n /* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */\n\n /*******************************\n Theme Overrides\n*******************************/\n\n &-ad:before,\n &-andorra:before {\n background-position: 0 0 !important;\n }\n\n &-ae:before,\n &-united-arab-emirates:before,\n &-uae:before {\n background-position: 0 -26px !important;\n }\n &-af:before,\n &-afghanistan:before {\n background-position: 0 -52px !important;\n }\n &-ag:before,\n &-antigua:before {\n background-position: 0 -78px !important;\n }\n &-ai:before,\n &-anguilla:before {\n background-position: 0 -104px !important;\n }\n &-al:before,\n &-albania:before {\n background-position: 0 -130px !important;\n }\n &-am:before,\n &-armenia:before {\n background-position: 0 -156px !important;\n }\n &-an:before,\n &-netherlands-antilles:before {\n background-position: 0 -182px !important;\n }\n &-ao:before,\n &-angola:before {\n background-position: 0 -208px !important;\n }\n &-ar:before,\n &-argentina:before {\n background-position: 0 -234px !important;\n }\n &-as:before,\n &-american-samoa:before {\n background-position: 0 -260px !important;\n }\n &-at:before,\n &-austria:before {\n background-position: 0 -286px !important;\n }\n &-au:before,\n &-australia:before {\n background-position: 0 -312px !important;\n }\n &-aw:before,\n &-aruba:before {\n background-position: 0 -338px !important;\n }\n &-ax:before,\n &-aland-islands:before {\n background-position: 0 -364px !important;\n }\n &-az:before,\n &-azerbaijan:before {\n background-position: 0 -390px !important;\n }\n &-ba:before,\n &-bosnia:before {\n background-position: 0 -416px !important;\n }\n &-bb:before,\n &-barbados:before {\n background-position: 0 -442px !important;\n }\n &-bd:before,\n &-bangladesh:before {\n background-position: 0 -468px !important;\n }\n &-be:before,\n &-belgium:before {\n background-position: 0 -494px !important;\n }\n &-bf:before,\n &-burkina-faso:before {\n background-position: 0 -520px !important;\n }\n &-bg:before,\n &-bulgaria:before {\n background-position: 0 -546px !important;\n }\n &-bh:before,\n &-bahrain:before {\n background-position: 0 -572px !important;\n }\n &-bi:before,\n &-burundi:before {\n background-position: 0 -598px !important;\n }\n &-bj:before,\n &-benin:before {\n background-position: 0 -624px !important;\n }\n &-bm:before,\n &-bermuda:before {\n background-position: 0 -650px !important;\n }\n &-bn:before,\n &-brunei:before {\n background-position: 0 -676px !important;\n }\n &-bo:before,\n &-bolivia:before {\n background-position: 0 -702px !important;\n }\n &-br:before,\n &-brazil:before {\n background-position: 0 -728px !important;\n }\n &-bs:before,\n &-bahamas:before {\n background-position: 0 -754px !important;\n }\n &-bt:before,\n &-bhutan:before {\n background-position: 0 -780px !important;\n }\n &-bv:before,\n &-bouvet-island:before {\n background-position: 0 -806px !important;\n }\n &-bw:before,\n &-botswana:before {\n background-position: 0 -832px !important;\n }\n &-by:before,\n &-belarus:before {\n background-position: 0 -858px !important;\n }\n &-bz:before,\n &-belize:before {\n background-position: 0 -884px !important;\n }\n &-ca:before,\n &-canada:before {\n background-position: 0 -910px !important;\n }\n &-cc:before,\n &-cocos-islands:before {\n background-position: 0 -962px !important;\n }\n &-cd:before,\n &-congo:before {\n background-position: 0 -988px !important;\n }\n &-cf:before,\n &-central-african-republic:before {\n background-position: 0 -1014px !important;\n }\n &-cg:before,\n &-congo-brazzaville:before {\n background-position: 0 -1040px !important;\n }\n &-ch:before,\n &-switzerland:before {\n background-position: 0 -1066px !important;\n }\n &-ci:before,\n &-cote-divoire:before {\n background-position: 0 -1092px !important;\n }\n &-ck:before,\n &-cook-islands:before {\n background-position: 0 -1118px !important;\n }\n &-cl:before,\n &-chile:before {\n background-position: 0 -1144px !important;\n }\n &-cm:before,\n &-cameroon:before {\n background-position: 0 -1170px !important;\n }\n &-cn:before,\n &-china:before {\n background-position: 0 -1196px !important;\n }\n &-co:before,\n &-colombia:before {\n background-position: 0 -1222px !important;\n }\n &-cr:before,\n &-costa-rica:before {\n background-position: 0 -1248px !important;\n }\n &-cs:before,\n &-serbia:before {\n background-position: 0 -1274px !important;\n }\n &-cu:before,\n &-cuba:before {\n background-position: 0 -1300px !important;\n }\n &-cv:before,\n &-cape-verde:before {\n background-position: 0 -1326px !important;\n }\n &-cx:before,\n &-christmas-island:before {\n background-position: 0 -1352px !important;\n }\n &-cy:before,\n &-cyprus:before {\n background-position: 0 -1378px !important;\n }\n &-cz:before,\n &-czech-republic:before {\n background-position: 0 -1404px !important;\n }\n &-de:before,\n &-germany:before {\n background-position: 0 -1430px !important;\n }\n &-dj:before,\n &-djibouti:before {\n background-position: 0 -1456px !important;\n }\n &-dk:before,\n &-denmark:before {\n background-position: 0 -1482px !important;\n }\n &-dm:before,\n &-dominica:before {\n background-position: 0 -1508px !important;\n }\n &-do:before,\n &-dominican-republic:before {\n background-position: 0 -1534px !important;\n }\n &-dz:before,\n &-algeria:before {\n background-position: 0 -1560px !important;\n }\n &-ec:before,\n &-ecuador:before {\n background-position: 0 -1586px !important;\n }\n &-ee:before,\n &-estonia:before {\n background-position: 0 -1612px !important;\n }\n &-eg:before,\n &-egypt:before {\n background-position: 0 -1638px !important;\n }\n &-eh:before,\n &-western-sahara:before {\n background-position: 0 -1664px !important;\n }\n &-gb-eng:before,\n &-england:before {\n background-position: 0 -1690px !important;\n }\n &-er:before,\n &-eritrea:before {\n background-position: 0 -1716px !important;\n }\n &-es:before,\n &-spain:before {\n background-position: 0 -1742px !important;\n }\n &-et:before,\n &-ethiopia:before {\n background-position: 0 -1768px !important;\n }\n &-eu:before,\n &-european-union:before {\n background-position: 0 -1794px !important;\n }\n &-fi:before,\n &-finland:before {\n background-position: 0 -1846px !important;\n }\n &-fj:before,\n &-fiji:before {\n background-position: 0 -1872px !important;\n }\n &-fk:before,\n &-falkland-islands:before {\n background-position: 0 -1898px !important;\n }\n &-fm:before,\n &-micronesia:before {\n background-position: 0 -1924px !important;\n }\n &-fo:before,\n &-faroe-islands:before {\n background-position: 0 -1950px !important;\n }\n &-fr:before,\n &-france:before {\n background-position: 0 -1976px !important;\n }\n &-ga:before,\n &-gabon:before {\n background-position: -36px 0 !important;\n }\n &-gb:before,\n &-uk:before,\n &-united-kingdom:before {\n background-position: -36px -26px !important;\n }\n &-gd:before,\n &-grenada:before {\n background-position: -36px -52px !important;\n }\n &-ge:before,\n &-georgia:before {\n background-position: -36px -78px !important;\n }\n &-gf:before,\n &-french-guiana:before {\n background-position: -36px -104px !important;\n }\n &-gh:before,\n &-ghana:before {\n background-position: -36px -130px !important;\n }\n &-gi:before,\n &-gibraltar:before {\n background-position: -36px -156px !important;\n }\n &-gl:before,\n &-greenland:before {\n background-position: -36px -182px !important;\n }\n &-gm:before,\n &-gambia:before {\n background-position: -36px -208px !important;\n }\n &-gn:before,\n &-guinea:before {\n background-position: -36px -234px !important;\n }\n &-gp:before,\n &-guadeloupe:before {\n background-position: -36px -260px !important;\n }\n &-gq:before,\n &-equatorial-guinea:before {\n background-position: -36px -286px !important;\n }\n &-gr:before,\n &-greece:before {\n background-position: -36px -312px !important;\n }\n &-gs:before,\n &-sandwich-islands:before {\n background-position: -36px -338px !important;\n }\n &-gt:before,\n &-guatemala:before {\n background-position: -36px -364px !important;\n }\n &-gu:before,\n &-guam:before {\n background-position: -36px -390px !important;\n }\n &-gw:before,\n &-guinea-bissau:before {\n background-position: -36px -416px !important;\n }\n &-gy:before,\n &-guyana:before {\n background-position: -36px -442px !important;\n }\n &-hk:before,\n &-hong-kong:before {\n background-position: -36px -468px !important;\n }\n &-hm:before,\n &-heard-island:before {\n background-position: -36px -494px !important;\n }\n &-hn:before,\n &-honduras:before {\n background-position: -36px -520px !important;\n }\n &-hr:before,\n &-croatia:before {\n background-position: -36px -546px !important;\n }\n &-ht:before,\n &-haiti:before {\n background-position: -36px -572px !important;\n }\n &-hu:before,\n &-hungary:before {\n background-position: -36px -598px !important;\n }\n &-id:before,\n &-indonesia:before {\n background-position: -36px -624px !important;\n }\n &-ie:before,\n &-ireland:before {\n background-position: -36px -650px !important;\n }\n &-il:before,\n &-israel:before {\n background-position: -36px -676px !important;\n }\n &-in:before,\n &-india:before {\n background-position: -36px -702px !important;\n }\n &-io:before,\n &-indian-ocean-territory:before {\n background-position: -36px -728px !important;\n }\n &-iq:before,\n &-iraq:before {\n background-position: -36px -754px !important;\n }\n &-ir:before,\n &-iran:before {\n background-position: -36px -780px !important;\n }\n &-is:before,\n &-iceland:before {\n background-position: -36px -806px !important;\n }\n &-it:before,\n &-italy:before {\n background-position: -36px -832px !important;\n }\n &-jm:before,\n &-jamaica:before {\n background-position: -36px -858px !important;\n }\n &-jo:before,\n &-jordan:before {\n background-position: -36px -884px !important;\n }\n &-jp:before,\n &-japan:before {\n background-position: -36px -910px !important;\n }\n &-ke:before,\n &-kenya:before {\n background-position: -36px -936px !important;\n }\n &-kg:before,\n &-kyrgyzstan:before {\n background-position: -36px -962px !important;\n }\n &-kh:before,\n &-cambodia:before {\n background-position: -36px -988px !important;\n }\n &-ki:before,\n &-kiribati:before {\n background-position: -36px -1014px !important;\n }\n &-km:before,\n &-comoros:before {\n background-position: -36px -1040px !important;\n }\n &-kn:before,\n &-saint-kitts-and-nevis:before {\n background-position: -36px -1066px !important;\n }\n &-kp:before,\n &-north-korea:before {\n background-position: -36px -1092px !important;\n }\n &-kr:before,\n &-south-korea:before {\n background-position: -36px -1118px !important;\n }\n &-kw:before,\n &-kuwait:before {\n background-position: -36px -1144px !important;\n }\n &-ky:before,\n &-cayman-islands:before {\n background-position: -36px -1170px !important;\n }\n &-kz:before,\n &-kazakhstan:before {\n background-position: -36px -1196px !important;\n }\n &-la:before,\n &-laos:before {\n background-position: -36px -1222px !important;\n }\n &-lb:before,\n &-lebanon:before {\n background-position: -36px -1248px !important;\n }\n &-lc:before,\n &-saint-lucia:before {\n background-position: -36px -1274px !important;\n }\n &-li:before,\n &-liechtenstein:before {\n background-position: -36px -1300px !important;\n }\n &-lk:before,\n &-sri-lanka:before {\n background-position: -36px -1326px !important;\n }\n &-lr:before,\n &-liberia:before {\n background-position: -36px -1352px !important;\n }\n &-ls:before,\n &-lesotho:before {\n background-position: -36px -1378px !important;\n }\n &-lt:before,\n &-lithuania:before {\n background-position: -36px -1404px !important;\n }\n &-lu:before,\n &-luxembourg:before {\n background-position: -36px -1430px !important;\n }\n &-lv:before,\n &-latvia:before {\n background-position: -36px -1456px !important;\n }\n &-ly:before,\n &-libya:before {\n background-position: -36px -1482px !important;\n }\n &-ma:before,\n &-morocco:before {\n background-position: -36px -1508px !important;\n }\n &-mc:before,\n &-monaco:before {\n background-position: -36px -1534px !important;\n }\n &-md:before,\n &-moldova:before {\n background-position: -36px -1560px !important;\n }\n &-me:before,\n &-montenegro:before {\n background-position: -36px -1586px !important;\n }\n &-mg:before,\n &-madagascar:before {\n background-position: -36px -1613px !important;\n }\n &-mh:before,\n &-marshall-islands:before {\n background-position: -36px -1639px !important;\n }\n &-mk:before,\n &-macedonia:before {\n background-position: -36px -1665px !important;\n }\n &-ml:before,\n &-mali:before {\n background-position: -36px -1691px !important;\n }\n &-mm:before,\n &-myanmar:before,\n &-burma:before {\n background-position: -73px -1821px !important;\n }\n &-mn:before,\n &-mongolia:before {\n background-position: -36px -1743px !important;\n }\n &-mo:before,\n &-macau:before {\n background-position: -36px -1769px !important;\n }\n &-mp:before,\n &-northern-mariana-islands:before {\n background-position: -36px -1795px !important;\n }\n &-mq:before,\n &-martinique:before {\n background-position: -36px -1821px !important;\n }\n &-mr:before,\n &-mauritania:before {\n background-position: -36px -1847px !important;\n }\n &-ms:before,\n &-montserrat:before {\n background-position: -36px -1873px !important;\n }\n &-mt:before,\n &-malta:before {\n background-position: -36px -1899px !important;\n }\n &-mu:before,\n &-mauritius:before {\n background-position: -36px -1925px !important;\n }\n &-mv:before,\n &-maldives:before {\n background-position: -36px -1951px !important;\n }\n &-mw:before,\n &-malawi:before {\n background-position: -36px -1977px !important;\n }\n &-mx:before,\n &-mexico:before {\n background-position: -72px 0 !important;\n }\n &-my:before,\n &-malaysia:before {\n background-position: -72px -26px !important;\n }\n &-mz:before,\n &-mozambique:before {\n background-position: -72px -52px !important;\n }\n &-na:before,\n &-namibia:before {\n background-position: -72px -78px !important;\n }\n &-nc:before,\n &-new-caledonia:before {\n background-position: -72px -104px !important;\n }\n &-ne:before,\n &-niger:before {\n background-position: -72px -130px !important;\n }\n &-nf:before,\n &-norfolk-island:before {\n background-position: -72px -156px !important;\n }\n &-ng:before,\n &-nigeria:before {\n background-position: -72px -182px !important;\n }\n &-ni:before,\n &-nicaragua:before {\n background-position: -72px -208px !important;\n }\n &-nl:before,\n &-netherlands:before {\n background-position: -72px -234px !important;\n }\n &-no:before,\n &-norway:before {\n background-position: -72px -260px !important;\n }\n &-np:before,\n &-nepal:before {\n background-position: -72px -286px !important;\n }\n &-nr:before,\n &-nauru:before {\n background-position: -72px -312px !important;\n }\n &-nu:before,\n &-niue:before {\n background-position: -72px -338px !important;\n }\n &-nz:before,\n &-new-zealand:before {\n background-position: -72px -364px !important;\n }\n &-om:before,\n &-oman:before {\n background-position: -72px -390px !important;\n }\n &-pa:before,\n &-panama:before {\n background-position: -72px -416px !important;\n }\n &-pe:before,\n &-peru:before {\n background-position: -72px -442px !important;\n }\n &-pf:before,\n &-french-polynesia:before {\n background-position: -72px -468px !important;\n }\n &-pg:before,\n &-new-guinea:before {\n background-position: -72px -494px !important;\n }\n &-ph:before,\n &-philippines:before {\n background-position: -72px -520px !important;\n }\n &-pk:before,\n &-pakistan:before {\n background-position: -72px -546px !important;\n }\n &-pl:before,\n &-poland:before {\n background-position: -72px -572px !important;\n }\n &-pm:before,\n &-saint-pierre:before {\n background-position: -72px -598px !important;\n }\n &-pn:before,\n &-pitcairn-islands:before {\n background-position: -72px -624px !important;\n }\n &-pr:before,\n &-puerto-rico:before {\n background-position: -72px -650px !important;\n }\n &-ps:before,\n &-palestine:before {\n background-position: -72px -676px !important;\n }\n &-pt:before,\n &-portugal:before {\n background-position: -72px -702px !important;\n }\n &-pw:before,\n &-palau:before {\n background-position: -72px -728px !important;\n }\n &-py:before,\n &-paraguay:before {\n background-position: -72px -754px !important;\n }\n &-qa:before,\n &-qatar:before {\n background-position: -72px -780px !important;\n }\n &-re:before,\n &-reunion:before {\n background-position: -72px -806px !important;\n }\n &-ro:before,\n &-romania:before {\n background-position: -72px -832px !important;\n }\n &-rs:before,\n &-serbia:before {\n background-position: -72px -858px !important;\n }\n &-ru:before,\n &-russia:before {\n background-position: -72px -884px !important;\n }\n &-rw:before,\n &-rwanda:before {\n background-position: -72px -910px !important;\n }\n &-sa:before,\n &-saudi-arabia:before {\n background-position: -72px -936px !important;\n }\n &-sb:before,\n &-solomon-islands:before {\n background-position: -72px -962px !important;\n }\n &-sc:before,\n &-seychelles:before {\n background-position: -72px -988px !important;\n }\n &-gb-sct:before,\n &-scotland:before {\n background-position: -72px -1014px !important;\n }\n &-sd:before,\n &-sudan:before {\n background-position: -72px -1040px !important;\n }\n &-se:before,\n &-sweden:before {\n background-position: -72px -1066px !important;\n }\n &-sg:before,\n &-singapore:before {\n background-position: -72px -1092px !important;\n }\n &-sh:before,\n &-saint-helena:before {\n background-position: -72px -1118px !important;\n }\n &-si:before,\n &-slovenia:before {\n background-position: -72px -1144px !important;\n }\n &-sj:before,\n &-svalbard:before,\n &-jan-mayen:before {\n background-position: -72px -1170px !important;\n }\n &-sk:before,\n &-slovakia:before {\n background-position: -72px -1196px !important;\n }\n &-sl:before,\n &-sierra-leone:before {\n background-position: -72px -1222px !important;\n }\n &-sm:before,\n &-san-marino:before {\n background-position: -72px -1248px !important;\n }\n &-sn:before,\n &-senegal:before {\n background-position: -72px -1274px !important;\n }\n &-so:before,\n &-somalia:before {\n background-position: -72px -1300px !important;\n }\n &-sr:before,\n &-suriname:before {\n background-position: -72px -1326px !important;\n }\n &-st:before,\n &-sao-tome:before {\n background-position: -72px -1352px !important;\n }\n &-sv:before,\n &-el-salvador:before {\n background-position: -72px -1378px !important;\n }\n &-sy:before,\n &-syria:before {\n background-position: -72px -1404px !important;\n }\n &-sz:before,\n &-swaziland:before {\n background-position: -72px -1430px !important;\n }\n &-tc:before,\n &-caicos-islands:before {\n background-position: -72px -1456px !important;\n }\n &-td:before,\n &-chad:before {\n background-position: -72px -1482px !important;\n }\n &-tf:before,\n &-french-territories:before {\n background-position: -72px -1508px !important;\n }\n &-tg:before,\n &-togo:before {\n background-position: -72px -1534px !important;\n }\n &-th:before,\n &-thailand:before {\n background-position: -72px -1560px !important;\n }\n &-tj:before,\n &-tajikistan:before {\n background-position: -72px -1586px !important;\n }\n &-tk:before,\n &-tokelau:before {\n background-position: -72px -1612px !important;\n }\n &-tl:before,\n &-timorleste:before {\n background-position: -72px -1638px !important;\n }\n &-tm:before,\n &-turkmenistan:before {\n background-position: -72px -1664px !important;\n }\n &-tn:before,\n &-tunisia:before {\n background-position: -72px -1690px !important;\n }\n &-to:before,\n &-tonga:before {\n background-position: -72px -1716px !important;\n }\n &-tr:before,\n &-turkey:before {\n background-position: -72px -1742px !important;\n }\n &-tt:before,\n &-trinidad:before {\n background-position: -72px -1768px !important;\n }\n &-tv:before,\n &-tuvalu:before {\n background-position: -72px -1794px !important;\n }\n &-tw:before,\n &-taiwan:before {\n background-position: -72px -1820px !important;\n }\n &-tz:before,\n &-tanzania:before {\n background-position: -72px -1846px !important;\n }\n &-ua:before,\n &-ukraine:before {\n background-position: -72px -1872px !important;\n }\n &-ug:before,\n &-uganda:before {\n background-position: -72px -1898px !important;\n }\n &-um:before,\n &-us-minor-islands:before {\n background-position: -72px -1924px !important;\n }\n &-us:before,\n &-america:before,\n &-united-states:before {\n background-position: -72px -1950px !important;\n }\n &-uy:before,\n &-uruguay:before {\n background-position: -72px -1976px !important;\n }\n &-uz:before,\n &-uzbekistan:before {\n background-position: -108px 0 !important;\n }\n &-va:before,\n &-vatican-city:before {\n background-position: -108px -26px !important;\n }\n &-vc:before,\n &-saint-vincent:before {\n background-position: -108px -52px !important;\n }\n &-ve:before,\n &-venezuela:before {\n background-position: -108px -78px !important;\n }\n &-vg:before,\n &-british-virgin-islands:before {\n background-position: -108px -104px !important;\n }\n &-vi:before,\n &-us-virgin-islands:before {\n background-position: -108px -130px !important;\n }\n &-vn:before,\n &-vietnam:before {\n background-position: -108px -156px !important;\n }\n &-vu:before,\n &-vanuatu:before {\n background-position: -108px -182px !important;\n }\n &-gb-wls:before,\n &-wales:before {\n background-position: -108px -208px !important;\n }\n &-wf:before,\n &-wallis-and-futuna:before {\n background-position: -108px -234px !important;\n }\n &-ws:before,\n &-samoa:before {\n background-position: -108px -260px !important;\n }\n &-ye:before,\n &-yemen:before {\n background-position: -108px -286px !important;\n }\n &-yt:before,\n &-mayotte:before {\n background-position: -108px -312px !important;\n }\n &-za:before,\n &-south-africa:before {\n background-position: -108px -338px !important;\n }\n &-zm:before,\n &-zambia:before {\n background-position: -108px -364px !important;\n }\n &-zw:before,\n &-zimbabwe:before {\n background-position: -108px -390px !important;\n }\n}\n/*******************************\n Site Overrides\n*******************************/\n","//\n// Image styles\n//\n\n.bg-fixed {\n background-attachment: fixed;\n}\n\n.bg-image {\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n}\n\n.mask {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n background-attachment: fixed;\n}\n\n.hover-overlay {\n .mask {\n --#{$prefix}image-hover-transition: #{$image-hover-overlay-transition};\n\n opacity: 0;\n transition: var(--#{$prefix}image-hover-transition);\n &:hover {\n opacity: 1;\n }\n }\n}\n\n.hover-zoom {\n --#{$prefix}image-hover-zoom-transition: #{$image-hover-zoom-transition};\n --#{$prefix}image-hover-zoom-transform: #{$image-hover-zoom-transform};\n\n img,\n video {\n transition: var(--#{$prefix}image-hover-zoom-transition);\n }\n &:hover {\n img,\n video {\n transform: var(--#{$prefix}image-hover-zoom-transform);\n }\n }\n}\n\n.hover-shadow,\n.card.hover-shadow,\n.hover-shadow-soft,\n.card.hover-shadow-soft {\n --#{$prefix}image-hover-shadow-transition: #{$image-hover-shadow-transition};\n\n transition: var(--#{$prefix}image-hover-shadow-transition);\n &:hover {\n transition: var(--#{$prefix}image-hover-shadow-transition);\n }\n}\n\n.hover-shadow,\n.card.hover-shadow {\n --#{$prefix}image-hover-shadow-box-shadow: #{$image-hover-shadow-box-shadow};\n\n box-shadow: none;\n &:hover {\n box-shadow: var(--#{$prefix}image-hover-shadow-box-shadow);\n }\n}\n\n.hover-shadow-soft,\n.card.hover-shadow-soft {\n --#{$prefix}image-hover-shadow-box-shadow-soft: #{$image-hover-shadow-box-shadow-soft};\n\n box-shadow: none;\n &:hover {\n box-shadow: var(--#{$prefix}image-hover-shadow-box-shadow-soft);\n }\n}\n","//\n// Material styles for form control - form outline\n//\n\n.form-control {\n min-height: auto;\n padding: 4.5px 12px 3.68px 12px;\n transition: all 0.1s linear;\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n transition: all 0.1s linear;\n border-color: $primary;\n box-shadow: inset 0px 0px 0px 1px $primary;\n }\n &.form-control-sm {\n font-size: 0.775rem;\n line-height: 1.5;\n }\n &.form-control-lg {\n line-height: 2.15;\n border-radius: 0.25rem;\n }\n}\n\n.form-outline {\n position: relative;\n width: 100%;\n\n .form-helper {\n width: 100%;\n position: absolute;\n font-size: 0.875em;\n color: #757575;\n .form-counter {\n text-align: right;\n }\n }\n\n .trailing {\n position: absolute;\n right: 10px;\n left: initial;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--#{$prefix}surface-color);\n }\n\n .form-icon-trailing {\n padding-right: 2rem !important;\n }\n\n .form-control {\n min-height: auto;\n padding-top: $input-padding-top;\n padding-bottom: $input-padding-bottom;\n padding-left: $input-padding-left;\n padding-right: $input-padding-right;\n border: 0;\n background: transparent;\n transition: $input-transition;\n ~ .form-label {\n position: absolute;\n top: 0;\n max-width: 90%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n left: $form-label-left;\n padding-top: $form-label-padding-top;\n pointer-events: none;\n transform-origin: 0 0;\n transition: $form-label-transition;\n color: $form-label-color;\n margin-bottom: 0;\n }\n ~ .form-notch {\n display: flex;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n max-width: 100%;\n height: 100%;\n text-align: left;\n pointer-events: none;\n div {\n pointer-events: none;\n border: $border-width solid;\n border-color: $form-notch-div-border-color;\n box-sizing: border-box;\n background: transparent;\n transition: $input-transition;\n }\n .form-notch-leading {\n left: 0;\n top: 0;\n height: 100%;\n width: $form-notch-leading-width;\n border-right: none;\n border-radius: $form-notch-leading-border-radius 0 0 $form-notch-leading-border-radius;\n }\n .form-notch-middle {\n flex: 0 0 auto;\n width: auto;\n max-width: calc(100% - #{$form-notch-middle-max-width});\n height: 100%;\n border-right: none;\n border-left: none;\n }\n .form-notch-trailing {\n flex-grow: 1;\n height: 100%;\n border-left: none;\n border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0;\n }\n }\n &:not(.placeholder-active)::placeholder {\n opacity: 0;\n }\n &:focus,\n &.active {\n &::placeholder {\n opacity: 1;\n }\n }\n &:focus {\n box-shadow: none !important;\n }\n &:focus ~ .form-label,\n &.active ~ .form-label {\n transform: $input-focus-active-label-transform;\n }\n &:focus ~ .form-label {\n color: $input-focus-label-color;\n }\n &:focus ~ .form-notch .form-notch-middle,\n &.active ~ .form-notch .form-notch-middle {\n border-right: none;\n border-left: none;\n border-top: 1px solid transparent;\n }\n &:focus ~ .form-notch .form-notch-middle {\n border-color: $input-focus-border-color;\n box-shadow: 0 1px 0 0 $input-focus-border-color;\n border-top: 1px solid transparent;\n }\n &:focus ~ .form-notch .form-notch-leading,\n &.active ~ .form-notch .form-notch-leading {\n border-right: none;\n }\n &:focus ~ .form-notch .form-notch-leading {\n border-color: $input-focus-border-color;\n box-shadow: -1px 0 0 0 $input-focus-border-color, 0 1px 0 0 $input-focus-border-color,\n 0 -1px 0 0 $input-focus-border-color;\n }\n &:focus ~ .form-notch .form-notch-trailing,\n &.active ~ .form-notch .form-notch-trailing {\n border-left: none;\n }\n &:focus ~ .form-notch .form-notch-trailing {\n border-color: $input-focus-border-color;\n box-shadow: 1px 0 0 0 $input-focus-border-color, 0 -1px 0 0 $input-focus-border-color,\n 0 1px 0 0 $input-focus-border-color;\n }\n &:disabled,\n &.disabled,\n &[readonly] {\n background-color: $input-disabled-background-color;\n }\n\n &:disabled,\n &.disabled,\n &[readonly] {\n ~ .timepicker-toggle-button,\n ~ .datepicker-toggle-button,\n ~ .datetimepicker-toggle-button,\n ~ .select-arrow,\n ~ .trailing {\n color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);\n }\n }\n\n &.form-control-lg {\n font-size: $input-font-size-lg;\n line-height: $input-line-height-lg;\n // padding-left: $input-padding-left-lg;\n // padding-right: $input-padding-right-lg;\n ~ .form-label {\n padding-top: $form-label-padding-top-lg;\n }\n &:focus ~ .form-label,\n &.active ~ .form-label {\n transform: $input-focus-active-label-transform-lg;\n }\n }\n &.form-control-sm {\n // padding-left: $input-padding-left-sm;\n // padding-right: $input-padding-right-sm;\n padding-top: $input-padding-top-sm;\n padding-bottom: $input-padding-bottom-sm;\n font-size: $input-font-size-sm;\n line-height: $input-line-height-sm;\n ~ .form-label {\n padding-top: $form-label-padding-top-sm;\n font-size: $form-label-font-size-sm;\n }\n &:focus ~ .form-label,\n &.active ~ .form-label {\n transform: $input-focus-active-label-transform-sm;\n }\n }\n }\n\n &.form-white {\n .form-control {\n color: $form-white-input-color;\n ~ .form-label {\n color: $form-white-label-color;\n }\n ~ .form-notch {\n div {\n border-color: $form-white-notch-div-border-color;\n }\n }\n &:focus ~ .form-label {\n color: $form-white-input-focus-label-color;\n }\n &:focus ~ .form-notch .form-notch-middle {\n border-color: $form-white-input-focus-border-color;\n box-shadow: 0 1px 0 0 $form-white-input-focus-border-color;\n border-top: 1px solid transparent;\n }\n &:focus ~ .form-notch .form-notch-leading {\n border-color: $form-white-input-focus-border-color;\n box-shadow: -1px 0 0 0 $form-white-input-focus-border-color,\n 0 1px 0 0 $form-white-input-focus-border-color,\n 0 -1px 0 0 $form-white-input-focus-border-color;\n }\n &:focus ~ .form-notch .form-notch-trailing {\n border-color: $form-white-input-focus-border-color;\n box-shadow: 1px 0 0 0 $form-white-input-focus-border-color,\n 0 -1px 0 0 $form-white-input-focus-border-color,\n 0 1px 0 0 $form-white-input-focus-border-color;\n }\n &::placeholder {\n color: $form-white-placeholder-color;\n }\n &:disabled,\n &.disabled,\n &[readonly] {\n background-color: $form-white-disabled-bgc;\n }\n }\n }\n}\n","// Select\n\n.select-input {\n &.form-control {\n &[readonly]:not([disabled]) {\n background-color: transparent;\n }\n }\n}\n\n.form-select {\n transition: $form-select-transition;\n}\n\n.form-select:focus {\n border-color: $form-select-focus-border-color;\n outline: 0;\n box-shadow: $form-select-focus-border-box-shadow;\n}\n","//\n// Material styles for check / radio / switch\n//\n\n.form-check {\n min-height: 1.5rem;\n}\n\n.form-check-input {\n position: relative;\n width: $form-check-input-width-md;\n height: $form-check-input-height;\n background-color: $form-check-input-background-color;\n border: $form-check-input-border-width solid $form-check-input-border-color;\n\n &:before {\n content: '';\n position: absolute;\n box-shadow: $form-check-input-before-box-shadow;\n border-radius: $form-check-input-before-border-radius;\n width: $form-check-input-before-width;\n height: $form-check-input-before-height;\n background-color: transparent;\n opacity: 0;\n pointer-events: none;\n transform: $form-check-input-before-transform;\n }\n\n &:hover {\n cursor: pointer;\n\n &:before {\n opacity: $form-check-input-hover-before-opacity;\n box-shadow: $form-check-input-hover-before-box-shadow;\n }\n }\n\n &:focus {\n box-shadow: none;\n border-color: $form-check-input-focus-border-color;\n transition: $form-check-input-focus-transition;\n\n &:before {\n opacity: $form-check-input-focus-before-opacity;\n box-shadow: $form-check-input-focus-before-box-shadow;\n transform: $form-check-input-focus-before-transform;\n transition: $form-check-input-focus-before-transition;\n }\n }\n\n &:checked {\n border-color: $form-check-input-checked-border-color;\n\n &:before {\n opacity: $form-check-input-checked-before-opacity;\n }\n\n &:after {\n content: '';\n position: absolute;\n }\n\n &:focus {\n border-color: $form-check-input-checked-focus-border-color;\n\n &:before {\n box-shadow: $form-check-input-checked-focus-before-box-shadow;\n transform: $form-check-input-checked-focus-before-transform;\n transition: $form-check-input-checked-focus-before-transition;\n }\n }\n }\n\n &:indeterminate {\n &:focus {\n &:before {\n box-shadow: $form-check-input-indeterminate-focus-before-box-shadow;\n }\n }\n }\n\n &[type='checkbox'] {\n border-radius: $form-check-input-checkbox-border-radius;\n margin-top: 0.19em;\n margin-right: 6px;\n\n &:focus {\n &:after {\n content: '';\n position: absolute;\n width: $form-check-input-checkbox-focus-after-width;\n height: $form-check-input-checkbox-focus-after-height;\n z-index: 1;\n display: block;\n border-radius: 0;\n background-color: $form-check-input-checkbox-focus-after-background-color;\n }\n }\n\n &:checked {\n background-image: none;\n background-color: $form-check-input-checkbox-checked-background-color;\n\n &:after {\n display: block;\n transform: $form-check-input-checkbox-checked-after-transform #{'/*!rtl:ignore*/'};\n border-width: $form-check-input-checkbox-checked-after-border-width;\n border-color: $form-check-input-checkbox-checked-after-border-color;\n width: $form-check-input-checkbox-checked-after-width;\n height: $form-check-input-checkbox-checked-after-height;\n border-style: solid;\n border-top: 0;\n border-left: 0 #{'/*!rtl:ignore*/'};\n margin-left: $form-check-input-checkbox-checked-after-margin-left;\n margin-top: $form-check-input-checkbox-checked-after-margin-top;\n background-color: transparent;\n }\n\n &:focus {\n background-color: $form-check-input-checkbox-checked-focus-background-color;\n }\n }\n\n &:indeterminate {\n border-color: $form-check-input-indeterminate-focus-border-color;\n }\n }\n\n &[type='radio'] {\n border-radius: $form-check-input-radio-border-radius;\n width: $form-check-input-radio-width;\n height: $form-check-input-radio-height;\n margin-top: 0.125em;\n margin-right: 4px;\n\n &:before {\n width: $form-check-input-radio-before-width;\n height: $form-check-input-radio-before-height;\n }\n\n &:after {\n content: '';\n position: absolute;\n width: $form-check-input-radio-after-width;\n height: $form-check-input-radio-after-height;\n z-index: 1;\n display: block;\n border-radius: $form-check-input-radio-after-border-radius;\n background-color: $form-check-input-radio-after-background-color;\n }\n\n &:checked {\n background-image: none;\n background-color: $form-check-input-radio-checked-background-color;\n\n &:after {\n border-radius: $form-check-input-radio-checked-after-border-radius;\n width: $form-check-input-radio-checked-after-width;\n height: $form-check-input-radio-checked-after-height;\n border-color: $form-check-input-radio-checked-after-border-color;\n background-color: $form-check-input-radio-checked-after-background-color;\n transition: $form-check-input-radio-checked-after-transition;\n transform: translate(-50%, -50%);\n position: absolute;\n left: 50%;\n top: 50%;\n }\n\n &:focus {\n background-color: $form-check-input-radio-checked-focus-background-color;\n }\n }\n }\n}\n\n.form-check-label {\n padding-left: 0.15rem;\n &:hover {\n cursor: pointer;\n }\n}\n\n//\n// Switch\n//\n\n.form-switch {\n .form-check-input {\n background-image: none;\n border-width: 0;\n border-radius: $form-switch-form-check-input-border-radius;\n width: $form-switch-form-check-input-width;\n height: $form-switch-form-check-input-height;\n background-color: $form-switch-form-check-input-background-color;\n margin-top: 0.3em;\n margin-right: 8px;\n\n &:after {\n content: '';\n position: absolute;\n border: none;\n z-index: 2;\n border-radius: $form-switch-form-check-input-after-border-radius;\n width: $form-switch-form-check-input-after-width;\n height: $form-switch-form-check-input-after-height;\n background-color: $form-switch-form-check-input-after-background-color;\n margin-top: $form-switch-form-check-input-after-margin-top;\n box-shadow: $form-switch-form-check-input-after-box-shadow;\n transition: $form-switch-form-check-input-after-transition;\n }\n\n &:focus {\n background-image: none;\n\n &:before {\n box-shadow: $form-switch-form-check-input-focus-before-box-shadow;\n transform: $form-switch-form-check-input-focus-before-transform;\n transition: $form-switch-form-check-input-focus-before-transition;\n }\n\n &:after {\n border-radius: $form-switch-form-check-input-focus-after-border-radius;\n width: $form-switch-form-check-input-focus-after-width;\n height: $form-switch-form-check-input-focus-after-height;\n }\n }\n\n &:checked {\n background-image: none;\n\n &:focus {\n background-image: none;\n\n &:before {\n margin-left: $form-switch-form-check-input-checked-focus-before-margin-left;\n box-shadow: $form-switch-form-check-input-checked-focus-before-box-shadow;\n transform: $form-switch-form-check-input-checked-focus-before-transform;\n transition: $form-switch-form-check-input-checked-focus-before-transition;\n }\n }\n\n &[type='checkbox'] {\n background-image: none;\n\n &:after {\n content: '';\n position: absolute;\n border: none;\n z-index: 2;\n border-radius: $form-switch-form-check-input-checked-checkbox-after-border-radius;\n width: $form-switch-form-check-input-checked-checkbox-after-width;\n height: $form-switch-form-check-input-checked-checkbox-after-height;\n background-color: $form-switch-form-check-input-checked-checkbox-after-background-color;\n margin-top: $form-switch-form-check-input-checked-checkbox-after-margin-top;\n margin-left: $form-switch-form-check-input-checked-checkbox-after-margin-left;\n box-shadow: $form-switch-form-check-input-checked-checkbox-after-box-shadow;\n transition: $form-switch-form-check-input-checked-checkbox-after-transition;\n }\n }\n }\n }\n}\n",".form-control {\n &[type='file'] {\n border-color: var(--#{$prefix}form-control-border-color);\n &::-webkit-file-upload-button {\n background-color: transparent;\n }\n &:disabled {\n background-color: var(--#{$prefix}form-control-disabled-bg);\n color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);\n\n &::file-selector-button {\n color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);\n }\n }\n }\n &:hover {\n &:not(:disabled):not([readonly])::-webkit-file-upload-button {\n background-color: transparent;\n }\n }\n}\n","//\n// Base styles\n//\n\n.input-group {\n flex-wrap: nowrap;\n\n > .form-control {\n min-height: $input-group-min-height;\n height: $input-group-height;\n padding-top: $input-group-padding-y;\n padding-bottom: $input-group-padding-y;\n transition: $input-group-transition;\n\n &:focus {\n transition: $input-group-focus-transition;\n border-color: $input-group-focus-border-color;\n outline: 0;\n box-shadow: $input-group-focus-box-shadow;\n }\n }\n}\n\n.input-group-text {\n background-color: transparent;\n padding-top: $input-group-text-padding-y;\n padding-bottom: $input-group-text-padding-y;\n > .form-check-input[type='checkbox'] {\n margin-left: 1px;\n margin-right: 1px;\n }\n > .form-check-input[type='radio'] {\n margin-right: 0;\n }\n}\n\n.input-group-lg {\n > .form-control {\n height: $input-group-lg-height;\n font-size: $input-group-lg-font-size;\n padding-top: $input-group-lg-padding-y;\n padding-bottom: $input-group-lg-padding-y;\n }\n\n .input-group-text {\n font-size: $input-group-lg-text-font-size;\n }\n}\n\n.input-group-sm {\n > .form-control {\n min-height: $input-group-sm-min-height;\n height: $input-group-sm-height;\n font-size: $input-group-sm-font-size;\n padding-top: $input-group-sm-padding-y;\n padding-bottom: $input-group-sm-padding-y;\n }\n\n .input-group-text {\n font-size: $input-group-sm-text-font-size;\n line-height: $input-group-sm-text-line-height;\n }\n}\n\n.input-group {\n &.form-outline {\n .input-group-text {\n border-left: 0;\n }\n input + .input-group-text {\n border: 0;\n border-left: $input-group-form-outline-border-left-width solid\n $input-group-form-outline-border-left-color;\n }\n }\n .form-outline:not(:first-child),\n .select-wrapper:not(:first-child),\n .form-outline:not(:first-child) .form-notch-leading,\n .select-wrapper:not(:first-child) .form-notch-leading {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n }\n .form-outline:not(:last-child),\n .select-wrapper:not(:last-child),\n .form-outline:not(:last-child) .form-notch-trailing,\n .select-wrapper:not(:last-child) .form-notch-trailing {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n}\n\n.input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {\n border-left: 0;\n}\n\n.input-group > .btn[class*='btn-outline-'] {\n padding-top: 0.47rem;\n}\n\n.input-group > .btn {\n padding-top: 0.59rem;\n}\n\n.input-group {\n &.input-group-lg {\n .input-group-text {\n height: $input-group-lg-height;\n }\n }\n}\n\n.input-group {\n .input-group-text {\n height: $input-group-height;\n }\n .btn {\n line-height: 1;\n }\n}\n\n.input-group {\n &.input-group-sm {\n .input-group-text {\n height: $input-group-sm-height;\n }\n }\n}\n\nINPUT,\nSELECT,\nTEXTAREA {\n &:-webkit-autofill {\n animation-name: onautofillstart;\n\n -webkit-background-clip: text;\n box-shadow: inset 0 0 20px 20px white;\n -webkit-box-shadow: 0 0 20px 20px white inset !important;\n\n &:hover,\n &:focus,\n &:active {\n animation-name: onautofillstart;\n\n -webkit-background-clip: text;\n box-shadow: inset 0 0 20px 20px white;\n -webkit-box-shadow: 0 0 20px 20px white inset !important;\n }\n }\n\n &:not(:-webkit-autofill) {\n animation-name: onautofillcancel;\n }\n}\n\n@keyframes onautofillstart {\n from {\n }\n}\n@keyframes onautofillcancel {\n from {\n }\n}\n","//\n// Material styles for form validation\n//\n\n@mixin form-validation-state-selector($state) {\n @if ($state == 'valid' or $state == 'invalid') {\n .was-validated #{if(&, \"&\", \"\")}:#{$state},\n #{if(&, \"&\", \"\")}.is-#{$state} {\n @content;\n }\n } @else {\n #{if(&, \"&\", \"\")}.is-#{$state} {\n @content;\n }\n }\n}\n\n@mixin form-validation-state-mdb(\n $state,\n $color,\n $tooltip-color: color-contrast($color),\n $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),\n $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)\n) {\n .#{$state}-feedback {\n position: absolute;\n display: none;\n width: auto;\n margin-top: $form-feedback-margin-top;\n font-size: 0.875rem;\n font-style: $form-feedback-font-style;\n color: $color;\n margin-top: -0.75rem;\n }\n\n .#{$state}-tooltip {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n max-width: 100%; // Contain to parent when possible\n padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;\n margin-top: 0.1rem;\n font-size: 0.875rem;\n line-height: $form-feedback-tooltip-line-height;\n background-color: $tooltip-bg-color;\n border-radius: 0.25rem !important;\n color: $form-feedback-valid-tooltip-color;\n }\n\n @include form-validation-state-selector($state) {\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n\n .form-control {\n @include form-validation-state-selector($state) {\n margin-bottom: 1rem;\n background-image: none;\n border-color: $color;\n\n &:focus {\n border-color: $color;\n box-shadow: $focus-box-shadow;\n }\n }\n }\n\n .form-outline {\n .form-control {\n @include form-validation-state-selector($state) {\n ~ .form-label {\n color: $color;\n }\n\n ~ .form-notch .form-notch-leading,\n ~ .form-notch .form-notch-middle,\n ~ .form-notch .form-notch-trailing {\n border-color: $color;\n }\n\n &:focus ~ .form-notch .form-notch-middle,\n &.active ~ .form-notch .form-notch-middle {\n border-top: 1px solid transparent;\n }\n &:focus ~ .form-notch .form-notch-middle {\n box-shadow: 0 1px 0 0 $color;\n }\n &:focus ~ .form-notch .form-notch-leading {\n box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;\n }\n &:focus ~ .form-notch .form-notch-trailing {\n box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;\n }\n\n &.select-input.focused {\n & ~ .form-notch .form-notch-leading {\n box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;\n }\n\n & ~ .form-notch .form-notch-middle {\n box-shadow: 0 1px 0 0 $color;\n border-top: 1px solid transparent;\n }\n\n & ~ .form-notch .form-notch-trailing {\n box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;\n }\n }\n }\n }\n }\n\n .form-select {\n @include form-validation-state-selector($state) {\n border-color: $color;\n\n &:focus {\n border-color: $color;\n box-shadow: $focus-box-shadow;\n }\n\n ~ .#{$state}-feedback {\n margin-top: 0;\n }\n }\n }\n\n .input-group {\n .form-control {\n @include form-validation-state-selector($state) {\n margin-bottom: 0;\n }\n }\n }\n\n input[type='file'].form-control {\n @include form-validation-state-selector($state) {\n .#{$state}-feedback {\n margin-top: 0;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 1px $color;\n border-color: $color;\n\n ~ .form-file-label {\n box-shadow: none;\n }\n }\n\n &:focus-within {\n ~ .form-file-label {\n .form-file-text,\n .form-file-button {\n border-color: $color;\n }\n }\n }\n }\n }\n\n .form-check-input {\n @include form-validation-state-selector($state) {\n border-color: $color;\n\n &:checked {\n background-color: $color;\n }\n\n &:checked {\n &:focus {\n &:before {\n box-shadow: 0px 0px 0px 13px $color;\n }\n }\n }\n\n &:focus {\n box-shadow: none;\n\n &:before {\n box-shadow: 0px 0px 0px 13px $color;\n }\n }\n\n ~ .form-check-label {\n color: $color;\n margin-bottom: 1rem;\n }\n\n &[type='checkbox'] {\n &:checked {\n &:focus {\n background-color: $color;\n border-color: $color;\n }\n }\n }\n\n &[type='radio'] {\n &:checked {\n border-color: $color;\n background-color: $white;\n\n &:focus {\n &:before {\n box-shadow: 0px 0px 0px 13px $color;\n }\n }\n\n &:after {\n border-color: $color;\n background-color: $color;\n }\n }\n }\n }\n }\n .form-check-inline .form-check-input {\n ~ .#{$state}-feedback {\n margin-left: 0.5em;\n }\n }\n\n .form-switch {\n .form-check-input {\n @include form-validation-state-selector($state) {\n &:focus {\n &:before {\n box-shadow: $form-switch-form-check-input-focus-before-box-shadow;\n }\n }\n &:checked {\n &[type='checkbox'] {\n &:after {\n background-color: $color;\n box-shadow: $form-switch-form-check-input-checked-checkbox-after-box-shadow;\n }\n }\n &:focus {\n &:before {\n box-shadow: 3px -1px 0px 13px $color;\n }\n }\n }\n }\n }\n }\n}\n\n.was-validated .input-group .invalid-feedback,\n.was-validated .input-group .valid-feedback {\n margin-top: 2.5rem;\n}\n\n.input-group .invalid-feedback,\n.input-group .valid-feedback {\n margin-top: 2.5rem;\n}\n\n@each $state, $data in $form-validation-states-mdb {\n @include form-validation-state-mdb($state, $data...);\n}\n","// Range\n//\n// Style range inputs the same across browsers. Vendor-specific rules for pseudo\n// elements cannot be mixed. As such, there are no shared styles for focus or\n// active states on prefixed selectors.\n\n.form-range {\n &:focus {\n box-shadow: none;\n\n // Pseudo-elements must be split across multiple rulesets to have an effect.\n // No box-shadow() mixin for focus accessibility.\n &::-webkit-slider-thumb {\n box-shadow: none;\n }\n &::-moz-range-thumb {\n box-shadow: none;\n }\n &::-ms-thumb {\n box-shadow: none;\n }\n }\n\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-webkit-slider-thumb {\n margin-top: $form-range-webkit-slider-thumb-margin-top; // Webkit specific\n box-shadow: none;\n appearance: none;\n }\n\n &::-webkit-slider-runnable-track {\n height: $form-range-webkit-slider-runnable-track-height;\n border-radius: 0;\n box-shadow: none;\n background-color: var(--#{$prefix}secondary-bg);\n }\n\n &::-moz-range-thumb {\n box-shadow: none;\n appearance: none;\n }\n\n &::-moz-range-track {\n box-shadow: none;\n }\n}\n","//\n// Basic MDB table\n//\n\n.table {\n --#{$prefix}table-font-size: #{$table-font-size};\n --#{$prefix}table-divider-color: #{$table-divider-color};\n\n font-size: var(--#{$prefix}table-font-size);\n\n th {\n font-weight: $font-weight-medium;\n }\n\n tbody {\n font-weight: $font-weight-normal;\n }\n\n > :not(:last-child) > :last-child > * {\n border-bottom-color: $table-group-separator-color;\n }\n}\n\n@each $color, $value in $table-variants {\n @include table-variant($color, $value);\n}\n\n.table-hover {\n > tbody > tr {\n transition: $table-hover-transition;\n }\n > tbody > tr:hover {\n --#{$prefix}table-accent-bg: transparent;\n background-color: var(--#{$prefix}table-hover-bg);\n }\n}\n\n.table-group-divider {\n border-top: calc(2 * $table-border-width) solid;\n border-top-color: inherit;\n}\n\n.table-divider-color {\n border-top-color: var(--#{$prefix}table-divider-color);\n}\n","//\n// Button base styles\n//\n\n.btn {\n // scss-docs-start btn-css-vars\n --#{$prefix}btn-padding-top: #{$btn-padding-top};\n --#{$prefix}btn-padding-bottom: #{$btn-padding-bottom};\n --#{$prefix}btn-border-width: 0;\n --#{$prefix}btn-border-color: none;\n --#{$prefix}btn-border-radius: #{$btn-border-radius};\n --#{$prefix}btn-box-shadow: #{$btn-box-shadow};\n --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};\n --#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};\n --#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};\n // scss-docs-end btn-css-vars\n\n padding-top: var(--#{$prefix}btn-padding-top);\n padding-bottom: var(--#{$prefix}btn-padding-bottom);\n text-transform: uppercase;\n vertical-align: bottom;\n border: 0;\n @include border-radius(var(--#{$prefix}btn-border-radius));\n box-shadow: var(--#{$prefix}btn-box-shadow);\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n box-shadow: var(--#{$prefix}btn-hover-box-shadow);\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n box-shadow: var(--#{$prefix}btn-active-box-shadow);\n\n &:focus {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n}\n\n//\n// Outline styles\n//\n\n[class*='btn-outline-'] {\n // scss-docs-start btn-outline-css-vars\n --#{$prefix}btn-padding-top: #{$btn-outline-padding-top};\n --#{$prefix}btn-padding-bottom: #{$btn-outline-padding-bottom};\n --#{$prefix}btn-padding-x: #{$btn-outline-padding-x};\n --#{$prefix}btn-border-width: #{$btn-outline-border-width};\n --#{$prefix}btn-line-height: #{$btn-line-height};\n // scss-docs-end btn-outline-css-vars\n\n padding: var(--#{$prefix}btn-padding-top) var(--#{$prefix}btn-padding-x)\n var(--#{$prefix}btn-padding-bottom);\n border-width: var(--#{$prefix}btn-border-width);\n border-style: solid;\n box-shadow: none;\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n box-shadow: none;\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n box-shadow: none;\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: none;\n }\n\n &.btn-lg {\n @include button-outline-size(\n $btn-outline-padding-top-lg,\n $btn-outline-padding-bottom-lg,\n $btn-outline-padding-x-lg,\n $btn-outline-font-size-lg,\n $btn-outline-line-height-lg\n );\n }\n\n &.btn-sm {\n @include button-outline-size(\n $btn-outline-padding-top-sm,\n $btn-outline-padding-bottom-sm,\n $btn-outline-padding-x-sm,\n $btn-outline-font-size-sm,\n $btn-outline-line-height-sm\n );\n }\n}\n\n//\n// Alternate buttons\n//\n\n// scss-docs-start btn-secondary\n.btn-secondary {\n box-shadow: none;\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n box-shadow: none !important;\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n box-shadow: none;\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: none;\n }\n}\n// scss-docs-end btn-secondary\n\n// scss-docs-start btn-variant-loop\n@each $color, $value in $theme-colors {\n .btn-#{$color} {\n @if $color == 'secondary' {\n @include button-variant(\n tint-color($primary, $btn-secondary-bg-tint-amount),\n $value,\n $color: shade-color($primary, $btn-secondary-color-shade-amount),\n $hover-background:\n shade-color(\n tint-color($primary, $btn-secondary-bg-tint-amount),\n $btn-hover-bg-shade-amount\n ),\n $focus-background:\n shade-color(\n tint-color($primary, $btn-secondary-bg-tint-amount),\n $btn-hover-bg-shade-amount\n ),\n $active-background:\n shade-color(\n tint-color($primary, $btn-secondary-bg-tint-amount),\n $btn-hover-bg-shade-amount\n )\n );\n } @else if $color == 'light' {\n @include button-variant(\n $light-bg-subtle,\n $light-border-subtle,\n $color: $light-text-emphasis,\n $hover-background: shade-color($light-bg-subtle, $btn-hover-bg-shade-amount),\n $hover-border: shade-color($light-border-subtle, $btn-hover-border-shade-amount),\n $active-background: shade-color($light-bg-subtle, $btn-active-bg-shade-amount),\n $active-border: shade-color($light-border-subtle, $btn-active-border-shade-amount)\n );\n } @else if $color == 'dark' {\n @include button-variant(\n $dark-bg-subtle,\n $dark-border-subtle,\n $color: $dark-text-emphasis,\n $hover-background: tint-color($dark-bg-subtle, $btn-hover-bg-tint-amount),\n $hover-border: tint-color($dark-border-subtle, $btn-hover-border-tint-amount),\n $active-background: tint-color($dark-bg-subtle, $btn-active-bg-tint-amount),\n $active-border: tint-color($dark-border-subtle, $btn-active-border-tint-amount)\n );\n } @else {\n @include button-variant($value, $value);\n }\n\n @if $color == 'secondary' {\n --#{$prefix}btn-box-shadow-state: transparent;\n } @else {\n --#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part\n rgba(shade-color($value, $btn-hover-bg-shade-amount), 0.3),\n $btn-contextual-box-shadow-state-second-part\n rgba(shade-color($value, $btn-hover-bg-shade-amount), 0.2)};\n }\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n box-shadow: var(--#{$prefix}btn-box-shadow-state);\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n box-shadow: var(--#{$prefix}btn-box-shadow-state);\n background-color: var(--#{$prefix}btn-focus-bg);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n box-shadow: var(--#{$prefix}btn-box-shadow-state);\n\n &:focus {\n box-shadow: var(--#{$prefix}btn-box-shadow-state);\n }\n\n &:hover {\n background-color: var(--#{$prefix}btn-active-bg);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n }\n\n [data-mdb-theme='dark'] .btn-#{$color} {\n @if $color != 'secondary' {\n box-shadow: 0 4px 9px -4px rgba($black, 0.35);\n &:hover,\n &:active,\n &:focus {\n box-shadow: 0 4px 18px -2px rgba($black, 0.7);\n }\n }\n }\n}\n\n// scss-docs-end btn-variant-loop\n\n// scss-docs-start btn-outline-variant-loop\n@each $color, $value in $theme-colors {\n .btn-outline-#{$color} {\n @if $color == 'secondary' {\n @include button-outline-variant(\n shade-color($primary, $btn-secondary-color-shade-amount),\n shade-color($primary, $btn-secondary-color-shade-amount),\n shade-color($primary, $btn-secondary-color-shade-amount),\n shade-color($primary, $btn-secondary-color-shade-amount)\n );\n\n --#{$prefix}btn-outline-border-color: #{tint-color($primary, $btn-secondary-bg-tint-amount)};\n --#{$prefix}btn-outline-focus-border-color: #{shade-color(\n tint-color($primary, $btn-secondary-bg-tint-amount),\n $btn-focus-bg-shade-amount\n )};\n --#{$prefix}btn-outline-hover-border-color: #{shade-color(\n tint-color($primary, $btn-secondary-bg-tint-amount),\n $btn-hover-bg-shade-amount\n )};\n\n border-color: var(--#{$prefix}btn-outline-border-color);\n } @else {\n @include button-outline-variant(\n $value,\n shade-color($value, $btn-hover-bg-shade-amount),\n shade-color($value, $btn-focus-bg-shade-amount),\n shade-color($value, $btn-active-bg-shade-amount)\n );\n\n --#{$prefix}btn-outline-border-color: #{$value};\n --#{$prefix}btn-outline-focus-border-color: #{shade-color(\n $value,\n $btn-outline-focus-bg-shade-amount\n )};\n --#{$prefix}btn-outline-hover-border-color: #{shade-color(\n $value,\n $btn-outline-hover-bg-shade-amount\n )};\n\n border-color: var(--#{$prefix}btn-outline-border-color);\n }\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n border-color: var(--#{$prefix}btn-outline-hover-border-color);\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n border-color: var(--#{$prefix}btn-outline-focus-border-color);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n border-color: var(--#{$prefix}btn-outline-active-border-color);\n\n &:focus {\n border-color: var(--#{$prefix}btn-outline-focus-border-color);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n border-color: var(--#{$prefix}btn-outline-border-color);\n }\n }\n\n [data-mdb-theme='dark'] .btn-outline-#{$color} {\n @if $color == 'secondary' {\n @include button-outline-variant(\n tint-color($primary, 70%),\n tint-color($primary, 60%),\n tint-color($primary, 60%),\n tint-color($primary, 60%),\n shade-color($primary, 60%),\n shade-color($primary, 60%),\n shade-color($primary, 60%)\n );\n\n --#{$prefix}btn-outline-border-color: #{tint-color($primary, 50%)};\n --#{$prefix}btn-outline-focus-border-color: #{shade-color(\n tint-color($primary, 50%),\n $btn-focus-bg-shade-amount\n )};\n --#{$prefix}btn-outline-hover-border-color: #{shade-color(\n tint-color($primary, 50%),\n $btn-hover-bg-shade-amount\n )};\n\n border-color: var(--#{$prefix}btn-outline-border-color);\n } @else {\n @include button-outline-variant(\n tint-color($value, 20%),\n shade-color($value, $btn-hover-bg-shade-amount),\n shade-color($value, $btn-focus-bg-shade-amount),\n shade-color($value, $btn-active-bg-shade-amount),\n shade-color($value, 70%),\n shade-color($value, 70%),\n shade-color($value, 70%)\n );\n }\n }\n}\n\n// scss-docs-end btn-outline-variant-loop\n\n//\n// Link buttons\n//\n\n// Make a button look and behave like a link\n.btn-link {\n --#{$prefix}btn-font-weight: #{$font-weight-medium};\n --#{$prefix}btn-color: #{$btn-link-color};\n --#{$prefix}btn-hover-color: #{$btn-link-hover-color};\n --#{$prefix}btn-hover-bg: #{$btn-link-hover-bg};\n --#{$prefix}btn-focus-color: #{$btn-link-focus-color};\n --#{$prefix}btn-active-color: #{$btn-link-active-color};\n --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};\n --#{$prefix}btn-box-shadow: none;\n\n text-decoration: $link-decoration;\n box-shadow: var(--#{$prefix}btn-box-shadow);\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n text-decoration: $link-hover-decoration;\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n color: var(--#{$prefix}btn-focus-color);\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n color: var(--#{$prefix}btn-active-color);\n box-shadow: var(--#{$prefix}btn-box-shadow);\n\n &:focus {\n color: var(--#{$prefix}btn-focus-color);\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n}\n\n.btn-tertiary {\n --#{$prefix}btn-font-weight: #{$font-weight-medium};\n --#{$prefix}btn-color: #{$btn-link-color};\n --#{$prefix}btn-hover-color: #{$btn-link-hover-color};\n --#{$prefix}btn-hover-bg: transparent;\n --#{$prefix}btn-focus-color: #{$btn-link-focus-color};\n --#{$prefix}btn-active-color: #{$btn-link-active-color};\n --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};\n --#{$prefix}btn-box-shadow: none;\n\n padding-left: 0px;\n padding-right: 0px;\n text-decoration: $link-decoration;\n box-shadow: var(--#{$prefix}btn-box-shadow);\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n text-decoration: $link-hover-decoration;\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n color: var(--#{$prefix}btn-focus-color);\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n color: var(--#{$prefix}btn-active-color);\n box-shadow: var(--#{$prefix}btn-box-shadow);\n\n &:focus {\n color: var(--#{$prefix}btn-focus-color);\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: var(--#{$prefix}btn-box-shadow);\n }\n}\n\n[data-mdb-theme='dark'] .btn-secondary {\n --#{$prefix}btn-bg: #{tint-color($primary, 60%)};\n --#{$prefix}btn-hover-bg: #{tint-color($primary, 50%)};\n --#{$prefix}btn-focus-bg: #{tint-color($primary, 50%)};\n --#{$prefix}btn-active-bg: #{tint-color($primary, 50%)};\n}\n\n[data-mdb-theme='dark'] .btn-link {\n --#{$prefix}btn-color: #{$secondary};\n --#{$prefix}btn-hover-color: #{tint-color($secondary, 30%)};\n --#{$prefix}btn-hover-bg: #{shade-color($secondary, 60%)};\n --#{$prefix}btn-focus-color: #{tint-color($secondary, 30%)};\n --#{$prefix}btn-active-color: #{tint-color($secondary, 30%)};\n}\n\n[data-mdb-theme='dark'] .btn-tertiary {\n --#{$prefix}btn-color: #{$secondary};\n --#{$prefix}btn-hover-color: #{tint-color($secondary, 30%)};\n --#{$prefix}btn-focus-color: #{tint-color($secondary, 30%)};\n --#{$prefix}btn-active-color: #{tint-color($secondary, 30%)};\n}\n\n//\n// Button Sizes\n//\n\n.btn-lg {\n @include button-size(\n $btn-padding-top-lg,\n $btn-padding-bottom-lg,\n $btn-padding-x-lg,\n $btn-font-size-lg,\n $btn-line-height-lg\n );\n}\n\n.btn-sm {\n @include button-size(\n $btn-padding-top-sm,\n $btn-padding-bottom-sm,\n $btn-padding-x-sm,\n $btn-font-size-sm,\n $btn-line-height-sm\n );\n}\n\n//\n// Rounded option\n//\n\n.btn-rounded {\n --#{$prefix}btn-border-radius: #{$btn-rounded-border-radius};\n\n border-radius: var(--#{$prefix}btn-border-radius);\n}\n\n//\n// Floating option\n//\n\n.btn-floating,\n[class*='btn-outline-'].btn-floating {\n --#{$prefix}btn-border-radius: #{$btn-floating-border-radius};\n\n border-radius: var(--#{$prefix}btn-border-radius);\n padding: 0;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.btn-floating {\n --#{$prefix}btn-width: #{$btn-floating-width};\n --#{$prefix}btn-height: #{$btn-floating-height};\n --#{$prefix}btn-icon-width: #{$btn-floating-icon-width};\n --#{$prefix}btn-icon-line-height: #{$btn-floating-icon-line-height};\n --#{$prefix}btn-width-lg: #{$btn-floating-width-lg};\n --#{$prefix}btn-height-lg: #{$btn-floating-height-lg};\n --#{$prefix}btn-icon-width-lg: #{$btn-floating-icon-width-lg};\n --#{$prefix}btn-icon-line-height-lg: #{$btn-floating-icon-line-height-lg};\n --#{$prefix}btn-width-sm: #{$btn-floating-width-sm};\n --#{$prefix}btn-height-sm: #{$btn-floating-height-sm};\n --#{$prefix}btn-icon-width-sm: #{$btn-floating-icon-width-sm};\n --#{$prefix}btn-icon-line-height-sm: #{$btn-floating-icon-line-height-sm};\n\n width: var(--#{$prefix}btn-width);\n height: var(--#{$prefix}btn-height);\n\n .fas,\n .far,\n .fab {\n width: var(--#{$prefix}btn-icon-width);\n line-height: var(--#{$prefix}btn-icon-line-height);\n }\n\n &.btn-lg {\n width: var(--#{$prefix}btn-width-lg);\n height: var(--#{$prefix}btn-height-lg);\n\n .fas,\n .far,\n .fab {\n width: var(--#{$prefix}btn-icon-width-lg);\n line-height: var(--#{$prefix}btn-icon-line-height-lg);\n }\n }\n\n &.btn-sm {\n width: var(--#{$prefix}btn-width-sm);\n height: var(--#{$prefix}btn-height-sm);\n\n .fas,\n .far,\n .fab {\n width: var(--#{$prefix}btn-icon-width-sm);\n line-height: var(--#{$prefix}btn-icon-line-height-sm);\n }\n }\n}\n\n[class*='btn-outline-'].btn-floating {\n --#{$prefix}btn-icon-width: #{$btn-outline-floating-icon-width};\n --#{$prefix}btn-icon-width-lg: #{$btn-outline-floating-icon-width-lg};\n --#{$prefix}btn-icon-width-sm: #{$btn-outline-floating-icon-width-sm};\n --#{$prefix}btn-icon-line-height: #{$btn-outline-floating-icon-line-height};\n --#{$prefix}btn-icon-line-height-lg: #{$btn-outline-floating-icon-line-height-lg};\n --#{$prefix}btn-icon-line-height-sm: #{$btn-outline-floating-icon-line-height-sm};\n\n .fas,\n .far,\n .fab {\n width: var(--#{$prefix}btn-icon-width);\n line-height: var(--#{$prefix}btn-icon-line-height);\n }\n\n &.btn-lg {\n .fas,\n .far,\n .fab {\n width: var(--#{$prefix}btn-icon-width-lg);\n line-height: var(--#{$prefix}btn-icon-line-height-lg);\n }\n }\n\n &.btn-sm {\n .fas,\n .far,\n .fab {\n width: var(--#{$prefix}btn-icon-width-sm);\n line-height: var(--#{$prefix}btn-icon-line-height-sm);\n }\n }\n}\n\n//\n// Fixed option\n//\n\n.fixed-action-btn {\n --#{$prefix}btn-right: #{$fixed-action-btn-right};\n --#{$prefix}btn-bottom: #{$fixed-action-btn-bottom};\n --#{$prefix}btn-zindex: #{$fixed-action-button-zindex};\n --#{$prefix}btn-padding-top: #{$fixed-action-btn-padding-top};\n --#{$prefix}btn-padding-bottom: #{$fixed-action-btn-padding-bottom};\n --#{$prefix}btn-padding-x: #{$fixed-action-btn-padding-x};\n --#{$prefix}btn-margin-bottom: #{$fixed-action-btn-li-margin-bottom};\n\n position: fixed;\n right: var(--#{$prefix}btn-right);\n bottom: var(--#{$prefix}btn-bottom);\n z-index: var(--#{$prefix}btn-zindex);\n display: flex;\n flex-flow: column-reverse nowrap;\n align-items: center;\n padding: var(--#{$prefix}btn-padding-top) var(--#{$prefix}btn-padding-x)\n var(--#{$prefix}btn-padding-bottom);\n margin-bottom: 0;\n height: auto;\n overflow: hidden;\n\n & > .btn-floating {\n position: relative;\n transform: scale(1.2);\n z-index: 10;\n }\n\n ul {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n margin-bottom: 0;\n text-align: center;\n opacity: 0;\n transition: transform 0.4s, opacity 0.4s;\n z-index: -1;\n\n li {\n z-index: 0;\n display: flex;\n margin-right: auto;\n margin-bottom: var(--#{$prefix}btn-margin-bottom);\n margin-left: auto;\n\n &:first-of-type {\n margin-top: calc(var(--#{$prefix}btn-margin-bottom) * 0.5);\n }\n }\n\n a {\n &.btn {\n opacity: 0;\n transition: opacity 0.4s ease-in;\n\n &.shown {\n opacity: 1;\n }\n }\n }\n }\n\n &.active ul {\n opacity: 1;\n }\n}\n\n//\n// Button block\n//\n\n.btn-block {\n --#{$prefix}btn-margin-top: #{$btn-block-margin-top};\n\n display: block;\n width: 100%;\n\n // Vertically space out multiple block buttons\n + .btn-block {\n margin-top: var(--#{$prefix}btn-margin-top);\n }\n}\n","// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for all buttons\n\n// scss-docs-start btn-variant-mixin\n@mixin button-variant(\n $background,\n $border,\n $color: color-contrast($background),\n $shadow: $btn-contextual-box-shadow\n if(\n $color == $color-contrast-light,\n shade-color($background, $btn-hover-bg-shade-amount),\n tint-color($background, $btn-hover-bg-tint-amount)\n ),\n $hover-background:\n if(\n $color == $color-contrast-light,\n shade-color($background, $btn-hover-bg-shade-amount),\n tint-color($background, $btn-hover-bg-tint-amount)\n ),\n $hover-border:\n if(\n $color == $color-contrast-light,\n shade-color($border, $btn-hover-border-shade-amount),\n tint-color($border, $btn-hover-border-tint-amount)\n ),\n $hover-color: $color,\n $focus-background:\n if(\n $color == $color-contrast-light,\n shade-color($background, $btn-focus-bg-shade-amount),\n tint-color($background, $btn-focus-bg-tint-amount)\n ),\n $focus-color: $color,\n $active-border:\n if(\n $color == $color-contrast-light,\n shade-color($border, $btn-active-border-shade-amount),\n tint-color($border, $btn-active-border-tint-amount)\n ),\n $active-background:\n if(\n $color == $color-contrast-light,\n shade-color($background, $btn-active-bg-shade-amount),\n tint-color($background, $btn-active-bg-tint-amount)\n ),\n $active-color: $color\n) {\n --#{$prefix}btn-bg: #{$background};\n --#{$prefix}btn-color: #{$color};\n --#{$prefix}btn-box-shadow: #{$shadow};\n --#{$prefix}btn-hover-bg: #{$hover-background};\n --#{$prefix}btn-hover-color: #{$hover-color};\n --#{$prefix}btn-focus-bg: #{$focus-background};\n --#{$prefix}btn-focus-color: #{$focus-color};\n --#{$prefix}btn-active-bg: #{$active-background};\n --#{$prefix}btn-active-color: #{$active-color};\n}\n// scss-docs-end btn-variant-mixin\n\n// scss-docs-start btn-outline-variant-mixin\n@mixin button-outline-variant(\n $color,\n $hover-color,\n $focus-color,\n $active-color,\n $hover-background: tint-color($color, $btn-outline-hover-bg-tint-amount),\n $focus-background: tint-color($color, $btn-outline-focus-bg-tint-amount),\n $active-background: tint-color($color, $btn-outline-active-bg-tint-amount)\n) {\n --#{$prefix}btn-bg: transparent;\n --#{$prefix}btn-color: #{$color};\n --#{$prefix}btn-hover-bg: #{$hover-background};\n --#{$prefix}btn-hover-color: #{$hover-color};\n --#{$prefix}btn-focus-bg: #{$focus-background};\n --#{$prefix}btn-focus-color: #{$focus-color};\n --#{$prefix}btn-active-bg: #{$active-background};\n --#{$prefix}btn-active-color: #{$active-color};\n}\n// scss-docs-end btn-outline-variant-mixin\n\n// scss-docs-start btn-size-mixin\n@mixin button-size($padding-top, $padding-bottom, $padding-x, $font-size, $line-height) {\n --#{$prefix}btn-padding-top: #{$padding-top};\n --#{$prefix}btn-padding-bottom: #{$padding-bottom};\n --#{$prefix}btn-padding-x: #{$padding-x};\n @include rfs($font-size, --#{$prefix}btn-font-size);\n --#{$prefix}btn-line-height: #{$line-height};\n}\n// scss-docs-end btn-size-mixin\n\n// Button size variant outline\n@mixin button-outline-size($padding-top, $padding-bottom, $padding-x, $font-size, $line-height) {\n --#{$prefix}btn-padding-top: #{$padding-top};\n --#{$prefix}btn-padding-bottom: #{$padding-bottom};\n --#{$prefix}btn-padding-x: #{$padding-x};\n @include rfs($font-size, --#{$prefix}btn-font-size);\n --#{$prefix}btn-line-height: #{$line-height};\n}\n","// To be removed\n\nhr.divider-horizontal:not([size]) {\n height: 2px;\n}\n\n.divider-horizontal {\n opacity: 1;\n background-color: #f5f5f5;\n height: 2px;\n}\n\n.divider-vertical {\n opacity: 1;\n background-color: #f5f5f5;\n display: inline-block;\n width: 2px;\n margin: 0 1rem;\n}\n\nhr.divider-horizontal-blurry {\n background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent);\n background-color: transparent;\n}\n\nhr.divider-vertical-blurry {\n background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent);\n background-color: transparent;\n width: 1px;\n top: 0;\n right: 0;\n}\n","//\n// Dropdown styles\n//\n\n.dropdown-menu {\n --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};\n\n color: var(--#{$prefix}dropdown-color);\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n border: 0;\n box-shadow: var(--#{$prefix}dropdown-box-shadow);\n font-size: var(--#{$prefix}dropdown-font-size);\n top: 100%;\n left: 0;\n margin-top: var(--#{$prefix}dropdown-spacer);\n\n > li {\n border-radius: 0;\n &:first-child {\n border-top-left-radius: var(--#{$prefix}dropdown-item-border-radius);\n border-top-right-radius: var(--#{$prefix}dropdown-item-border-radius);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n .dropdown-item {\n border-top-left-radius: var(--#{$prefix}dropdown-item-border-radius);\n border-top-right-radius: var(--#{$prefix}dropdown-item-border-radius);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n &:not(:first-child):not(:last-child) {\n .dropdown-item {\n border-radius: 0;\n }\n }\n\n &:last-child {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: var(--#{$prefix}dropdown-item-border-radius);\n border-bottom-right-radius: var(--#{$prefix}dropdown-item-border-radius);\n .dropdown-item {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: var(--#{$prefix}dropdown-item-border-radius);\n border-bottom-right-radius: var(--#{$prefix}dropdown-item-border-radius);\n }\n }\n }\n\n &.animation {\n --#{$prefix}dropdown-menu-animated-animation-duration: #{$dropdown-menu-animated-animation-duration};\n --#{$prefix}dropdown-menu-animated-animation-timing-function: #{$dropdown-menu-animated-animation-timing-function};\n\n display: block;\n /* Speed up animations */\n animation-duration: var(--#{$prefix}dropdown-menu-animated-animation-duration);\n animation-timing-function: var(--#{$prefix}dropdown-menu-animated-animation-timing-function);\n }\n}\n\n.dropdown-item {\n --#{$prefix}dropdown-state-color: #{$dropdown-state-color};\n --#{$prefix}dropdown-state-background-color: #{$dropdown-state-background-color};\n\n padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);\n color: var(--#{$prefix}dropdown-color);\n border-radius: 0;\n\n &:hover,\n &:focus {\n color: var(--#{$prefix}dropdown-state-color);\n background-color: var(--#{$prefix}dropdown-state-background-color);\n }\n\n &.active,\n &:active {\n color: var(--#{$prefix}dropdown-state-color);\n background-color: var(--#{$prefix}dropdown-state-background-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hidden-arrow {\n &.dropdown-toggle:after {\n display: none;\n }\n}\n\n.animation {\n animation-duration: 1s;\n animation-fill-mode: both;\n padding: auto;\n}\n\n@media (prefers-reduced-motion) {\n .animation {\n transition: none !important;\n animation: unset !important;\n }\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.fade-in {\n animation-name: fade-in;\n}\n\n@keyframes fade-out {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.fade-out {\n animation-name: fade-out;\n}\n\n.dropdown-divider {\n --#{$prefix}dropdown-divider-border-top-width: #{$dropdown-divider-border-top-width};\n --#{$prefix}dropdown-divider-border-top-bg: #{$dropdown-divider-bg};\n\n border-top: var(--#{$prefix}dropdown-divider-border-top-width) solid\n var(--#{$prefix}dropdown-divider-border-top-bg);\n opacity: 1;\n}\n\n.dropdown-menu {\n INPUT:not(:-webkit-autofill),\n SELECT:not(:-webkit-autofill),\n TEXTAREA:not(:-webkit-autofill) {\n animation-name: none !important;\n }\n}\n","//\n// Button group styles\n//\n\n.btn-group,\n.btn-group-vertical {\n --#{$prefix}btn-box-shadow: #{$btn-box-shadow};\n --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};\n --#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};\n --#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};\n --#{$prefix}btn-group-transition: #{$btn-group-transition};\n\n box-shadow: var(--#{$prefix}btn-box-shadow);\n transition: var(--#{$prefix}btn-group-transition);\n\n &:hover {\n box-shadow: var(--#{$prefix}btn-hover-box-shadow);\n }\n\n &:focus,\n &.focus {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n\n &:active,\n &.active {\n box-shadow: var(--#{$prefix}btn-active-box-shadow);\n\n &:focus {\n box-shadow: var(--#{$prefix}btn-focus-box-shadow);\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: var(--#{$prefix}btn-box-shadow);\n border: 0;\n }\n\n > .btn {\n box-shadow: none;\n\n :not(.btn-check) + &:hover,\n &:first-child:hover,\n &:focus-visible,\n &:hover {\n box-shadow: none !important;\n }\n\n .btn-check:focus-visible + &,\n .btn-check:focus + &,\n &:focus {\n box-shadow: none;\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n &.show {\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n }\n\n &:disabled,\n &.disabled,\n fieldset:disabled & {\n box-shadow: none;\n }\n }\n\n > .btn-group {\n box-shadow: none;\n }\n\n > .btn-link,\n > .btn-tertiary {\n &:first-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:last-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n}\n\n.btn-group,\n.btn-group-lg > .btn,\n.btn-group-sm > .btn {\n --#{$prefix}btn-border-radius: #{$btn-border-radius};\n\n border-radius: var(--#{$prefix}btn-border-radius);\n}\n","//\n// Navs styles\n//\n\n//\n// Tabs styles\n//\n\n.nav-tabs {\n border-bottom: 0;\n\n .nav-link {\n --#{$prefix}nav-tabs-link-font-weight: #{$nav-tabs-link-font-weight};\n --#{$prefix}nav-tabs-link-font-size: #{$nav-tabs-link-font-size};\n --#{$prefix}nav-tabs-link-color: #{$nav-tabs-link-color};\n --#{$prefix}nav-tabs-link-padding-top: #{$nav-tabs-link-padding-top};\n --#{$prefix}nav-tabs-link-padding-bottom: #{$nav-tabs-link-padding-bottom};\n --#{$prefix}nav-tabs-link-padding-x: #{$nav-tabs-link-padding-x};\n --#{$prefix}nav-tabs-link-hover-bgc: #{$nav-tabs-link-hover-bgc};\n --#{$prefix}nav-tabs-link-border-bottom-width: #{$nav-tabs-link-border-bottom-width};\n --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};\n --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};\n border-width: 0;\n border-bottom: var(--#{$prefix}nav-tabs-link-border-bottom-width) solid transparent;\n border-radius: 0;\n text-transform: uppercase;\n line-height: 1;\n font-weight: var(--#{$prefix}nav-tabs-link-font-weight);\n font-size: var(--#{$prefix}nav-tabs-link-font-size);\n color: var(--#{$prefix}nav-tabs-link-color);\n padding: var(--#{$prefix}nav-tabs-link-padding-top) var(--#{$prefix}nav-tabs-link-padding-x)\n var(--#{$prefix}nav-tabs-link-padding-bottom) var(--#{$prefix}nav-tabs-link-padding-x);\n\n &:hover {\n background-color: var(--#{$prefix}nav-tabs-link-hover-bgc);\n border-color: transparent;\n }\n\n &:focus {\n border-color: transparent;\n }\n }\n\n .nav-link.active,\n .nav-item.show .nav-link {\n color: var(--#{$prefix}nav-tabs-link-active-color);\n border-color: var(--#{$prefix}nav-tabs-link-active-border-color);\n }\n}\n\n//\n// Pills styles\n//\n\n.nav-pills {\n margin-left: -$nav-pills-margin;\n\n .nav-link {\n --#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};\n --#{$prefix}nav-pills-link-font-size: #{$nav-pills-link-font-size};\n --#{$prefix}nav-pills-link-padding-top: #{$nav-pills-link-padding-top};\n --#{$prefix}nav-pills-link-padding-bottom: #{$nav-pills-link-padding-bottom};\n --#{$prefix}nav-pills-link-padding-x: #{$nav-pills-link-padding-x};\n --#{$prefix}nav-pills-link-line-height: #{$nav-pills-link-line-height};\n --#{$prefix}nav-pills-link-hover-bg: #{$nav-pills-link-hover-bg};\n --#{$prefix}nav-pills-link-font-weight: #{$nav-pills-link-font-weight};\n --#{$prefix}nav-pills-link-color: #{$nav-pills-link-color};\n --#{$prefix}nav-pills-margin: #{$nav-pills-margin};\n\n border-radius: var(--#{$prefix}nav-pills-link-border-radius);\n font-size: var(--#{$prefix}nav-pills-link-font-size);\n text-transform: uppercase;\n padding: var(--#{$prefix}nav-pills-link-padding-top) var(--#{$prefix}nav-pills-link-padding-x)\n var(--#{$prefix}nav-pills-link-padding-bottom) var(--#{$prefix}nav-pills-link-padding-x);\n line-height: var(--#{$prefix}nav-pills-link-line-height);\n background-color: var(--#{$prefix}nav-pills-link-hover-bg);\n font-weight: var(--#{$prefix}nav-pills-link-font-weight);\n color: var(--#{$prefix}nav-pills-link-color);\n margin: var(--#{$prefix}nav-pills-margin);\n }\n\n .nav-link.active,\n .show > .nav-link {\n --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};\n --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};\n\n background-color: var(--#{$prefix}nav-pills-link-active-bg);\n color: var(--#{$prefix}nav-pills-link-active-color);\n }\n}\n\n// Fix for keeping margins of pills\n.nav-fill,\n.nav-justified {\n .nav-item {\n .nav-link {\n width: auto;\n }\n }\n}\n","//\n// Navbar styles\n//\n\n.navbar {\n --#{$prefix}navbar-box-shadow: #{$navbar-box-shadow};\n --#{$prefix}navbar-padding-top: #{$navbar-padding-top};\n --#{$prefix}navbar-brand-img-margin-right: #{$navbar-brand-img-margin-right};\n\n box-shadow: var(--#{$prefix}navbar-box-shadow);\n padding-top: var(--#{$prefix}navbar-padding-top);\n}\n\n.navbar-toggler {\n border: 0;\n\n &:focus {\n box-shadow: none;\n }\n}\n\n.navbar-dark .navbar-toggler,\n.navbar-light .navbar-toggler {\n border: 0;\n}\n\n.navbar-brand {\n display: flex;\n align-items: center;\n img {\n margin-right: var(--#{$prefix}navbar-brand-img-margin-right);\n }\n}\n\n.navbar-nav .dropdown-menu {\n position: absolute;\n}\n\n// Navbar themes\n.navbar-light {\n .navbar-toggler-icon {\n background-image: none;\n }\n}\n\n.navbar-dark {\n .navbar-toggler-icon {\n background-image: none;\n }\n}\n\n.navbar-dark,\n.navbar[data-mdb-theme='dark'] {\n // scss-docs-start navbar-dark-css-vars\n --#{$prefix}navbar-color: #{$navbar-dark-color};\n --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};\n --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};\n --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};\n --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};\n --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};\n --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};\n --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};\n // scss-docs-end navbar-dark-css-vars\n}\n","//\n// Card styles\n//\n\n.card {\n border: 0;\n\n .bg-image {\n border-top-left-radius: var(--#{$prefix}card-border-radius);\n border-top-right-radius: var(--#{$prefix}card-border-radius);\n }\n\n &[class*='bg-'] {\n .card-header {\n --#{$prefix}card-header-border-bottom-color: #{$card-border-color};\n\n border-bottom-color: var(--#{$prefix}card-header-border-bottom-color);\n }\n .card-footer {\n --#{$prefix}card-footer-border-top-color: #{$card-border-color};\n\n border-top-color: var(--#{$prefix}card-footer-border-top-color);\n }\n }\n}\n\n.card-header {\n --#{$prefix}card-header-border-width: #{$card-header-border-width};\n --#{$prefix}card-header-border-color: #{$card-header-border-color};\n\n border-bottom: var(--#{$prefix}card-header-border-width) solid\n var(--#{$prefix}card-header-border-color);\n}\n\n.card-body {\n &[class*='bg-'] {\n border-bottom-left-radius: var(--#{$prefix}card-border-radius);\n border-bottom-right-radius: var(--#{$prefix}card-border-radius);\n }\n}\n\n.card-footer {\n --#{$prefix}card-footer-border-color: #{$card-footer-border-color};\n --#{$prefix}card-footer-border-width: #{$card-footer-border-width};\n\n border-top: var(--#{$prefix}card-footer-border-width) solid\n var(--#{$prefix}card-footer-border-color);\n}\n\n.card-img-left {\n border-top-left-radius: var(--#{$prefix}card-border-radius);\n border-bottom-left-radius: var(--#{$prefix}card-border-radius);\n}\n","//\n// Breadcrumb styles\n//\n\n.navbar {\n .breadcrumb {\n // scss-docs-start breadcrumb-css-vars\n --#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color};\n --#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color};\n --#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color};\n --#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition};\n // scss-docs-end breadcrumb-css-vars\n\n background-color: transparent;\n margin-bottom: 0;\n\n .breadcrumb-item {\n a {\n color: var(--#{$prefix}breadcrumb-item-color);\n transition: var(--#{$prefix}breadcrumb-item-transition);\n\n &:hover,\n &:focus {\n color: var(--#{$prefix}breadcrumb-item-hover-color);\n }\n }\n\n + .breadcrumb-item {\n &:before {\n color: var(--#{$prefix}breadcrumb-item-before-color);\n }\n }\n }\n }\n}\n","//\n// Pagination styles\n//\n\n.pagination {\n // scss-docs-start pagination-css-vars\n --#{$prefix}pagination-border-radius: #{$pagination-border-radius};\n --#{$prefix}pagination-active-transition: #{$pagination-active-transition};\n --#{$prefix}pagination-active-font-weight: #{$pagination-active-font-weight};\n --#{$prefix}pagination-circle-border-radius: #{$pagination-circle-border-radius};\n --#{$prefix}pagination-circle-padding-x: #{$pagination-circle-padding-x};\n --#{$prefix}pagination-circle-padding-l-lg: #{$pagination-circle-lg-padding-left};\n --#{$prefix}pagination-circle-padding-r-lg: #{$pagination-circle-lg-padding-right};\n --#{$prefix}pagination-circle-padding-l-sm: #{$pagination-circle-sm-padding-left};\n --#{$prefix}pagination-circle-padding-r-sm: #{$pagination-circle-sm-padding-right};\n // scss-docs-end pagination-css-vars\n}\n\n.page-link {\n background-color: transparent;\n border: 0;\n outline: 0;\n border-radius: var(--#{$prefix}pagination-border-radius);\n\n &:focus {\n box-shadow: none;\n }\n\n &.active,\n .active > & {\n border: 0;\n transition: var(--#{$prefix}pagination-active-transition);\n font-weight: var(--#{$prefix}pagination-active-font-weight);\n }\n}\n\n.page-item {\n &:not(:first-child) {\n .page-link {\n margin-left: 0;\n }\n }\n\n &:first-child {\n .page-link {\n border-top-left-radius: var(--#{$prefix}pagination-border-radius);\n border-bottom-left-radius: var(--#{$prefix}pagination-border-radius);\n }\n }\n\n &:last-child {\n .page-link {\n border-top-right-radius: var(--#{$prefix}pagination-border-radius);\n border-bottom-right-radius: var(--#{$prefix}pagination-border-radius);\n }\n }\n}\n\n//\n// Pagination circle option\n//\n\n.pagination-circle {\n .page-item {\n &:first-child {\n .page-link {\n border-radius: var(--#{$prefix}pagination-circle-border-radius);\n }\n }\n\n &:last-child {\n .page-link {\n border-radius: var(--#{$prefix}pagination-circle-border-radius);\n }\n }\n }\n\n .page-link {\n border-radius: var(--#{$prefix}pagination-circle-border-radius);\n padding-left: var(--#{$prefix}pagination-circle-padding-x);\n padding-right: var(--#{$prefix}pagination-circle-padding-x);\n }\n\n &.pagination-lg {\n .page-link {\n padding-left: var(--#{$prefix}pagination-circle-padding-l-lg);\n padding-right: var(--#{$prefix}pagination-circle-padding-r-lg);\n }\n }\n\n &.pagination-sm {\n .page-link {\n padding-left: var(--#{$prefix}pagination-circle-padding-l-sm);\n padding-right: var(--#{$prefix}pagination-circle-padding-r-sm);\n }\n }\n}\n","//\n// Badge styles\n//\n// Additional badge options tailored to the MDB style\n\n// A \"dot\" badge, which is useful, for example, for icons\n.badge-dot {\n --#{$prefix}badge-border-radius: #{$badge-dot-border-radius};\n --#{$prefix}badge-height: #{$badge-dot-height};\n --#{$prefix}badge-width: #{$badge-dot-width};\n --#{$prefix}badge-margin-left: #{$badge-dot-margin-left};\n\n position: absolute;\n min-width: 0;\n width: var(--#{$prefix}badge-width);\n height: var(--#{$prefix}badge-height);\n border-radius: var(--#{$prefix}badge-border-radius);\n padding: 0;\n margin-left: var(--#{$prefix}badge-margin-left);\n\n &:empty {\n display: inline-block;\n }\n}\n\n// \"Notification\" badge that shows the number of notifications, e.g. the number of unread messages\n.badge-notification {\n --#{$prefix}badge-font-size: #{$badge-notification-font-size};\n --#{$prefix}badge-padding-x: #{$badge-notification-padding-x};\n --#{$prefix}badge-padding-y: #{$badge-notification-padding-y};\n --#{$prefix}badge-margin-top: #{$badge-notification-margin-top};\n --#{$prefix}badge-margin-left: #{$badge-notification-margin-left};\n\n position: absolute;\n font-size: var(--#{$prefix}badge-font-size);\n padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);\n margin-top: var(--#{$prefix}badge-margin-top);\n margin-left: var(--#{$prefix}badge-margin-left);\n}\n\n// Contextual colors options\n@each $color, $value in $theme-colors {\n .badge-#{$color} {\n background-color: var(--#{$prefix}#{$color}-bg-subtle);\n color: var(--#{$prefix}#{$color}-text-emphasis);\n\n i {\n color: var(--#{$prefix}#{$color}-text-emphasis);\n }\n }\n}\n","// Alert\n\n.alert {\n border: 0;\n}\n\n.alert-absolute {\n position: absolute;\n}\n\n.alert-fixed {\n --#{$prefix}alert-fixed-z-index: #{$alert-zindex};\n\n position: fixed;\n z-index: var(--#{$prefix}alert-fixed-z-index);\n}\n\n.parent-alert-relative {\n position: relative;\n}\n\n@each $color, $value in $theme-colors {\n .alert-#{$color} {\n background-color: var(--#{$prefix}#{$color}-bg-subtle);\n color: var(--#{$prefix}#{$color}-text-emphasis);\n\n i {\n color: var(--#{$prefix}#{$color}-text-emphasis);\n }\n\n .alert-link {\n color: var(--#{$prefix}#{$color}-text-emphasis);\n\n &:hover {\n color: rgba(var(--#{$prefix}#{$color}-text-emphasis), var(--#{$prefix}text-hover-opacity));\n }\n }\n }\n}\n","// Progress\n\n.progress {\n border-radius: 0;\n box-shadow: none;\n}\n","//\n// List group styles\n//\n\n.list-group {\n --#{$prefix}list-group-item-transition-time: #{$list-group-item-transition-time};\n}\n\n.list-group-item-action {\n transition: var(--#{$prefix}list-group-item-transition-time);\n\n // Hover state\n &:hover {\n transition: var(--#{$prefix}list-group-item-transition-time);\n }\n}\n\n.list-group-light {\n --#{$prefix}list-group-light-item-py: #{$list-group-light-item-py};\n --#{$prefix}list-group-light-item-border: #{$list-group-light-item-border};\n --#{$prefix}list-group-light-item-border-width: #{$list-group-light-item-border-width};\n --#{$prefix}list-group-light-active-border-radius: #{$list-group-light-active-border-radius};\n --#{$prefix}list-group-light-active-bg: #{$list-group-light-active-bg};\n --#{$prefix}list-group-light-active-color: #{$list-group-light-active-color};\n\n .list-group-item {\n padding: var(--#{$prefix}list-group-light-item-py) 0;\n border: var(--#{$prefix}list-group-light-item-border);\n }\n > .list-group-item {\n border-width: 0 0 var(--#{$prefix}list-group-light-item-border-width);\n &:last-of-type {\n border: none;\n }\n }\n .active {\n border: none;\n border-radius: var(--#{$prefix}list-group-light-active-border-radius);\n background-color: var(--#{$prefix}list-group-light-active-bg);\n color: var(--#{$prefix}list-group-light-active-color);\n }\n .list-group-item-action {\n &:hover {\n border-radius: var(--#{$prefix}list-group-light-active-border-radius);\n }\n &:focus {\n border-radius: var(--#{$prefix}list-group-light-active-border-radius);\n }\n }\n}\n\n.list-group-small {\n --#{$prefix}list-group-small-item-py: #{$list-group-small-item-py};\n .list-group-item {\n padding: var(--#{$prefix}list-group-small-item-py) 0;\n }\n}\n\n@each $color, $value in $theme-colors {\n .list-group-item-#{$color} {\n background-color: var(--#{$prefix}#{$color}-bg-subtle);\n color: var(--#{$prefix}#{$color}-text-emphasis);\n\n i {\n color: var(--#{$prefix}#{$color}-link-emphasis);\n }\n }\n}\n","// transparent background and border properties included for button version.\n// iOS requires the button element instead of an anchor tag.\n// If you want the anchor version, it requires `href=\"#\"`.\n// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n\n.btn-close {\n &:focus {\n box-shadow: none;\n }\n}\n","//\n// Modal styles\n//\n\n.modal-content {\n // scss-docs-start modal-css-vars\n --#{$prefix}modal-box-shadow: #{$modal-box-shadow};\n // scss-docs-end modal-css-vars\n\n border: 0;\n box-shadow: var(--#{$prefix}modal-box-shadow);\n}\n","//\n// Toast styles\n//\n\n.toast {\n // scss-docs-start toast-css-vars\n --#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};\n --#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};\n --#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};\n --#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};\n --#{$prefix}toast-bg: #{$toast-background-color};\n --#{$prefix}toast-header-bg: #{$toast-header-background-color};\n // scss-docs-end toast-css-vars\n\n border: 0;\n\n .btn-close {\n width: var(--#{$prefix}toast-btn-close-width);\n }\n}\n\n.toast-header {\n border-bottom-width: var(--#{$prefix}toast-border-bottom-width);\n\n .btn-close {\n margin-right: var(--#{$prefix}toast-btn-close-mr);\n margin-left: var(--#{$prefix}toast-btn-close-ml);\n }\n}\n\n.parent-toast-relative {\n position: relative;\n}\n\n.toast-absolute {\n position: absolute;\n}\n\n.toast-fixed {\n position: fixed;\n z-index: var(--#{$prefix}toast-zindex);\n}\n\n@each $color, $value in $theme-colors {\n .toast-#{$color} {\n background-color: var(--#{$prefix}#{$color}-bg-subtle);\n color: var(--#{$prefix}#{$color}-text-emphasis);\n border-color: var(--#{$prefix}#{$color}-border-subtle);\n\n i {\n color: var(--#{$prefix}#{$color}-text-emphasis);\n }\n }\n}\n","// Tooltip\n\n.tooltip {\n --#{$prefix}tooltip-font-size: #{$tooltip-font-size};\n\n &.show {\n opacity: 1;\n }\n\n .tooltip-arrow {\n display: none;\n }\n}\n\n.tooltip-inner {\n font-size: var(--#{$prefix}tooltip-font-size);\n}\n","//\n// Popover styles\n//\n\n.popover {\n // scss-docs-start popover-css-vars\n --#{$prefix}popover-border-bottom-width: #{$popover-border-bottom-width};\n // scss-docs-end popover-css-vars\n\n .popover-arrow {\n display: none;\n }\n}\n\n.popover-header {\n border-bottom: var(--#{$prefix}popover-border-bottom-width) solid\n var(--#{$prefix}popover-border-color);\n}\n","// Scrollspy\n\n.nav-pills {\n &.menu-sidebar {\n .nav-link {\n --#{$prefix}scrollspy-menu-sidebar-font-size: #{$scrollspy-menu-sidebar-font-size};\n --#{$prefix}scrollspy-menu-sidebar-color: #{$scrollspy-menu-sidebar-color};\n --#{$prefix}scrollspy-menu-sidebar-line-height: #{$scrollspy-menu-sidebar-line-height};\n --#{$prefix}scrollspy-menu-sidebar-padding-x: #{$scrollspy-menu-sidebar-padding-x};\n --#{$prefix}scrollspy-menu-sidebar-font-weight: #{$scrollspy-menu-sidebar-font-weight};\n --#{$prefix}scrollspy-menu-sidebar-transition: #{$scrollspy-menu-sidebar-transition};\n --#{$prefix}scrollspy-menu-sidebar-margin-y: #{$scrollspy-menu-sidebar-margin-y};\n\n font-size: var(--#{$prefix}scrollspy-menu-sidebar-font-size);\n background-color: transparent;\n color: var(--#{$prefix}scrollspy-menu-sidebar-color);\n line-height: var(--#{$prefix}scrollspy-menu-sidebar-line-height);\n padding: 0 var(--#{$prefix}scrollspy-menu-sidebar-padding-x);\n font-weight: var(--#{$prefix}scrollspy-menu-sidebar-font-weight);\n transition: var(--#{$prefix}scrollspy-menu-sidebar-transition);\n text-transform: initial;\n margin-top: var(--#{$prefix}scrollspy-menu-sidebar-margin-y);\n margin-bottom: var(--#{$prefix}scrollspy-menu-sidebar-margin-y);\n }\n\n .nav-link.active,\n .show > .nav-link {\n --#{$prefix}scrollspy-menu-sidebar-active-color: #{$scrollspy-menu-sidebar-active-color};\n --#{$prefix}scrollspy-menu-sidebar-active-font-weight: #{$scrollspy-menu-sidebar-active-font-weight};\n --#{$prefix}scrollspy-menu-sidebar-active-border-width: #{$scrollspy-menu-sidebar-active-border-width};\n --#{$prefix}scrollspy-menu-sidebar-active-border-color: #{$scrollspy-menu-sidebar-active-border-color};\n\n background-color: transparent;\n box-shadow: none;\n color: var(--#{$prefix}scrollspy-menu-sidebar-active-color);\n font-weight: var(--#{$prefix}scrollspy-menu-sidebar-active-font-weight);\n border-left: var(--#{$prefix}scrollspy-menu-sidebar-active-border-width) solid\n var(--#{$prefix}scrollspy-menu-sidebar-active-border-color);\n border-radius: 0;\n }\n\n .collapsible-scrollspy ~ .nav {\n --#{$prefix}scrollspy-collapsible-nav-transition-time: #{$scrollspy-collapsible-nav-transition-time};\n\n transition: height var(--#{$prefix}scrollspy-collapsible-nav-transition-time) ease;\n flex-wrap: nowrap;\n }\n }\n}\n",".ripple-surface {\n position: relative;\n overflow: hidden;\n display: inline-block;\n vertical-align: bottom;\n}\n\n.ripple-surface-unbound {\n overflow: visible;\n}\n\n.ripple-wave {\n --#{$prefix}ripple-wave-cubicBezier: #{$ripple-wave-cubicBezier};\n --#{$prefix}ripple-wave-border-radius: #{$ripple-wave-border-radius};\n --#{$prefix}ripple-wave-opacity: #{$ripple-wave-opacity};\n --#{$prefix}ripple-wave-transform: #{$ripple-wave-transform};\n --#{$prefix}ripple-wave-z-index: #{$ripple-wave-z-index};\n --#{$prefix}ripple-wave-active-transform: #{$ripple-wave-active-transform};\n\n @include ripple-variant(black);\n border-radius: var(--#{$prefix}ripple-wave-border-radius);\n opacity: var(--#{$prefix}ripple-wave-opacity);\n pointer-events: none;\n position: absolute;\n touch-action: none;\n transform: var(--#{$prefix}ripple-wave-transform);\n transition-property: transform, opacity;\n transition-timing-function: var(--#{$prefix}ripple-wave-cubicBezier),\n var(--#{$prefix}ripple-wave-cubicBezier);\n z-index: var(--#{$prefix}ripple-wave-z-index);\n &.active {\n transform: var(--#{$prefix}ripple-wave-active-transform);\n opacity: 0;\n }\n}\n\n.btn .ripple-wave {\n @include ripple-variant(white);\n}\n\n.input-wrapper .ripple-wave {\n @include ripple-variant(white);\n}\n\n@each $color, $value in $ripple {\n .ripple-surface-#{$color} {\n .ripple-wave {\n @include ripple-variant($value);\n }\n }\n}\n","@mixin ripple-variant($color_value) {\n $gradient: rgba(\n $color: $color_value,\n $alpha: 0.2,\n )\n 0,\n rgba(\n $color: $color_value,\n $alpha: 0.3,\n )\n 40%,\n rgba(\n $color: $color_value,\n $alpha: 0.4,\n )\n 50%,\n rgba(\n $color: $color_value,\n $alpha: 0.5,\n )\n 60%,\n rgba(\n $color: $color_value,\n $alpha: 0,\n )\n 70%;\n background-image: radial-gradient(circle, $gradient);\n}\n","// range\n.range {\n --#{$prefix}range-thumb-height: #{$range-thumb-height};\n --#{$prefix}range-thumb-width: #{$range-thumb-width};\n --#{$prefix}range-thumb-top: #{$range-thumb-top};\n --#{$prefix}range-thumb-margin-left: #{$range-thumb-margin-left};\n --#{$prefix}range-thumb-border-radius: #{$range-thumb-border-radius};\n --#{$prefix}range-thumb-transform: #{$range-thumb-transform};\n --#{$prefix}range-thumb-transition: #{$range-thumb-transition};\n --#{$prefix}range-thumb-value-font-size: #{$range-thumb-value-font-size};\n --#{$prefix}range-thumb-value-line-height: #{$range-thumb-value-line-height};\n --#{$prefix}range-thumb-value-color: #{$range-thumb-value-color};\n --#{$prefix}range-thumb-value-font-weight: #{$range-thumb-value-font-weight};\n --#{$prefix}range-thumb-background: #{$range-thumb-background};\n\n position: relative;\n\n .thumb {\n position: absolute;\n display: block;\n height: var(--#{$prefix}range-thumb-height);\n width: var(--#{$prefix}range-thumb-width);\n top: var(--#{$prefix}range-thumb-top);\n margin-left: var(--#{$prefix}range-thumb-margin-left);\n text-align: center;\n border-radius: var(--#{$prefix}range-thumb-border-radius);\n transform: var(--#{$prefix}range-thumb-transform);\n transform-origin: bottom;\n transition: var(--#{$prefix}range-thumb-transition);\n\n &:after {\n position: absolute;\n display: block;\n content: '';\n transform: translateX(-50%);\n width: 100%;\n height: 100%;\n top: 0;\n border-radius: var(--#{$prefix}range-thumb-border-radius);\n transform: rotate(-45deg);\n background: var(--#{$prefix}range-thumb-background);\n z-index: -1;\n }\n\n .thumb-value {\n display: block;\n font-size: var(--#{$prefix}range-thumb-value-font-size);\n line-height: var(--#{$prefix}range-thumb-value-line-height);\n color: var(--#{$prefix}range-thumb-value-color);\n font-weight: var(--#{$prefix}range-thumb-value-font-weight);\n z-index: 2;\n }\n\n &.thumb-active {\n transform: scale(1);\n }\n }\n}\n","// Accordion\n\n.accordion-button {\n &:not(.collapsed) {\n &:focus {\n box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);\n }\n }\n\n &:focus {\n border-color: var(--#{$prefix}accordion-btn-focus-border-color);\n outline: 0;\n box-shadow: none;\n }\n}\n\n.accordion-flush {\n --#{$prefix}accordion-flush-btn-box-shadow: #{$accordion-flush-button-box-shadow};\n --#{$prefix}accordion-flush-border-bottom: #{$accordion-flush-item-border-bottom};\n\n .accordion-button:not(.collapsed) {\n box-shadow: var(--#{$prefix}accordion-flush-btn-box-shadow);\n }\n .accordion-item {\n border-bottom: var(--#{$prefix}accordion-flush-border-bottom);\n }\n}\n\n.accordion-borderless {\n --#{$prefix}accordion-borderless-btn-border-radius: #{$accordion-borderless-button-border-radius};\n --#{$prefix}accordion-borderless-btn-bg: #{$accordion-borderless-button-bgc};\n --#{$prefix}accordion-borderless-btn-color: #{$accordion-borderless-button-color};\n\n .accordion-item {\n border: 0;\n .accordion-button {\n border-radius: var(--#{$prefix}accordion-borderless-btn-border-radius);\n &:not(.collapsed) {\n background-color: var(--#{$prefix}accordion-borderless-btn-bg);\n color: var(--#{$prefix}accordion-borderless-btn-color);\n box-shadow: none;\n }\n }\n }\n}\n","//\n// Carousel styles\n//\n\n.carousel-control-prev-icon {\n &::after {\n content: '\\f053';\n --#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};\n --#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};\n\n font-weight: var(--#{$prefix}carousel-control-icon-font-weight);\n font-size: var(--#{$prefix}carousel-control-icon-font-size);\n font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';\n }\n}\n.carousel-control-next-icon {\n &::after {\n content: '\\f054';\n --#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};\n --#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};\n\n font-weight: var(--#{$prefix}carousel-control-icon-font-weight);\n font-size: var(--#{$prefix}carousel-control-icon-font-size);\n font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';\n }\n}\n.carousel-indicators {\n [data-mdb-target] {\n @extend [data-bs-target] !optional;\n }\n}\n","@mixin mdb-core-theme($theme) {\n $background: map-get($theme, background);\n $onBackground: map-get($theme, onBackground);\n\n #{if(&, '&', 'body')} {\n background-color: $background;\n color: $onBackground;\n }\n\n .bg-body {\n background-color: $background !important;\n }\n}\n","@mixin mdb-colors-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $divider: map-get($theme, divider);\n\n .bg-primary {\n background-color: $primary !important;\n color: $onPrimary;\n }\n\n .bg-secondary {\n background-color: $secondary !important;\n color: $onSecondary;\n }\n\n .border-top,\n .border-right,\n .border-bottom,\n .border-left,\n .border {\n border-color: $divider !important;\n }\n\n .border-primary {\n border-color: $primary !important;\n }\n\n .border-secondary {\n border-color: $secondary !important;\n }\n\n a:not(.sidenav-link):not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.carousel-control-prev):not(.carousel-control-next) {\n color: lighten($primary, 20%);\n\n &:hover {\n color: lighten($primary, 15%);\n }\n }\n\n .text-primary {\n color: $primary !important;\n }\n\n .text-secondary {\n color: $secondary !important;\n }\n}\n","@mixin mdb-type-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n\n .note {\n color: $surface;\n }\n\n .note-primary {\n background-color: lighten($primary, 43%);\n border-color: $primary;\n }\n\n .note-secondary {\n background-color: lighten($secondary, 33%);\n border-color: $secondary;\n }\n}\n","@mixin mdb-alert-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n\n .alert-primary {\n --#{$prefix}alert-color: var(--#{$prefix}primary-text-emphasis);\n --#{$prefix}alert-bg: var(--#{$prefix}primary-bg-subtle);\n --#{$prefix}alert-border-color: var(--#{$prefix}primary-border-subtle);\n }\n\n .alert-secondary {\n --#{$prefix}alert-color: var(--#{$prefix}secondary-text-emphasis);\n --#{$prefix}alert-bg: var(--#{$prefix}secondary-bg-subtle);\n --#{$prefix}alert-border-color: var(--#{$prefix}secondary-border-subtle);\n }\n}\n","@mixin mdb-button-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $onLink: map-get($theme, onLink);\n\n .btn-primary {\n background-color: $primary;\n color: set-notification-text-color($primary);\n\n &:hover {\n background-color: darken($primary, 7.5%);\n color: set-notification-text-color($primary);\n }\n\n &:focus,\n &.focus {\n background-color: darken($primary, 7.5%);\n color: set-notification-text-color($primary);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n .show > &.dropdown-toggle {\n background-color: darken($primary, 20%);\n color: set-notification-text-color($primary);\n }\n\n &:disabled,\n &.disabled {\n background-color: $primary;\n color: set-notification-text-color($primary);\n }\n }\n\n .btn-secondary {\n background-color: $secondary;\n color: set-notification-text-color($secondary);\n\n &:hover {\n background-color: darken($secondary, 7.5%);\n color: set-notification-text-color($secondary);\n }\n\n &:focus,\n &.focus {\n background-color: darken($secondary, 7.5%);\n color: set-notification-text-color($secondary);\n }\n\n .btn-check:checked + &,\n .btn-check:active + &,\n &:active,\n &.active,\n .show > &.dropdown-toggle {\n background-color: darken($secondary, 20%);\n color: set-notification-text-color($secondary);\n }\n\n &:disabled,\n &.disabled {\n background-color: $secondary;\n color: set-notification-text-color($secondary);\n }\n }\n\n .btn-outline-primary {\n color: $primary;\n border-color: $primary;\n\n &:hover {\n color: $primary;\n border-color: $primary;\n }\n\n &:focus,\n &.focus {\n color: $primary;\n }\n\n &:active,\n &.active,\n &.dropdown-toggle.show {\n color: $primary;\n }\n\n &:disabled,\n &.disabled {\n color: $primary;\n }\n }\n\n .btn-outline-secondary {\n color: $secondary;\n border-color: $secondary;\n\n &:hover {\n color: $secondary;\n border-color: $secondary;\n }\n\n &:focus,\n &.focus {\n color: $secondary;\n }\n\n &:active,\n &.active,\n &.dropdown-toggle.show {\n color: $secondary;\n }\n\n &:disabled,\n &.disabled {\n color: $secondary;\n }\n }\n\n .btn-link {\n color: lighten($primary, 20%);\n\n &:hover {\n background-color: $onLink;\n color: lighten($primary, 15%);\n }\n\n &:focus,\n &.focus {\n background-color: $onLink;\n }\n\n &:active,\n &.active {\n background-color: $onLink;\n\n &:focus {\n background-color: $onLink;\n }\n }\n }\n}\n","@mixin mdb-list-group-theme($theme) {\n $primary: map-get($theme, primary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $secondary: map-get($theme, secondary);\n $onSecondary: map-get($theme, onSecondary);\n $divider: map-get($theme, divider);\n $surfaceDisabled: map-get($theme, dropdownDisabled);\n $surfaceHighlight: map-get($theme, surfaceHighlight);\n\n .list-group-item {\n background-color: $surface;\n border-color: $divider;\n\n &.active {\n background-color: $primary;\n border-color: $primary;\n }\n\n &.disabled,\n &:disabled {\n color: $surfaceDisabled;\n background-color: $surface;\n }\n }\n\n .list-group-item-action.active {\n &:hover,\n &:focus {\n background-color: $primary;\n border-color: $primary;\n }\n }\n\n .list-group-item-action {\n color: $onSurface;\n\n &:hover,\n &:focus {\n color: $onSurface;\n background: $surfaceHighlight;\n }\n\n &:active {\n color: $onSurface;\n background: $surfaceHighlight;\n }\n\n &.list-group-item-primary {\n color: lighten($primary, 25%);\n &:hover {\n color: lighten($primary, 15%);\n background-color: lighten($primary, 40%);\n }\n }\n &.list-group-item-secondary {\n &:hover {\n color: darken($secondary, 15%);\n background-color: lighten($secondary, 20%);\n }\n }\n }\n\n .list-group-item-primary {\n color: $primary;\n }\n\n .list-group-item-secondary {\n color: $secondary;\n }\n}\n","@mixin mdb-card-theme($theme) {\n $primary: map-get($theme, primary);\n $surface: map-get($theme, surface);\n $divider: map-get($theme, divider);\n $cardShadow: map-get($theme, cardShadow);\n\n .card {\n background-color: $surface;\n box-shadow: $cardShadow;\n }\n\n .card-header {\n background-color: $surface !important;\n border-bottom-color: $divider;\n }\n .card-footer {\n border-top-color: $divider;\n background-color: $surface !important;\n }\n\n .card-link {\n color: lighten($primary, 20%);\n\n &:hover {\n color: lighten($primary, 15%);\n }\n }\n}\n","@mixin mdb-modal-theme($theme) {\n $primary: map-get($theme, primary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $divider: map-get($theme, divider);\n $cardShadow: map-get($theme, dardShadow);\n $modalButtonColor: map-get($theme, modalButtonColor);\n\n .modal-content {\n background-color: $surface;\n box-shadow: $cardShadow;\n }\n .modal-header {\n border-bottom-color: $divider;\n color: $onSurface;\n }\n .modal-footer {\n border-top-color: $divider;\n }\n\n .btn-close {\n filter: $modalButtonColor;\n width: 20px;\n }\n}\n","@mixin mdb-dropdown-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $error: map-get($theme, error);\n $onError: map-get($theme, onError);\n $success: map-get($theme, success);\n $onSuccess: map-get($theme, onSuccess);\n $surfaceHover: map-get($theme, surfaceHover);\n $surfaceHighlight: map-get($theme, surfaceHighlight);\n $pickerHeader: map-get($theme, pickerHeader);\n $divider: map-get($theme, divider);\n $surfaceDisabled: map-get($theme, dropdownDisabled);\n $dropdownText: map-get($theme, dropdownText);\n $toastShadow: map-get($theme, toastShadow);\n\n .dropdown-menu {\n color: $onSurface;\n background-color: $surface;\n box-shadow: $toastShadow;\n }\n\n .dropdown-item {\n color: $onSurface;\n\n &:hover,\n &:focus {\n color: $onSurface;\n background: $surfaceHighlight;\n }\n\n &.active,\n &:active {\n color: $onSurface;\n background: $surfaceHighlight;\n }\n\n &.disabled,\n &:disabled {\n color: $surfaceDisabled;\n }\n }\n\n .dropdown-divider {\n border-color: $divider;\n }\n\n .dropdown-item-text {\n color: $dropdownText;\n }\n\n .dropdown-header {\n color: $dropdownText;\n }\n}\n","// Breadcrumb\n@mixin mdb-breadcrumb-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $error: map-get($theme, error);\n $onError: map-get($theme, onError);\n $success: map-get($theme, success);\n $onSuccess: map-get($theme, onSuccess);\n $surfaceHover: map-get($theme, surfaceHover);\n $pickerHeader: map-get($theme, pickerHeader);\n\n .navbar {\n .breadcrumb {\n .breadcrumb-item {\n a {\n color: $onPrimary;\n &:hover,\n &:focus {\n color: $onPrimary;\n }\n }\n + .breadcrumb-item {\n &:before {\n color: $onPrimary;\n }\n }\n }\n }\n }\n}\n","@mixin mdb-nav-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $onBackground: map-get($theme, onBackground);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $error: map-get($theme, error);\n $onError: map-get($theme, onError);\n $success: map-get($theme, success);\n $onSuccess: map-get($theme, onSuccess);\n $surfaceHover: map-get($theme, surfaceHover);\n $pickerHeader: map-get($theme, pickerHeader);\n $dropdownText: map-get($theme, dropdownText);\n $onLink: map-get($theme, onLink);\n $onHover: map-get($theme, onHover);\n $pillBackground: map-get($theme, pillBackground);\n $pillText: map-get($theme, pillText);\n $onHover: map-get($theme, onHover);\n\n .nav-tabs {\n .nav-link {\n border-color: transparent;\n color: $dropdownText;\n\n &:hover {\n background-color: transparent;\n border-color: transparent;\n }\n\n &:focus {\n border-color: transparent;\n }\n }\n\n .nav-link.active,\n .nav-item.show .nav-link {\n color: $primary;\n border-color: $primary;\n background-color: transparent;\n }\n }\n\n .nav-pills:not(.menu-sidebar) {\n .nav-link {\n background-color: $pillBackground;\n color: $pillText;\n }\n\n .nav-link.active,\n .show > .nav-link {\n color: $onPrimary;\n background-color: $primary;\n }\n }\n}\n","@mixin mdb-navbar-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $surfaceDisabled: map-get($theme, dropdownDisabled);\n\n .navbar-brand {\n color: $onSurface;\n\n &:hover {\n color: $onSurface;\n }\n }\n\n .navbar-nav {\n .nav-link {\n color: $onSurface;\n\n &:hover,\n &:focus {\n color: $onSurface;\n }\n\n &.disabled {\n color: $surfaceDisabled;\n }\n }\n }\n\n .navbar-scroll {\n .nav-link,\n .fa-bars {\n color: $onSurface;\n }\n }\n\n .navbar-scrolled {\n .nav-link,\n .fa-bars {\n color: $onSurface;\n }\n }\n\n .navbar-scrolled {\n background-color: $primary;\n }\n\n .navbar {\n &.navbar-light {\n &.bg-light {\n .breadcrumb {\n .breadcrumb-item {\n a {\n color: rgba(0, 0, 0, 0.55);\n &:hover {\n color: rgba(0, 0, 0, 0.7);\n }\n }\n + .breadcrumb-item {\n &:before {\n color: rgba(0, 0, 0, 0.55);\n }\n }\n }\n }\n }\n }\n }\n}\n","@mixin mdb-pagination-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $error: map-get($theme, error);\n $onError: map-get($theme, onError);\n $success: map-get($theme, success);\n $onSuccess: map-get($theme, onSuccess);\n $surfaceHover: map-get($theme, surfaceHover);\n $pickerHeader: map-get($theme, pickerHeader);\n $onLink: map-get($theme, onLink);\n\n .page-link {\n color: $onPrimary;\n\n &:hover {\n color: $onPrimary;\n background: $onLink;\n }\n &:focus {\n color: $onSurface;\n background-color: $onLink;\n }\n }\n\n .page-item {\n &.active .page-link {\n background-color: $primary;\n }\n\n &.disabled .page-link {\n background-color: $onLink;\n }\n }\n}\n","@mixin mdb-popover-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $onPrimary: map-get($theme, onPrimary);\n $onSecondary: map-get($theme, onSecondary);\n $error: map-get($theme, error);\n $onError: map-get($theme, onError);\n $success: map-get($theme, success);\n $onSuccess: map-get($theme, onSuccess);\n $surfaceHover: map-get($theme, surfaceHover);\n $pickerHeader: map-get($theme, pickerHeader);\n $divider: map-get($theme, divider);\n $cardShadow: map-get($theme, dardShadow);\n\n .popover {\n background-color: $surface;\n box-shadow: $cardShadow;\n }\n\n .popover-body {\n color: $onSurface;\n }\n\n .popover-header {\n background-color: $surface;\n border-bottom-color: $divider;\n }\n}\n","@mixin mdb-progress-theme($theme) {\n $primary: map-get($theme, primary);\n\n .progress-bar {\n background-color: $primary;\n }\n}\n","@mixin mdb-ripple-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n\n .ripple-surface-primary {\n .ripple-wave {\n $gradient: rgba(\n $color: $primary,\n $alpha: 0.2,\n )\n 0,\n rgba(\n $color: $primary,\n $alpha: 0.3,\n )\n 40%,\n rgba(\n $color: $primary,\n $alpha: 0.4,\n )\n 50%,\n rgba(\n $color: $primary,\n $alpha: 0.5,\n )\n 60%,\n rgba(\n $color: $primary,\n $alpha: 0,\n )\n 70%;\n background-image: radial-gradient(circle, $gradient);\n }\n }\n\n .ripple-surface-secondary {\n .ripple-wave {\n $gradient: rgba(\n $color: $secondary,\n $alpha: 0.2,\n )\n 0,\n rgba(\n $color: $secondary,\n $alpha: 0.3,\n )\n 40%,\n rgba(\n $color: $secondary,\n $alpha: 0.4,\n )\n 50%,\n rgba(\n $color: $secondary,\n $alpha: 0.5,\n )\n 60%,\n rgba(\n $color: $primary,\n $alpha: 0,\n )\n 70%;\n background-image: radial-gradient(circle, $gradient);\n }\n }\n}\n","@mixin mdb-scrollspy-theme($theme) {\n $scrollspyActive: map-get($theme, scrollspyActive);\n $onBackground: map-get($theme, onBackground);\n\n .nav-pills {\n &.menu-sidebar {\n .nav-link {\n color: $onBackground;\n }\n\n .nav-link.active,\n .show > .nav-link {\n color: $scrollspyActive;\n border-left-color: $scrollspyActive;\n }\n }\n }\n}\n","@mixin mdb-accordion-theme($theme) {\n $primary: map-get($theme, primary);\n $secondary: map-get($theme, secondary);\n $surface: map-get($theme, surface);\n $background: map-get($theme, background);\n $onBackground: map-get($theme, onBackground);\n $surfaceHighlight: map-get($theme, surfaceHighlight);\n $surface: map-get($theme, surface);\n $onSurface: map-get($theme, onSurface);\n $inputReadonly: map-get($theme, inputReadonly);\n\n //\n // Base styles\n //\n\n .accordion-item {\n background-color: $surface;\n border: 1px solid $inputReadonly;\n }\n .accordion-button {\n background-color: $surface;\n color: $onBackground;\n }\n .accordion-button:not(.collapsed) {\n color: $onBackground;\n background-color: $surface;\n -webkit-box-shadow: inset 0 -1px 0 $inputReadonly;\n box-shadow: inset 0 -1px 0 $inputReadonly;\n }\n .accordion-button:after {\n background-image: url(\"data:image/svg+xml;charset=utf-8,`-`` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: var(--#{$prefix}heading-color);\n}\n\nh1 {\n @extend %heading;\n @include font-size($h1-font-size);\n}\n\nh2 {\n @extend %heading;\n @include font-size($h2-font-size);\n}\n\nh3 {\n @extend %heading;\n @include font-size($h3-font-size);\n}\n\nh4 {\n @extend %heading;\n @include font-size($h4-font-size);\n}\n\nh5 {\n @extend %heading;\n @include font-size($h5-font-size);\n}\n\nh6 {\n @extend %heading;\n @include font-size($h6-font-size);\n}\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on ` `s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n text-decoration: underline dotted; // 1\n cursor: help; // 2\n text-decoration-skip-ink: none; // 3\n}\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: 0.5rem;\n margin-left: 0; // 1\n}\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n// Mark\n\nmark {\n padding: $mark-padding;\n color: var(--#{$prefix}highlight-color);\n background-color: var(--#{$prefix}highlight-bg);\n}\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n\n// Links\n\na {\n color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));\n text-decoration: $link-decoration;\n\n &:hover {\n --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: var(--#{$prefix}code-color);\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `