's hover style\n &:hover {\n color: $btn-close-color;\n text-decoration: none;\n opacity: $btn-close-hover-opacity;\n }\n\n &:focus {\n outline: 0;\n box-shadow: $btn-close-focus-shadow;\n opacity: $btn-close-focus-opacity;\n }\n\n &:disabled,\n &.disabled {\n pointer-events: none;\n user-select: none;\n opacity: $btn-close-disabled-opacity;\n }\n}\n\n.btn-close-white {\n filter: $btn-close-white-filter;\n}\n",".toast {\n width: $toast-max-width;\n max-width: 100%;\n @include font-size($toast-font-size);\n color: $toast-color;\n pointer-events: auto;\n background-color: $toast-background-color;\n background-clip: padding-box;\n border: $toast-border-width solid $toast-border-color;\n box-shadow: $toast-box-shadow;\n @include border-radius($toast-border-radius);\n\n &.showing {\n opacity: 0;\n }\n\n &:not(.show) {\n display: none;\n }\n}\n\n.toast-container {\n width: max-content;\n max-width: 100%;\n pointer-events: none;\n\n > :not(:last-child) {\n margin-bottom: $toast-spacing;\n }\n}\n\n.toast-header {\n display: flex;\n align-items: center;\n padding: $toast-padding-y $toast-padding-x;\n color: $toast-header-color;\n background-color: $toast-header-background-color;\n background-clip: padding-box;\n border-bottom: $toast-border-width solid $toast-header-border-color;\n @include border-top-radius(subtract($toast-border-radius, $toast-border-width));\n\n .btn-close {\n margin-right: $toast-padding-x * -.5;\n margin-left: $toast-padding-x;\n }\n}\n\n.toast-body {\n padding: $toast-padding-x; // apply to both vertical and horizontal\n word-wrap: break-word;\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\n// Container that the modal scrolls within\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n z-index: $zindex-modal;\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: $modal-dialog-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: subtract(100%, $modal-dialog-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: subtract(100%, $modal-dialog-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: $modal-content-color;\n pointer-events: auto;\n background-color: $modal-content-bg;\n background-clip: padding-box;\n border: $modal-content-border-width solid $modal-content-border-color;\n @include border-radius($modal-content-border-radius);\n @include box-shadow($modal-content-box-shadow-xs);\n // Remove focus outline from opened modal\n outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);\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 justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends\n padding: $modal-header-padding;\n border-bottom: $modal-header-border-width solid $modal-header-border-color;\n @include border-top-radius($modal-content-inner-border-radius);\n\n .btn-close {\n padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);\n margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;\n }\n}\n\n// Title text within header\n.modal-title {\n margin-bottom: 0;\n line-height: $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: $modal-inner-padding;\n}\n\n// Footer (for actions)\n.modal-footer {\n display: flex;\n flex-wrap: wrap;\n flex-shrink: 0;\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: $modal-inner-padding - $modal-footer-margin-between * .5;\n border-top: $modal-footer-border-width solid $modal-footer-border-color;\n @include border-bottom-radius($modal-content-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: $modal-footer-margin-between * .5;\n }\n}\n\n// Scale up the modal\n@include media-breakpoint-up(sm) {\n // Automatically set modal's width for larger viewports\n .modal-dialog {\n max-width: $modal-md;\n margin: $modal-dialog-margin-y-sm-up auto;\n }\n\n .modal-dialog-scrollable {\n height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);\n }\n\n .modal-dialog-centered {\n min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);\n }\n\n .modal-content {\n @include box-shadow($modal-content-box-shadow-sm-up);\n }\n\n .modal-sm { max-width: $modal-sm; }\n}\n\n@include media-breakpoint-up(lg) {\n .modal-lg,\n .modal-xl {\n max-width: $modal-lg;\n }\n}\n\n@include media-breakpoint-up(xl) {\n .modal-xl { max-width: $modal-xl; }\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 @include border-radius(0);\n }\n\n .modal-body {\n overflow-y: auto;\n }\n\n .modal-footer {\n @include border-radius(0);\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 { opacity: 0; }\n &.show { opacity: $backdrop-opacity; }\n}\n","// Base class\n.tooltip {\n position: absolute;\n z-index: $zindex-tooltip;\n display: block;\n margin: $tooltip-margin;\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($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 { opacity: $tooltip-opacity; }\n\n .tooltip-arrow {\n position: absolute;\n display: block;\n width: $tooltip-arrow-width;\n height: $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 {\n padding: $tooltip-arrow-height 0;\n\n .tooltip-arrow {\n bottom: 0;\n\n &::before {\n top: -1px;\n border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;\n border-top-color: $tooltip-arrow-color;\n }\n }\n}\n\n.bs-tooltip-end {\n padding: 0 $tooltip-arrow-height;\n\n .tooltip-arrow {\n left: 0;\n width: $tooltip-arrow-height;\n height: $tooltip-arrow-width;\n\n &::before {\n right: -1px;\n border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;\n border-right-color: $tooltip-arrow-color;\n }\n }\n}\n\n.bs-tooltip-bottom {\n padding: $tooltip-arrow-height 0;\n\n .tooltip-arrow {\n top: 0;\n\n &::before {\n bottom: -1px;\n border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;\n border-bottom-color: $tooltip-arrow-color;\n }\n }\n}\n\n.bs-tooltip-start {\n padding: 0 $tooltip-arrow-height;\n\n .tooltip-arrow {\n right: 0;\n width: $tooltip-arrow-height;\n height: $tooltip-arrow-width;\n\n &::before {\n left: -1px;\n border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;\n border-left-color: $tooltip-arrow-color;\n }\n }\n}\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: $tooltip-max-width;\n padding: $tooltip-padding-y $tooltip-padding-x;\n color: $tooltip-color;\n text-align: center;\n background-color: $tooltip-bg;\n @include border-radius($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 word-spacing: normal;\n white-space: normal;\n line-break: auto;\n}\n",".popover {\n position: absolute;\n top: 0;\n left: 0 #{\"/* rtl:ignore */\"};\n z-index: $zindex-popover;\n display: block;\n max-width: $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($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: $popover-bg;\n background-clip: padding-box;\n border: $popover-border-width solid $popover-border-color;\n @include border-radius($popover-border-radius);\n @include box-shadow($popover-box-shadow);\n\n .popover-arrow {\n position: absolute;\n display: block;\n width: $popover-arrow-width;\n height: $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 }\n }\n}\n\n.bs-popover-top {\n > .popover-arrow {\n bottom: subtract(-$popover-arrow-height, $popover-border-width);\n\n &::before {\n bottom: 0;\n border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;\n border-top-color: $popover-arrow-outer-color;\n }\n\n &::after {\n bottom: $popover-border-width;\n border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;\n border-top-color: $popover-arrow-color;\n }\n }\n}\n\n.bs-popover-end {\n > .popover-arrow {\n left: subtract(-$popover-arrow-height, $popover-border-width);\n width: $popover-arrow-height;\n height: $popover-arrow-width;\n\n &::before {\n left: 0;\n border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;\n border-right-color: $popover-arrow-outer-color;\n }\n\n &::after {\n left: $popover-border-width;\n border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;\n border-right-color: $popover-arrow-color;\n }\n }\n}\n\n.bs-popover-bottom {\n > .popover-arrow {\n top: subtract(-$popover-arrow-height, $popover-border-width);\n\n &::before {\n top: 0;\n border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);\n border-bottom-color: $popover-arrow-outer-color;\n }\n\n &::after {\n top: $popover-border-width;\n border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);\n border-bottom-color: $popover-arrow-color;\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: $popover-arrow-width;\n margin-left: -$popover-arrow-width * .5;\n content: \"\";\n border-bottom: $popover-border-width solid $popover-header-bg;\n }\n}\n\n.bs-popover-start {\n > .popover-arrow {\n right: subtract(-$popover-arrow-height, $popover-border-width);\n width: $popover-arrow-height;\n height: $popover-arrow-width;\n\n &::before {\n right: 0;\n border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;\n border-left-color: $popover-arrow-outer-color;\n }\n\n &::after {\n right: $popover-border-width;\n border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;\n border-left-color: $popover-arrow-color;\n }\n }\n}\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: $popover-header-padding-y $popover-header-padding-x;\n margin-bottom: 0; // Reset the default from Reboot\n @include font-size($font-size-base);\n color: $popover-header-color;\n background-color: $popover-header-bg;\n border-bottom: $popover-border-width solid $popover-border-color;\n @include border-top-radius($popover-inner-border-radius);\n\n &:empty {\n display: none;\n }\n}\n\n.popover-body {\n padding: $popover-body-padding-y $popover-body-padding-x;\n color: $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/* rtl:begin:ignore */\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/* rtl:end:ignore */\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//\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($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);\n}\n.carousel-control-next {\n right: 0;\n background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);\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/* rtl:options: {\n \"autoRename\": true,\n \"stringMap\":[ {\n \"name\" : \"prev-next\",\n \"search\" : \"prev\",\n \"replace\" : \"next\"\n } ]\n} */\n.carousel-control-prev-icon {\n background-image: escape-svg($carousel-control-prev-icon-bg);\n}\n.carousel-control-next-icon {\n background-image: escape-svg($carousel-control-next-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-bs-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 list-style: none;\n\n [data-bs-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\n// Optional captions\n//\n//\n\n.carousel-caption {\n position: absolute;\n right: (100% - $carousel-caption-width) * .5;\n bottom: $carousel-caption-spacer;\n left: (100% - $carousel-caption-width) * .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.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-bs-target] {\n background-color: $carousel-dark-indicator-active-bg;\n }\n\n .carousel-caption {\n color: $carousel-dark-caption-color;\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// scss-docs-start spinner-border-keyframes\n@keyframes spinner-border {\n to { transform: rotate(360deg) #{\"/* rtl:ignore */\"}; }\n}\n// scss-docs-end spinner-border-keyframes\n\n.spinner-border {\n display: inline-block;\n width: $spinner-width;\n height: $spinner-height;\n vertical-align: $spinner-vertical-align;\n border: $spinner-border-width solid currentColor;\n border-right-color: transparent;\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 50%;\n animation: $spinner-animation-speed linear infinite spinner-border;\n}\n\n.spinner-border-sm {\n width: $spinner-width-sm;\n height: $spinner-height-sm;\n border-width: $spinner-border-width-sm;\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 display: inline-block;\n width: $spinner-width;\n height: $spinner-height;\n vertical-align: $spinner-vertical-align;\n background-color: currentColor;\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 50%;\n opacity: 0;\n animation: $spinner-animation-speed linear infinite spinner-grow;\n}\n\n.spinner-grow-sm {\n width: $spinner-width-sm;\n height: $spinner-height-sm;\n}\n\n@if $enable-reduced-motion {\n @media (prefers-reduced-motion: reduce) {\n .spinner-border,\n .spinner-grow {\n animation-duration: $spinner-animation-speed * 2;\n }\n }\n}\n",".offcanvas {\n position: fixed;\n bottom: 0;\n z-index: $zindex-offcanvas;\n display: flex;\n flex-direction: column;\n max-width: 100%;\n color: $offcanvas-color;\n visibility: hidden;\n background-color: $offcanvas-bg-color;\n background-clip: padding-box;\n outline: 0;\n @include box-shadow($offcanvas-box-shadow);\n @include transition(transform $offcanvas-transition-duration ease-in-out);\n}\n\n.offcanvas-backdrop {\n @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);\n}\n\n.offcanvas-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: $offcanvas-padding-y $offcanvas-padding-x;\n\n .btn-close {\n padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);\n margin-top: $offcanvas-padding-y * -.5;\n margin-right: $offcanvas-padding-x * -.5;\n margin-bottom: $offcanvas-padding-y * -.5;\n }\n}\n\n.offcanvas-title {\n margin-bottom: 0;\n line-height: $offcanvas-title-line-height;\n}\n\n.offcanvas-body {\n flex-grow: 1;\n padding: $offcanvas-padding-y $offcanvas-padding-x;\n overflow-y: auto;\n}\n\n.offcanvas-start {\n top: 0;\n left: 0;\n width: $offcanvas-horizontal-width;\n border-right: $offcanvas-border-width solid $offcanvas-border-color;\n transform: translateX(-100%);\n}\n\n.offcanvas-end {\n top: 0;\n right: 0;\n width: $offcanvas-horizontal-width;\n border-left: $offcanvas-border-width solid $offcanvas-border-color;\n transform: translateX(100%);\n}\n\n.offcanvas-top {\n top: 0;\n right: 0;\n left: 0;\n height: $offcanvas-vertical-height;\n max-height: 100%;\n border-bottom: $offcanvas-border-width solid $offcanvas-border-color;\n transform: translateY(-100%);\n}\n\n.offcanvas-bottom {\n right: 0;\n left: 0;\n height: $offcanvas-vertical-height;\n max-height: 100%;\n border-top: $offcanvas-border-width solid $offcanvas-border-color;\n transform: translateY(100%);\n}\n\n.offcanvas.show {\n transform: none;\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: .6em;\n}\n\n.placeholder-sm {\n min-height: .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(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);\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","@each $color, $value in $theme-colors {\n .link-#{$color} {\n color: $value;\n\n @if $link-shade-percentage != 0 {\n &:hover,\n &:focus {\n color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));\n }\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(--#{$variable-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 --#{$variable-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\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}\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 position: absolute !important;\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\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: 1px;\n min-height: 1em;\n background-color: currentColor;\n opacity: $hr-opacity;\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(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));\n $property-class: if($property-class == null, \"\", $property-class);\n\n // State params to generate pseudo-classes\n $state: if(map-has-key($utility, state), map-get($utility, state), ());\n\n $infix: if($property-class == \"\" and str-slice($infix, 1, 1) == \"-\", str-slice($infix, 2), $infix);\n\n // Don't prefix if value key is null (eg. with shadow class)\n $property-class-modifier: if($key, if($property-class == \"\" and $infix == \"\", \"\", \"-\") + $key, \"\");\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 }\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 --#{$variable-prefix}#{$property-class}: #{$value};\n }\n\n @each $pseudo in $state {\n .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n --#{$variable-prefix}#{$property-class}: #{$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, $value in $is-local-vars {\n --#{$variable-prefix}#{$local-var}: #{$value};\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 #{$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\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) == \"map\" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == \"\") {\n @include generate-utility($utility, $infix, true);\n }\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","// \r\n// general.scss\r\n//\r\n\r\nhtml {\r\n position: relative;\r\n min-height: 100%;\r\n}\r\n\r\nbody {\r\n overflow-x: hidden;\r\n}\r\n\r\n// Fix event bubbling on iOS devices\r\n@supports (-webkit-overflow-scrolling: touch) {\r\n body {\r\n cursor: pointer;\r\n }\r\n}","// \r\n// menu.scss\r\n//\r\n\r\n// Logo\r\n.logo {\r\n display: block;\r\n line-height: $topbar-height;\r\n width: $leftbar-width;\r\n position: fixed;\r\n top: 0;\r\n\r\n span.logo-lg {\r\n display: block;\r\n }\r\n span.logo-sm {\r\n display: none;\r\n }\r\n\r\n &.logo-light {\r\n display: $logo-light-display;\r\n }\r\n &.logo-dark {\r\n display: $logo-dark-display;\r\n }\r\n}\r\n\r\n// Wrapper\r\n.wrapper {\r\n height: 100%;\r\n overflow: hidden;\r\n width: 100%;\r\n}\r\n\r\n//Content Page\r\n.content-page {\r\n margin-left: $leftbar-width;\r\n overflow: hidden;\r\n padding: $topbar-height 12px 65px;\r\n min-height: 100vh;\r\n}\r\n\r\n// Left Side-menu (Default dark)\r\n.leftside-menu {\r\n width: $leftbar-width;\r\n z-index: 10;\r\n background: $bg-leftbar-gradient;\r\n bottom: 0;\r\n position: fixed;\r\n top: 0;\r\n padding-top: $topbar-height;\r\n box-shadow: $box-shadow;\r\n}\r\n\r\n// Side-nav\r\n.side-nav {\r\n padding-left: 0;\r\n list-style-type: none;\r\n ul {\r\n list-style-type: none;\r\n }\r\n .side-nav-link {\r\n color: $menu-item;\r\n display: block;\r\n padding: 10px 30px;\r\n font-size: 0.9375rem;\r\n position: relative;\r\n transition: all 0.4s;\r\n list-style: none;\r\n\r\n &:hover,\r\n &:focus,\r\n &:active {\r\n color: $menu-item-hover;\r\n text-decoration: none;\r\n }\r\n\r\n span {\r\n vertical-align: middle;\r\n }\r\n\r\n i {\r\n display: inline-block;\r\n line-height: 1.0625rem;\r\n margin: 0 10px 0 0;\r\n font-size: 1.1rem;\r\n vertical-align: middle;\r\n width: 20px;\r\n }\r\n }\r\n\r\n .menu-arrow {\r\n transition: transform .15s;\r\n position: absolute;\r\n right: 30px;\r\n display: inline-block;\r\n font-family: 'Material Design Icons';\r\n text-rendering: auto;\r\n line-height: 1.5rem;\r\n font-size: 1.1rem;\r\n transform: translate(0, 0);\r\n &:before {\r\n content: \"\\F0142\";\r\n }\r\n }\r\n\r\n .badge{\r\n margin-top: 3px;\r\n }\r\n\r\n .side-nav-item {\r\n >a[aria-expanded=\"true\"] {\r\n > span.menu-arrow {\r\n transform: rotate(90deg);\r\n }\r\n }\r\n\r\n &.menuitem-active {\r\n > a:not(.collapsed) {\r\n > span.menu-arrow {\r\n transform: rotate(90deg);\r\n }\r\n }\r\n }\r\n }\r\n\r\n .side-nav-title {\r\n padding: 12px 30px;\r\n letter-spacing: .05em;\r\n pointer-events: none;\r\n cursor: default;\r\n font-size: 0.6875rem;\r\n text-transform: uppercase;\r\n color: $menu-item;\r\n font-weight: $font-weight-bold;\r\n }\r\n\r\n .menuitem-active {\r\n > a {\r\n color: $menu-item-active !important;\r\n }\r\n }\r\n}\r\n\r\n*[dir=\"ltr\"] {\r\n .side-nav {\r\n .side-nav-item {\r\n .menu-arrow {\r\n &:before {\r\n content: \"\\F0141\" !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.side-nav-second-level,\r\n.side-nav-third-level,\r\n.side-nav-forth-level {\r\n padding-left: 0;\r\n \r\n li {\r\n a, .side-nav-link {\r\n padding: 8px 30px 8px 65px;\r\n color: $menu-item;\r\n display: block;\r\n position: relative;\r\n transition: all 0.4s;\r\n font-size: 0.89rem;\r\n &:focus,\r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n\r\n .menu-arrow {\r\n line-height: 1.3rem;\r\n }\r\n }\r\n &.active {\r\n >a {\r\n color: $menu-item-active;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.side-nav-third-level {\r\n li {\r\n a, .side-nav-link {\r\n padding: 8px 30px 8px 80px;\r\n }\r\n }\r\n}\r\n\r\n.side-nav-forth-level {\r\n li {\r\n a, .side-nav-link {\r\n padding: 8px 30px 8px 100px;\r\n }\r\n }\r\n}\r\n\r\n// Enlarge menu\r\nbody[data-leftbar-compact-mode=\"condensed\"]:not(.authentication-bg) {\r\n min-height: 1600px;\r\n\r\n .wrapper {\r\n // Side menu\r\n .leftside-menu {\r\n position: absolute;\r\n padding-top: 0;\r\n width: 70px;\r\n z-index: 5;\r\n padding-top: $topbar-height;\r\n \r\n .simplebar-mask,\r\n .simplebar-content-wrapper {\r\n overflow: visible !important;\r\n }\r\n\r\n .simplebar-scrollbar {\r\n display: none !important;\r\n }\r\n\r\n .simplebar-offset {\r\n bottom: 0 !important;\r\n }\r\n\r\n .logo {\r\n width: 70px;\r\n z-index: 1;\r\n background: $bg-leftbar-gradient;\r\n }\r\n }\r\n \r\n // Help Box\r\n .help-box {\r\n display: none;\r\n }\r\n \r\n // Content Page\r\n .content-page {\r\n margin-left: 70px;\r\n }\r\n \r\n //Navbar & Footer\r\n .navbar-custom,\r\n .footer {\r\n left: 70px;\r\n }\r\n }\r\n\r\n // Sidebar Menu\r\n .side-nav {\r\n .side-nav-title,\r\n .badge,\r\n .menu-arrow{\r\n display: none !important;\r\n }\r\n .collapse,\r\n .collapsing{\r\n display: none;\r\n height: inherit !important;\r\n transition: none !important;\r\n \r\n .side-nav-second-level,\r\n .side-nav-third-level,\r\n .side-nav-forth-level {\r\n display: none !important;\r\n }\r\n }\r\n \r\n .side-nav-item {\r\n position: relative;\r\n white-space: nowrap;\r\n\r\n .side-nav-link {\r\n padding: 15px 20px;\r\n min-height: 54px;\r\n transition: none;\r\n \r\n &:hover,\r\n &:active,\r\n &:focus {\r\n color: $menu-item-hover;\r\n }\r\n\r\n i {\r\n font-size: 1.125rem;\r\n margin-right: 20px;\r\n margin-left: 6px;\r\n }\r\n\r\n span {\r\n display: none;\r\n padding-left: 10px;\r\n }\r\n }\r\n \r\n &:hover {\r\n .side-nav-link {\r\n position: relative;\r\n width: 260px;\r\n color: $white;\r\n background: $bg-leftbar-gradient;\r\n\r\n span {\r\n display: inline;\r\n }\r\n }\r\n\r\n > ul {\r\n display: block !important;\r\n left: 70px;\r\n position: absolute;\r\n width: 190px;\r\n height: auto !important;\r\n padding: 5px 0;\r\n z-index: 9999;\r\n background: $bg-leftbar-gradient;\r\n box-shadow: $box-shadow;\r\n\r\n a {\r\n padding: 8px 20px;\r\n position: relative;\r\n width: 190px;\r\n \r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n }\r\n\r\n > .collapse,\r\n > .collapsing {\r\n display: block !important;\r\n transition: none !important;\r\n\r\n > ul {\r\n display: block !important;\r\n left: 70px;\r\n position: absolute;\r\n width: 190px;\r\n background: $bg-leftbar-gradient;\r\n box-shadow: $box-shadow;\r\n\r\n a {\r\n box-shadow: none;\r\n padding: 8px 20px;\r\n position: relative;\r\n width: 190px;\r\n z-index: 6;\r\n\r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n\r\n li {\r\n &:hover {\r\n > .collapse {\r\n display: block !important;\r\n height: auto !important;\r\n transition: none !important;\r\n \r\n >ul {\r\n display: block;\r\n left: 190px;\r\n top: 0;\r\n position: absolute;\r\n width: 190px;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .logo {\r\n span.logo-lg {\r\n display: none;\r\n }\r\n span.logo-sm {\r\n display: block;\r\n line-height: 70px;\r\n color: $primary;\r\n }\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n body {\r\n overflow-x: hidden;\r\n }\r\n .leftside-menu {\r\n box-shadow: $box-shadow;\r\n display: none;\r\n z-index: 10 !important;\r\n }\r\n .sidebar-enable {\r\n .leftside-menu {\r\n display: block;\r\n }\r\n }\r\n .navbar-nav.navbar-right {\r\n float: right;\r\n }\r\n .content-page {\r\n margin-left: 0 !important;\r\n padding: 65px 10px 65px;\r\n }\r\n body[data-leftbar-compact-mode=\"condensed\"] {\r\n .leftside-menu {\r\n margin-left: 0px;\r\n }\r\n }\r\n .logo {\r\n span.logo-lg {\r\n display: block;\r\n }\r\n span.logo-sm {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n/// Help-box\r\n.help-box {\r\n border-radius: 5px;\r\n padding: 20px;\r\n margin: 65px 25px 25px;\r\n position: relative;\r\n background-color: $help-box-light-bg;\r\n \r\n .close-btn {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n }\r\n}\r\n// Light\r\nbody[data-leftbar-theme=\"light\"] {\r\n .help-box {\r\n background-color: $primary;\r\n }\r\n\r\n .logo {\r\n &.logo-light {\r\n display: $logo-dark-display;\r\n }\r\n &.logo-dark {\r\n display: $logo-light-display;\r\n }\r\n }\r\n}\r\n\r\n// Layout -topnav\r\nbody[data-layout=\"topnav\"] {\r\n .content-page {\r\n margin-left: 0 !important;\r\n padding: 0 0 60px 0;\r\n }\r\n}\r\n\r\n// Layout-boxed\r\nbody[data-layout-mode=\"boxed\"] {\r\n background-color: $boxed-layout-bg;\r\n\r\n .wrapper {\r\n max-width: $boxed-layout-width;\r\n margin: 0 auto;\r\n background-color: $body-bg;\r\n box-shadow: $box-shadow;\r\n }\r\n\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n .logo {\r\n position: relative;\r\n margin-top: -$topbar-height;\r\n }\r\n }\r\n}\r\n\r\n// Scrollable Layout\r\n\r\n@include media-breakpoint-up(xl) {\r\n body[data-leftbar-compact-mode=\"scrollable\"]:not([data-layout=\"topnav\"]) {\r\n padding-bottom: 0;\r\n \r\n .wrapper {\r\n display: flex;\r\n }\r\n\r\n .leftside-menu {\r\n position: relative;\r\n min-width: $leftbar-width;\r\n max-width: $leftbar-width;\r\n padding-top: 0;\r\n }\r\n\r\n .logo {\r\n position: relative;\r\n margin-top: 0;\r\n }\r\n\r\n .content-page {\r\n margin-left: 0;\r\n width: 100%;\r\n padding-bottom: 60px;\r\n }\r\n }\r\n}\r\n\r\n// Detached Left sidebar\r\n\r\nbody[data-layout=\"detached\"] {\r\n padding-bottom: 0;\r\n\r\n @include media-breakpoint-up(lg) {\r\n .container-fluid {\r\n max-width: 95%;\r\n }\r\n }\r\n\r\n &[data-layout-mode=\"boxed\"] {\r\n .wrapper {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n \r\n .wrapper {\r\n display: flex;\r\n overflow: inherit;\r\n }\r\n .content-page {\r\n margin-left: 0;\r\n overflow: hidden;\r\n padding: 0 15px 5px 30px;\r\n position: relative;\r\n margin-right: -15px;\r\n width: 100%;\r\n padding-bottom: 60px;\r\n }\r\n\r\n .leftside-menu {\r\n position: relative;\r\n background: $bg-detached-leftbar !important;\r\n min-width: $leftbar-width;\r\n max-width: $leftbar-width;\r\n box-shadow: $box-shadow;\r\n margin-top: 30px;\r\n padding-top: 0 !important;\r\n z-index: 1001 !important;\r\n \r\n .side-nav {\r\n .side-nav-link {\r\n color: $menu-item !important;\r\n &:hover,\r\n &:focus,\r\n &:active {\r\n color: $menu-item-hover !important;\r\n }\r\n }\r\n\r\n .side-nav-second-level,\r\n .side-nav-third-level,\r\n .side-nav-forth-level {\r\n li {\r\n a {\r\n color: $menu-item;\r\n &:focus,\r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n &.mm-active {\r\n > a {\r\n color: $menu-item-active;\r\n }\r\n }\r\n }\r\n }\r\n \r\n .menuitem-active {\r\n > a {\r\n color: $menu-item-active !important;\r\n }\r\n }\r\n \r\n .side-nav-title {\r\n color: $menu-item;\r\n }\r\n }\r\n }\r\n \r\n .leftbar-user {\r\n background: url(\"../../../images/waves.png\") no-repeat;\r\n padding: 30px 20px;\r\n text-align: center;\r\n \r\n .leftbar-user-name {\r\n font-weight: 700;\r\n color: #{map-get($grays, \"900\")};\r\n margin-left: 12px;\r\n margin-top: 8px;\r\n display: block;\r\n }\r\n }\r\n\r\n @include media-breakpoint-down(md) {\r\n \r\n &.sidebar-enable {\r\n .leftside-menu {\r\n position: fixed;\r\n left: 0;\r\n overflow-y: auto;\r\n margin-top: 70px;\r\n }\r\n } \r\n .wrapper {\r\n max-width: 100%;\r\n } \r\n .content-page {\r\n margin-left: 0 !important;\r\n padding: 0 10px 60px 10px;\r\n }\r\n\r\n .lang-switch {\r\n display: none;\r\n }\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n &.sidebar-enable {\r\n .leftside-menu {\r\n margin-top: 0px;\r\n }\r\n } \r\n }\r\n }\r\n\r\n // Enlarge menu\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n .wrapper {\r\n // Side menu\r\n .leftside-menu {\r\n max-width: 70px;\r\n min-width: 70px;\r\n position: relative;\r\n }\r\n .leftbar-user {\r\n display: none;\r\n }\r\n \r\n // Content Page\r\n .content-page {\r\n margin-left: 0;\r\n }\r\n \r\n //Footer\r\n .footer {\r\n left: 0;\r\n }\r\n }\r\n // Sidebar Menu\r\n .side-nav {\r\n .side-nav-item {\r\n .side-nav-link {\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n \r\n &:hover {\r\n .side-nav-link {\r\n background: $primary;\r\n color: $white !important;\r\n transition: none;\r\n }\r\n\r\n ul {\r\n background: $bg-leftbar !important;\r\n box-shadow: $box-shadow;\r\n\r\n a {\r\n &:hover {\r\n color: $menu-item-hover !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n// reaponsive detached mode\r\n@include media-breakpoint-up(lg) {\r\n body[data-layout=\"detached\"] {\r\n &[data-leftbar-compact-mode=\"scrollable\"] {\r\n .wrapper {\r\n padding-top: 70px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.button-menu-mobile {\r\n .lines {\r\n width: 18px;\r\n display: block;\r\n position: relative;\r\n height: 16px;\r\n transition: all .5s ease;\r\n margin-top: 26px;\r\n margin-left: 10px;\r\n }\r\n span {\r\n height: 2px;\r\n width: 100%;\r\n background-color: rgba($white, 0.8);\r\n display: block;\r\n margin-bottom: 5px;\r\n transition: transform .5s ease;\r\n\r\n &:nth-of-type(2) {\r\n width: 24px;\r\n }\r\n }\r\n\r\n &.disable-btn {\r\n display: none;\r\n }\r\n}\r\n\r\n// Light sidebar\r\n\r\nbody[data-leftbar-theme=\"light\"] {\r\n .leftside-menu {\r\n background: $bg-leftbar;\r\n\r\n .logo {\r\n background: $bg-leftbar !important;\r\n }\r\n }\r\n \r\n .side-nav {\r\n .side-nav-link {\r\n color: $menu-item;\r\n &:hover,\r\n &:focus,\r\n &:active {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n \r\n .menuitem-active {\r\n > a {\r\n color: $menu-item-active !important;\r\n }\r\n }\r\n \r\n .side-nav-title {\r\n color: $menu-item;\r\n }\r\n\r\n .side-nav-second-level,\r\n .side-nav-third-level,\r\n .side-nav-forth-level {\r\n li {\r\n a {\r\n color: $menu-item;\r\n &:focus,\r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n &.active {\r\n >a {\r\n color: $menu-item-active;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Enlarge menu\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n // Sidebar Menu\r\n .side-nav {\r\n .side-nav-item {\r\n\r\n .side-nav-link {\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n \r\n &:hover {\r\n .side-nav-link {\r\n background: $primary;\r\n color: $white !important;\r\n transition: none;\r\n }\r\n\r\n > ul {\r\n background: $bg-leftbar;\r\n box-shadow: $box-shadow;\r\n\r\n a {\r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n }\r\n\r\n > .collapse,\r\n > .collapsing {\r\n \r\n > ul {\r\n background: $bg-leftbar;\r\n\r\n a {\r\n &:hover {\r\n color: $menu-item-hover;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n// Dark sidenav\r\nbody[data-leftbar-theme=\"dark\"] {\r\n .leftside-menu {\r\n background: $bg-leftbar;\r\n\r\n .logo {\r\n background: $bg-leftbar !important;\r\n }\r\n }\r\n\r\n .side-nav {\r\n .side-nav-link {\r\n color: $sidebar-dark-menu-item;\r\n &:hover,\r\n &:focus,\r\n &:active {\r\n color: $sidebar-dark-menu-item-hover;\r\n }\r\n }\r\n \r\n .menuitem-active {\r\n > a {\r\n color: $sidebar-dark-menu-item-active !important;\r\n }\r\n }\r\n \r\n .side-nav-title {\r\n color: $sidebar-dark-menu-item;\r\n }\r\n\r\n .side-nav-second-level,\r\n .side-nav-third-level,\r\n .side-nav-forth-level {\r\n li {\r\n a {\r\n color: $sidebar-dark-menu-item;\r\n &:focus,\r\n &:hover {\r\n color: $sidebar-dark-menu-item-hover;\r\n }\r\n }\r\n &.active {\r\n >a {\r\n color: $sidebar-dark-menu-item-active;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Enlarge menu\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n // Sidebar Menu\r\n .side-nav {\r\n .side-nav-item {\r\n\r\n .side-nav-link {\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n color: $sidebar-dark-menu-item-hover;\r\n }\r\n }\r\n \r\n &:hover {\r\n .side-nav-link {\r\n background: $primary;\r\n color: $white !important;\r\n transition: none;\r\n }\r\n\r\n > ul {\r\n background: $bg-leftbar;\r\n box-shadow: $box-shadow;\r\n\r\n a {\r\n &:hover {\r\n color: $sidebar-dark-menu-item-hover;\r\n }\r\n }\r\n }\r\n\r\n > .collapse,\r\n > .collapsing {\r\n \r\n > ul {\r\n background: $bg-leftbar;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n// left-sidebar hide\r\n\r\nbody {\r\n &[data-layout=\"full\"] {\r\n .navbar-custom {\r\n .button-menu-mobile {\r\n &.disable-btn {\r\n display: block;\r\n }\r\n }\r\n }\r\n &.hide-menu {\r\n .wrapper {\r\n .leftside-menu {\r\n width: 0 !important;\r\n padding-top: 0;\r\n .side-nav {\r\n opacity: 0.2;\r\n }\r\n .logo {\r\n width: 70px;\r\n background: $bg-leftbar-gradient !important;\r\n // transition: $transition-base;\r\n span {\r\n &.logo-lg {\r\n display: none;\r\n }\r\n &.logo-sm {\r\n display: block;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .content-page {\r\n margin-left: 0 !important;\r\n .navbar-custom {\r\n left: 70px;\r\n }\r\n .footer {\r\n left: 0 !important;\r\n }\r\n }\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n .wrapper {\r\n .leftside-menu {\r\n padding-top: $topbar-height;\r\n .side-nav {\r\n transform: translateX(-50px);\r\n visibility: hidden;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n &[data-leftbar-compact-mode=\"scrollable\"] {\r\n &.hide-menu {\r\n .wrapper {\r\n .leftside-menu {\r\n max-width: 0px;\r\n min-width: 0px;\r\n // padding-top: 0 !important;\r\n }\r\n }\r\n }\r\n .wrapper {\r\n .leftside-menu {\r\n padding-top: 0 !important;\r\n }\r\n }\r\n }\r\n &[data-leftbar-theme=\"dark\"] {\r\n &.hide-menu {\r\n .wrapper {\r\n .leftside-menu {\r\n .logo {\r\n background: $bg-leftbar !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n &[data-leftbar-theme=\"light\"] {\r\n &.hide-menu {\r\n .wrapper {\r\n .leftside-menu {\r\n .logo {\r\n background: $bg-leftbar !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n &[data-layout-mode=\"boxed\"] {\r\n .wrapper {\r\n background-color: var(--#{$variable-prefix}body-bg);\r\n }\r\n }\r\n &[data-layout=detached] {\r\n .leftbar-user {\r\n .leftbar-user-name {\r\n color: #{map-get($dark-grays, \"900\")};\r\n }\r\n }\r\n }\r\n}\r\n","//\n// custom-variables.scss\n//\n\n\n// Left Sidebar\n$leftbar-width: 260px;\n$bg-leftbar: var(--#{$variable-prefix}bg-leftbar);\n\n// Menu\n$menu-item: var(--#{$variable-prefix}menu-item);\n$menu-item-hover: var(--#{$variable-prefix}menu-item-hover);\n$menu-item-active: var(--#{$variable-prefix}menu-item-active);\n\n// Dark sidenav Menu item color\n$sidebar-dark-menu-item: var(--#{$variable-prefix}dark-menu-item);\n$sidebar-dark-menu-item-hover: var(--#{$variable-prefix}dark-menu-item-hover);\n$sidebar-dark-menu-item-active: var(--#{$variable-prefix}dark-menu-item-active);\n\n// Topbar\n$topbar-height: 70px;\n$bg-topbar: var(--#{$variable-prefix}bg-topbar);\n$bg-topbar-search: var(--#{$variable-prefix}bg-topbar-search);\n$nav-user-bg-topbar: var(--#{$variable-prefix}nav-user-bg-topbar);\n$nav-user-border-topbar: var(--#{$variable-prefix}nav-user-border-topbar);\n\n\n// Dark Topbar\n$bg-dark-topbar: var(--#{$variable-prefix}bg-dark-topbar);\n$bg-dark-topbar-search: var(--#{$variable-prefix}bg-dark-topbar-search);\n$nav-user-bg-dark-topbar: var(--#{$variable-prefix}nav-user-bg-dark-topbar);\n$nav-user-border-dark-topbar: var(--#{$variable-prefix}nav-user-border-dark-topbar);\n\n// Rightbar Width\n$rightbar-width: 280px;\n$rightbar-bg: var(--#{$variable-prefix}rightbar-bg);\n$rightbar-title-bg: var(--#{$variable-prefix}rightbar-title-bg);\n$rightbar-title-color: var(--#{$variable-prefix}rightbar-title-color);\n$rightbar-title-btn-bg: var(--#{$variable-prefix}rightbar-title-btn-bg);\n$rightbar-title-btn-color: var(--#{$variable-prefix}rightbar-title-btn-color);\n$rightbar-overlay-bg: var(--#{$variable-prefix}rightbar-overlay-bg);\n\n// Deatched left sidenav\n$bg-detached-leftbar: var(--#{$variable-prefix}bg-detached-leftbar);\n\n// Background left-sidebar\n$bg-leftbar-gradient: var(--#{$variable-prefix}bg-leftbar-gradient);\n$bg-topnav: var(--#{$variable-prefix}bg-topnav);\n\n// Boxed Layout\n$boxed-layout-width: 1300px;\n$boxed-layout-bg: var(--#{$variable-prefix}boxed-layout-bg);\n\n// Helpbox\n$help-box-light-bg: var(--#{$variable-prefix}help-box-light-bg);\n$help-box-dark-bg: var(--#{$variable-prefix}help-box-dark-bg);\n\n// Font weight\n$font-weight-semibold: 600;\n\n// Dropdown Large\n$dropdown-lg-width: 320px;\n\n// Page title color\n$page-title-color: var(--#{$variable-prefix}page-title-color);\n\n// Nav-pill background\n$nav-pills-bg: var(--#{$variable-prefix}nav-pills-bg);\n\n// Custom-accordion\n$custom-accordion-title-color: var(--#{$variable-prefix}custom-accordion-title-color);\n\n// Dragula demo background\n$dragula-bg: var(--#{$variable-prefix}dragula-bg);\n\n// Form wizard header background\n$form-wizard-header-bg: var(--#{$variable-prefix}form-wizard-header-bg);\n\n// Text title color\n$text-title-color: var(--#{$variable-prefix}text-title-color);\n\n// card Loader background\n$card-loader-bg: var(--#{$variable-prefix}card-loader-bg);\n\n// Chat widget\n$chat-primary-user-bg: var(--#{$variable-prefix}chat-primary-user-bg);\n$chat-secondary-user-bg: var(--#{$variable-prefix}chat-secondary-user-bg);\n\n// User authentication Background\n$auth-bg: var(--#{$variable-prefix}auth-bg);\n$auth-bg-pattern-img: url(\"../../../images/bg-pattern-light.svg\");\n\n// Apex chart\n$apex-grid-color: var(--#{$variable-prefix}apex-grid-color);\n\n// Hero\n$hero-bg: var(--#{$variable-prefix}hero-bg);\n\n// Logo Display\n$logo-light-display: block;\n$logo-dark-display: none;\n\n// Logo auth display\n$logo-auth-light-display: none;\n$logo-auth-dark-display: block;\n\n","//\r\n// topbar.scss\r\n//\r\n\r\n.navbar-custom {\r\n padding: 0 $grid-gutter-width;\r\n background-color: $bg-topbar;\r\n box-shadow: $box-shadow;\r\n min-height: $topbar-height;\r\n position: fixed;\r\n left: $leftbar-width;\r\n top: 0;\r\n right: 0;\r\n z-index: 1001;\r\n\r\n .topbar-left {\r\n background-color: $bg-topbar;\r\n height: $topbar-height;\r\n position: fixed;\r\n z-index: 1;\r\n width: $leftbar-width;\r\n text-align: center;\r\n top: 0;\r\n left: 0;\r\n\r\n .logo {\r\n line-height: $topbar-height;\r\n\r\n i {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n .topbar-menu {\r\n position: relative;\r\n z-index: 1;\r\n\r\n li {\r\n float: left;\r\n max-height: $topbar-height;\r\n\r\n .show {\r\n &.nav-link {\r\n color: #{map-get($grays, \"700\")};\r\n }\r\n }\r\n }\r\n\r\n .nav-link {\r\n padding: 0;\r\n color: #{map-get($grays, \"600\")};\r\n min-width: 32px;\r\n display: block;\r\n text-align: center;\r\n margin: 0 10px;\r\n position: relative;\r\n }\r\n }\r\n\r\n .app-search {\r\n position: static;\r\n overflow-y: hidden;\r\n padding: calc(#{$topbar-height - 38px} / 2) 5px calc(#{$topbar-height - 38px} / 2) 0;\r\n\r\n .react-select__control,\r\n .react-select__menu {\r\n overflow: hidden;\r\n width: 320px !important;\r\n\r\n .react-select__option {\r\n &.react-select__option--is-selected {\r\n .dropdown-item {\r\n color: rgba($input-color, 0.7) !important;\r\n }\r\n }\r\n }\r\n\r\n .react-select__value-container {\r\n .react-select__placeholder {\r\n color: $input-color !important;\r\n }\r\n\r\n .react-select__input-container {\r\n color: $input-color !important;\r\n\r\n .react-select__input {\r\n color: $input-color !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.topbar-dropdown {\r\n .nav-link {\r\n line-height: $topbar-height;\r\n }\r\n}\r\n\r\n/* Search */\r\n\r\n.app-search {\r\n .react-select__control {\r\n border: none;\r\n height: $input-height;\r\n padding-left: 40px;\r\n background-color: $bg-topbar-search;\r\n box-shadow: none;\r\n }\r\n\r\n .react-select__value-container {\r\n padding: 0;\r\n }\r\n\r\n .react-select__menu {\r\n margin-top: 0;\r\n }\r\n\r\n span.search-icon {\r\n position: absolute;\r\n z-index: 9;\r\n font-size: 20px;\r\n line-height: 38px;\r\n left: 10px;\r\n top: 0;\r\n }\r\n}\r\n\r\n.app-search {\r\n .form-control {\r\n border: none;\r\n height: $input-height;\r\n padding-left: 40px;\r\n padding-right: 20px;\r\n background-color: $bg-topbar-search;\r\n box-shadow: none;\r\n }\r\n\r\n span.search-icon {\r\n position: absolute;\r\n z-index: 4;\r\n font-size: 20px;\r\n line-height: 38px;\r\n left: 10px;\r\n top: 0;\r\n }\r\n\r\n .input-group-text {\r\n margin-left: 0;\r\n z-index: 4;\r\n }\r\n}\r\n\r\n/* Notification */\r\n.notification-list {\r\n margin-left: 0;\r\n\r\n .noti-title {\r\n background-color: transparent;\r\n padding: 15px 20px;\r\n }\r\n\r\n .noti-icon {\r\n font-size: 22px;\r\n vertical-align: middle;\r\n line-height: $topbar-height;\r\n }\r\n\r\n .noti-icon-badge {\r\n display: inline-block;\r\n position: absolute;\r\n top: 22px;\r\n right: 6px;\r\n border-radius: 50%;\r\n height: 7px;\r\n width: 7px;\r\n background-color: $danger;\r\n }\r\n\r\n .notify-item {\r\n padding: 10px 20px;\r\n\r\n &.unread-noti {\r\n background-color: #{tint-color(map-get($grays, \"100\"), 15%)};\r\n }\r\n\r\n &.read-noti {\r\n background-color: transparent;\r\n border: #{$border-width} solid #{map-get($grays, \"200\")};\r\n }\r\n\r\n .card-body {\r\n padding: 14px;\r\n\r\n .noti-close-btn {\r\n position: absolute;\r\n top: 3px;\r\n right: 5px;\r\n }\r\n\r\n .noti-item-title {\r\n margin: 0 0 2px;\r\n }\r\n\r\n .noti-item-title,\r\n .noti-item-subtitle {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n .notify-icon {\r\n float: left;\r\n height: 36px;\r\n width: 36px;\r\n line-height: 36px;\r\n text-align: center;\r\n border-radius: 50%;\r\n color: $white;\r\n }\r\n\r\n .notify-details {\r\n margin-bottom: 0;\r\n overflow: hidden;\r\n margin-left: 45px;\r\n\r\n b {\r\n font-weight: 500;\r\n }\r\n\r\n small {\r\n display: block;\r\n }\r\n }\r\n\r\n .user-msg {\r\n margin-left: 45px;\r\n white-space: normal;\r\n line-height: 16px;\r\n }\r\n }\r\n\r\n .topbar-dropdown-menu {\r\n .notify-item {\r\n padding: 7px 20px;\r\n }\r\n }\r\n}\r\n\r\n.profile-dropdown {\r\n min-width: 170px;\r\n\r\n i,\r\n span {\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n.nav-user {\r\n padding: calc(#{$topbar-height - 39px} * 0.5) 20px calc(#{$topbar-height - 39px} * 0.5) 57px !important;\r\n text-align: left !important;\r\n position: relative;\r\n background-color: #{lighten(map-get($grays, \"100\"), 2.5%)};\r\n border: #{($border-width) solid map-get($grays, \"100\")};\r\n border-width: 0 1px;\r\n min-height: $topbar-height;\r\n\r\n .account-user-avatar {\r\n position: absolute;\r\n top: calc(#{$topbar-height - 32px} * 0.5);\r\n left: 15px;\r\n\r\n img {\r\n height: 32px;\r\n width: 32px;\r\n }\r\n }\r\n\r\n .account-position {\r\n display: block;\r\n font-size: 12px;\r\n margin-top: -3px;\r\n }\r\n\r\n .account-user-name {\r\n display: block;\r\n font-weight: $font-weight-semibold;\r\n }\r\n}\r\n\r\n.button-menu-mobile {\r\n border: none;\r\n color: #{map-get($grays, \"900\")};\r\n height: $topbar-height;\r\n line-height: $topbar-height;\r\n width: 60px;\r\n background-color: transparent;\r\n font-size: 24px;\r\n cursor: pointer;\r\n float: left;\r\n z-index: 1;\r\n position: relative;\r\n margin-left: -$grid-gutter-width;\r\n\r\n &.disable-btn {\r\n display: none;\r\n }\r\n\r\n @include media-breakpoint-down(md) {\r\n margin: 0 !important;\r\n }\r\n}\r\n\r\n[data-keep-enlarged=\"true\"] {\r\n .navbar-custom {\r\n padding-left: 0;\r\n }\r\n\r\n .button-menu-mobile {\r\n margin: 0;\r\n\r\n &.disable-btn {\r\n display: inline-block;\r\n }\r\n }\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .navbar-custom {\r\n .topbar-menu {\r\n position: initial;\r\n }\r\n\r\n .dropdown {\r\n position: static;\r\n\r\n .dropdown-menu {\r\n left: 10px !important;\r\n right: 10px !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n .navbar-custom {\r\n right: 0;\r\n\r\n .app-search {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n .nav-user {\r\n padding: 17px 5px 17px 57px !important;\r\n\r\n .account-position,\r\n .account-user-name {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n .navbar-custom {\r\n left: 0 !important;\r\n padding: 0;\r\n }\r\n\r\n .button-menu-mobile {\r\n &.disable-btn {\r\n display: inline-block;\r\n }\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .navbar-custom {\r\n .topbar-menu {\r\n .nav-link {\r\n margin: 0 5px;\r\n }\r\n }\r\n\r\n &.topnav-navbar {\r\n .container-fluid {\r\n padding-right: 12px;\r\n padding-left: 12px;\r\n }\r\n\r\n .navbar-toggle {\r\n margin: 27px 3px;\r\n }\r\n\r\n .button-menu-mobile {\r\n width: auto;\r\n }\r\n }\r\n }\r\n}\r\n\r\n// Scrollable Layout\r\n\r\n@include media-breakpoint-up(lg) {\r\n body[data-leftbar-compact-mode=\"scrollable\"]:not([data-layout-mode=\"boxed\"]):not([data-layout=\"topnav\"]) {\r\n .navbar-custom {\r\n position: absolute;\r\n }\r\n }\r\n}\r\n\r\n// Topbar Dark\r\n.topnav-navbar-dark {\r\n background-color: $bg-dark-topbar;\r\n\r\n .nav-user {\r\n background-color: $nav-user-bg-dark-topbar !important;\r\n border: 1px solid $nav-user-border-dark-topbar !important;\r\n }\r\n\r\n .topbar-menu {\r\n li {\r\n .show {\r\n &.nav-link {\r\n color: $white !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .app-search {\r\n .react-select__control {\r\n background-color: $bg-dark-topbar-search;\r\n color: $white;\r\n }\r\n\r\n .react-select__input {\r\n color: $white;\r\n }\r\n\r\n span,\r\n .react-select__placeholder {\r\n color: #{map-get($grays, \"600\")};\r\n }\r\n }\r\n\r\n .navbar-toggle {\r\n span {\r\n background-color: rgba($white, 0.8) !important;\r\n }\r\n }\r\n}\r\n\r\nbody[data-layout-mode=\"boxed\"] {\r\n .navbar-custom {\r\n position: relative;\r\n left: 0 !important;\r\n margin: -$topbar-height (\r\n -$grid-gutter-width * 0.5) 0;\r\n }\r\n\r\n &[data-layout=\"topnav\"] {\r\n .navbar-custom {\r\n margin: 0;\r\n }\r\n }\r\n}\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .navbar-custom {\r\n .topbar-menu {\r\n li {\r\n .show {\r\n &.nav-link {\r\n color: #{map-get($dark-grays, \"700\")};\r\n }\r\n }\r\n }\r\n\r\n .nav-link {\r\n color: #{map-get($dark-grays, \"600\")};\r\n }\r\n }\r\n }\r\n\r\n .notification-list {\r\n .notify-item {\r\n &.unread-noti {\r\n background-color: #{tint-color(map-get($dark-grays, \"300\"), 1%)};\r\n }\r\n\r\n &.read-noti {\r\n border: #{$border-width} solid #{map-get($dark-grays, \"300\")};\r\n }\r\n }\r\n }\r\n\r\n .button-menu-mobile {\r\n color: #{map-get($dark-grays, \"900\")};\r\n }\r\n\r\n .nav-user {\r\n background-color: #{lighten(map-get($dark-grays, \"100\"), 2.5%)};\r\n border: #{($border-width) solid map-get($dark-grays, \"100\")};\r\n }\r\n\r\n .topnav-navbar-dark {\r\n .app-search {\r\n\r\n span,\r\n .react-select__placeholder {\r\n color: #{map-get($dark-grays, \"600\")};\r\n }\r\n }\r\n }\r\n}\r\n\r\n.appstore-item-content {\r\n background-color: #fff;\r\n box-shadow: 0 2px 5px rgb(0 0 0 / 10%\r\n );\r\nborder-radius: 2px;\r\npadding: 10px;\r\nwidth: 100%;\r\ncursor: pointer;\r\noverflow: hidden;\r\ntext-align: center;\r\n}\r\n\r\n.appstore-item-content-icon {\r\n width: 100px;\r\n min-width: 100px;\r\n max-width: 100px;\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n}\r\n\r\n.col-same-height {\r\n height: 100%;\r\n vertical-align: middle;\r\n display: table-cell;\r\n float: none !important;\r\n}\r\n\r\n.app-icon {\r\n min-height: 80px;\r\n max-height: 80px;\r\n min-width: 80px;\r\n max-width: 100%;\r\n}\r\n\r\n.appstore-item {\r\n padding: 10px;\r\n}\r\n\r\n.appstore-item-content-title {\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n}\r\n\r\n.appstore-item-content-tagline {\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n height: 44px;\r\n}\r\n\r\n.text-muted {\r\n color: #777;\r\n}\r\n\r\n.highlight:hover {\r\n background-color: rgb(229, 230, 229);\r\n}\r\n\r\n.normal::placeholder {\r\n color: #6c757d;\r\n}\r\n\r\n.error::placeholder {\r\n color: red;\r\n}","// \r\n// right-sidebar.scss\r\n//\r\n\r\n/* rtl:begin:options: {\r\n \"autoRename\": true,\r\n \"stringMap\":[]\r\n} */\r\n\r\n.end-bar {\r\n background-color: $rightbar-bg;\r\n box-shadow: 0 0 24px 0 rgba($dark, 0.1), 0 1px 0 0 rgba($dark, 0.08);\r\n display: block;\r\n position: fixed;\r\n transition: all 200ms ease-out;\r\n width: $rightbar-width;\r\n z-index: 9999;\r\n float: right !important;\r\n right: -($rightbar-width + 10px);\r\n top: 0;\r\n bottom: 0;\r\n padding-bottom: 80px;\r\n\r\n .rightbar-title {\r\n background-color: $rightbar-title-bg;\r\n padding: 27px 25px;\r\n color: $rightbar-title-color;\r\n }\r\n .end-bar-toggle {\r\n background-color: $rightbar-title-btn-bg;\r\n height: 24px;\r\n width: 24px;\r\n line-height: 22px;\r\n color: $rightbar-title-btn-color;\r\n text-align: center;\r\n border-radius: 50%;\r\n margin-top: -4px;\r\n }\r\n}\r\n\r\n.rightbar-overlay {\r\n background-color: $rightbar-overlay-bg;\r\n opacity: 0.2;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n display: none;\r\n z-index: 9998;\r\n transition: all .2s ease-out;\r\n}\r\n\r\n.end-bar-enabled {\r\n .end-bar {\r\n right: 0;\r\n }\r\n .rightbar-overlay {\r\n display: block;\r\n }\r\n}\r\n\r\n\r\n@include media-breakpoint-down(md) {\r\n .end-bar {\r\n overflow: auto;\r\n }\r\n}","// \r\n// page-head.scss\r\n//\r\n\r\n.page-title-box {\r\n .page-title {\r\n font-size: 18px;\r\n margin: 0;\r\n line-height: 75px;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n color: $page-title-color;\r\n }\r\n .page-title-right {\r\n float: right;\r\n margin-top: 20px;\r\n }\r\n\r\n .breadcrumb {\r\n padding-top: 8px;\r\n }\r\n}\r\n\r\n.page-title-box-sm {\r\n .page-title {\r\n line-height: 1 !important;\r\n margin-bottom: 25px;\r\n }\r\n .page-title-right {\r\n float: right;\r\n margin-top: 0;\r\n }\r\n\r\n .breadcrumb {\r\n padding-top: 0;\r\n margin-top: -3px !important;\r\n }\r\n}\r\n\r\n\r\n.text-title {\r\n color: $text-title-color;\r\n\r\n &:hover {\r\n color: $text-title-color;\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n .page-title-box {\r\n .page-title {\r\n display: block;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n line-height: 70px;\r\n }\r\n .breadcrumb {\r\n display: none;\r\n }\r\n .page-title-right {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@media (max-width: 419px) {\r\n .page-title-box .breadcrumb {\r\n display: none;\r\n }\r\n}","// \r\n// footer.scss\r\n//\r\n\r\n.footer {\r\n border-top: 1px solid #{rgba(map-get($grays, \"600\"), 0.2)};\r\n bottom: 0;\r\n padding: 19px 24px 20px;\r\n position: absolute;\r\n right: 0;\r\n color: #{map-get($grays, \"600\")};\r\n left: $leftbar-width;\r\n transition: $transition-base;\r\n\r\n .footer-links {\r\n a {\r\n color: #{map-get($grays, \"600\")};\r\n margin-left: 1.5rem;\r\n transition: all .4s;\r\n &:hover {\r\n color: #{map-get($grays, \"900\")};\r\n }\r\n &:first-of-type {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n .footer {\r\n left: 0 !important;\r\n text-align: center;\r\n }\r\n}\r\n\r\n\r\n// Used for account authentication pages\r\n.footer-alt {\r\n left: 0;\r\n border: none;\r\n text-align: center;\r\n}\r\n\r\n// Layout - Topnav\r\nbody[data-layout=\"topnav\"] {\r\n .footer {\r\n left: 0 !important;\r\n padding: 19px 0 20px;\r\n }\r\n &[data-layout-mode=\"boxed\"] {\r\n .footer {\r\n max-width: $boxed-layout-width;\r\n }\r\n }\r\n}\r\n\r\nbody[data-layout-mode=\"boxed\"] {\r\n .footer {\r\n border: none;\r\n margin: 0 auto;\r\n background-color: $body-bg;\r\n box-shadow: $box-shadow;\r\n max-width: calc(#{$boxed-layout-width} - #{$leftbar-width});\r\n }\r\n\r\n &[data-leftbar-compact-mode=\"condensed\"] {\r\n .footer {\r\n max-width: calc(#{$boxed-layout-width} - 70px);\r\n }\r\n }\r\n}\r\n\r\nbody[data-layout=\"detached\"] {\r\n .footer {\r\n left: 0;\r\n\r\n .container-fluid {\r\n max-width: 100%;\r\n padding: 0;\r\n }\r\n }\r\n}\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .footer {\r\n border-top: 1px solid #{rgba(map-get($dark-grays, \"600\"), 0.2)};\r\n color: #{map-get($dark-grays, \"600\")};\r\n \r\n .footer-links {\r\n a {\r\n color: #{map-get($dark-grays, \"600\")};\r\n &:hover {\r\n color: #{map-get($dark-grays, \"900\")};\r\n }\r\n }\r\n }\r\n }\r\n &[data-layout-mode=\"boxed\"] {\r\n .footer {\r\n background-color: var(--#{$variable-prefix}body-bg);\r\n }\r\n }\r\n}","// \r\n// horizontal-nav.scss\r\n//\r\n\r\n.topnav-navbar {\r\n padding: 0;\r\n margin: 0;\r\n min-height: 70px;\r\n position: fixed;\r\n left: 0 !important;\r\n z-index: 1002;\r\n\r\n .topnav-logo {\r\n line-height: 70px;\r\n float: left;\r\n padding-right: 20px;\r\n min-width: 160px;\r\n\r\n .topnav-logo-sm {\r\n display: none;\r\n }\r\n }\r\n\r\n .navbar-toggle {\r\n position: relative;\r\n cursor: pointer;\r\n float: left;\r\n margin: 27px 20px;\r\n padding: 0;\r\n background-color: transparent;\r\n border: none;\r\n\r\n .lines {\r\n width: 25px;\r\n display: block;\r\n position: relative;\r\n height: 16px;\r\n transition: all .5s ease;\r\n }\r\n span {\r\n height: 2px;\r\n width: 100%;\r\n background-color: rgba($dark, 0.8);\r\n display: block;\r\n margin-bottom: 5px;\r\n transition: transform .5s ease;\r\n }\r\n &.open {\r\n span {\r\n position: absolute;\r\n &:first-child {\r\n top: 7px;\r\n transform: rotate(45deg);\r\n }\r\n &:nth-child(2) {\r\n visibility: hidden;\r\n }\r\n &:last-child {\r\n width: 100%;\r\n top: 7px;\r\n transform: rotate(-45deg);\r\n }\r\n }\r\n }\r\n }\r\n\r\n .app-search {\r\n float: left;\r\n }\r\n}\r\n\r\n.topnav {\r\n background: $bg-topnav;\r\n\r\n .topnav-menu {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .navbar-nav {\r\n .nav-link {\r\n font-size: .9375rem;\r\n position: relative;\r\n padding: 1rem 1.3rem;\r\n }\r\n }\r\n .nav-item {\r\n &.active {\r\n > a {\r\n color: $menu-item-active;\r\n }\r\n }\r\n }\r\n .navbar-dark {\r\n .dropdown {\r\n &.active, &:active {\r\n >.nav-link {\r\n color: $white;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.arrow-down {\r\n display: inline-block;\r\n\r\n &:after {\r\n border-color: initial;\r\n border-style: solid;\r\n border-width: 0 0 1px 1px;\r\n content: \"\";\r\n height: .4em;\r\n display: inline-block;\r\n right: 5px;\r\n top: 50%;\r\n margin-left: 10px;\r\n transform: rotate(-45deg) translateY(-50%);\r\n transform-origin: top;\r\n transition: all .3s ease-out;\r\n width: .4em;\r\n }\r\n}\r\n\r\nbody[data-layout=\"topnav\"] {\r\n .container-fluid {\r\n padding-right: $grid-gutter-width;\r\n padding-left: $grid-gutter-width;\r\n }\r\n}\r\n\r\n@include media-breakpoint-up(lg) {\r\n body[data-layout=\"topnav\"] {\r\n .container-fluid {\r\n max-width: 95%;\r\n }\r\n &[data-layout-mode=\"boxed\"]{\r\n .container-fluid {\r\n max-width: 97%;\r\n }\r\n }\r\n }\r\n\r\n .topnav {\r\n .navbar-nav {\r\n .nav-item {\r\n &:first-of-type {\r\n .nav-link {\r\n padding-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n .dropdown {\r\n .dropdown-menu {\r\n margin-top: 0;\r\n border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius;\r\n min-width: calc(#{$dropdown-min-width} + 1.5rem);\r\n @include font-size(calc(#{$dropdown-font-size} - 0.01rem));\r\n\r\n .arrow-down {\r\n &::after {\r\n right: 15px;\r\n transform: rotate(-135deg) translateY(-50%);\r\n position: absolute;\r\n }\r\n }\r\n\r\n .dropdown {\r\n .dropdown-menu {\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n display: none\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n > .dropdown-menu {\r\n display: block;\r\n }\r\n }\r\n }\r\n .dropdown:hover > .dropdown-menu >.dropdown:hover > .dropdown-menu {\r\n display: block\r\n }\r\n }\r\n \r\n .dropdown.active > a.dropdown-item {\r\n color: $dropdown-link-active-color;\r\n @include gradient-bg($dropdown-link-active-bg);\r\n }\r\n}\r\n\r\n@include media-breakpoint-up(xxl) {\r\n body[data-layout=\"topnav\"] {\r\n .container-fluid {\r\n max-width: 85%;\r\n }\r\n }\r\n}\r\n\r\n@include media-breakpoint-up(lg) {\r\n .navbar-toggle {\r\n display: none;\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n .topnav-navbar {\r\n .topnav-logo-lg {\r\n display: none;\r\n }\r\n .topnav-logo {\r\n min-width: 50px;\r\n padding-right: 0;\r\n text-align: center;\r\n }\r\n .topnav-logo-sm {\r\n display: block !important;\r\n }\r\n }\r\n\r\n .topnav {\r\n .navbar-nav {\r\n .nav-link {\r\n padding: 0.75rem 1.3rem;\r\n }\r\n }\r\n .dropdown {\r\n .dropdown-menu {\r\n background-color: transparent;\r\n border: none;\r\n box-shadow: none;\r\n padding-left: 15px;\r\n }\r\n .dropdown-item {\r\n position: relative;\r\n background-color: transparent;\r\n }\r\n }\r\n .navbar-dark {\r\n .dropdown {\r\n .dropdown-item {\r\n color: rgba($white, 0.5);\r\n \r\n &.active, &:active {\r\n color: $white;\r\n }\r\n }\r\n }\r\n }\r\n .arrow-down {\r\n &::after {\r\n right: 15px;\r\n position: absolute;\r\n }\r\n }\r\n }\r\n}","//\r\n// Nunito fonts\r\n//\r\n\r\n@font-face {\r\n font-family: 'Nunito';\r\n src: url('../../../fonts/Nunito-Light.eot');\r\n src: local('Nunito Light'), local('Nunito-Light'), url('../../../fonts/Nunito-Light.eot?#iefix') format('embedded-opentype'), url('../../../fonts/Nunito-Light.woff') format('woff'), url('../../../fonts/Nunito-Light.ttf') format('truetype'), url('../../../fonts/Nunito-Light.svg#Roboto') format('svg');\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: 'Nunito';\r\n src: url('../../../fonts/Nunito-Regular.eot');\r\n src: local('Nunito Regular'), local('Nunito-Regular'), url('../../../fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'), url('../../../fonts/Nunito-Regular.woff') format('woff'), url('../../../fonts/Nunito-Regular.ttf') format('truetype'), url('../../../fonts/Nunito-Regular.svg#Roboto') format('svg');\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: 'Nunito';\r\n src: url('../../../fonts/Nunito-SemiBold.eot');\r\n src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url('../../../fonts/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'), url('../../../fonts/Nunito-SemiBold.woff') format('woff'), url('../../../fonts/Nunito-SemiBold.ttf') format('truetype'), url('../../../fonts/Nunito-SemiBold.svg#Roboto') format('svg');\r\n font-weight: 600;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: 'Nunito';\r\n src: url('../../../fonts/Nunito-Bold.eot');\r\n src: local('Nunito Bold'), local('Nunito-Bold'), url('../../../fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'), url('../../../fonts/Nunito-Bold.woff') format('woff'), url('../../../fonts/Nunito-Bold.ttf') format('truetype'), url('../../../fonts/Nunito-Bold.svg#Roboto') format('svg');\r\n font-weight: 700;\r\n font-style: normal;\r\n}","// \r\n// accordions.scss\r\n//\r\n\r\n.custom-accordion {\r\n\r\n .card {\r\n box-shadow: none;\r\n }\r\n\r\n .card-header {\r\n background-color: #{map-get($grays, \"100\")};\r\n }\r\n\r\n .card-body {\r\n border: #{($border-width) solid map-get($grays, \"100\")};\r\n }\r\n\r\n .accordion-arrow {\r\n font-size: 1.2rem;\r\n position: absolute;\r\n right: 0;\r\n }\r\n a {\r\n &.collapsed {\r\n i.accordion-arrow {\r\n &:before {\r\n content: \"\\F142\";\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.custom-accordion-title {\r\n color: $custom-accordion-title-color;\r\n position: relative;\r\n\r\n &:hover {\r\n color: #{lighten(map-get($grays, \"900\"),7.5%)};\r\n }\r\n}\r\n\r\n.accordion {\r\n >.card {\r\n >.card-header {\r\n border-radius: 0;\r\n margin-bottom: -1px;\r\n }\r\n }\r\n}\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .custom-accordion {\r\n .card-header {\r\n background-color: #{map-get($dark-grays, \"100\")};\r\n }\r\n .card-body {\r\n border: #{($border-width) solid map-get($dark-grays, \"100\")};\r\n }\r\n }\r\n .custom-accordion-title {\r\n &:hover {\r\n color: #{lighten(map-get($dark-grays, \"400\"),7.5%)};\r\n }\r\n }\r\n}","//\n// alert.scss\n//\n\n@each $color, $value in $theme-colors {\n .alert-#{$color} {\n color: shade-color($value, 5%);\n background-color: rgba($value, .18);\n border-color: rgba($value, 0.25);\n .alert-link {\n color: shade-color($value, 30%);\n }\n }\n}\n\n\n\n\n","//\n// avatar.scss (avatar thumbnail sizes)\n//\n\n.avatar-xs {\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.avatar-sm {\n height: 3rem;\n width: 3rem;\n}\n\n.avatar-md {\n height: 4.5rem;\n width: 4.5rem;\n}\n\n.avatar-lg {\n height: 6rem;\n width: 6rem;\n}\n\n.avatar-xl {\n height: 7.5rem;\n width: 7.5rem;\n}\n\n.avatar-title {\n align-items: center;\n background-color: $primary;\n color: $white;\n display: flex;\n font-weight: $font-weight-semibold;\n height: 100%;\n justify-content: center;\n width: 100%;\n}\n\n.dis_mid {\n display: block;\n margin: 0 auto;\n}","// \r\n// breadcrumb.scss\r\n//\r\n\r\n\r\n// Breadcrumb item arrow\r\n.breadcrumb-item {\r\n +.breadcrumb-item {\r\n &::before {\r\n font-family: \"Material Design Icons\";\r\n font-size: 16px;\r\n line-height: 1.3;\r\n }\r\n }\r\n}","// \r\n// buttons.scss\r\n//\r\n\r\n.btn {\r\n .mdi {\r\n &:before {\r\n line-height: initial;\r\n }\r\n }\r\n}\r\n\r\n// Button Shadows\r\n@each $color, $value in $theme-colors {\r\n .btn-#{$color} {\r\n @include button-shadow($value);\r\n }\r\n}\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n\r\n @each $color, $value in $dark-theme-colors {\r\n .btn-#{$color} {\r\n @include button-shadow($value);\r\n }\r\n }\r\n\r\n .btn-light {\r\n background-color: #{map-get($dark-grays, \"300\")};\r\n border-color: #{map-get($dark-grays, \"300\")};\r\n color: #{map-get($dark-grays, \"900\")};\r\n }\r\n .btn-dark {\r\n background-color: #{map-get($dark-grays, \"900\")};\r\n border-color: #{map-get($dark-grays, \"900\")};\r\n color: #{map-get($dark-grays, \"100\")};\r\n }\r\n .btn-secondary {\r\n background-color: #{map-get($dark-grays, \"600\")};\r\n border-color: #{map-get($dark-grays, \"600\")};\r\n color: #{map-get($dark-grays, \"300\")};\r\n }\r\n\r\n .btn-outline-light {\r\n border-color: #{map-get($dark-grays, \"300\")};\r\n color: #{map-get($dark-grays, \"300\")};\r\n &:hover,\r\n &.active,\r\n &:active,\r\n &:focus {\r\n color: #{map-get($dark-grays, \"900\")} !important;\r\n background-color: #{map-get($dark-grays, \"300\")};\r\n }\r\n }\r\n .btn-outline-dark {\r\n border-color: #{map-get($dark-grays, \"900\")};\r\n color: #{map-get($dark-grays, \"900\")};\r\n &:hover,\r\n &.active,\r\n &:active,\r\n &:focus {\r\n color: #{map-get($dark-grays, \"100\")} !important;\r\n background-color: #{map-get($dark-grays, \"900\")};\r\n }\r\n }\r\n .btn-outline-secondary {\r\n border-color: #{map-get($dark-grays, \"600\")};\r\n color: #{map-get($dark-grays, \"600\")};\r\n &:hover,\r\n &.active,\r\n &:active,\r\n &:focus {\r\n color: #{map-get($dark-grays, \"300\")} !important;\r\n background-color: #{map-get($dark-grays, \"600\")};\r\n }\r\n }\r\n}","// Button shadow\n\n@mixin button-shadow($color) {\n box-shadow: $btn-box-shadow rgba($color, 0.5);\n}","//\n// _badges.scss\n//\n\n// Lighten badge (soft)\n\n@each $color, $value in $theme-colors {\n .badge-#{$color}-lighten {\n @include badge-variant-light($value);\n &[href] {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.18);\n }\n &[href] {\n &:hover,\n &:focus {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.4);\n }\n }\n }\n}\n\n// Outline badge\n\n@each $color, $value in $theme-colors {\n .badge-outline-#{$color} {\n @include badge-variant-outline($value);\n &[href] {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.2);\n }\n &[href] {\n &:hover,\n &:focus {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.2);\n }\n }\n }\n}\n\n.badge {\n vertical-align: middle;\n &.badge-lg {\n padding: $badge-padding-y * 2 $badge-padding-x * 2.5;\n font-size: $badge-font-size + 0.1em;\n }\n}\n\n// Lighten badge (soft)\n\n// Dark mode\nbody[data-layout-color=\"dark\"] {\n // Lighten badge (soft)\n @each $color, $value in $dark-theme-colors {\n .badge-#{$color}-lighten {\n @include badge-variant-light($value);\n &[href] {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.18);\n }\n &[href] {\n &:hover,\n &:focus {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.4);\n }\n }\n }\n }\n\n // Outline badge\n @each $color, $value in $dark-theme-colors {\n .badge-outline-#{$color} {\n @include badge-variant-outline($value);\n &[href] {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.2);\n }\n &[href] {\n &:hover,\n &:focus {\n color: $value;\n text-decoration: none;\n background-color: rgba($value, 0.2);\n }\n }\n }\n }\n}\n","\n// Lighten badge\n@mixin badge-variant-light($bg) {\n color: $bg;\n background-color: rgba($bg, 0.18);\n}\n\n// Outline badge\n\n@mixin badge-variant-outline($bg) {\n color: $bg;\n border: 1px solid $bg;\n background-color: transparent;\n}","// \r\n// card.scss\r\n//\r\n\r\n.card {\r\n border: none;\r\n box-shadow: $card-box-shadow;\r\n margin-bottom: $grid-gutter-width;\r\n\r\n .header-title {\r\n // margin-bottom: 0.5rem;\r\n margin-bottom: 0;\r\n text-transform: uppercase;\r\n letter-spacing: 0.02em;\r\n font-size: $font-size-base;\r\n margin-top: 0;\r\n }\r\n .card-drop {\r\n font-size: 20px;\r\n // line-height: 0;\r\n color: inherit;\r\n }\r\n .card-widgets {\r\n float: right;\r\n height: 16px;\r\n > a {\r\n color: inherit;\r\n font-size: 18px;\r\n display: inline-block;\r\n line-height: 1;\r\n\r\n &.collapsed {\r\n i {\r\n &:before {\r\n content: \"\\F0415\";\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n// Card title / Card Header\r\n.card-title,\r\n.card-header {\r\n margin-top: 0;\r\n}\r\n\r\n\r\n//Card disable loading (Custom Cards)\r\n.card-disabled {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n border-radius: $card-border-radius;\r\n background: #{rgba(map-get($grays, \"100\"), 0.8)};\r\n cursor: progress;\r\n\r\n .card-portlets-loader {\r\n background-color: #{map-get($grays, \"900\")};\r\n animation: rotatebox 1.2s infinite ease-in-out;\r\n height: 30px;\r\n width: 30px;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n margin-left: - ($grid-gutter-width * 0.5);\r\n margin-top: - ($grid-gutter-width * 0.5);\r\n }\r\n}\r\n\r\n@keyframes rotatebox {\r\n 0% {\r\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\r\n }\r\n 50% {\r\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\r\n }\r\n 100% {\r\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\r\n }\r\n}\r\n\r\n// Pricing card\r\n\r\n.card-pricing {\r\n position: relative;\r\n \r\n .card-pricing-plan-name {\r\n padding-bottom: 20px;\r\n }\r\n\r\n .card-pricing-icon {\r\n font-size: 22px;\r\n box-shadow: $box-shadow;\r\n height: 60px;\r\n display: inline-block;\r\n width: 60px;\r\n line-height: 56px;\r\n border-radius: 50%;\r\n }\r\n\r\n .card-pricing-price {\r\n padding: 30px 0 0;\r\n\r\n span {\r\n font-size: 40%;\r\n color: #{map-get($grays, \"600\")};\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n }\r\n }\r\n .card-pricing-features {\r\n color: #{map-get($grays, \"600\")};\r\n list-style: none;\r\n margin: 0;\r\n padding: 20px 0 0 0;\r\n\r\n li {\r\n padding: 15px;\r\n }\r\n }\r\n}\r\n\r\n.card-pricing-recommended {\r\n\r\n @include media-breakpoint-up(lg) {\r\n margin-top: -1.9375rem;\r\n }\r\n\r\n .card-pricing-plan-tag {\r\n background-color: rgba($danger,0.2);\r\n color: $danger;\r\n padding: 5px 0;\r\n font-weight: 700;\r\n border-radius: .25rem .25rem 0 0;\r\n margin: -1.5rem -1.5rem 1.5rem -1.5rem;\r\n }\r\n}\r\n\r\n// Custom card height\r\n\r\n.card-h-100 {\r\n height: calc(100% - #{$grid-gutter-width});\r\n}\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .card-pricing {\r\n .card-pricing-price span, .card-pricing-features {\r\n color: map-get($dark-grays, \"600\");\r\n }\r\n }\r\n .card-disabled {\r\n background: #{rgba(map-get($dark-grays, \"100\"), 0.8)};\r\n .card-portlets-loader {\r\n background-color: #{map-get($dark-grays, \"900\")};\r\n }\r\n }\r\n}","// \n// custom-forms.scss\n//\n\n\n@each $color,\n$value in $theme-colors {\n .form-checkbox-#{$color},\n .form-radio-#{$color} {\n .form-check-input {\n &:checked {\n background-color: $value;\n border-color: $value;\n }\n }\n }\n}\n","// \r\n// dropdown.scss\r\n//\r\n\r\n.dropdown-menu {\r\n box-shadow: $box-shadow;\r\n}\r\n\r\n.dropdown-menu-animated {\r\n &.dropdown-menu-end[style] {\r\n left: auto;\r\n right: 0;\r\n }\r\n}\r\n\r\n// Dropdown Animated (Custom)\r\n.dropdown-menu-animated {\r\n animation-name: DropDownSlide;\r\n animation-duration: .3s;\r\n animation-fill-mode: both;\r\n position: absolute;\r\n margin: 0;\r\n z-index: 1000;\r\n \r\n &.show {\r\n top: 100%!important;\r\n }\r\n\r\n i {\r\n display: inline-block;\r\n }\r\n \r\n &.dropdown-menu[data-popper-placement^=right],\r\n &.dropdown-menu[data-popper-placement^=top],\r\n &.dropdown-menu[data-popper-placement^=left]{\r\n top: auto !important;\r\n animation: none !important;\r\n }\r\n}\r\n\r\n@keyframes DropDownSlide {\r\n 100% {\r\n transform: translateY(0)\r\n }\r\n 0% {\r\n transform: translateY(10px)\r\n }\r\n}\r\n\r\n\r\n// Dropdown Large (Custom)\r\n@media (min-width: 576px) {\r\n .dropdown-lg {\r\n width: $dropdown-lg-width;\r\n }\r\n}\r\n\r\n// Dropdown with Icons\r\n.dropdown-icon-item {\r\n display: block;\r\n border-radius: 3px;\r\n line-height: 34px;\r\n text-align: center;\r\n padding: 15px 0 9px;\r\n display: block;\r\n border: 1px solid transparent;\r\n color: $dropdown-link-color;\r\n\r\n img {\r\n height: 24px;\r\n }\r\n\r\n span {\r\n display: block;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n &:hover {\r\n background-color: $dropdown-link-hover-bg;\r\n color: $dropdown-link-hover-color;\r\n }\r\n}\r\n\r\n\r\n// Dropdown arrow hide\r\n.arrow-none {\r\n &:after {\r\n display: none;\r\n }\r\n}","// \n// docs.scss\n//\n\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 2em;\n color: #{map-get($grays, \"900\")};\n max-height: 420px;\n margin: -10px 0 -30px;\n border: 1px solid #{rgba(map-get($grays, \"600\"), 0.2)};\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-subst {\n color: #{map-get($grays, \"900\")};\n font-weight: bold;\n}\n\n.hljs-number,\n.hljs-literal,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag .hljs-attr {\n color: $teal;\n}\n\n.hljs-string,\n.hljs-doctag {\n color: $danger;\n}\n\n.hljs-title,\n.hljs-section,\n.hljs-selector-id {\n color: $danger;\n font-weight: bold;\n}\n\n.hljs-subst {\n font-weight: normal;\n}\n\n\n.hljs-tag,\n.hljs-name,\n.hljs-attribute {\n color: darken($blue, 15%);\n font-weight: normal;\n}\n\n.hljs-regexp,\n.hljs-link {\n color: $teal;\n}\n\n.hljs-symbol,\n.hljs-bullet {\n color: $pink;\n}\n\n.hljs-built_in,\n.hljs-builtin-name {\n color: $info;\n}\n\n.hljs-meta {\n color: #{map-get($grays, \"800\")};\n font-weight: bold;\n}\n\n.hljs-deletion {\n background: #fdd;\n}\n\n.hljs-addition {\n background: #dfd;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-comment {\n color: #{map-get($grays, \"400\")};\n}\n\n\n// Dark Mode\nbody[data-layout-color=\"dark\"] {\n .hljs {\n border: 1px solid #{rgba(map-get($dark-grays, \"600\"), 0.2)};\n }\n .hljs,\n .hljs-keyword,\n .hljs-selector-tag,\n .hljs-subst {\n color: #{map-get($dark-grays, \"900\")};\n }\n .hljs-meta {\n color: #{map-get($dark-grays, \"800\")};\n }\n .hljs-comment {\n color: #{map-get($dark-grays, \"400\")};\n }\n}","//\r\n// forms.scss\r\n//\r\n\r\n// Form-control light\r\n.form-control-light {\r\n background-color: #{map-get($grays, \"100\")} !important;\r\n border-color: #{map-get($grays, \"100\")} !important;\r\n}\r\n\r\n\r\n// Form elements (Color and Range)\r\ninput.form-control[type=\"color\"],\r\ninput.form-control[type=\"range\"] {\r\n min-height: 39px;\r\n}\r\n\r\n\r\n// Custom select\r\n.custom-select.is-invalid, .form-control.is-invalid,.custom-select:invalid, .form-control:invalid,\r\n.custom-select.is-valid, .form-control.is-valid, .custom-select:valid,.form-control:valid {\r\n &:focus {\r\n box-shadow: none !important;\r\n }\r\n}\r\n\r\nselect.form-control {\r\n &:not([size]):not([multiple]) {\r\n height: $input-height;\r\n }\r\n}\r\n\r\nselect.form-control-sm {\r\n&:not([size]):not([multiple]) {\r\n height: $input-height-sm;\r\n}\r\n}\r\n\r\n// Show Password\r\n.password-eye {\r\n &:before {\r\n font-family: \"Material Design Icons\";\r\n content: \"\\F06D0\";\r\n font-style: normal;\r\n font-weight: 400;\r\n font-variant: normal;\r\n vertical-align: middle;\r\n line-height: 1.2;\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n.show-password {\r\n .password-eye {\r\n &:before {\r\n content: \"\\F06D1\";\r\n }\r\n } \r\n}\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .form-control-light {\r\n background-color: #{map-get($dark-grays, \"100\")} !important;\r\n border-color: #{map-get($dark-grays, \"100\")} !important;\r\n }\r\n}","// \r\n// modal.scss\r\n//\r\n\r\n// Title text within header\r\n.modal-title {\r\n margin-top: 0;\r\n}\r\n\r\n// Modal full width\r\n.modal-full-width {\r\n width: 95%;\r\n max-width: none;\r\n}\r\n\r\n// Modal Positions\r\n.modal-top {\r\n margin: 0 auto;\r\n}\r\n\r\n// Right Modal\r\n.modal-right {\r\n position: absolute;\r\n right: 0;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n height: 100%;\r\n margin: 0;\r\n background-color: $modal-content-bg;\r\n align-content: center;\r\n transform: translate(25%,0) !important;\r\n\r\n button.btn-close {\r\n position: fixed;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 1;\r\n }\r\n}\r\n\r\n.modal {\r\n &.show {\r\n .modal-right, .modal-left {\r\n transform: translate(0,0) !important;\r\n }\r\n }\r\n}\r\n\r\n// Bottom modal\r\n.modal-bottom {\r\n display: flex;\r\n flex-flow: column nowrap;\r\n -ms-flex-pack: end;\r\n justify-content: flex-end;\r\n height: 100%;\r\n margin: 0 auto;\r\n align-content: center;\r\n}\r\n\r\n// Colored modal header\r\n.modal-colored-header {\r\n color: $white;\r\n border-radius: 0;\r\n\r\n .btn-close {\r\n color: $white !important;\r\n }\r\n}\r\n\r\n// Full filled modals\r\n.modal-filled {\r\n color: $white;\r\n\r\n .modal-header {\r\n background-color: rgba($white,0.07);\r\n }\r\n\r\n .modal-header,.modal-footer {\r\n border: none;\r\n }\r\n\r\n .btn-close {\r\n color: $white !important;\r\n }\r\n}\r\n\r\n\r\n","// \r\n// tabs.scss\r\n//\r\n\r\n.nav-tabs,.nav-pills {\r\n > li {\r\n > a {\r\n color: #{map-get($grays, \"700\")};\r\n font-weight: $font-weight-semibold;\r\n }\r\n }\r\n}\r\n\r\n.nav-pills {\r\n > a {\r\n color: #{map-get($grays, \"700\")};\r\n font-weight: $font-weight-semibold; \r\n }\r\n}\r\n\r\n\r\n.bg-nav-pills {\r\n background-color: $nav-pills-bg;\r\n}\r\n\r\n// \r\n// nav-bordered\r\n//\r\n\r\n.nav-tabs.nav-bordered {\r\n border-bottom: 2px solid #{rgba(map-get($grays, \"600\"), 0.2)};\r\n\r\n .nav-item {\r\n margin-bottom: -1px;\r\n }\r\n\r\n li {\r\n a {\r\n border: 0;\r\n padding: 0.625rem 1.25rem;\r\n }\r\n a.active {\r\n border-bottom: 2px solid $primary;\r\n }\r\n }\r\n}\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .nav-tabs,.nav-pills {\r\n > li {\r\n > a {\r\n color: #{map-get($dark-grays, \"700\")};\r\n }\r\n }\r\n }\r\n .nav-pills {\r\n > a {\r\n color: #{map-get($dark-grays, \"700\")};\r\n }\r\n }\r\n \r\n .nav-tabs.nav-bordered {\r\n border-bottom: 2px solid #{rgba(map-get($dark-grays, \"600\"), 0.2)};\r\n }\r\n}","// \r\n// pagination.scss\r\n//\r\n\r\n// Pagination rounded (Custom)\r\n.pagination-rounded {\r\n .page-link {\r\n border-radius: 30px !important;\r\n margin: 0 3px !important;\r\n border: none;\r\n }\r\n}","// \r\n// popover.scss\r\n//\r\n\r\n.popover-header {\r\n margin-top: 0;\r\n}","// \r\n// print.scss\r\n//\r\n\r\n// Used invoice page\r\n@media print {\r\n .leftside-menu,\r\n .end-bar,\r\n .page-title-box,\r\n .navbar-custom,\r\n .footer {\r\n display: none;\r\n }\r\n .card-body,\r\n .content-page,\r\n .end-bar,\r\n .content,\r\n body {\r\n padding: 0;\r\n margin: 0;\r\n }\r\n}","// \r\n// progress.scss\r\n//\r\n\r\n// Custom height\r\n\r\n// Progress height small\r\n.progress-sm {\r\n height: 5px;\r\n}\r\n\r\n\r\n// Progress height medium\r\n.progress-md {\r\n height: 8px;\r\n}\r\n\r\n\r\n// Progress height large\r\n.progress-lg {\r\n height: 12px;\r\n}\r\n\r\n// Progress height extra large\r\n.progress-xl {\r\n height: 15px;\r\n}","//\n// reboot.scss\n//\n\nbody {\n padding-right: 0px !important;\n padding-left: 0px !important;\n &.loading {\n visibility: hidden;\n }\n}\n\nbutton, a {\n outline: none !important;\n}\n\n// Forms\n\nlabel {\n font-weight: $font-weight-semibold;\n}\n\n// Address\naddress.address-lg {\n line-height: 24px;\n}\n\nb, strong {\n font-weight: $font-weight-bold;\n}","// \r\n// ribbons.scss\r\n//\r\n\r\n.ribbon-box {\r\n position: relative;\r\n\r\n .ribbon{\r\n position: relative;\r\n clear: both;\r\n padding: 5px 12px;\r\n margin-bottom: 15px;\r\n box-shadow: 2px 5px 10px rgba($dark, 0.15);\r\n color: $white;\r\n font-size: 13px;\r\n font-weight: $font-weight-semibold;\r\n\r\n &:before{\r\n content: \" \";\r\n border-style: solid;\r\n border-width: 10px;\r\n display: block;\r\n position: absolute;\r\n bottom: -10px;\r\n left: 0;\r\n margin-bottom: -10px;\r\n z-index: -1;\r\n }\r\n &.float-start {\r\n margin-left: -30px;\r\n border-radius: 0 3px 3px 0;\r\n }\r\n &.float-end {\r\n margin-right: -30px;\r\n border-radius: 3px 0 0 3px;\r\n\r\n &:before{\r\n right: 0;\r\n }\r\n }\r\n &.float-center {\r\n\r\n span {\r\n margin: 0 auto 20px auto;\r\n }\r\n }\r\n }\r\n\r\n .ribbon-content {\r\n clear: both;\r\n }\r\n \r\n @each $color, $value in $theme-colors {\r\n .ribbon-#{$color} {\r\n background: ($value);\r\n\r\n &:before {\r\n border-color: darken(($value),5%) transparent transparent;\r\n }\r\n }\r\n }\r\n\r\n\r\n /* Ribbon two */\r\n .ribbon-two {\r\n position: absolute;\r\n left: -5px;\r\n top: -5px;\r\n z-index: 1;\r\n overflow: hidden;\r\n width: 75px;\r\n height: 75px;\r\n text-align: right;\r\n\r\n span {\r\n font-size: 13px;\r\n color: $white;\r\n text-align: center;\r\n line-height: 20px;\r\n transform: rotate(-45deg);\r\n width: 100px;\r\n display: block;\r\n box-shadow: 0 0 8px 0 rgba($dark, 0.08), 0 1px 0 0 rgba($dark, 0.03);\r\n position: absolute;\r\n top: 19px;\r\n left: -21px;\r\n font-weight: $font-weight-semibold;\r\n\r\n &:before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 100%;\r\n z-index: -1;\r\n border-right: 3px solid transparent;\r\n border-bottom: 3px solid transparent;\r\n }\r\n\r\n &:after {\r\n content: \"\";\r\n position: absolute;\r\n right: 0;\r\n top: 100%;\r\n z-index: -1;\r\n border-left: 3px solid transparent;\r\n border-bottom: 3px solid transparent;\r\n }\r\n }\r\n }\r\n\r\n @each $color, $value in $theme-colors {\r\n .ribbon-two-#{$color} {\r\n\r\n span {\r\n background: ($value);\r\n \r\n &:before {\r\n border-left: 3px solid darken(($value),5%);\r\n border-top: 3px solid darken(($value),5%);\r\n }\r\n \r\n &:after {\r\n border-right: 3px solid darken(($value),5%);\r\n border-top: 3px solid darken(($value),5%);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n @each $color, $value in $dark-theme-colors {\r\n .ribbon-#{$color} {\r\n background: ($value);\r\n \r\n &:before {\r\n border-color: darken(($value),5%) transparent transparent;\r\n }\r\n }\r\n }\r\n \r\n @each $color, $value in $dark-theme-colors {\r\n .ribbon-two-#{$color} {\r\n \r\n span {\r\n background: ($value);\r\n \r\n &:before {\r\n border-left: 3px solid darken(($value),5%);\r\n border-top: 3px solid darken(($value),5%);\r\n }\r\n \r\n &:after {\r\n border-right: 3px solid darken(($value),5%);\r\n border-top: 3px solid darken(($value),5%);\r\n }\r\n }\r\n }\r\n }\r\n}","// \r\n// switch.scss\r\n//\r\n\r\n//Custom switch\r\n\r\ninput[data-switch] {\r\n display: none;\r\n\r\n + label {\r\n width: 56px;\r\n height: 24px;\r\n background-color: #{map-get($grays, \"100\")};\r\n background-image: none;\r\n border-radius: 2rem;\r\n cursor: pointer;\r\n display: inline-block;\r\n text-align: center;\r\n position: relative;\r\n transition: all 0.1s ease-in-out;\r\n\r\n &:before {\r\n color: #{map-get($grays, \"900\")};\r\n content: attr(data-off-label);\r\n display: block;\r\n font-family: inherit;\r\n font-weight: $font-weight-semibold;\r\n font-size: 0.75rem;\r\n line-height: 24px;\r\n position: absolute;\r\n right: 3px;\r\n margin: 0 .21667rem;\r\n top: 0;\r\n text-align: center;\r\n min-width: 1.66667rem;\r\n overflow: hidden;\r\n transition: all 0.1s ease-in-out;\r\n }\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n left: 4px;\r\n background-color: #{map-get($grays, \"500\")};\r\n box-shadow: none;\r\n border-radius: 2rem;\r\n height: 18px;\r\n width: 18px;\r\n top: 3px;\r\n transition: all 0.1s ease-in-out;\r\n }\r\n }\r\n &:checked {\r\n +label {\r\n background-color: $primary;\r\n &:before {\r\n color: $white;\r\n content: attr(data-on-label);\r\n right: auto;\r\n left: 4px;\r\n }\r\n &:after {\r\n left: 34px;\r\n background-color: #{map-get($grays, \"100\")};\r\n }\r\n }\r\n }\r\n}\r\n\r\ninput[data-switch=\"bool\"] {\r\n + label {\r\n background-color: $danger;\r\n }\r\n}\r\n\r\ninput:disabled {\r\n + label {\r\n opacity: 0.5;\r\n cursor: default;\r\n }\r\n}\r\n\r\ninput[data-switch=\"bool\"]+label:before,\r\ninput[data-switch=\"bool\"]:checked+label:before {\r\n color: $white !important;\r\n}\r\n\r\ninput[data-switch=\"bool\"]+label:after {\r\n background-color: #{map-get($grays, \"100\")};\r\n}\r\n\r\n@each $color,$value in $theme-colors {\r\n input[data-switch=\"#{$color}\"]:checked+label {\r\n background-color: #{$value};\r\n }\r\n}\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n input[data-switch] {\r\n &[data-switch=\"none\"] {\r\n + label {\r\n background-color: #{map-get($dark-grays, \"100\")};\r\n } \r\n }\r\n + label {\r\n &:before {\r\n color: #{map-get($dark-grays, \"900\")};\r\n }\r\n &:after {\r\n background-color: #{map-get($dark-grays, \"500\")};\r\n }\r\n }\r\n &:checked {\r\n +label {\r\n &:after {\r\n background-color: #{map-get($dark-grays, \"100\")};\r\n }\r\n }\r\n }\r\n }\r\n input[data-switch=\"bool\"]+label:after {\r\n background-color: #{map-get($dark-grays, \"100\")};\r\n }\r\n\r\n @each $color,$value in $dark-theme-colors {\r\n input[data-switch=\"#{$color}\"]:checked+label {\r\n background-color: #{$value};\r\n }\r\n }\r\n \r\n}","// \r\n// tables.scss\r\n//\r\n\r\n//Table centered (Custom)\r\n.table-centered {\r\n th, td {\r\n vertical-align: middle !important;\r\n }\r\n}\r\n\r\n\r\n// Custom table components (Custom)\r\n.table {\r\n .table-user {\r\n img {\r\n height: 30px;\r\n width: 30px;\r\n }\r\n }\r\n .action-icon {\r\n color: #{map-get($grays, \"600\")};\r\n font-size: 1.2rem;\r\n display: inline-block;\r\n padding: 0 3px;\r\n\r\n &:hover {\r\n color: #{map-get($grays, \"700\")};\r\n }\r\n }\r\n // &>:not(:first-child) {\r\n // border: inherit;\r\n // }\r\n > :not(caption) > * > * {\r\n background-color: var(--#{$variable-prefix}table-bg) !important;\r\n }\r\n &.table-bordered {\r\n tbody {\r\n border-top: $border-width solid;\r\n border-top-color: inherit;\r\n }\r\n }\r\n}\r\n\r\n// Tables fluid\r\n.table-nowrap {\r\n th, td {\r\n white-space: nowrap;\r\n }\r\n}\r\n\r\n\r\ntable {\r\n // Table Hover\r\n &.table-hover {\r\n thead,\r\n tbody {\r\n tr {\r\n &:hover {\r\n > * {\r\n --ct-table-accent-bg: #f1f3fa;\r\n }\r\n }\r\n }\r\n }\r\n } \r\n // Table Active \r\n tr {\r\n &.table-active {\r\n --ct-table-accent-bg: #f1f3fa;\r\n }\r\n }\r\n // Table Striped\r\n &.table-striped {\r\n tbody {\r\n tr {\r\n &:nth-of-type(odd) {\r\n >* {\r\n --ct-table-accent-bg: #f1f3fa;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n table {\r\n .action-icon {\r\n color: #{map-get($dark-grays, \"600\")};\r\n \r\n &:hover {\r\n color: #{map-get($dark-grays, \"700\")};\r\n }\r\n }\r\n // Table Light - Dark\r\n .table-light {\r\n --ct-table-bg: #464f5b;\r\n color: $white;\r\n border-color: $table-group-separator-color;\r\n }\r\n .table-dark {\r\n --ct-table-bg: #424e5a;\r\n }\r\n // Table Hover\r\n &.table-hover {\r\n thead,\r\n tbody {\r\n tr {\r\n &:hover {\r\n > * {\r\n --ct-table-accent-bg: rgba(64, 73, 84, 0.8);\r\n }\r\n }\r\n }\r\n }\r\n } \r\n // Table Active \r\n tr {\r\n &.table-active {\r\n --ct-table-accent-bg: rgba(64, 73, 84, 0.8);\r\n }\r\n }\r\n // Table Striped\r\n &.table-striped {\r\n tbody {\r\n tr {\r\n &:nth-of-type(odd) {\r\n >* {\r\n --ct-table-accent-bg: rgba(64, 73, 84, 0.8);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}","// \r\n// type.scss\r\n//\r\n\r\n.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{\r\n margin: 10px 0;\r\n font-weight: $font-weight-bold;\r\n}\r\n\r\n\r\n// Font sizes (Custom)\r\n\r\n.font-10 {\r\n font-size: 10px !important;\r\n}\r\n\r\n.font-11 {\r\n font-size: 11px !important;\r\n}\r\n\r\n.font-12 {\r\n font-size: 12px !important;\r\n}\r\n\r\n.font-13 {\r\n font-size: 13px !important;\r\n}\r\n\r\n.font-14 {\r\n font-size: 14px !important;\r\n}\r\n\r\n.font-15 {\r\n font-size: 15px !important;\r\n}\r\n\r\n.font-16 {\r\n font-size: 16px !important;\r\n}\r\n\r\n.font-18 {\r\n font-size: 18px !important;\r\n}\r\n\r\n.font-20 {\r\n font-size: 20px !important;\r\n}\r\n\r\n.font-22 {\r\n font-size: 22px !important;\r\n}\r\n\r\n.font-24 {\r\n font-size: 24px !important;\r\n}","// Background lighten\n\n@each $color, $value in $theme-colors {\n .bg-#{$color}-lighten {\n @include bg-variant-light($value);\n }\n}\n\n\n\n// Dark Mode\nbody[data-layout-color=\"dark\"] {\n @each $color, $value in $dark-theme-colors {\n // bg-color\n .bg-#{$color} {\n background-color: $value !important;\n }\n .bg-#{$color}-lighten {\n background-color: rgba($value, 0.25) !important;\n }\n }\n}\n\n","//\n// text.scss\n// \n\n// Weight\n\n.fw-semibold { font-weight: $font-weight-semibold !important; }\n\n.text-body {\n color: #{map-get($grays, \"700\")} !important;\n}\n\n\n// Dark mode\nbody[data-layout-color=\"dark\"] {\n @each $color, $value in $dark-theme-colors {\n .text-#{$color} {\n color: $value !important;\n }\n }\n .text-body {\n color: #{map-get($dark-grays, \"500\")} !important;\n }\n}\n\n\n\n\n","// Utilities\n\n@import \"utilities/background\";\n@import \"utilities/text\";\n\n\n// border style\n.border-dashed {\n border-style: dashed !important;\n}\n\n// Dark mode\nbody[data-layout-color=\"dark\"] {\n @each $color, $value in $dark-theme-colors {\n .border-#{$color} {\n border-color: $value !important;\n }\n }\n}","// \r\n// widgets.scss\r\n//\r\n\r\n// Progressbar with percentage\r\n.progress-w-percent {\r\n min-height: 20px;\r\n margin-bottom: 20px;\r\n\r\n .progress {\r\n width: calc(100% - 50px);\r\n float: left;\r\n margin-top: 8px;\r\n }\r\n\r\n .progress-value {\r\n width: 40px;\r\n float: right;\r\n text-align: right;\r\n line-height: 20px;\r\n }\r\n}\r\n\r\n\r\n// Simple tile box\r\n.widget-flat {\r\n position: relative;\r\n overflow: hidden;\r\n\r\n @media (min-width: 1200px) and (max-width: 1500px){\r\n i.widget-icon { \r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.widget-icon {\r\n color: $primary;\r\n font-size: 20px;\r\n background-color: rgba($primary, 0.25);\r\n height: 40px;\r\n width: 40px;\r\n text-align: center;\r\n line-height: 40px;\r\n border-radius: 3px;\r\n display: inline-block;\r\n}\r\n\r\n\r\n// Dashboard widgets\r\n.dash-item-overlay {\r\n position: absolute;\r\n /*rtl:ignore*/\r\n text-align: left;\r\n /*rtl:ignore*/\r\n left: 8%;\r\n max-width: 350px;\r\n padding: 20px;\r\n z-index: 1;\r\n}\r\n\r\n.chart-content-bg {\r\n background-color: #{lighten(map-get($grays, \"100\"), 2%)};\r\n}\r\n\r\n.chart-content-border {\r\n border: 1px solid #{map-get($grays, \"200\")};\r\n}\r\n\r\n.chart-widget-list {\r\n p {\r\n border-bottom: 1px solid #{map-get($grays, \"100\")};\r\n margin-bottom: 0.5rem;\r\n padding-bottom: 0.5rem;\r\n }\r\n}\r\n\r\n\r\n// Recent Activity (Timeline)\r\n.timeline-alt {\r\n padding: 20px 0;\r\n position: relative;\r\n \r\n .timeline-item {\r\n position: relative;\r\n\r\n &:before {\r\n background-color: #{map-get($grays, \"100\")};\r\n bottom: 0;\r\n content: \"\";\r\n left: 9px;\r\n position: absolute;\r\n top: 20px;\r\n width: 2px;\r\n z-index: 0;\r\n }\r\n\r\n .timeline-icon {\r\n float: left;\r\n height: 20px;\r\n width: 20px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n font-size: 12px;\r\n text-align: center;\r\n line-height: 16px;\r\n background-color: $white;\r\n }\r\n .timeline-item-info {\r\n margin-left: 30px;\r\n }\r\n }\r\n}\r\n\r\n\r\n// Inbox-widget\r\n.inbox-widget {\r\n\r\n .inbox-item {\r\n border-bottom: 1px solid #{lighten(map-get($grays, \"100\"), 5%)};\r\n overflow: hidden;\r\n padding: 0.625rem 0;\r\n position: relative;\r\n\r\n &:last-of-type {\r\n border-bottom: none;\r\n }\r\n\r\n .inbox-item-img {\r\n display: block;\r\n float: left;\r\n margin-right: 15px;\r\n width: 40px;\r\n\r\n img {\r\n width: 40px;\r\n }\r\n }\r\n \r\n .inbox-item-author {\r\n color: #{map-get($grays, \"800\")};\r\n display: block;\r\n margin-bottom: 3px;\r\n }\r\n\r\n .inbox-item-text {\r\n color: #{map-get($grays, \"500\")};\r\n display: block;\r\n font-size: 0.8125rem;\r\n margin: 0;\r\n }\r\n\r\n .inbox-item-date {\r\n color: #{map-get($grays, \"600\")};\r\n font-size: 0.6875rem;\r\n position: absolute;\r\n right: 5px;\r\n top: 10px;\r\n }\r\n }\r\n} \r\n\r\n\r\n// tilebox-one (Used Profile)\r\n.tilebox-one {\r\n i {\r\n position: absolute;\r\n right: 1.5rem;\r\n font-size: 2rem;\r\n opacity: 0.3;\r\n }\r\n}\r\n\r\n\r\n// tollfree box (Used Profile)\r\n.toll-free-box {\r\n i{\r\n position: absolute;\r\n left: 0;\r\n bottom: -15px;\r\n font-size: 4rem;\r\n opacity: 0.4;\r\n transform: rotate(30deg);\r\n }\r\n}\r\n\r\n\r\n// CTA box\r\n.cta-box {\r\n background-image: url(../../../images/bg-pattern.png);\r\n background-size: cover;\r\n\r\n .cta-box-title {\r\n font-size: 20px;\r\n line-height: 30px;\r\n }\r\n}\r\n\r\n\r\n// Chat widget\r\n.conversation-list {\r\n list-style: none;\r\n padding: 0 15px;\r\n li {\r\n margin-bottom: 20px;\r\n\r\n .conversation-actions {\r\n float: right;\r\n display: none;\r\n }\r\n\r\n &:hover {\r\n .conversation-actions {\r\n display: block;\r\n }\r\n }\r\n }\r\n .chat-avatar {\r\n float: left;\r\n text-align: center;\r\n width: 42px;\r\n img {\r\n border-radius: 100%;\r\n width: 100%;\r\n }\r\n i {\r\n font-size: 12px;\r\n font-style: normal;\r\n }\r\n }\r\n .ctext-wrap {\r\n background: $chat-secondary-user-bg;\r\n border-radius: 3px;\r\n display: inline-block;\r\n padding: 12px;\r\n position: relative;\r\n i {\r\n display: block;\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: bold;\r\n position: relative;\r\n }\r\n p {\r\n margin: 0;\r\n padding-top: 3px;\r\n }\r\n &:after {\r\n left: -11px;\r\n top: 0;\r\n border: solid transparent;\r\n content: \" \";\r\n height: 0;\r\n width: 0;\r\n position: absolute;\r\n pointer-events: none;\r\n border-top-color: $chat-secondary-user-bg;\r\n border-width: 6px;\r\n margin-right: -1px;\r\n border-right-color: $chat-secondary-user-bg;\r\n }\r\n }\r\n .conversation-text {\r\n float: left;\r\n font-size: 13px;\r\n margin-left: 12px;\r\n width: 70%;\r\n }\r\n .odd {\r\n .chat-avatar {\r\n float: right !important;\r\n }\r\n .conversation-text {\r\n float: right !important;\r\n margin-right: 12px;\r\n text-align: right;\r\n width: 70% !important;\r\n }\r\n .ctext-wrap {\r\n background-color: $chat-primary-user-bg;\r\n &:after {\r\n border-color: transparent;\r\n border-left-color: $chat-primary-user-bg;\r\n border-top-color: $chat-primary-user-bg;\r\n right: -10px;\r\n left: auto;\r\n }\r\n }\r\n\r\n .conversation-actions {\r\n float: left;\r\n }\r\n }\r\n}\r\n\r\n// Calendar Widget\r\n.calendar-widget {\r\n .datepicker-inline,\r\n table {\r\n width: 100%;\r\n\r\n tr {\r\n td,th,td.active.day,td.today.day {\r\n background-color: transparent !important;\r\n }\r\n td.active.day,\r\n td.today.day {\r\n color: $danger !important;\r\n text-shadow: none;\r\n font-weight: $font-weight-bold;\r\n\r\n &:hover {\r\n background-color: transparent !important;\r\n }\r\n }\r\n }\r\n\r\n td,th {\r\n height: 44.5px;\r\n }\r\n\r\n .datepicker-switch,\r\n .prev,\r\n .next {\r\n font-size: 1.1rem;\r\n background-color: rgba($primary, 0.1) !important;\r\n border-radius: 0;\r\n color: $primary;\r\n }\r\n }\r\n}\r\n\r\n// Multi-user\r\n.multi-user {\r\n a {\r\n margin-left: -15px;\r\n border: 3px solid #{map-get($grays, \"100\")};\r\n border-radius: 50px;\r\n &:first-child {\r\n margin-left: 0px;\r\n }\r\n } \r\n}\r\n\r\n.card-bg-img {\r\n background-size: cover;\r\n background-position: right center;\r\n background-repeat: no-repeat;\r\n}\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .chart-content-bg {\r\n background-color: #{lighten(map-get($dark-grays, \"100\"), 2%)};\r\n }\r\n .chart-content-border {\r\n border: 1px solid #{map-get($dark-grays, \"200\")};\r\n }\r\n \r\n .chart-widget-list {\r\n p {\r\n border-bottom: 1px solid #{map-get($dark-grays, \"100\")};\r\n }\r\n }\r\n .timeline-alt {\r\n .timeline-item {\r\n &:before {\r\n background-color: #{map-get($dark-grays, \"100\")};\r\n }\r\n }\r\n }\r\n .inbox-widget {\r\n .inbox-item {\r\n border-bottom: 1px solid #{lighten(map-get($dark-grays, \"100\"), 5%)};\r\n .inbox-item-author {\r\n color: #{map-get($dark-grays, \"800\")};\r\n }\r\n \r\n .inbox-item-text {\r\n color: #{map-get($dark-grays, \"500\")};\r\n }\r\n \r\n .inbox-item-date {\r\n color: #{map-get($dark-grays, \"600\")};\r\n }\r\n }\r\n }\r\n .multi-user {\r\n a {\r\n border: 3px solid #{map-get($dark-grays, \"100\")};\r\n }\r\n }\r\n}","// \r\n// social.scss\r\n//\r\n\r\n.social-list-item {\r\n height: 2rem;\r\n width: 2rem;\r\n line-height: calc(2rem - 2px);\r\n display: block;\r\n border: 2px solid #{map-get($grays, \"500\")};\r\n border-radius: 50%;\r\n color: #{map-get($grays, \"500\")};\r\n\r\n &:hover {\r\n color: #{map-get($grays, \"600\")};\r\n border-color: #{map-get($grays, \"600\")};\r\n }\r\n}\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .social-list-item {\r\n border: 2px solid #{map-get($dark-grays, \"500\")};\r\n &:hover {\r\n color: #{map-get($dark-grays, \"600\")};\r\n border-color: #{map-get($dark-grays, \"600\")};\r\n }\r\n }\r\n}","// \r\n// horizontal-steps.scss\r\n//\r\n\r\n// Horizontal steps\r\n.horizontal-steps {\r\n display: flex;\r\n position: relative;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n\r\n &:before {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n width: 100%;\r\n height: .2em;\r\n background-color: #{map-get($grays, \"200\")};\r\n }\r\n .process-line {\r\n display: block;\r\n position: absolute;\r\n width: 50%;\r\n height: .2em;\r\n background-color: $primary;\r\n }\r\n .horizontal-steps-content {\r\n display: flex;\r\n position: relative;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n .step-item {\r\n display: block;\r\n position: relative;\r\n bottom: calc(100% + 1em);\r\n height: 8px;\r\n width: 8px;\r\n margin: 0 2em;\r\n box-sizing: content-box;\r\n color: $primary;\r\n background-color: currentColor;\r\n border: .25em solid $body-bg;\r\n border-radius: 50%;\r\n z-index: 5;\r\n &:first-child {\r\n margin-left: 0;\r\n }\r\n &:last-child {\r\n margin-right: 0;\r\n color: $success;\r\n }\r\n span {\r\n position: absolute;\r\n top: calc(100% + 1em);\r\n left: 50%;\r\n transform: translateX(-50%);\r\n white-space: nowrap;\r\n color: #{map-get($grays, \"500\")};\r\n }\r\n &.current {\r\n &:before {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n top: 47.5%;\r\n left: 51%;\r\n padding: 1em;\r\n background-color: currentColor;\r\n border-radius: 50%;\r\n opacity: 0;\r\n z-index: -1;\r\n animation-name: animation-steps-current;\r\n animation-duration: 2s;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: ease-out;\r\n }\r\n span {\r\n color: $primary !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@keyframes animation-steps-current {\r\n from {\r\n transform: translate(-50%, -50%) scale(0);\r\n opacity: 1;\r\n }\r\n to {\r\n transform: translate(-50%, -50%) scale(1);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n .horizontal-steps {\r\n \r\n .horizontal-steps-content {\r\n .step-item {\r\n span {\r\n white-space: inherit;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .horizontal-steps {\r\n &:before {\r\n background-color: #{map-get($dark-grays, \"200\")};\r\n }\r\n .horizontal-steps-content {\r\n .step-item {\r\n border: .25em solid var(--#{$variable-prefix}body-bg);\r\n span {\r\n color: #{map-get($dark-grays, \"500\")};\r\n }\r\n }\r\n }\r\n }\r\n}","// \r\n// timeline.scss\r\n//\r\n\r\n.timeline {\r\n margin-bottom: 50px;\r\n position: relative;\r\n\r\n &:before {\r\n background-color: #{map-get($grays, \"300\")};\r\n bottom: 0;\r\n content: \"\";\r\n left: 50%;\r\n position: absolute;\r\n top: 30px;\r\n width: 2px;\r\n z-index: 0;\r\n }\r\n}\r\n\r\n.timeline-show {\r\n position: relative;\r\n\r\n .time-show-name {\r\n display: inline-block;\r\n border-radius: 4px;\r\n background-color: #{map-get($grays, \"200\")};\r\n padding: 7px 15px;\r\n }\r\n}\r\n\r\n.timeline-box {\r\n background-color: $card-bg;\r\n box-shadow: $box-shadow;\r\n display: block;\r\n margin: 15px 0;\r\n position: relative;\r\n padding: $card-spacer-x;\r\n @include border-radius($card-border-radius);\r\n}\r\n\r\n.timeline-album {\r\n margin-top: 12px;\r\n a {\r\n display: inline-block;\r\n margin-right: 5px;\r\n }\r\n img {\r\n height: 36px;\r\n width: auto;\r\n border-radius: 3px;\r\n }\r\n}\r\n\r\n@include media-breakpoint-up(md) {\r\n .timeline {\r\n \r\n .timeline-box {\r\n margin-left: 45px;\r\n }\r\n .timeline-icon {\r\n background: #{map-get($grays, \"300\")};\r\n border-radius: 50%;\r\n display: block;\r\n height: 24px;\r\n left: -56px;\r\n margin-top: -12px;\r\n position: absolute;\r\n text-align: center;\r\n top: 50%;\r\n width: 24px;\r\n i {\r\n color: #{map-get($grays, \"600\")};\r\n font-size: 1rem;\r\n vertical-align: middle;\r\n }\r\n }\r\n .timeline-desk {\r\n display: table-cell;\r\n vertical-align: top;\r\n width: 50%;\r\n }\r\n }\r\n .timeline-lg-item {\r\n display: table-row;\r\n &:before {\r\n content: \"\";\r\n display: block;\r\n width: 50%;\r\n }\r\n .timeline-desk {\r\n .arrow {\r\n border-bottom: 12px solid transparent;\r\n border-right: 12px solid $card-bg !important;\r\n border-top: 12px solid transparent;\r\n display: block;\r\n height: 0;\r\n left: -12px;\r\n margin-top: -12px;\r\n position: absolute;\r\n top: 50%;\r\n width: 0;\r\n }\r\n }\r\n &.timeline-item-left {\r\n &:after {\r\n content: \"\";\r\n display: block;\r\n width: 50%;\r\n }\r\n .timeline-desk {\r\n .arrow-alt {\r\n border-bottom: 12px solid transparent;\r\n border-left: 12px solid $card-bg !important;\r\n border-top: 12px solid transparent;\r\n display: block;\r\n height: 0;\r\n left: auto;\r\n margin-top: -12px;\r\n position: absolute;\r\n right: -12px;\r\n top: 50%;\r\n width: 0;\r\n }\r\n .album {\r\n float: right;\r\n margin-top: 20px;\r\n a {\r\n float: right;\r\n margin-left: 5px;\r\n }\r\n }\r\n }\r\n .timeline-icon {\r\n left: auto;\r\n right: -58px;\r\n }\r\n &:before {\r\n display: none;\r\n }\r\n .timeline-box {\r\n margin-right: 45px;\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\n .timeline {\r\n .timeline-icon {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .timeline {\r\n &:before {\r\n background-color: #{map-get($dark-grays, \"300\")};\r\n }\r\n }\r\n .timeline-show {\r\n .time-show-name {\r\n background-color: #{map-get($dark-grays, \"200\")};\r\n }\r\n }\r\n @include media-breakpoint-up(md) {\r\n .timeline {\r\n .timeline-icon {\r\n background: #{map-get($dark-grays, \"300\")};\r\n i {\r\n color: #{map-get($dark-grays, \"600\")};\r\n }\r\n }\r\n }\r\n }\r\n}",".daterangepicker {\r\n position: absolute;\r\n color: inherit;\r\n background-color: #fff;\r\n border-radius: 4px;\r\n border: 1px solid #ddd;\r\n width: 278px;\r\n max-width: none;\r\n padding: 0;\r\n margin-top: 7px;\r\n top: 100px;\r\n left: 20px;\r\n z-index: 3001;\r\n display: none;\r\n font-family: arial;\r\n font-size: 15px;\r\n line-height: 1em;\r\n}\r\n\r\n.daterangepicker:before, .daterangepicker:after {\r\n position: absolute;\r\n display: inline-block;\r\n border-bottom-color: rgba(0, 0, 0, 0.2);\r\n content: '';\r\n}\r\n\r\n.daterangepicker:before {\r\n top: -7px;\r\n border-right: 7px solid transparent;\r\n border-left: 7px solid transparent;\r\n border-bottom: 7px solid #ccc;\r\n}\r\n\r\n.daterangepicker:after {\r\n top: -6px;\r\n border-right: 6px solid transparent;\r\n border-bottom: 6px solid #fff;\r\n border-left: 6px solid transparent;\r\n}\r\n\r\n.daterangepicker.opensleft:before {\r\n right: 9px;\r\n}\r\n\r\n.daterangepicker.opensleft:after {\r\n right: 10px;\r\n}\r\n\r\n.daterangepicker.openscenter:before {\r\n left: 0;\r\n right: 0;\r\n width: 0;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.daterangepicker.openscenter:after {\r\n left: 0;\r\n right: 0;\r\n width: 0;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.daterangepicker.opensright:before {\r\n left: 9px;\r\n}\r\n\r\n.daterangepicker.opensright:after {\r\n left: 10px;\r\n}\r\n\r\n.daterangepicker.drop-up {\r\n margin-top: -7px;\r\n}\r\n\r\n.daterangepicker.drop-up:before {\r\n top: initial;\r\n bottom: -7px;\r\n border-bottom: initial;\r\n border-top: 7px solid #ccc;\r\n}\r\n\r\n.daterangepicker.drop-up:after {\r\n top: initial;\r\n bottom: -6px;\r\n border-bottom: initial;\r\n border-top: 6px solid #fff;\r\n}\r\n\r\n.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {\r\n float: none;\r\n}\r\n\r\n.daterangepicker.single .drp-selected {\r\n display: none;\r\n}\r\n\r\n.daterangepicker.show-calendar .drp-calendar {\r\n display: block;\r\n}\r\n\r\n.daterangepicker.show-calendar .drp-buttons {\r\n display: block;\r\n}\r\n\r\n.daterangepicker.auto-apply .drp-buttons {\r\n display: none;\r\n}\r\n\r\n.daterangepicker .drp-calendar {\r\n display: none;\r\n max-width: 270px;\r\n}\r\n\r\n.daterangepicker .drp-calendar.left {\r\n padding: 8px 0 8px 8px;\r\n}\r\n\r\n.daterangepicker .drp-calendar.right {\r\n padding: 8px;\r\n}\r\n\r\n.daterangepicker .drp-calendar.single .calendar-table {\r\n border: none;\r\n}\r\n\r\n.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {\r\n color: #fff;\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n border-radius: 0;\r\n display: inline-block;\r\n padding: 3px;\r\n}\r\n\r\n.daterangepicker .calendar-table .next span {\r\n transform: rotate(-45deg);\r\n -webkit-transform: rotate(-45deg);\r\n}\r\n\r\n.daterangepicker .calendar-table .prev span {\r\n transform: rotate(135deg);\r\n -webkit-transform: rotate(135deg);\r\n}\r\n\r\n.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {\r\n white-space: nowrap;\r\n text-align: center;\r\n vertical-align: middle;\r\n min-width: 32px;\r\n width: 32px;\r\n height: 24px;\r\n line-height: 24px;\r\n font-size: 12px;\r\n border-radius: 4px;\r\n border: 1px solid transparent;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n}\r\n\r\n.daterangepicker .calendar-table {\r\n border: 1px solid #fff;\r\n border-radius: 4px;\r\n background-color: #fff;\r\n}\r\n\r\n.daterangepicker .calendar-table table {\r\n width: 100%;\r\n margin: 0;\r\n border-spacing: 0;\r\n border-collapse: collapse;\r\n}\r\n\r\n.daterangepicker td.available:hover, .daterangepicker th.available:hover {\r\n background-color: #eee;\r\n border-color: transparent;\r\n color: inherit;\r\n}\r\n\r\n.daterangepicker td.week, .daterangepicker th.week {\r\n font-size: 80%;\r\n color: #ccc;\r\n}\r\n\r\n.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {\r\n background-color: #fff;\r\n border-color: transparent;\r\n color: #999;\r\n}\r\n\r\n.daterangepicker td.in-range {\r\n background-color: #ebf4f8;\r\n border-color: transparent;\r\n color: #000;\r\n border-radius: 0;\r\n}\r\n\r\n.daterangepicker td.start-date {\r\n border-radius: 4px 0 0 4px;\r\n}\r\n\r\n.daterangepicker td.end-date {\r\n border-radius: 0 4px 4px 0;\r\n}\r\n\r\n.daterangepicker td.start-date.end-date {\r\n border-radius: 4px;\r\n}\r\n\r\n.daterangepicker td.active, .daterangepicker td.active:hover {\r\n background-color: #357ebd;\r\n border-color: transparent;\r\n color: #fff;\r\n}\r\n\r\n.daterangepicker th.month {\r\n width: auto;\r\n}\r\n\r\n.daterangepicker td.disabled, .daterangepicker option.disabled {\r\n color: #999;\r\n cursor: not-allowed;\r\n text-decoration: line-through;\r\n}\r\n\r\n.daterangepicker select.monthselect, .daterangepicker select.yearselect {\r\n font-size: 12px;\r\n padding: 1px;\r\n height: auto;\r\n margin: 0;\r\n cursor: default;\r\n}\r\n\r\n.daterangepicker select.monthselect {\r\n margin-right: 2%;\r\n width: 56%;\r\n}\r\n\r\n.daterangepicker select.yearselect {\r\n width: 40%;\r\n}\r\n\r\n.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {\r\n width: 50px;\r\n margin: 0 auto;\r\n background: #eee;\r\n border: 1px solid #eee;\r\n padding: 2px;\r\n outline: 0;\r\n font-size: 12px;\r\n}\r\n\r\n.daterangepicker .calendar-time {\r\n text-align: center;\r\n margin: 4px auto 0 auto;\r\n line-height: 30px;\r\n position: relative;\r\n}\r\n\r\n.daterangepicker .calendar-time select.disabled {\r\n color: #ccc;\r\n cursor: not-allowed;\r\n}\r\n\r\n.daterangepicker .drp-buttons {\r\n clear: both;\r\n text-align: right;\r\n padding: 8px;\r\n border-top: 1px solid #ddd;\r\n display: none;\r\n line-height: 12px;\r\n vertical-align: middle;\r\n}\r\n\r\n.daterangepicker .drp-selected {\r\n display: inline-block;\r\n font-size: 12px;\r\n padding-right: 8px;\r\n}\r\n\r\n.daterangepicker .drp-buttons .btn {\r\n margin-left: 8px;\r\n font-size: 12px;\r\n font-weight: bold;\r\n padding: 4px 8px;\r\n}\r\n\r\n.daterangepicker.show-ranges.single.rtl .drp-calendar.left {\r\n border-right: 1px solid #ddd;\r\n}\r\n\r\n.daterangepicker.show-ranges.single.ltr .drp-calendar.left {\r\n border-left: 1px solid #ddd;\r\n}\r\n\r\n.daterangepicker.show-ranges.rtl .drp-calendar.right {\r\n border-right: 1px solid #ddd;\r\n}\r\n\r\n.daterangepicker.show-ranges.ltr .drp-calendar.left {\r\n border-left: 1px solid #ddd;\r\n}\r\n\r\n.daterangepicker .ranges {\r\n float: none;\r\n text-align: left;\r\n margin: 0;\r\n}\r\n\r\n.daterangepicker.show-calendar .ranges {\r\n margin-top: 8px;\r\n}\r\n\r\n.daterangepicker .ranges ul {\r\n list-style: none;\r\n margin: 0 auto;\r\n padding: 0;\r\n width: 100%;\r\n}\r\n\r\n.daterangepicker .ranges li {\r\n font-size: 12px;\r\n padding: 8px 12px;\r\n cursor: pointer;\r\n}\r\n\r\n.daterangepicker .ranges li:hover {\r\n background-color: #eee;\r\n}\r\n\r\n.daterangepicker .ranges li.active {\r\n background-color: #08c;\r\n color: #fff;\r\n}\r\n\r\n/* Larger Screen Styling */\r\n@media (min-width: 564px) {\r\n .daterangepicker {\r\n width: auto;\r\n }\r\n\r\n .daterangepicker .ranges ul {\r\n width: 140px;\r\n }\r\n\r\n .daterangepicker.single .ranges ul {\r\n width: 100%;\r\n }\r\n\r\n .daterangepicker.single .drp-calendar.left {\r\n clear: none;\r\n }\r\n\r\n .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {\r\n float: left;\r\n }\r\n\r\n .daterangepicker {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n\r\n .daterangepicker .drp-calendar.left {\r\n clear: left;\r\n margin-right: 0;\r\n }\r\n\r\n .daterangepicker .drp-calendar.left .calendar-table {\r\n border-right: none;\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n\r\n .daterangepicker .drp-calendar.right {\r\n margin-left: 0;\r\n }\r\n\r\n .daterangepicker .drp-calendar.right .calendar-table {\r\n border-left: none;\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n\r\n .daterangepicker .drp-calendar.left .calendar-table {\r\n padding-right: 8px;\r\n }\r\n\r\n .daterangepicker .ranges, .daterangepicker .drp-calendar {\r\n float: left;\r\n }\r\n}\r\n\r\n@media (min-width: 730px) {\r\n .daterangepicker .ranges {\r\n width: auto;\r\n }\r\n\r\n .daterangepicker .ranges {\r\n float: left;\r\n }\r\n\r\n .daterangepicker.rtl .ranges {\r\n float: right;\r\n }\r\n\r\n .daterangepicker .drp-calendar.left {\r\n clear: none !important;\r\n }\r\n}\r\n","/*!\n * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)\n *\n * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)\n */\n\n.datepicker{padding:4px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;direction:ltr}.datepicker-inline{width:220px}.datepicker-rtl{direction:rtl}.datepicker-rtl.dropdown-menu{left:auto}.datepicker-rtl table tr td span{float:right}.datepicker-dropdown{top:0;left:0}.datepicker-dropdown:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #999;border-top:0;border-bottom-color:rgba(0,0,0,.2);position:absolute}.datepicker-dropdown:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;border-top:0;position:absolute}.datepicker-dropdown.datepicker-orient-left:before{left:6px}.datepicker-dropdown.datepicker-orient-left:after{left:7px}.datepicker-dropdown.datepicker-orient-right:before{right:6px}.datepicker-dropdown.datepicker-orient-right:after{right:7px}.datepicker-dropdown.datepicker-orient-bottom:before{top:-7px}.datepicker-dropdown.datepicker-orient-bottom:after{top:-6px}.datepicker-dropdown.datepicker-orient-top:before{bottom:-7px;border-bottom:0;border-top:7px solid #999}.datepicker-dropdown.datepicker-orient-top:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.datepicker table{margin:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker td,.datepicker th{text-align:center;width:20px;height:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:none}.table-striped .datepicker table tr td,.table-striped .datepicker table tr th{background-color:transparent}.datepicker table tr td.day.focused,.datepicker table tr td.day:hover{background:#eee;cursor:pointer}.datepicker table tr td.new,.datepicker table tr td.old{color:#999}.datepicker table tr td.disabled,.datepicker table tr td.disabled:hover{background:0 0;color:#999;cursor:default}.datepicker table tr td.highlighted{background:#d9edf7;border-radius:0}.datepicker table tr td.today,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today:hover{background-color:#fde19a;background-image:-moz-linear-gradient(to bottom,#fdd49a,#fdf59a);background-image:-ms-linear-gradient(to bottom,#fdd49a,#fdf59a);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fdd49a),to(#fdf59a));background-image:-webkit-linear-gradient(to bottom,#fdd49a,#fdf59a);background-image:-o-linear-gradient(to bottom,#fdd49a,#fdf59a);background-image:linear-gradient(to bottom,#fdd49a,#fdf59a);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);border-color:#fdf59a #fdf59a #fbed50;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#000}.datepicker table tr td.today.active,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled.active,.datepicker table tr td.today.disabled.disabled,.datepicker table tr td.today.disabled:active,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today.disabled:hover.active,.datepicker table tr td.today.disabled:hover.disabled,.datepicker table tr td.today.disabled:hover:active,.datepicker table tr td.today.disabled:hover:hover,.datepicker table tr td.today.disabled:hover[disabled],.datepicker table tr td.today.disabled[disabled],.datepicker table tr td.today:active,.datepicker table tr td.today:hover,.datepicker table tr td.today:hover.active,.datepicker table tr td.today:hover.disabled,.datepicker table tr td.today:hover:active,.datepicker table tr td.today:hover:hover,.datepicker table tr td.today:hover[disabled],.datepicker table tr td.today[disabled]{background-color:#fdf59a}.datepicker table tr td.today.active,.datepicker table tr td.today.disabled.active,.datepicker table tr td.today.disabled:active,.datepicker table tr td.today.disabled:hover.active,.datepicker table tr td.today.disabled:hover:active,.datepicker table tr td.today:active,.datepicker table tr td.today:hover.active,.datepicker table tr td.today:hover:active{background-color:#fbf069\\9}.datepicker table tr td.today:hover:hover{color:#000}.datepicker table tr td.today.active:hover{color:#fff}.datepicker table tr td.range,.datepicker table tr td.range.disabled,.datepicker table tr td.range.disabled:hover,.datepicker table tr td.range:hover{background:#eee;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.datepicker table tr td.range.today,.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today.disabled:hover,.datepicker table tr td.range.today:hover{background-color:#f3d17a;background-image:-moz-linear-gradient(to bottom,#f3c17a,#f3e97a);background-image:-ms-linear-gradient(to bottom,#f3c17a,#f3e97a);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f3c17a),to(#f3e97a));background-image:-webkit-linear-gradient(to bottom,#f3c17a,#f3e97a);background-image:-o-linear-gradient(to bottom,#f3c17a,#f3e97a);background-image:linear-gradient(to bottom,#f3c17a,#f3e97a);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);border-color:#f3e97a #f3e97a #edde34;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.datepicker table tr td.range.today.active,.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today.disabled.active,.datepicker table tr td.range.today.disabled.disabled,.datepicker table tr td.range.today.disabled:active,.datepicker table tr td.range.today.disabled:hover,.datepicker table tr td.range.today.disabled:hover.active,.datepicker table tr td.range.today.disabled:hover.disabled,.datepicker table tr td.range.today.disabled:hover:active,.datepicker table tr td.range.today.disabled:hover:hover,.datepicker table tr td.range.today.disabled:hover[disabled],.datepicker table tr td.range.today.disabled[disabled],.datepicker table tr td.range.today:active,.datepicker table tr td.range.today:hover,.datepicker table tr td.range.today:hover.active,.datepicker table tr td.range.today:hover.disabled,.datepicker table tr td.range.today:hover:active,.datepicker table tr td.range.today:hover:hover,.datepicker table tr td.range.today:hover[disabled],.datepicker table tr td.range.today[disabled]{background-color:#f3e97a}.datepicker table tr td.range.today.active,.datepicker table tr td.range.today.disabled.active,.datepicker table tr td.range.today.disabled:active,.datepicker table tr td.range.today.disabled:hover.active,.datepicker table tr td.range.today.disabled:hover:active,.datepicker table tr td.range.today:active,.datepicker table tr td.range.today:hover.active,.datepicker table tr td.range.today:hover:active{background-color:#efe24b\\9}.datepicker table tr td.selected,.datepicker table tr td.selected.disabled,.datepicker table tr td.selected.disabled:hover,.datepicker table tr td.selected:hover{background-color:#9e9e9e;background-image:-moz-linear-gradient(to bottom,#b3b3b3,grey);background-image:-ms-linear-gradient(to bottom,#b3b3b3,grey);background-image:-webkit-gradient(linear,0 0,0 100%,from(#b3b3b3),to(grey));background-image:-webkit-linear-gradient(to bottom,#b3b3b3,grey);background-image:-o-linear-gradient(to bottom,#b3b3b3,grey);background-image:linear-gradient(to bottom,#b3b3b3,grey);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);border-color:grey grey #595959;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.datepicker table tr td.selected.active,.datepicker table tr td.selected.disabled,.datepicker table tr td.selected.disabled.active,.datepicker table tr td.selected.disabled.disabled,.datepicker table tr td.selected.disabled:active,.datepicker table tr td.selected.disabled:hover,.datepicker table tr td.selected.disabled:hover.active,.datepicker table tr td.selected.disabled:hover.disabled,.datepicker table tr td.selected.disabled:hover:active,.datepicker table tr td.selected.disabled:hover:hover,.datepicker table tr td.selected.disabled:hover[disabled],.datepicker table tr td.selected.disabled[disabled],.datepicker table tr td.selected:active,.datepicker table tr td.selected:hover,.datepicker table tr td.selected:hover.active,.datepicker table tr td.selected:hover.disabled,.datepicker table tr td.selected:hover:active,.datepicker table tr td.selected:hover:hover,.datepicker table tr td.selected:hover[disabled],.datepicker table tr td.selected[disabled]{background-color:grey}.datepicker table tr td.selected.active,.datepicker table tr td.selected.disabled.active,.datepicker table tr td.selected.disabled:active,.datepicker table tr td.selected.disabled:hover.active,.datepicker table tr td.selected.disabled:hover:active,.datepicker table tr td.selected:active,.datepicker table tr td.selected:hover.active,.datepicker table tr td.selected:hover:active{background-color:#666\\9}.datepicker table tr td.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active:hover{background-color:#006dcc;background-image:-moz-linear-gradient(to bottom,#08c,#04c);background-image:-ms-linear-gradient(to bottom,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(to bottom,#08c,#04c);background-image:-o-linear-gradient(to bottom,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.datepicker table tr td.active.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled.disabled,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover.disabled,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active.disabled:hover:hover,.datepicker table tr td.active.disabled:hover[disabled],.datepicker table tr td.active.disabled[disabled],.datepicker table tr td.active:active,.datepicker table tr td.active:hover,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover.disabled,.datepicker table tr td.active:hover:active,.datepicker table tr td.active:hover:hover,.datepicker table tr td.active:hover[disabled],.datepicker table tr td.active[disabled]{background-color:#04c}.datepicker table tr td.active.active,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active:active,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover:active{background-color:#039\\9}.datepicker table tr td span{display:block;width:23%;height:54px;line-height:54px;float:left;margin:1%;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.datepicker table tr td span.focused,.datepicker table tr td span:hover{background:#eee}.datepicker table tr td span.disabled,.datepicker table tr td span.disabled:hover{background:0 0;color:#999;cursor:default}.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active:hover{background-color:#006dcc;background-image:-moz-linear-gradient(to bottom,#08c,#04c);background-image:-ms-linear-gradient(to bottom,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(to bottom,#08c,#04c);background-image:-o-linear-gradient(to bottom,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.datepicker table tr td span.active.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled.active,.datepicker table tr td span.active.disabled.disabled,.datepicker table tr td span.active.disabled:active,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active.disabled:hover.active,.datepicker table tr td span.active.disabled:hover.disabled,.datepicker table tr td span.active.disabled:hover:active,.datepicker table tr td span.active.disabled:hover:hover,.datepicker table tr td span.active.disabled:hover[disabled],.datepicker table tr td span.active.disabled[disabled],.datepicker table tr td span.active:active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active:hover.active,.datepicker table tr td span.active:hover.disabled,.datepicker table tr td span.active:hover:active,.datepicker table tr td span.active:hover:hover,.datepicker table tr td span.active:hover[disabled],.datepicker table tr td span.active[disabled]{background-color:#04c}.datepicker table tr td span.active.active,.datepicker table tr td span.active.disabled.active,.datepicker table tr td span.active.disabled:active,.datepicker table tr td span.active.disabled:hover.active,.datepicker table tr td span.active.disabled:hover:active,.datepicker table tr td span.active:active,.datepicker table tr td span.active:hover.active,.datepicker table tr td span.active:hover:active{background-color:#039\\9}.datepicker table tr td span.new,.datepicker table tr td span.old{color:#999}.datepicker .datepicker-switch{width:145px}.datepicker .datepicker-switch,.datepicker .next,.datepicker .prev,.datepicker tfoot tr th{cursor:pointer}.datepicker .datepicker-switch:hover,.datepicker .next:hover,.datepicker .prev:hover,.datepicker tfoot tr th:hover{background:#eee}.datepicker .next.disabled,.datepicker .prev.disabled{visibility:hidden}.datepicker .cw{font-size:10px;width:12px;padding:0 2px 0 5px;vertical-align:middle}.input-append.date .add-on,.input-prepend.date .add-on{cursor:pointer}.input-append.date .add-on i,.input-prepend.date .add-on i{margin-top:3px}.input-daterange input{text-align:center}.input-daterange input:first-child{-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}.input-daterange input:last-child{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}.input-daterange .add-on{display:inline-block;width:auto;min-width:16px;height:18px;padding:4px 5px;font-weight:400;line-height:18px;text-align:center;text-shadow:0 1px 0 #fff;vertical-align:middle;background-color:#eee;border:1px solid #ccc;margin-left:-5px;margin-right:-5px}",".jq-toast-wrap,.jq-toast-wrap *{margin:0;padding:0}.jq-toast-wrap{display:block;position:fixed;width:250px;pointer-events:none!important;letter-spacing:normal;z-index:9000!important}.jq-toast-wrap.bottom-left{bottom:20px;left:20px}.jq-toast-wrap.bottom-right{bottom:20px;right:40px}.jq-toast-wrap.top-left{top:20px;left:20px}.jq-toast-wrap.top-right{top:20px;right:40px}.jq-toast-single{display:block;width:100%;padding:10px;margin:0 0 5px;border-radius:4px;font-size:12px;font-family:arial,sans-serif;line-height:17px;position:relative;pointer-events:all!important;background-color:#444;color:#fff}.jq-toast-single h2{font-family:arial,sans-serif;font-size:14px;margin:0 0 7px;background:0 0;color:inherit;line-height:inherit;letter-spacing:normal}.jq-toast-single a{color:#eee;text-decoration:none;font-weight:700;border-bottom:1px solid #fff;padding-bottom:3px;font-size:12px}.jq-toast-single ul{margin:0 0 0 15px;background:0 0;padding:0}.jq-toast-single ul li{list-style-type:disc!important;line-height:17px;background:0 0;margin:0;padding:0;letter-spacing:normal}.close-jq-toast-single{position:absolute;top:3px;right:7px;font-size:14px;cursor:pointer}.jq-toast-loader{display:block;position:absolute;top:-2px;height:5px;width:0;left:0;border-radius:5px;background:red}.jq-toast-loaded{width:100%}.jq-has-icon{padding:10px 10px 10px 50px;background-repeat:no-repeat;background-position:10px}.jq-icon-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-color:#31708f;color:#d9edf7;border-color:#bce8f1}.jq-icon-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=);background-color:#8a6d3b;color:#fcf8e3;border-color:#faebcc}.jq-icon-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=);background-color:#a94442;color:#f2dede;border-color:#ebccd1}.jq-icon-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==);color:#dff0d8;background-color:#3c763d;border-color:#d6e9c6}","/*!\n * Timepicker Component for Twitter Bootstrap\n *\n * Copyright 2013 Joris de Wit\n *\n * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */.bootstrap-timepicker{position:relative}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu{left:auto;right:0}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before{left:auto;right:12px}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after{left:auto;right:13px}.bootstrap-timepicker .input-group-addon{cursor:pointer}.bootstrap-timepicker .input-group-addon i{display:inline-block;width:16px;height:16px}.bootstrap-timepicker-widget.dropdown-menu{padding:4px}.bootstrap-timepicker-widget.dropdown-menu.open{display:inline-block}.bootstrap-timepicker-widget.dropdown-menu:before{border-bottom:7px solid rgba(0,0,0,0.2);border-left:7px solid transparent;border-right:7px solid transparent;content:\"\";display:inline-block;position:absolute}.bootstrap-timepicker-widget.dropdown-menu:after{border-bottom:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;content:\"\";display:inline-block;position:absolute}.bootstrap-timepicker-widget.timepicker-orient-left:before{left:6px}.bootstrap-timepicker-widget.timepicker-orient-left:after{left:7px}.bootstrap-timepicker-widget.timepicker-orient-right:before{right:6px}.bootstrap-timepicker-widget.timepicker-orient-right:after{right:7px}.bootstrap-timepicker-widget.timepicker-orient-top:before{top:-7px}.bootstrap-timepicker-widget.timepicker-orient-top:after{top:-6px}.bootstrap-timepicker-widget.timepicker-orient-bottom:before{bottom:-7px;border-bottom:0;border-top:7px solid #999}.bootstrap-timepicker-widget.timepicker-orient-bottom:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.bootstrap-timepicker-widget a.btn,.bootstrap-timepicker-widget input{border-radius:4px}.bootstrap-timepicker-widget table{width:100%;margin:0}.bootstrap-timepicker-widget table td{text-align:center;height:30px;margin:0;padding:2px}.bootstrap-timepicker-widget table td:not(.separator){min-width:30px}.bootstrap-timepicker-widget table td span{width:100%}.bootstrap-timepicker-widget table td a{border:1px transparent solid;width:100%;display:inline-block;margin:0;padding:8px 0;outline:0;color:#333}.bootstrap-timepicker-widget table td a:hover{text-decoration:none;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border-color:#ddd}.bootstrap-timepicker-widget table td a i{margin-top:2px;font-size:18px}.bootstrap-timepicker-widget table td input{width:25px;margin:0;text-align:center}.bootstrap-timepicker-widget .modal-content{padding:4px}@media(min-width:767px){.bootstrap-timepicker-widget.modal{width:200px;margin-left:-100px}}@media(max-width:767px){.bootstrap-timepicker{width:100%}.bootstrap-timepicker .dropdown-menu{width:100%}}",".bootstrap-touchspin .input-group-btn-vertical{position:absolute;right:0;height:100%;z-index:11}.bootstrap-touchspin .input-group-btn-vertical>.btn{position:absolute;right:0;height:50%;padding:0;width:2em;text-align:center;line-height:1}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{border-radius:0 4px 0 0;top:0}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{border-radius:0 0 4px 0;bottom:0}","//\r\n// apexcharts.scss\r\n//\r\n.apex-charts {\r\n min-height: 10px !important;\r\n text {\r\n font-family: $font-family-base !important;\r\n fill: #{map-get($grays, \"500\")};\r\n tspan {\r\n fill: #{map-get($grays, \"500\")};\r\n }\r\n &.apexcharts-title-text {\r\n fill: #{map-get($grays, \"500\")} !important;\r\n }\r\n }\r\n \r\n .apexcharts-canvas {\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n.apexcharts-tooltip-title,\r\n.apexcharts-tooltip-text {\r\n font-family: $font-family-base !important;\r\n color: #{map-get($grays, \"700\")};\r\n}\r\n\r\n.apexcharts-legend-series {\r\n font-weight: 600;\r\n}\r\n\r\n.apexcharts-gridline {\r\n pointer-events: none;\r\n stroke: $apex-grid-color;\r\n}\r\n\r\n.apexcharts-legend-text {\r\n color: #{map-get($grays, \"600\")} !important;\r\n font-family: $font-family-base !important;\r\n}\r\n\r\n\r\n\r\n.apexcharts-yaxis,\r\n.apexcharts-xaxis {\r\n text {\r\n font-family: $font-family-base !important;\r\n fill: #{map-get($grays, \"500\")};\r\n }\r\n}\r\n\r\n.apexcharts-point-annotations,\r\n.apexcharts-xaxis-annotations,\r\n.apexcharts-yaxis-annotations {\r\n text {\r\n fill: $white;\r\n }\r\n}\r\n\r\n.apexcharts-radar-series {\r\n polygon {\r\n fill: transparent;\r\n stroke: #{map-get($grays, \"300\")};\r\n }\r\n line {\r\n stroke: #{map-get($grays, \"300\")};\r\n }\r\n}\r\n\r\n\r\n.apex-charts text,\r\n.apexcharts-pie-label,\r\n.apexcharts-datalabel-label, \r\n.apexcharts-datalabel-value {\r\n fill: $white !important;\r\n}\r\n\r\n.apexcharts-xaxis .apexcharts-datalabel, \r\n.apexcharts-yaxis text {\r\n fill: #{map-get($grays, \"600\")} !important;\r\n }\r\n\r\n\r\n\r\n.apexcharts-datalabels-group {\r\n text {\r\n fill: #{map-get($grays, \"500\")} !important;\r\n }\r\n}\r\n\r\n// Scatter images chart\r\n.scatter-images-chart {\r\n .apexcharts-legend {\r\n overflow: hidden !important;\r\n min-height: 17px;\r\n }\r\n .apexcharts-legend-marker {\r\n background: none !important;\r\n margin-right: 7px !important;\r\n }\r\n .apexcharts-legend-series {\r\n align-items: flex-start !important;\r\n }\r\n}\r\n\r\n.apexcharts-pie-series {\r\n path {\r\n stroke: transparent !important;\r\n }\r\n}\r\n\r\n.apexcharts-track {\r\n path {\r\n stroke: #{lighten(map-get($grays, \"300\"),5%)};\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n// Dark mode\r\nbody[data-layout-color=\"dark\"] {\r\n .apex-charts {\r\n text {\r\n fill: #{map-get($dark-grays, \"500\")};\r\n tspan {\r\n fill: #{map-get($dark-grays, \"500\")};\r\n }\r\n &.apexcharts-title-text {\r\n fill: #{map-get($dark-grays, \"500\")} !important;\r\n }\r\n }\r\n }\r\n .apexcharts-tooltip-title,\r\n .apexcharts-tooltip-text {\r\n font-family: $font-family-base !important;\r\n color: #{map-get($dark-grays, \"400\")};\r\n }\r\n .apexcharts-legend-text {\r\n color: #{map-get($dark-grays, \"600\")} !important;\r\n }\r\n\r\n .apexcharts-yaxis,\r\n .apexcharts-xaxis {\r\n text {\r\n fill: #{map-get($dark-grays, \"500\")};\r\n }\r\n }\r\n .apexcharts-radar-series {\r\n polygon {\r\n stroke: #{map-get($dark-grays, \"300\")};\r\n }\r\n line {\r\n stroke: #{map-get($dark-grays, \"300\")};\r\n }\r\n }\r\n .apexcharts-xaxis .apexcharts-datalabel, \r\n .apexcharts-yaxis text {\r\n fill: #{map-get($dark-grays, \"600\")} !important;\r\n }\r\n .apexcharts-datalabels-group {\r\n text {\r\n fill: #{map-get($dark-grays, \"500\")} !important;\r\n }\r\n }\r\n .apexcharts-track {\r\n path {\r\n stroke: #{lighten(map-get($dark-grays, \"300\"),5%)};\r\n }\r\n }\r\n}","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n// scss-docs-start gray-color-variables\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n// scss-docs-end gray-color-variables\n\n// fusv-disable\n// scss-docs-start gray-colors-map\n$grays: (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n) !default;\n// scss-docs-end gray-colors-map\n// fusv-enable\n\n// scss-docs-start color-variables\n$blue: #0d6efd !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #d63384 !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #198754 !default;\n$teal: #20c997 !default;\n$cyan: #0dcaf0 !default;\n// scss-docs-end color-variables\n\n// scss-docs-start colors-map\n$colors: (\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n) !default;\n// scss-docs-end colors-map\n\n// scss-docs-start theme-color-variables\n$primary: $blue !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-900 !default;\n// scss-docs-end theme-color-variables\n\n// scss-docs-start theme-colors-map\n$theme-colors: (\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n) !default;\n// scss-docs-end theme-colors-map\n\n// scss-docs-start theme-colors-rgb\n$theme-colors-rgb: map-loop($theme-colors, to-rgb, \"$value\") !default;\n// scss-docs-end theme-colors-rgb\n\n// The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n$min-contrast-ratio: 4.5 !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$color-contrast-dark: $black !default;\n$color-contrast-light: $white !default;\n\n// fusv-disable\n$blue-100: tint-color($blue, 80%) !default;\n$blue-200: tint-color($blue, 60%) !default;\n$blue-300: tint-color($blue, 40%) !default;\n$blue-400: tint-color($blue, 20%) !default;\n$blue-500: $blue !default;\n$blue-600: shade-color($blue, 20%) !default;\n$blue-700: shade-color($blue, 40%) !default;\n$blue-800: shade-color($blue, 60%) !default;\n$blue-900: shade-color($blue, 80%) !default;\n\n$indigo-100: tint-color($indigo, 80%) !default;\n$indigo-200: tint-color($indigo, 60%) !default;\n$indigo-300: tint-color($indigo, 40%) !default;\n$indigo-400: tint-color($indigo, 20%) !default;\n$indigo-500: $indigo !default;\n$indigo-600: shade-color($indigo, 20%) !default;\n$indigo-700: shade-color($indigo, 40%) !default;\n$indigo-800: shade-color($indigo, 60%) !default;\n$indigo-900: shade-color($indigo, 80%) !default;\n\n$purple-100: tint-color($purple, 80%) !default;\n$purple-200: tint-color($purple, 60%) !default;\n$purple-300: tint-color($purple, 40%) !default;\n$purple-400: tint-color($purple, 20%) !default;\n$purple-500: $purple !default;\n$purple-600: shade-color($purple, 20%) !default;\n$purple-700: shade-color($purple, 40%) !default;\n$purple-800: shade-color($purple, 60%) !default;\n$purple-900: shade-color($purple, 80%) !default;\n\n$pink-100: tint-color($pink, 80%) !default;\n$pink-200: tint-color($pink, 60%) !default;\n$pink-300: tint-color($pink, 40%) !default;\n$pink-400: tint-color($pink, 20%) !default;\n$pink-500: $pink !default;\n$pink-600: shade-color($pink, 20%) !default;\n$pink-700: shade-color($pink, 40%) !default;\n$pink-800: shade-color($pink, 60%) !default;\n$pink-900: shade-color($pink, 80%) !default;\n\n$red-100: tint-color($red, 80%) !default;\n$red-200: tint-color($red, 60%) !default;\n$red-300: tint-color($red, 40%) !default;\n$red-400: tint-color($red, 20%) !default;\n$red-500: $red !default;\n$red-600: shade-color($red, 20%) !default;\n$red-700: shade-color($red, 40%) !default;\n$red-800: shade-color($red, 60%) !default;\n$red-900: shade-color($red, 80%) !default;\n\n$orange-100: tint-color($orange, 80%) !default;\n$orange-200: tint-color($orange, 60%) !default;\n$orange-300: tint-color($orange, 40%) !default;\n$orange-400: tint-color($orange, 20%) !default;\n$orange-500: $orange !default;\n$orange-600: shade-color($orange, 20%) !default;\n$orange-700: shade-color($orange, 40%) !default;\n$orange-800: shade-color($orange, 60%) !default;\n$orange-900: shade-color($orange, 80%) !default;\n\n$yellow-100: tint-color($yellow, 80%) !default;\n$yellow-200: tint-color($yellow, 60%) !default;\n$yellow-300: tint-color($yellow, 40%) !default;\n$yellow-400: tint-color($yellow, 20%) !default;\n$yellow-500: $yellow !default;\n$yellow-600: shade-color($yellow, 20%) !default;\n$yellow-700: shade-color($yellow, 40%) !default;\n$yellow-800: shade-color($yellow, 60%) !default;\n$yellow-900: shade-color($yellow, 80%) !default;\n\n$green-100: tint-color($green, 80%) !default;\n$green-200: tint-color($green, 60%) !default;\n$green-300: tint-color($green, 40%) !default;\n$green-400: tint-color($green, 20%) !default;\n$green-500: $green !default;\n$green-600: shade-color($green, 20%) !default;\n$green-700: shade-color($green, 40%) !default;\n$green-800: shade-color($green, 60%) !default;\n$green-900: shade-color($green, 80%) !default;\n\n$teal-100: tint-color($teal, 80%) !default;\n$teal-200: tint-color($teal, 60%) !default;\n$teal-300: tint-color($teal, 40%) !default;\n$teal-400: tint-color($teal, 20%) !default;\n$teal-500: $teal !default;\n$teal-600: shade-color($teal, 20%) !default;\n$teal-700: shade-color($teal, 40%) !default;\n$teal-800: shade-color($teal, 60%) !default;\n$teal-900: shade-color($teal, 80%) !default;\n\n$cyan-100: tint-color($cyan, 80%) !default;\n$cyan-200: tint-color($cyan, 60%) !default;\n$cyan-300: tint-color($cyan, 40%) !default;\n$cyan-400: tint-color($cyan, 20%) !default;\n$cyan-500: $cyan !default;\n$cyan-600: shade-color($cyan, 20%) !default;\n$cyan-700: shade-color($cyan, 40%) !default;\n$cyan-800: shade-color($cyan, 60%) !default;\n$cyan-900: shade-color($cyan, 80%) !default;\n\n$blues: (\n \"blue-100\": $blue-100,\n \"blue-200\": $blue-200,\n \"blue-300\": $blue-300,\n \"blue-400\": $blue-400,\n \"blue-500\": $blue-500,\n \"blue-600\": $blue-600,\n \"blue-700\": $blue-700,\n \"blue-800\": $blue-800,\n \"blue-900\": $blue-900\n) !default;\n\n$indigos: (\n \"indigo-100\": $indigo-100,\n \"indigo-200\": $indigo-200,\n \"indigo-300\": $indigo-300,\n \"indigo-400\": $indigo-400,\n \"indigo-500\": $indigo-500,\n \"indigo-600\": $indigo-600,\n \"indigo-700\": $indigo-700,\n \"indigo-800\": $indigo-800,\n \"indigo-900\": $indigo-900\n) !default;\n\n$purples: (\n \"purple-100\": $purple-200,\n \"purple-200\": $purple-100,\n \"purple-300\": $purple-300,\n \"purple-400\": $purple-400,\n \"purple-500\": $purple-500,\n \"purple-600\": $purple-600,\n \"purple-700\": $purple-700,\n \"purple-800\": $purple-800,\n \"purple-900\": $purple-900\n) !default;\n\n$pinks: (\n \"pink-100\": $pink-100,\n \"pink-200\": $pink-200,\n \"pink-300\": $pink-300,\n \"pink-400\": $pink-400,\n \"pink-500\": $pink-500,\n \"pink-600\": $pink-600,\n \"pink-700\": $pink-700,\n \"pink-800\": $pink-800,\n \"pink-900\": $pink-900\n) !default;\n\n$reds: (\n \"red-100\": $red-100,\n \"red-200\": $red-200,\n \"red-300\": $red-300,\n \"red-400\": $red-400,\n \"red-500\": $red-500,\n \"red-600\": $red-600,\n \"red-700\": $red-700,\n \"red-800\": $red-800,\n \"red-900\": $red-900\n) !default;\n\n$oranges: (\n \"orange-100\": $orange-100,\n \"orange-200\": $orange-200,\n \"orange-300\": $orange-300,\n \"orange-400\": $orange-400,\n \"orange-500\": $orange-500,\n \"orange-600\": $orange-600,\n \"orange-700\": $orange-700,\n \"orange-800\": $orange-800,\n \"orange-900\": $orange-900\n) !default;\n\n$yellows: (\n \"yellow-100\": $yellow-100,\n \"yellow-200\": $yellow-200,\n \"yellow-300\": $yellow-300,\n \"yellow-400\": $yellow-400,\n \"yellow-500\": $yellow-500,\n \"yellow-600\": $yellow-600,\n \"yellow-700\": $yellow-700,\n \"yellow-800\": $yellow-800,\n \"yellow-900\": $yellow-900\n) !default;\n\n$greens: (\n \"green-100\": $green-100,\n \"green-200\": $green-200,\n \"green-300\": $green-300,\n \"green-400\": $green-400,\n \"green-500\": $green-500,\n \"green-600\": $green-600,\n \"green-700\": $green-700,\n \"green-800\": $green-800,\n \"green-900\": $green-900\n) !default;\n\n$teals: (\n \"teal-100\": $teal-100,\n \"teal-200\": $teal-200,\n \"teal-300\": $teal-300,\n \"teal-400\": $teal-400,\n \"teal-500\": $teal-500,\n \"teal-600\": $teal-600,\n \"teal-700\": $teal-700,\n \"teal-800\": $teal-800,\n \"teal-900\": $teal-900\n) !default;\n\n$cyans: (\n \"cyan-100\": $cyan-100,\n \"cyan-200\": $cyan-200,\n \"cyan-300\": $cyan-300,\n \"cyan-400\": $cyan-400,\n \"cyan-500\": $cyan-500,\n \"cyan-600\": $cyan-600,\n \"cyan-700\": $cyan-700,\n \"cyan-800\": $cyan-800,\n \"cyan-900\": $cyan-900\n) !default;\n// fusv-enable\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n (\"<\", \"%3c\"),\n (\">\", \"%3e\"),\n (\"#\", \"%23\"),\n (\"(\", \"%28\"),\n (\")\", \"%29\"),\n) !default;\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret: true !default;\n$enable-rounded: true !default;\n$enable-shadows: false !default;\n$enable-gradients: false !default;\n$enable-transitions: true !default;\n$enable-reduced-motion: true !default;\n$enable-smooth-scroll: true !default;\n$enable-grid-classes: true !default;\n$enable-cssgrid: false !default;\n$enable-button-pointers: true !default;\n$enable-rfs: true !default;\n$enable-validation-icons: true !default;\n$enable-negative-margins: false !default;\n$enable-deprecation-messages: true !default;\n$enable-important-utilities: true !default;\n\n// Prefix for :root CSS variables\n\n$variable-prefix: bs- !default;\n\n// Gradient\n//\n// The gradient which is added to components if `$enable-gradients` is `true`\n// This gradient is also added to elements with `.bg-gradient`\n// scss-docs-start variable-gradient\n$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;\n// scss-docs-end variable-gradient\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n// scss-docs-start spacer-variables-maps\n$spacer: 1rem !default;\n$spacers: (\n 0: 0,\n 1: $spacer * .25,\n 2: $spacer * .5,\n 3: $spacer,\n 4: $spacer * 1.5,\n 5: $spacer * 3,\n) !default;\n\n$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;\n// scss-docs-end spacer-variables-maps\n\n// Position\n//\n// Define the edge positioning anchors of the position utilities.\n\n// scss-docs-start position-map\n$position-values: (\n 0: 0,\n 50: 50%,\n 100: 100%\n) !default;\n// scss-docs-end position-map\n\n// Body\n//\n// Settings for the `` element.\n\n$body-bg: $white !default;\n$body-color: $gray-900 !default;\n$body-text-align: null !default;\n\n// Utilities maps\n//\n// Extends the default `$theme-colors` maps to help create our utilities.\n\n// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.\n// scss-docs-start utilities-colors\n$utilities-colors: $theme-colors-rgb !default;\n// scss-docs-end utilities-colors\n\n// scss-docs-start utilities-text-colors\n$utilities-text: map-merge(\n $utilities-colors,\n (\n \"black\": to-rgb($black),\n \"white\": to-rgb($white),\n \"body\": to-rgb($body-color)\n )\n) !default;\n$utilities-text-colors: map-loop($utilities-text, rgba-css-var, \"$key\", \"text\") !default;\n// scss-docs-end utilities-text-colors\n\n// scss-docs-start utilities-bg-colors\n$utilities-bg: map-merge(\n $utilities-colors,\n (\n \"black\": to-rgb($black),\n \"white\": to-rgb($white),\n \"body\": to-rgb($body-bg)\n )\n) !default;\n$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, \"$key\", \"bg\") !default;\n// scss-docs-end utilities-bg-colors\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: $primary !default;\n$link-decoration: underline !default;\n$link-shade-percentage: 20% !default;\n$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;\n$link-hover-decoration: null !default;\n\n$stretched-link-pseudo-element: after !default;\n$stretched-link-z-index: 1 !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom: 1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n// scss-docs-start grid-breakpoints\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n xxl: 1400px\n) !default;\n// scss-docs-end grid-breakpoints\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n// scss-docs-start container-max-widths\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px,\n xxl: 1320px\n) !default;\n// scss-docs-end container-max-widths\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12 !default;\n$grid-gutter-width: 1.5rem !default;\n$grid-row-columns: 6 !default;\n\n$gutters: $spacers !default;\n\n// Container padding\n\n$container-padding-x: $grid-gutter-width * .5 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n// scss-docs-start border-variables\n$border-width: 1px !default;\n$border-widths: (\n 1: 1px,\n 2: 2px,\n 3: 3px,\n 4: 4px,\n 5: 5px\n) !default;\n\n$border-color: $gray-300 !default;\n// scss-docs-end border-variables\n\n// scss-docs-start border-radius-variables\n$border-radius: .25rem !default;\n$border-radius-sm: .2rem !default;\n$border-radius-lg: .3rem !default;\n$border-radius-pill: 50rem !default;\n// scss-docs-end border-radius-variables\n\n// scss-docs-start box-shadow-variables\n$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;\n$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;\n// scss-docs-end box-shadow-variables\n\n$component-active-color: $white !default;\n$component-active-bg: $primary !default;\n\n// scss-docs-start caret-variables\n$caret-width: .3em !default;\n$caret-vertical-align: $caret-width * .85 !default;\n$caret-spacing: $caret-width * .85 !default;\n// scss-docs-end caret-variables\n\n$transition-base: all .2s ease-in-out !default;\n$transition-fade: opacity .15s linear !default;\n// scss-docs-start collapse-transition\n$transition-collapse: height .35s ease !default;\n$transition-collapse-width: width .35s ease !default;\n// scss-docs-end collapse-transition\n\n// stylelint-disable function-disallowed-list\n// scss-docs-start aspect-ratios\n$aspect-ratios: (\n \"1x1\": 100%,\n \"4x3\": calc(3 / 4 * 100%),\n \"16x9\": calc(9 / 16 * 100%),\n \"21x9\": calc(9 / 21 * 100%)\n) !default;\n// scss-docs-end aspect-ratios\n// stylelint-enable function-disallowed-list\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// scss-docs-start font-variables\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n// stylelint-enable value-keyword-case\n$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;\n$font-family-code: var(--#{$variable-prefix}font-monospace) !default;\n\n// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins\n// $font-size-base affects the font size of the body text\n$font-size-root: null !default;\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\n$font-size-sm: $font-size-base * .875 !default;\n$font-size-lg: $font-size-base * 1.25 !default;\n\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n\n$font-weight-base: $font-weight-normal !default;\n\n$line-height-base: 1.5 !default;\n$line-height-sm: 1.25 !default;\n$line-height-lg: 2 !default;\n\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $font-size-base * 2 !default;\n$h3-font-size: $font-size-base * 1.75 !default;\n$h4-font-size: $font-size-base * 1.5 !default;\n$h5-font-size: $font-size-base * 1.25 !default;\n$h6-font-size: $font-size-base !default;\n// scss-docs-end font-variables\n\n// scss-docs-start font-sizes\n$font-sizes: (\n 1: $h1-font-size,\n 2: $h2-font-size,\n 3: $h3-font-size,\n 4: $h4-font-size,\n 5: $h5-font-size,\n 6: $h6-font-size\n) !default;\n// scss-docs-end font-sizes\n\n// scss-docs-start headings-variables\n$headings-margin-bottom: $spacer * .5 !default;\n$headings-font-family: null !default;\n$headings-font-style: null !default;\n$headings-font-weight: 500 !default;\n$headings-line-height: 1.2 !default;\n$headings-color: null !default;\n// scss-docs-end headings-variables\n\n// scss-docs-start display-headings\n$display-font-sizes: (\n 1: 5rem,\n 2: 4.5rem,\n 3: 4rem,\n 4: 3.5rem,\n 5: 3rem,\n 6: 2.5rem\n) !default;\n\n$display-font-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n// scss-docs-end display-headings\n\n// scss-docs-start type-variables\n$lead-font-size: $font-size-base * 1.25 !default;\n$lead-font-weight: 300 !default;\n\n$small-font-size: .875em !default;\n\n$sub-sup-font-size: .75em !default;\n\n$text-muted: $gray-600 !default;\n\n$initialism-font-size: $small-font-size !default;\n\n$blockquote-margin-y: $spacer !default;\n$blockquote-font-size: $font-size-base * 1.25 !default;\n$blockquote-footer-color: $gray-600 !default;\n$blockquote-footer-font-size: $small-font-size !default;\n\n$hr-margin-y: $spacer !default;\n$hr-color: inherit !default;\n$hr-height: $border-width !default;\n$hr-opacity: .25 !default;\n\n$legend-margin-bottom: .5rem !default;\n$legend-font-size: 1.5rem !default;\n$legend-font-weight: null !default;\n\n$mark-padding: .2em !default;\n\n$dt-font-weight: $font-weight-bold !default;\n\n$nested-kbd-font-weight: $font-weight-bold !default;\n\n$list-inline-padding: .5rem !default;\n\n$mark-bg: #fcf8e3 !default;\n// scss-docs-end type-variables\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n// scss-docs-start table-variables\n$table-cell-padding-y: .5rem !default;\n$table-cell-padding-x: .5rem !default;\n$table-cell-padding-y-sm: .25rem !default;\n$table-cell-padding-x-sm: .25rem !default;\n\n$table-cell-vertical-align: top !default;\n\n$table-color: $body-color !default;\n$table-bg: transparent !default;\n$table-accent-bg: transparent !default;\n\n$table-th-font-weight: null !default;\n\n$table-striped-color: $table-color !default;\n$table-striped-bg-factor: .05 !default;\n$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;\n\n$table-active-color: $table-color !default;\n$table-active-bg-factor: .1 !default;\n$table-active-bg: rgba($black, $table-active-bg-factor) !default;\n\n$table-hover-color: $table-color !default;\n$table-hover-bg-factor: .075 !default;\n$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;\n\n$table-border-factor: .1 !default;\n$table-border-width: $border-width !default;\n$table-border-color: $border-color !default;\n\n$table-striped-order: odd !default;\n\n$table-group-separator-color: currentColor !default;\n\n$table-caption-color: $text-muted !default;\n\n$table-bg-scale: -80% !default;\n// scss-docs-end table-variables\n\n// scss-docs-start table-loop\n$table-variants: (\n \"primary\": shift-color($primary, $table-bg-scale),\n \"secondary\": shift-color($secondary, $table-bg-scale),\n \"success\": shift-color($success, $table-bg-scale),\n \"info\": shift-color($info, $table-bg-scale),\n \"warning\": shift-color($warning, $table-bg-scale),\n \"danger\": shift-color($danger, $table-bg-scale),\n \"light\": $light,\n \"dark\": $dark,\n) !default;\n// scss-docs-end table-loop\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n// scss-docs-start input-btn-variables\n$input-btn-padding-y: .375rem !default;\n$input-btn-padding-x: .75rem !default;\n$input-btn-font-family: null !default;\n$input-btn-font-size: $font-size-base !default;\n$input-btn-line-height: $line-height-base !default;\n\n$input-btn-focus-width: .25rem !default;\n$input-btn-focus-color-opacity: .25 !default;\n$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;\n$input-btn-focus-blur: 0 !default;\n$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm: .25rem !default;\n$input-btn-padding-x-sm: .5rem !default;\n$input-btn-font-size-sm: $font-size-sm !default;\n\n$input-btn-padding-y-lg: .5rem !default;\n$input-btn-padding-x-lg: 1rem !default;\n$input-btn-font-size-lg: $font-size-lg !default;\n\n$input-btn-border-width: $border-width !default;\n// scss-docs-end input-btn-variables\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n// scss-docs-start btn-variables\n$btn-padding-y: $input-btn-padding-y !default;\n$btn-padding-x: $input-btn-padding-x !default;\n$btn-font-family: $input-btn-font-family !default;\n$btn-font-size: $input-btn-font-size !default;\n$btn-line-height: $input-btn-line-height !default;\n$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm: $input-btn-padding-y-sm !default;\n$btn-padding-x-sm: $input-btn-padding-x-sm !default;\n$btn-font-size-sm: $input-btn-font-size-sm !default;\n\n$btn-padding-y-lg: $input-btn-padding-y-lg !default;\n$btn-padding-x-lg: $input-btn-padding-x-lg !default;\n$btn-font-size-lg: $input-btn-font-size-lg !default;\n\n$btn-border-width: $input-btn-border-width !default;\n\n$btn-font-weight: $font-weight-normal !default;\n$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width: $input-btn-focus-width !default;\n$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity: .65 !default;\n$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-color: $link-color !default;\n$btn-link-hover-color: $link-hover-color !default;\n$btn-link-disabled-color: $gray-600 !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius: $border-radius !default;\n$btn-border-radius-sm: $border-radius-sm !default;\n$btn-border-radius-lg: $border-radius-lg !default;\n\n$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$btn-hover-bg-shade-amount: 15% !default;\n$btn-hover-bg-tint-amount: 15% !default;\n$btn-hover-border-shade-amount: 20% !default;\n$btn-hover-border-tint-amount: 10% !default;\n$btn-active-bg-shade-amount: 20% !default;\n$btn-active-bg-tint-amount: 20% !default;\n$btn-active-border-shade-amount: 25% !default;\n$btn-active-border-tint-amount: 10% !default;\n// scss-docs-end btn-variables\n\n\n// Forms\n\n// scss-docs-start form-text-variables\n$form-text-margin-top: .25rem !default;\n$form-text-font-size: $small-font-size !default;\n$form-text-font-style: null !default;\n$form-text-font-weight: null !default;\n$form-text-color: $text-muted !default;\n// scss-docs-end form-text-variables\n\n// scss-docs-start form-label-variables\n$form-label-margin-bottom: .5rem !default;\n$form-label-font-size: null !default;\n$form-label-font-style: null !default;\n$form-label-font-weight: null !default;\n$form-label-color: null !default;\n// scss-docs-end form-label-variables\n\n// scss-docs-start form-input-variables\n$input-padding-y: $input-btn-padding-y !default;\n$input-padding-x: $input-btn-padding-x !default;\n$input-font-family: $input-btn-font-family !default;\n$input-font-size: $input-btn-font-size !default;\n$input-font-weight: $font-weight-base !default;\n$input-line-height: $input-btn-line-height !default;\n\n$input-padding-y-sm: $input-btn-padding-y-sm !default;\n$input-padding-x-sm: $input-btn-padding-x-sm !default;\n$input-font-size-sm: $input-btn-font-size-sm !default;\n\n$input-padding-y-lg: $input-btn-padding-y-lg !default;\n$input-padding-x-lg: $input-btn-padding-x-lg !default;\n$input-font-size-lg: $input-btn-font-size-lg !default;\n\n$input-bg: $body-bg !default;\n$input-disabled-bg: $gray-200 !default;\n$input-disabled-border-color: null !default;\n\n$input-color: $body-color !default;\n$input-border-color: $gray-400 !default;\n$input-border-width: $input-btn-border-width !default;\n$input-box-shadow: $box-shadow-inset !default;\n\n$input-border-radius: $border-radius !default;\n$input-border-radius-sm: $border-radius-sm !default;\n$input-border-radius-lg: $border-radius-lg !default;\n\n$input-focus-bg: $input-bg !default;\n$input-focus-border-color: tint-color($component-active-bg, 50%) !default;\n$input-focus-color: $input-color !default;\n$input-focus-width: $input-btn-focus-width !default;\n$input-focus-box-shadow: $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color: $gray-600 !default;\n$input-plaintext-color: $body-color !default;\n\n$input-height-border: $input-border-width * 2 !default;\n\n$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;\n\n$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-color-width: 3rem !default;\n// scss-docs-end form-input-variables\n\n// scss-docs-start form-check-variables\n$form-check-input-width: 1em !default;\n$form-check-min-height: $font-size-base * $line-height-base !default;\n$form-check-padding-start: $form-check-input-width + .5em !default;\n$form-check-margin-bottom: .125rem !default;\n$form-check-label-color: null !default;\n$form-check-label-cursor: null !default;\n$form-check-transition: null !default;\n\n$form-check-input-active-filter: brightness(90%) !default;\n\n$form-check-input-bg: $input-bg !default;\n$form-check-input-border: 1px solid rgba($black, .25) !default;\n$form-check-input-border-radius: .25em !default;\n$form-check-radio-border-radius: 50% !default;\n$form-check-input-focus-border: $input-focus-border-color !default;\n$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;\n\n$form-check-input-checked-color: $component-active-color !default;\n$form-check-input-checked-bg-color: $component-active-bg !default;\n$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;\n$form-check-input-checked-bg-image: url(\"data:image/svg+xml,`-`` 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: $headings-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\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\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-bs-original-title] { // 1\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n text-decoration-skip-ink: none; // 4\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\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: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\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\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n background-color: $mark-bg;\n}\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 { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n\n &:hover {\n color: $link-hover-color;\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\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 direction: ltr #{\"/* rtl:ignore */\"};\n unicode-bidi: bidi-override;\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: $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\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\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 `