{"version":3,"sources":["support/mixins/_progress-mixins.scss","experimental.css","_experimental.scss","support/_config.scss","support/mixins/_bp-mixins.scss","support/color/_var.scss","support/_util.scss","support/color/_default.scss","support/mixins/_misc-mixins.scss"],"names":[],"mappings":"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","file":"../experimental.css","sourcesContent":["/* stylelint-disable alpha-value-notation */\n/* stylelint-disable max-line-length */\n/* stylelint-disable color-function-notation */\n@mixin linear-gradient($gradientLine, $colorStops...) {\n  background-image: linear-gradient(convert-gradient-direction($gradientLine), $colorStops);\n}\n\n@mixin loader-stripe($color) {\n  background: linear-gradient(135deg, $color 25%, darken($color, 10%) 25%, darken($color, 10%) 50%, $color 50%, $color 75%, darken($color, 10%) 75%);\n  height: $progress-height;\n  background-size: $progress-height+1 $progress-height+1;\n  animation: stripes 3s linear infinite;\n  border-radius: inherit;\n}\n\n@mixin progress-container {\n  height: $progress-height;\n  border-radius: $progress-radius;\n  background-color: $progress-background;\n  margin-bottom: $progress-margin-bottom;\n}\n\n/// Adds styles for the inner meter of a progress bar.\n@mixin progress-meter {\n  width: 0%;\n  height: 100%;\n  display: block;\n  position: relative;\n  border-radius: $progress-radius;\n}\n\n/// Adds styles for text in the progress meter.\n@mixin progress-meter-text {\n  @include absolute-center;\n\n  margin: $space-0;\n  font-weight: bold;\n  color: $color-white;\n  white-space: nowrap;\n  font-size: $progress-font-size;\n  border-radius: $progress-radius;\n}\n\n@mixin progress-size(\n  $height: $progress-height,\n  $font-size: $progress-font-size\n) {\n  height: $height;\n\n  .c-progress-meter {\n    height: $height;\n\n    &-animated {\n      height: $height;\n      background-size: $height $height;\n    }\n  }\n\n  .c-progress-meter-text {\n    font-size: $font-size;\n  }\n}\n\n\n@keyframes stripes {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 50px 50px;\n  }\n}\n\n\n@mixin btn-in-progress() {\n  &,\n  &:hover,\n  &:active,\n  &:focus,\n  &:visited,\n  &[disabled],\n  &.disabled {\n    cursor: wait;\n    box-shadow: none;\n    text-shadow: none;\n    white-space: nowrap;\n    background: linear-gradient(-45deg, rgba(white, .6) 25%, transparent 25%, transparent 50%, rgba(white, .6) 50%, rgba(white, .6) 75%, transparent 75%, transparent), $color-gray-6;\n    background-repeat: repeat;\n    background-size: $progress-btn-animate-size $progress-btn-animate-size, 100% 100%;\n    animation: btn-progress-bar-stripes 2s linear infinite;\n  }\n}\n\n@mixin btn-in-progress-style($bg, $color) {\n  &,\n  &:hover,\n  &:active,\n  &:focus,\n  &:visited,\n  &[disabled],\n  &.disabled {\n    color: $color;\n    background: $bg;\n    background-image: linear-gradient(-45deg, $bg 25%, $progress-opaque-color 25%, $progress-opaque-color 50%, $bg 50%, $bg 75%, $progress-opaque-color 75%);\n    background-size: $progress-btn-animate-size $progress-btn-animate-size, 100% 100%;\n  }\n}\n\n\n@keyframes btn-progress-bar-stripes {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: $progress-btn-animate-size 0;\n  }\n}\n\n","/* stylelint-disable alpha-value-notation */\n/* stylelint-disable max-line-length */\n/* stylelint-disable color-function-notation */\n@keyframes stripes {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 50px 50px;\n  }\n}\n@keyframes btn-progress-bar-stripes {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 40px 0;\n  }\n}\n.c-nav-toggle {\n  display: none;\n  cursor: pointer;\n  margin-left: auto;\n  position: relative;\n  height: 48px;\n  width: 49px;\n  color: #32363b;\n  border-left: 1px solid #cccccc;\n}\n.c-nav-toggle span {\n  height: 2px;\n  width: 16px;\n  display: block;\n  position: absolute;\n  left: calc(50% - 8px);\n  transform-origin: center;\n  transition-duration: 86ms;\n  background-color: currentColor;\n  transition-timing-function: ease-out;\n  transition-property: background-color, opacity, transform;\n}\n.c-nav-toggle span:nth-child(1) {\n  top: calc(50% - 6px);\n}\n.c-nav-toggle span:nth-child(2) {\n  top: calc(50% - 1px);\n}\n.c-nav-toggle span:nth-child(3) {\n  top: calc(50% + 4px);\n}\n.c-nav-toggle:hover {\n  background-color: rgba(255, 255, 255, 0.23);\n}\n.c-nav-toggle-active span:nth-child(1) {\n  transform: translateY(5px) rotate(45deg);\n}\n.c-nav-toggle-active span:nth-child(2) {\n  opacity: 0;\n}\n.c-nav-toggle-active span:nth-child(3) {\n  transform: translateY(-5px) rotate(-45deg);\n}\n\n@media (max-width: 991px) {\n  .c-header {\n    position: relative;\n  }\n  .c-header .c-nav-toggle {\n    display: block;\n  }\n  .c-header .c-nav {\n    display: none;\n    padding: 4px 0;\n    flex-direction: column;\n    background: #ffffff;\n  }\n  .c-header.c-header-inverse .c-nav-toggle {\n    color: #32363b;\n    border-left: 1px solid #cccccc;\n  }\n  .c-header.c-header-inverse .c-nav-toggle:hover {\n    background-color: rgba(213, 213, 213, 0.35);\n  }\n  .c-header.c-header-inverse .c-nav {\n    background: #000000;\n  }\n}\n.c-header.c-nav-active .c-nav {\n  display: flex;\n}\n.c-header.c-nav-active .c-nav-link {\n  margin: 4px 8px;\n}\n.c-header.c-nav-active .c-nav-pills {\n  left: 0;\n  top: 100%;\n  width: 100%;\n  position: absolute;\n  margin: 1px 0 0 0;\n}\n\n.c-header-item .c-header-search-container {\n  cursor: default;\n  max-height: 48px;\n}\n.c-header-item .c-header-search-container:hover {\n  cursor: default;\n  background: transparent;\n}\n.c-header-item .c-header-search-container form {\n  display: flex;\n  position: relative;\n}\n.c-header-item .c-header-search-box {\n  cursor: pointer;\n  width: 16px;\n  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;\n}\n.c-header-item .c-header-search-box + label {\n  max-width: 0;\n  position: absolute;\n  top: 8px;\n  left: 9px;\n}\n.c-header-item .c-header-search-box:focus {\n  cursor: text;\n  position: relative;\n  height: 32px;\n  padding-left: 32px;\n  width: 200px;\n  transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;\n}\n.c-header-item .c-header-search-box:focus + label {\n  left: 8px;\n}\n.c-header-item .c-header-search-box:not(:focus) {\n  overflow: hidden;\n  box-shadow: none;\n  text-indent: 100%;\n  white-space: nowrap;\n  border-color: #cccccc;\n}\n.c-header-item .c-header-search-box:hover {\n  background: rgba(213, 213, 213, 0.35);\n}\n.c-header-item .c-header-search-icon {\n  cursor: pointer;\n  transition: none;\n  position: relative;\n}\n.c-header-item .c-header-search-icon:hover {\n  color: #212529;\n}\n\n.c-header.c-header-inverse .c-header-item .c-header-search-container {\n  cursor: default;\n}\n.c-header.c-header-inverse .c-header-item .c-header-search-container:hover {\n  cursor: default;\n  background: transparent;\n}\n.c-header.c-header-inverse .c-header-item .c-header-search-box {\n  color: rgba(255, 255, 255, 0.9);\n  background: transparent;\n}\n.c-header.c-header-inverse .c-header-item .c-header-search-box:not(:focus) {\n  border-color: rgba(252, 252, 252, 0.35);\n}\n.c-header.c-header-inverse .c-header-item .c-header-search-box:hover {\n  background: rgba(255, 255, 255, 0.23);\n}\n.c-header.c-header-inverse .c-header-item .c-header-search-icon:hover {\n  color: #f1f3f5;\n}\n\n.c-sidenav-user-body {\n  text-align: center;\n  color: #ffffff;\n  background: url(\"https://cupcake-layouts.netlify.com/dist/images/bg9.png\") center center no-repeat;\n  background-size: cover;\n  padding: 16px;\n}\n.c-sidenav-user-dropdown {\n  display: flex;\n  align-items: center;\n  color: #ffffff;\n  padding: 8px 16px;\n  justify-content: space-between;\n  background-color: #1b6ec2;\n  transition: background-color ease-in-out 0.15s;\n}\n.c-sidenav-user-dropdown:hover {\n  background-color: #1c7cd6;\n}\n.c-sidenav-user-dropdown::after {\n  width: 0;\n  height: 0;\n  content: \"\";\n  display: inline-block;\n  border-top: 0.3em solid white;\n  border-right: 0.3em solid transparent;\n  border-bottom: 0;\n  border-left: 0.3em solid transparent;\n  right: 16px;\n}\n.c-sidenav-user-dropdown.c-d-flex::after {\n  transform: rotate(180deg);\n}\n.c-sidenav-user-hidden {\n  display: none;\n}\n.c-sidenav-user .c-sidenav-menu {\n  display: none;\n}\n\n.c-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  align-items: center;\n  background-size: cover;\n  flex-direction: column;\n  background-color: #ffffff;\n  background-position: center center;\n  border-bottom: 1px solid #f1f3f5;\n}\n.c-page-header .c-tabs {\n  box-shadow: none;\n}\n.c-page-header-bar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  justify-content: space-between;\n  background-color: #ffffff;\n  border-bottom: 1px solid #f1f3f5;\n}\n.c-page-header-title {\n  font-size: 24px;\n  font-weight: 600;\n  margin: 0;\n  color: #495057;\n}\n.c-page-header-title small {\n  opacity: 0.7;\n  color: inherit;\n  display: block;\n  font-size: 1rem;\n  font-weight: 300;\n  line-height: 1.7;\n  padding-top: 8px;\n}\n.c-page-header-info {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 16px;\n  justify-content: space-between;\n}\n.c-page-header-info .c-page-header-left {\n  flex: 1;\n}\n.c-page-header-info .c-breadcrumb {\n  margin: 8px 0 0;\n}\n.c-page-header-transparent {\n  border-bottom: 0;\n  background-color: transparent;\n}\n.c-page-header-action {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n}\n.c-page-header-action-buttons {\n  bottom: 0;\n  z-index: 1000;\n  position: absolute;\n  transform: translateY(50%);\n  right: 16px;\n}\n.c-page-header-inverse {\n  background-color: #212529;\n}\n.c-page-header-inverse .c-page-header-info .c-page-header-title {\n  color: #ffffff;\n}\n.c-page-header-inverse[class*=c-bg-] .c-page-header-action.active, .c-page-header-inverse[class*=c-bg-] .c-page-header-action:hover {\n  border-bottom-color: rgba(255, 255, 255, 0.7);\n}\n.c-page-header-inverse[class*=c-bg-] .c-page-header-action {\n  border-bottom-color: rgba(255, 255, 255, 0.7);\n}\n\n.fab {\n  position: relative;\n  display: inline-block;\n  z-index: 9;\n}\n.fab > .c-btn {\n  position: relative;\n  z-index: 1;\n}\n.fab-fixed {\n  position: fixed;\n  right: 40px;\n  bottom: 40px;\n}\n\n.fab-buttons {\n  bottom: 40px;\n  display: flex;\n  margin: 0;\n  right: 4px;\n  list-style: none;\n  padding: 0;\n  position: absolute;\n  flex-direction: column-reverse;\n}\n.fab-buttons li {\n  opacity: 0;\n  transition: 0.4s;\n  text-align: right;\n  padding: 8px 0;\n}\n.fab-buttons li:nth-child(1) {\n  transform: translateY(103%);\n}\n.fab-buttons li:nth-child(2) {\n  transform: translateY(206%);\n}\n.fab-buttons li:nth-child(3) {\n  transform: translateY(309%);\n}\n.fab-buttons li:nth-child(4) {\n  transform: translateY(412%);\n}\n.fab-buttons li:nth-child(5) {\n  transform: translateY(515%);\n}\n.fab-buttons li:nth-child(6) {\n  transform: translateY(618%);\n}\n.fab-buttons li:nth-child(7) {\n  transform: translateY(721%);\n}\n.fab-buttons li:nth-child(8) {\n  transform: translateY(824%);\n}\n.fab-buttons li:nth-child(9) {\n  transform: translateY(927%);\n}\n\n.fab-icon-default,\n.fab-icon-active {\n  top: 50%;\n  left: 50%;\n  opacity: 1;\n  transition: 0.5s;\n  position: absolute;\n  display: inline-block;\n  transform: translate(-50%, -50%) scale(1);\n}\n\n.fab-icon-active {\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0);\n}\n\n.fab > .c-btn.active .fab-icon-default {\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0);\n}\n.fab > .c-btn.active .fab-icon-active {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n}\n.fab > .c-btn.active + .fab-buttons li {\n  opacity: 1;\n  transform: translate(0);\n}\n\n.fab-bottom .fab-buttons {\n  top: 40px;\n  flex-direction: column;\n}\n.fab-bottom .fab-buttons li:nth-child(1) {\n  transform: translateY(-103%);\n}\n.fab-bottom .fab-buttons li:nth-child(2) {\n  transform: translateY(-206%);\n}\n.fab-bottom .fab-buttons li:nth-child(3) {\n  transform: translateY(-309%);\n}\n.fab-bottom .fab-buttons li:nth-child(4) {\n  transform: translateY(-412%);\n}\n.fab-bottom .fab-buttons li:nth-child(5) {\n  transform: translateY(-515%);\n}\n.fab-bottom .fab-buttons li:nth-child(6) {\n  transform: translateY(-618%);\n}\n.fab-bottom .fab-buttons li:nth-child(7) {\n  transform: translateY(-721%);\n}\n.fab-bottom .fab-buttons li:nth-child(8) {\n  transform: translateY(-824%);\n}\n.fab-bottom .fab-buttons li:nth-child(9) {\n  transform: translateY(-927%);\n}\n\n.fab-left .fab-buttons {\n  top: 0;\n  right: 40px;\n  flex-direction: row-reverse;\n}\n.fab-left .fab-buttons li {\n  padding: 4px;\n}\n.fab-left .fab-buttons li:nth-child(1) {\n  transform: translateX(103%);\n}\n.fab-left .fab-buttons li:nth-child(2) {\n  transform: translateX(206%);\n}\n.fab-left .fab-buttons li:nth-child(3) {\n  transform: translateX(309%);\n}\n.fab-left .fab-buttons li:nth-child(4) {\n  transform: translateX(412%);\n}\n.fab-left .fab-buttons li:nth-child(5) {\n  transform: translateX(515%);\n}\n.fab-left .fab-buttons li:nth-child(6) {\n  transform: translateX(618%);\n}\n.fab-left .fab-buttons li:nth-child(7) {\n  transform: translateX(721%);\n}\n.fab-left .fab-buttons li:nth-child(8) {\n  transform: translateX(824%);\n}\n.fab-left .fab-buttons li:nth-child(9) {\n  transform: translateX(927%);\n}\n\n.fab-right .fab-buttons {\n  top: 0;\n  left: 40px;\n  flex-direction: row;\n}\n.fab-right .fab-buttons li {\n  padding: 4px;\n}\n.fab-right .fab-buttons li:nth-child(1) {\n  transform: translateX(-103%);\n}\n.fab-right .fab-buttons li:nth-child(2) {\n  transform: translateX(-206%);\n}\n.fab-right .fab-buttons li:nth-child(3) {\n  transform: translateX(-309%);\n}\n.fab-right .fab-buttons li:nth-child(4) {\n  transform: translateX(-412%);\n}\n.fab-right .fab-buttons li:nth-child(5) {\n  transform: translateX(-515%);\n}\n.fab-right .fab-buttons li:nth-child(6) {\n  transform: translateX(-618%);\n}\n.fab-right .fab-buttons li:nth-child(7) {\n  transform: translateX(-721%);\n}\n.fab-right .fab-buttons li:nth-child(8) {\n  transform: translateX(-824%);\n}\n.fab-right .fab-buttons li:nth-child(9) {\n  transform: translateX(-927%);\n}","$nav-height                : map-get($nav-config, 'height') !default;\n$nav-color                 : map-get($nav-config, 'color') !default;\n$nav-color-disabled        : map-get($nav-config, 'color-disabled') !default;\n$nav-pill-radius           : map-get($nav-config, 'pill-radius') !default;\n$nav-font-size             : map-get($nav-config, 'font-size') !default;\n$nav-color-hover           : map-get($nav-config, 'color-hover') !default;\n$nav-color-active          : map-get($nav-config, 'color-active') !default;\n$nav-disabled-opacity      : map-get($nav-config, 'disabled-opacity') !default;\n$nav-font-weight           : map-get($nav-config, 'font-weight') !default;\n$nav-pill-font-weight      : map-get($nav-config, 'pill-font-weight') !default;\n$nav-pill-color            : map-get($nav-config, 'pill-color') !default;\n$nav-pill-color-hover      : map-get($nav-config, 'pill-color-hover') !default;\n$nav-pill-color-active     : map-get($nav-config, 'pill-color-active') !default;\n$nav-pill-color-disabled   : map-get($nav-config, 'pill-color-disabled') !default;\n$nav-pill-bg-hover         : map-get($nav-config, 'pill-bg-hover') !default;\n$nav-pill-bg-active        : map-get($nav-config, 'pill-bg-active') !default;\n$nav-pill-bg-disabled      : map-get($nav-config, 'pill-bg-disabled') !default;\n$nav-pill-icon-opacity     : map-get($nav-config, 'pill-icon-opacity') !default;\n$nav-pill-icon-color-active: map-get($nav-config, 'pill-icon-color-active') !default;\n$nav-spacing               : map-get($nav-config, 'spacing') !default;\n// Experimental work in progress stuff subject to change/deletion\n@mixin experimental-nav-export() {\n  // hamburger style toggle\n  .c-nav-toggle {\n    display: none;\n    cursor: pointer;\n    margin-left: auto;\n    position: relative;\n    height: $header-height;\n    width: $header-height + 1;\n    color: $header-text-color;\n    border-left: 1px solid $header-borders;\n\n    span {\n      height: 2px;\n      width: 16px;\n      display: block;\n      position: absolute;\n      left: calc(50% - 8px);\n      transform-origin: center;\n      transition-duration: 86ms;\n      background-color: currentColor;\n      transition-timing-function: ease-out;\n      transition-property: background-color, opacity, transform;\n\n      &:nth-child(1) {\n        top: calc(50% - 6px);\n      }\n\n      &:nth-child(2) {\n        top: calc(50% - 1px);\n      }\n\n      &:nth-child(3) {\n        top: calc(50% + 4px);\n      }\n    }\n\n    &:hover {\n      background-color: $header-inverse-bg-hover;\n    }\n\n    &-active {\n      span {\n        &:nth-child(1) {\n          transform: translateY(5px) rotate(45deg);\n        }\n\n        &:nth-child(2) {\n          opacity: 0;\n        }\n\n        &:nth-child(3) {\n          transform: translateY(-5px) rotate(-45deg);\n        }\n      }\n    }\n  }\n\n  // Responsive header moves .c-nav into submenu at smaller viewports\n  @include media-breakpoint-down(md) {\n    .c-header {\n      position: relative;\n\n      .c-nav-toggle {\n        display: block;\n      }\n\n      .c-nav {\n        display: none;\n        padding:calc( $nav-spacing / 2) $space-0;\n        flex-direction: column;\n        background: $header-bg;\n      }\n\n      &.c-header-inverse {\n        .c-nav-toggle {\n          color: $header-text-color;\n          border-left: 1px solid $header-borders;\n\n          &:hover {\n            background-color: $header-bg-hover;\n          }\n        }\n\n        .c-nav {\n          background: $header-inverse-bg;\n        }\n      }\n    }\n  }\n\n  .c-header.c-nav-active {\n    .c-nav {\n      display: flex;\n\n      &-link {\n        margin: calc($nav-spacing / 2) $nav-spacing;\n      }\n\n      &-pills {\n        left: 0;\n        top: 100%;\n        width: 100%;\n        position: absolute;\n        margin: $space-0 + 1px $space-0 $space-0 $space-0;\n      }\n    }\n  }\n}\n\n$header-bg                       : map-get($header-config, 'bg') !default;\n$header-height                   : map-get($header-config, 'height') !default;\n$header-inverse-text-color-active: map-get($header-config, 'inverse-text-color-active') !default;\n$header-bg-hover                 : map-get($header-config, 'bg-hover') !default;\n$header-borders                  : map-get($header-config, 'borders') !default;\n$header-z-index                  : map-get($header-config, 'z-index') !default;\n$header-bottom-border            : map-get($header-config, 'bottom-border') !default;\n$header-item-padding             : map-get($header-config, 'item-padding') !default;\n$header-inverse-bg               : map-get($header-config, 'inverse-bg') !default;\n$header-inverse-bg-hover         : map-get($header-config, 'inverse-bg-hover') !default;\n$header-text-color               : map-get($header-config, 'text-color') !default;\n$header-inverse-text-color       : map-get($header-config, 'inverse-text-color') !default;\n$header-inverse-borders          : map-get($header-config, 'inverse-borders') !default;\n$control-height               : map-get($form-config, 'height') !default;\n\n@mixin experimental-headerSearch-export() {\n  $header-search-transition-length: 0.6s !default;\n  $header-search-expanded-width   : 200px !default;\n  $trans: $header-search-transition-length;\n\n  // Animated search expanded\n  .c-header-item {\n    .c-header-search {\n      &-container {\n        cursor: default;\n        max-height: $header-height;\n\n        &:hover {\n          cursor: default;\n          background: transparent;\n        }\n\n        form {\n          display: flex;\n          position: relative;\n        }\n      }\n\n      &-box {\n        cursor: pointer;\n        width: $nav-spacing * 2;\n        transition: width $trans, border-radius $trans, background $trans, box-shadow $trans;\n\n        & + label {\n          max-width: 0;\n          position: absolute;\n          top: $nav-spacing;\n          left: $nav-spacing + 1;\n        }\n\n        &:focus {\n          cursor: text;\n          position: relative;\n          height: $control-height;\n          padding-left: $control-height;\n          width: $header-search-expanded-width;\n          transition: width $trans cubic-bezier(0, 1.22, .66, 1.39), border-radius $trans, background $trans;\n\n          & + label {\n            left: $nav-spacing;\n          }\n        }\n\n        &:not(:focus) {\n          overflow: hidden;\n          box-shadow: none;\n          text-indent: 100%;\n          white-space: nowrap;\n          border-color: $header-borders;\n        }\n\n        &:hover {\n          background: $header-bg-hover;\n        }\n      }\n\n      &-icon {\n        cursor: pointer;\n        transition: none;\n        position: relative;\n\n        &:hover {\n          color: $color-gray-9;\n        }\n      }\n    }\n  }\n\n  // Animated search inverse header styles\n  .c-header.c-header-inverse {\n    .c-header-item {\n      .c-header-search {\n        &-container {\n          cursor: default;\n\n          &:hover {\n            cursor: default;\n            background: transparent;\n          }\n        }\n\n        &-box {\n          color: $header-inverse-text-color;\n          background: transparent;\n\n          &:not(:focus) {\n            border-color: $header-inverse-borders;\n          }\n\n          &:hover {\n            background: $header-inverse-bg-hover;\n          }\n        }\n\n        &-icon:hover {\n          color: $color-gray-1;\n        }\n      }\n    }\n  }\n}\n\n// User in sidenav\n@mixin experimental-userNav-export() {\n  $experimental-userNav-BgImage: url('https://cupcake-layouts.netlify.com/dist/images/bg9.png') !default;\n\n  .c-sidenav-user {\n    &-body {\n      text-align: center;\n      color: $color-white;\n      background: $experimental-userNav-BgImage center center no-repeat;\n      background-size: cover;\n      padding: $space-md;\n    }\n\n    &-dropdown {\n      display: flex;\n      align-items: center;\n      color: $color-white;\n      padding: $space-sm $space-md;\n      justify-content: space-between;\n      background-color: $color-primary-8;\n      transition: background-color ease-in-out 0.15s;\n\n      &:hover {\n        background-color: $color-primary-7;\n      }\n\n      &::after {\n        @include caret(down, $color: white);\n\n        right: $space-md;\n      }\n\n      &.c-d-flex::after {\n        transform: rotate(180deg);\n      }\n    }\n\n    &-hidden {\n      display: none;\n    }\n\n    .c-sidenav-menu {\n      display: none;\n    }\n  }\n}\n\n// In page header\n@mixin experimental-pageHeader-export() {\n\n  $page-header-bg: $color-white !default;\n  $page-header-border: 1px solid $color-gray-1 !default;\n  $page-header-padding: $space-md !default;\n\n  .c-page-header {\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n    align-items: center;\n    background-size: cover;\n    flex-direction: column;\n    background-color: $page-header-bg;\n    background-position: center center;\n    border-bottom: $page-header-border;\n\n    .c-tabs {\n      box-shadow: none;\n    }\n\n    &-bar {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      padding: $page-header-padding;\n      justify-content: space-between;\n      background-color: $page-header-bg;\n      border-bottom: $page-header-border;\n    }\n\n    &-title {\n      font-size: 24px;\n      font-weight: 600;\n      margin: $space-0;\n      color: $color-gray-7;\n\n      small {\n        opacity: 0.7;\n        color: inherit;\n        display: block;\n        font-size: 1rem;\n        font-weight: 300;\n        line-height: 1.7;\n        padding-top: $space-sm;\n      }\n    }\n\n    &-info {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      padding: $page-header-padding;\n      justify-content: space-between;\n\n      .c-page-header-left {\n        flex: 1;\n      }\n\n      .c-breadcrumb {\n        margin: $space-sm 0 0;\n      }\n    }\n\n    // Transparent\n    &-transparent {\n      border-bottom: 0;\n      background-color: transparent;\n    }\n\n    // Actions\n    &-action {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      position: relative;\n      align-items: center;\n      justify-content: space-between;\n      padding: $space-0 $page-header-padding;\n\n      &-buttons {\n        bottom: 0;\n        z-index: 1000;\n        position: absolute;\n        transform: translateY(50%);\n        right: $page-header-padding;\n      }\n    }\n\n    // Inverse\n    &-inverse {\n      background-color: $color-gray-9;\n\n      .c-page-header-info {\n        .c-page-header-title {\n          color: $color-white;\n        }\n      }\n\n      // Allow for bg colors to work\n      &[class*=\"c-bg-\"] {\n        .c-page-header-action {\n          &.active,\n          &:hover {\n            border-bottom-color: rgba($color-white, .7);\n          }\n        }\n\n        .c-page-header-action {\n          border-bottom-color: rgba($color-white, .7);\n        }\n      }\n    }\n  }\n\n  .fab {\n    position: relative;\n    display: inline-block;\n    z-index: 9;\n\n    > .c-btn {\n      position: relative;\n      z-index: 1;\n    }\n\n    &-fixed {\n      position: fixed;\n      right: 40px;\n      bottom: 40px;\n    }\n  }\n\n\n  .fab-buttons {\n    bottom: 40px;\n    display: flex;\n    margin: $space-0;\n    right: $space-xs;\n    list-style: none;\n    padding: $space-0;\n    position: absolute;\n    flex-direction: column-reverse;\n\n    li {\n      opacity: 0;\n      transition: .4s;\n      text-align: right;\n      padding: $space-sm $space-0;\n\n      @for $i from 1 through 9 {\n        &:nth-child(#{$i}) { transform: translateY(103% * $i); }\n      }\n    }\n  }\n\n  .fab-icon-default,\n  .fab-icon-active {\n    top: 50%;\n    left: 50%;\n    opacity: 1;\n    transition: .5s;\n    position: absolute;\n    display: inline-block;\n    transform: translate(-50%, -50%) scale(1);\n  }\n\n  .fab-icon-active {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0);\n  }\n\n\n  .fab > .c-btn.active {\n    .fab-icon-default {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0);\n    }\n\n    .fab-icon-active {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n\n    + .fab-buttons li {\n      opacity: 1;\n      transform: translate(0);\n    }\n  }\n\n\n  // Directions\n  //\n  .fab-bottom .fab-buttons {\n    top: 40px;\n    flex-direction: column;\n\n    li {\n      @for $i from 1 through 9 {\n        &:nth-child(#{$i}) { transform: translateY(-103% * $i); }\n      }\n    }\n  }\n\n\n  .fab-left .fab-buttons {\n    top: 0;\n    right: 40px;\n    flex-direction: row-reverse;\n\n    li {\n      padding: $space-xs;\n\n      @for $i from 1 through 9 {\n        &:nth-child(#{$i}) { transform: translateX(103% * $i); }\n      }\n    }\n  }\n\n\n  .fab-right .fab-buttons {\n    top: 0;\n    left: 40px;\n    flex-direction: row;\n\n    li {\n      padding: $space-xs;\n\n      @for $i from 1 through 9 {\n        &:nth-child(#{$i}) { transform: translateX(-103% * $i); }\n      }\n    }\n  }\n}\n","// --------------------------------------------\n// GLOBAL BOOLEANS & SETTINGS -----------------\n// --------------------------------------------\n$enable-reset         : true !default;\n$enable-shadow-classes: true !default;\n$enable-color-classes : true !default;\n$enable-spacer-classes: true !default;\n$enable-border-classes: true !default;\n$enable-radius-classes: true !default;\n$enable-float-classes : true !default;\n$enable-flex-classes  : true !default;\n$enable-hidden-classes: true !default;\n$enable-cursor-classes: true !default;\n$enable-center-classes: true !default;\n$enable-sideNav       : true !default;\n$white-label          : false !default;\n\n// Defining the high-level stuff used throughout (we try to use these as much as possible below)\n$global-text-color          : $color-gray-7 !default;\n$global-text-color-light    : $color-gray-6 !default;\n$global-text-color-dark     : $color-gray-9 !default;\n$global-text-color-lighter  : $color-gray-5 !default;\n$global-bg-disabled         : $color-gray-3 !default;\n$global-backdrop-dark       : rgba(0, 0, 0, 0.75) !default;\n$global-radius              : $radius-sm !default;\n$global-border-size         : 1px solid !default;\n$global-border-color        : $color-gray-4 !default;\n$global-border-color-light  : $color-gray-2 !default;\n$global-border-color-dark   : $color-gray-5 !default;\n\n$global-sidebar-width       : 256px !default;\n$global-sidebar-width-folded: 48px !default;\n$global-footer-height       : 48px !default;\n$global-footer-height-open  : 56px !default;\n$global-header-height       : 48px !default;\n\n// Global sizes are sizes based on our 8px grid established in util\n// Used by avatars, badges, buttons, checkboxes, forms,\n// switches, tabs, nav, media, pagination\n// !CHANGE CAREFULLY!\n$global-size-xs: $global-px-grid * 2 !default; // 16px\n$global-size-sm: $global-px-grid * 3 !default; // 24px\n$global-size-md: $global-px-grid * 4 !default; // 32px\n$global-size-lg: $global-px-grid * 5 !default; // 40px\n$global-size-xl: $global-px-grid * 6 !default; // 48px\n// !CHANGE CAREFULLY!\n\n\n// --------------------------------------------\n// TYPOGRAPHY ---------------------------------\n// --------------------------------------------\n$font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif !default;\n$font-family-mono: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace !default;\n$font-link-style: underline !default;\n$font-link-style-hover: underline !default;\n$font-link-color: $color-primary !default;\n$font-link-color-hover: darken($color-primary, 10) !default;\n$font-link-color-active: $font-link-color-hover !default;\n\n// These sizes are available as vars but looped for classes below\n$font-size-0    : 10px !default;\n$font-size-1    : 11px !default;\n$font-size-2    : 12px !default;\n$font-size-3    : 14px !default;\n$font-size-4    : 16px !default;\n$font-size-5    : 18px !default;\n$font-size-6    : 20px !default;\n$font-size-7    : 24px !default;\n$font-size-8    : 36px !default;\n\n$line-height-xs : 16px !default;\n$line-height-sm : 24px !default;\n$line-height-md : 32px !default;\n$line-height-lg : 40px !default;\n\n// Only applies if $enable-reset is true\n$body-font-size : $font-size-4 !default;\n$body-font-color: $global-text-color-dark !default;\n\n// Set the defaults for .c-text-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$font-body: () !default;\n$font-body: map-merge(\n  (\n    \"xs\": (\n      \"font-size\": $font-size-0,\n      \"line-height\": $line-height-xs\n    ),\n    \"sm\": (\n      \"font-size\": $font-size-1,\n      \"line-height\": $line-height-xs\n    ),\n    \"md\": (\n      \"font-size\": $font-size-2,\n      \"line-height\": $line-height-xs\n    ),\n    \"lg\": (\n      \"font-size\": $font-size-3,\n      \"line-height\": $line-height-sm\n    ),\n    \"xl\": (\n      \"font-size\": $font-size-4,\n      \"line-height\": $line-height-sm\n    ),\n    \"xxl\": (\n      \"font-size\": $font-size-5,\n      \"line-height\": $line-height-sm\n    ),\n  ),\n  $font-body\n);\n\n\n// Set the defaults for .c-header-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$font-header: () !default;\n$font-header: map-merge(\n  (\n    \"xs\": (\n      \"font-size\": $font-size-2,\n      \"line-height\": $line-height-xs\n    ),\n    \"sm\": (\n      \"font-size\": $font-size-3,\n      \"line-height\": $line-height-sm\n    ),\n    \"md\": (\n      \"font-size\": $font-size-4,\n      \"line-height\": $line-height-sm\n    ),\n    \"lg\": (\n      \"font-size\": $font-size-6,\n      \"line-height\": $line-height-sm\n    ),\n    \"xl\": (\n      \"font-size\": $font-size-7,\n      \"line-height\": $line-height-md\n    ),\n    \"xxl\": (\n      \"font-size\": $font-size-8,\n      \"line-height\": $line-height-lg\n    ),\n  ),\n  $font-header\n);\n\n\n// --------------------------------------------\n// ALERTS & TOASTS ----------------------------\n// --------------------------------------------\n$alert-font             : $font-family !default;\n$alert-radius           : $global-radius !default;\n$alert-border           : $global-border-size !default;\n$alert-color            : $global-text-color-dark !default;\n$alert-padding          : $space-sm !default;\n$alert-shadows          : $shadow-lg !default;\n$alert-top-padding      : $space-md !default;\n$alert-font-size        : $font-size-2 !default;\n$alert-margin           : 0 0 $space-md 0 !default;\n$alert-icon-font-size   : $font-size-2 !default;\n$alert-icon-color       : $color-primary !default;\n$alert-top-icon-size    : $font-size-4 !default;\n$alert-line-height      : $line-height-xs !default;\n$alert-close-font-size  : $font-size-2 !default;\n$alert-title-font-size  : $font-size-2 !default;\n$alert-font-weight      : $font-weight-normal !default;\n$alert-title-font-weight: $font-weight-bold !default;\n$alert-background       : rgba($color-primary, .07) !default;\n$alert-title-line-height: $line-height-sm - 5 !default;\n$alert-primary-bg       : $color-primary-0 !default;\n$alert-primary-color    : $color-primary !default;\n$alert-success-bg       : $color-success-0 !default;\n$alert-success-color    : $color-success !default;\n$alert-warning-bg       : $color-warning-0 !default;\n$alert-warning-color    : $color-warning !default;\n$alert-danger-bg        : $color-danger-0 !default;\n$alert-danger-color     : $color-danger-9 !default;\n\n// Set the default styles for alerts - .c-alert-{{color}}.\n// This map is looped - adding key/value pairs will generate more classes\n// this maps to name, bg-color, text/border color\n$alert-colors: () !default;\n$alert-colors: map-merge(\n  (\n    \"primary\": (\n      \"color\": $alert-primary-color,\n      \"bg\": $alert-primary-bg\n    ),\n    \"success\": (\n      \"color\": $alert-success-color,\n      \"bg\": $alert-success-bg\n    ),\n    \"warning\": (\n      \"color\": $alert-warning-color,\n      \"bg\": $alert-warning-bg\n    ),\n    \"danger\": (\n      \"color\": $alert-danger-color,\n      \"bg\": $alert-danger-bg\n    ),\n  ),\n  $alert-colors\n);\n\n\n// --------------------------------------------\n// Action Panel -------------------------------\n// --------------------------------------------\n$action-panel-header-bg              : $color-white !default;\n$action-panel-footer-bg              : $color-white !default;\n$action-panel-backdrop               : $global-backdrop-dark !default;\n$action-panel-border                 : $global-border-size $global-border-color-light !default;\n$action-panel-padding-v              : $space-md - $space-xs !default;\n$action-panel-padding-h              : $space-md !default;\n$action-panel-header-font-size       : $font-size-3 !default;\n$action-panel-header-font-weight     : $font-weight-bold !default;\n$action-panel-header-line-height     : $line-height-sm !default;\n$action-panel-header-color           : $global-text-color-dark !default;\n$action-panel-header-icon-color      : $global-text-color-lighter !default;\n$action-panel-header-icon-hover-color: lighten($global-text-color-lighter, 10%) !default;\n$action-panel-title-font-size        : $font-size-4 !default;\n$action-panel-title-font-weight      : $font-weight-bold !default;\n$action-panel-subtitle-line-height   : $font-size-2 !default;\n$action-panel-subtitle-font-size     : $font-size-2 !default;\n$action-panel-footer-color           : $color-accent !default;\n$action-panel-footer-hover-color     : darken($color-accent, 10) !default;\n$action-panel-footer-font-size       : $font-size-2 !default;\n$action-panel-footer-line-weight     : $font-size-4 !default;\n$action-panel-zindex                 : $z-action-panel !default;\n$action-panel-width                  : 320px !default;\n$action-panel-bg                     : $color-gray-0 !default;\n$action-panel-transition             : 0.3s ease !default;\n$action-panel-shadow                 : $shadow-lg !default;\n\n\n// Set the default sizes for action panels - .c-action-panel-lg.\n// This map is looped - adding key/value pairs will generate more classes\n// this maps to name, width\n$action-panel-sizes: () !default;\n$action-panel-sizes: map-merge(\n  (\n    lg: 400px\n  ),\n  $action-panel-sizes\n);\n\n\n// --------------------------------------------\n// Avatars ------------------------------------\n// --------------------------------------------\n$enable-extended-avatar-colors: true !default;\n$avatar-font-family           : $font-family !default;\n$avatar-default-size          : $global-size-md !default;\n$avatar-img-border            : none !default;\n$avatar-line-height           : normal !default;\n$avatar-group-spacing         : $space-xs !default;\n$avatar-border-radius         : $radius-pill !default;\n$avatar-font-size             : $font-size-2 !default;\n$avatar-font-weight           : $font-weight-semibold !default;\n$avatar-group-transition      : 0.35s cubic-bezier(0, 1.22, .66, 1.39) !default;\n\n\n// Set the default sizes for avatars - .c-avatar-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n// this maps to name, size, font-size\n$avatar-sizes: () !default;\n$avatar-sizes: map-merge(\n  (\n    \"xs\": (\n      \"size\": $global-size-xs,\n      \"font-size\": $font-size-0\n    ),\n    \"sm\": (\n      \"size\": $global-size-sm,\n      \"font-size\": $font-size-1\n    ),\n    \"lg\": (\n      \"size\": $global-size-lg,\n      \"font-size\": $font-size-3\n    ),\n    \"xl\": (\n      \"size\": $global-size-lg * 2,\n      \"font-size\": $font-size-2 * 2\n    ),\n  ),\n  $avatar-sizes\n);\n\n\n// --------------------------------------------\n// Badge --------------------------------------\n// --------------------------------------------\n$enable-extended-badge-colors: true !default;\n$badge-font                  : $font-family !default;\n$badge-size                  : $global-size-sm !default;\n$badge-lg-size               : $global-size-md !default;\n$badge-sm-size               : $global-size-xs !default;\n$badge-padding               : $space-0 $space-sm !default;\n$badge-border-radius         : $radius-round !default;\n$badge-font-weight           : $font-weight-semibold !default;\n$badge-line-height           : 2 !default;\n$badge-font-size             : $font-size-1 !default;\n$badge-lg-font-size          : $font-size-3 - 1 !default;\n$badge-sm-font-size          : $font-size-0 !default;\n$badge-group-spacing         : $space-sm !default;\n$badge-close-bg-hover        : rgba(0, 0, 0, 0.3) !default;\n\n\n// --------------------------------------------\n// Buttons ------------------------------------\n// --------------------------------------------\n$enable-btn-gradients       : false !default;\n$enable-btn-border          : true !default;\n$enable-btn-white-label     : false !default;\n$enable-btn-circle          : true !default;\n$enable-btn-outline         : true !default;\n$enable-btn-pill            : false !default;\n$enable-btn-square          : false !default;\n$btn-font                   : $font-family !default;\n$btn-radius                 : $global-radius !default;\n$btn-disabled-bg            : $global-bg-disabled !default;\n$btn-default-c              : $global-text-color !default;\n$btn-box-width              : $global-size-md !default;\n$btn-link-bd                : $global-border-size $global-border-color !default;\n$btn-disabled-bd            : $global-border-size $global-border-color-light !default;\n$btn-font-weight            : $font-weight-bold !default;\n$btn-bd                     : $global-border-size transparent !default;\n$btn-disabled-c             : $global-text-color-light !default;\n$btn-link-hover-bg          : $color-gray-0 !default;\n$btn-shadow                 : false !default;\n$btn-shadow-focus           : 0 0 2px 1px $color-primary-7 !default;\n$btn-active-shadow          : none !default;\n$btn-primary-bg             : $color-primary !default;\n$btn-primary-bg-hover       : $color-primary-9 !default;\n$btn-primary-bg-active      : $color-primary-9 !default;\n$btn-primary-border         : $color-primary-9 !default;\n$btn-success-bg             : $color-success !default;\n$btn-success-bg-hover       : $color-success-7 !default;\n$btn-success-bg-active      : $color-success-9 !default;\n$btn-success-border         : $color-success-9 !default;\n$btn-danger-bg              : $color-danger !default;\n$btn-danger-bg-hover        : $color-danger-7 !default;\n$btn-danger-bg-active       : $color-danger-9 !default;\n$btn-danger-border          : $color-danger-9 !default;\n$btn-secondary-bg           : $color-gray-1 !default;\n$btn-secondary-bg-hover     : $color-gray-2 !default;\n$btn-secondary-bg-active    : $color-gray-2 !default;\n$btn-secondary-border       : $color-gray-4 !default;\n$btn-secondary-color        : $color-gray-8 !default;\n\n// Set the default sizes for button boxes - .c-btn-box-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$btn-box-sizes: () !default;\n$btn-box-sizes: map-merge(\n  (\n    xs: $global-size-xs,\n    sm: $global-size-sm,\n    lg: $global-size-lg,\n  ),\n  $btn-box-sizes\n);\n\n// Set the default styles for buttons - .c-btn-{{color}}.\n// This map is looped - adding key/value pairs will generate more classes\n$button-colors: () !default;\n$button-colors: map-merge(\n  (\n    primary: (\n      bg: $btn-primary-bg,\n      bg-hover: $btn-primary-bg-hover,\n      bg-active: $btn-primary-bg-active,\n      border: $btn-primary-border,\n    ),\n    success: (\n      bg: $btn-success-bg,\n      bg-hover: $btn-success-bg-hover,\n      bg-active: $btn-success-bg-active,\n      border: $btn-success-border,\n    ),\n    danger: (\n      bg: $btn-danger-bg,\n      bg-hover: $btn-danger-bg-hover,\n      bg-active: $btn-danger-bg-active,\n      border: $btn-danger-border,\n    ),\n    secondary: (\n      bg: $btn-secondary-bg,\n      bg-hover: $btn-secondary-bg-hover,\n      bg-active: $btn-secondary-bg-active,\n      border: $btn-secondary-border,\n      color: $btn-secondary-color\n    )\n  ),\n  $button-colors\n);\n\n// Set the default sizes for buttons - .c-btn-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$button-sizes: () !default;\n$button-sizes:  map-merge(\n  (\n    default: (\n      font-size: $font-size-2,\n      padding: $space-0 $space-md,\n      height: $global-size-md\n    ),\n    xs: (\n      font-size: $font-size-0,\n      padding: $space-0 $space-xs,\n      height: $global-size-xs\n    ),\n    sm: (\n      font-size: $font-size-1,\n      padding: $space-0 $space-sm,\n      height: $global-size-sm\n    ),\n    lg: (\n      font-size: $font-size-3,\n      padding: $space-0 $space-xl,\n      height: $global-size-lg\n    )\n  ),\n  $button-sizes\n);\n\n\n// --------------------------------------------\n// BREADCRUMBS --------------------------------\n// --------------------------------------------\n$breadcrumb-font-family         : $font-family !default;\n$breadcrumb-margin              : $space-xl !default;\n$breadcrumb-color               : $color-primary !default;\n$breadcrumb-color-active        : $global-text-color-dark !default;\n$breadcrumb-font-size           : $font-size-2 !default;\n$breadcrumb-font-weight         : $font-weight-bold !default;\n$breadcrumb-divider-color       : $color-gray-3 !default;\n$breadcrumb-divider-size        : 8px !default;\n$breadcrumb-divider-border-width: 2px !default;\n\n\n// --------------------------------------------\n// CARDS --------------------------------------\n// --------------------------------------------\n$card-bg                     : $color-white !default;\n$card-text-color             : $global-text-color !default;\n$card-border                 : $global-border-size $global-border-color-light !default;\n$card-border-hover           : $global-border-size $global-border-color !default;\n$card-font-family            : $font-family !default;\n$card-border-radius          : $global-radius !default;\n$card-min-width              : 0 !default;\n$card-padding-v              : $space-md - $space-xs !default;\n$card-padding-h              : $space-md !default;\n$card-shadow                 : $shadow-xs !default;\n$card-shadow-hover           : $shadow-md !default;\n$card-header-font-size       : $font-size-3 !default;\n$card-header-font-weight     : $font-weight-bold !default;\n$card-header-line-height     : $line-height-sm !default;\n$card-header-color           : $global-text-color-dark !default;\n$card-header-icon-color      : $global-text-color-lighter !default;\n$card-header-icon-hover-color: $color-primary !default;\n$card-body-font-size         : $font-size-2 !default;\n$card-title-font-size        : $font-size-4 !default;\n$card-title-font-weight      : $font-weight-bold !default;\n$card-subtitle-line-height   : $font-size-2 !default;\n$card-subtitle-font-size     : $font-size-2 !default;\n$card-footer-color           : $color-accent !default;\n$card-footer-hover-color     : darken($color-accent, 10) !default;\n$card-footer-font-size       : $font-size-2 !default;\n$card-footer-line-weight     : $font-size-4 !default;\n\n\n// --------------------------------------------\n// CHECKBOX & RADIOS --------------------------\n// --------------------------------------------\n$checkbox-radius                : $global-radius !default;\n$checkbox-bd                    : $global-border-size #999999 !default;\n$checkbox-bd-hover-color        : $color-gray-9 !default;\n$checkbox-bg-empty              : $color-white !default;\n$checkbox-default-size          : $global-size-xs !default;\n$checkbox-bg-disabled           : #eeeeee !default;\n$checkbox-bd-disabled           : #cccccc !default;\n$checkbox-label-disabled-color  : $global-text-color-lighter !default;\n$checkbox-label-font-size       : $font-size-2 !default;\n$checkbox-label-font-weight     : $font-weight-normal !default;\n$checkbox-checked-color         : $color-accent !default;\n$checkbox-checked-border-color  : #999999 !default;\n$checkbox-bg-checked            : $color-white !default;\n$checkbox-bg-checked-disabled   : $global-text-color-light !default;\n$checkbox-transition            : background 0.2s !default;\n$checkbox-checked-color-disabled: $color-gray-2 !default;\n\n// Set the checkbox sizes for checkboxes - .c-checkbox-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$checkbox-sizes: () !default;\n$checkbox-sizes: map-merge(\n  (\n    lg: $global-size-sm,\n    xl: $global-size-md\n  ),\n  $checkbox-sizes\n);\n\n\n// --------------------------------------------\n// DROPDOWN -----------------------------------\n// --------------------------------------------\n$dropdown-radius             : $global-radius !default;\n$dropdown-font               : $font-family !default;\n$dropdown-bg                 : $color-white !default;\n$dropdown-border             : $global-border-size $global-border-color-light !default;\n$dropdown-min-width          : 200px !default;\n$dropdown-font-size          : $font-size-2 !default;\n$dropdown-font-weight        : $font-weight-normal !default;\n$dropdown-bg-hover           : $color-gray-1 !default;\n$dropdown-shadow             : $shadow-md !default;\n$dropdown-z-index            : $z-dropdown !default;\n$dropdown-color              : $global-text-color-dark !default;\n$dropdown-color-hover        : $global-text-color-dark !default;\n$dropdown-icon-color         : $color-gray-4 !default;\n$dropdown-icon-font-size     : $font-size-3 !default;\n$dropdown-icon-padding       : $space-sm !default;\n$dropdown-list-padding       : $space-xs !default;\n$dropdown-list-margin        : 0 !default;\n$dropdown-item-padding       : $space-sm ($space-xs + $space-sm) !default;\n$dropdown-grid-padding       : $space-sm !default;\n$dropdown-selected-color     : $color-gray-9 !default;\n$dropdown-selected-bg        : $color-gray-0 !default;\n$link-colors:\n  '[class*=\"primary\"]',\n  '[class*=\"accent\"]',\n  '[class*=\"success\"]',\n  '[class*=\"warning\"]',\n  '[class*=\"danger\"]',\n  '.c-text-muted' !default;\n\n\n// --------------------------------------------\n// FORMS --------------------------------------\n// --------------------------------------------\n$control-font-family          : $font-family !default;\n$control-background           : $color-white !default;\n$control-height               : $global-size-md !default;\n$control-border               : $global-border-size $global-border-color-dark !default;\n$control-border-radius        : $global-radius !default;\n$control-icon-padding         : $space-xl !default;\n$control-disabled-background  : $global-bg-disabled !default;\n$control-font-size            : $font-size-2 !default;\n$control-color                : $global-text-color-dark !default;\n$control-font-weight          : $font-weight-normal !default;\n$control-line-height          : normal !default; //line height optimized for IE compatibilit\n$control-placeholder-c        : $global-text-color-lighter !default;\n$control-placeholder-hover-c  : $global-text-color-lighter !default;\n$control-padding              : $space-sm !default;\n$control-shadow               : inset 0 2px 2px 0 rgba(33, 37, 41, .1) !default;\n$control-focused-shadow       : inset 0 1px 2px 0 rgba(33, 37, 41, 0.08) !default;\n$control-shadow-disabled      : none !default;\n$control-transition           : border-color 0.1s ease-in !default;\n$control-hover                : $color-primary !default;\n$control-hover-border         : $color-gray-6 !default;\n$control-active               : $color-primary !default;\n$control-active-border        : $color-primary !default;\n$control-icon-color           : $global-text-color-dark !default;\n$control-disabled-border      : transparent !default;\n$control-hint-color           : $global-text-color-light !default;\n$control-hint-font-size       : 85% !default;\n$control-hint-transition      : all 0.2s ease !default;\n$control-addon-background     : $color-gray-0 !default;\n$control-element-padding      : $space-sm * 2 0 !default;\n$control-element-label-padding: 0 0 $space-sm 0 !default;\n$select-padding-r             : $space-lg !default;\n$select-bg-img                : url(\"data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E\") !default;\n$select-bg-img-disabled       : url(\"data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23868e95'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E\") !default;\n$select-bg-pos                : no-repeat right 8px center !default;\n$select-box-shadow-focus      : 0 0 0 1px $color-primary-4 !default;\n\n// Set the default sizes for forms - .c-input-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$control-sizes: () !default;\n$control-sizes: map-merge(\n  (\n    \"sm\": (\n      \"height\": $global-size-sm,\n      \"font-size\": $font-size-1,\n      \"padding\": $space-0 $space-sm\n    ),\n    \"lg\": (\n      \"height\": $global-size-lg,\n      \"font-size\": $font-size-4,\n      \"padding\": $space-0 $space-sm\n    ),\n  ),\n  $control-sizes\n);\n\n\n// Form Input Colors (NG specific) DISABLED CURRENTLY\n$enable-NGform-colors: true !default;\n$control-ng-validation:\n  (\"ng-valid\", \"success\")\n  (\"ng-invalid\", \"error\") !default;\n\n\n// --------------------------------------------\n// FOOTER -------------------------------------\n// --------------------------------------------\n$footer-font-family                  : $font-family !default;\n$footer-height                       : $global-footer-height !default;\n$footer-border-top                   : $global-border-size $global-border-color-light !default;\n$footer-font-size                    : $font-size-2 !default;\n$footer-color                        : $global-text-color-dark !default;\n$footer-color-link                   : $color-accent !default;\n$footer-bg-color                     : $color-gray-1 !default;\n$footer-padding                      : $space-0 ($space-md + $space-sm) !default;\n$footer-links-margin                 : $space-0 $space-sm !default;\n$footer-links-divider                : '•' !default;\n$footer-z-index                      : $z-footer !default;\n$footer-bg-inverse                   : #4c4b4c !default;\n$footer-color-inverse                : $color-white !default;\n$footer-height-inverse               : 24px !default;\n$footer-links-inverse-divider        : '|' !default;\n$footer-links-divider-color          : $color-gray-6 !default;\n$footer-links-inverse-divider-color  : $color-gray-1 !default;\n\n// --------------------------------------------\n// Grid ---------------------------------------\n// --------------------------------------------\n$gutter: 12px !default;\n$grid-columns: 12 !default;\n$container-fixed-width: 1200px !default;\n$grid-gutter-width: 24px !default;\n\n// Define the maximum width of `.c-container-fixed` at breakpoints.\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px\n) !default;\n\n$breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1440px\n) !default;\n\n\n// --------------------------------------------\n// HEADER -------------------------------------\n// --------------------------------------------\n$header-bg                       : $color-white !default;\n$header-height                   : $global-header-height !default;\n$header-inverse-text-color-active: $color-white !default;\n$header-inverse-icon-color-active: $color-accent !default;\n$header-bg-hover                 : rgba(213, 213, 213, 0.35) !default;\n$header-borders                  : #cccccc !default;\n// $header-borders                  : rgba(0, 0, 0, 0.06) !default;\n$header-z-index                  : $z-header !default;\n$header-bottom-border            : $header-borders !default;\n$header-item-padding             : $space-0 $space-md !default;\n$header-inverse-bg               : $color-black !default;\n$header-inverse-bg-hover         : rgba(255, 255, 255, 0.23) !default;\n$header-text-color               : #32363b !default;\n$header-inverse-text-color       : rgba(255, 255, 255, .9) !default;\n$header-inverse-borders          : rgba(252, 252, 252, 0.35) !default;\n$header-inverse-pill-borders     : rgba(255, 255, 255, 0.09) !default;\n$header-inverse-pill-bg-hover    : rgb(43, 43, 43) !default;\n\n\n// --------------------------------------------\n// Loaders ------------------------------------\n// --------------------------------------------\n$skeleton-bar-height         : calc($global-size-xs / 2) !default;\n$skeleton-bar                : linear-gradient(140deg, rgba(white, 0), rgba(white, .6) 50%, rgba(white, 0) 100%) !default;\n$skeleton-bar-animation      : skeletonIteration 2s infinite !default;\n$skeleton-bg-color           : $color-gray-3 !default;\n$loader-size                 : $global-size-md !default;\n$loader-color                : $color-accent !default;\n$loader-bg-color             : $color-gray-3 !default;\n$loader-full-page-size       : 48px !default;\n$loader-border-size          : 4px !default;\n$loader-full-page-border-size: 6px !default;\n$loader-animation-duration   : .71s !default;\n\n// --------------------------------------------\n// Media Object -------------------------------\n// --------------------------------------------\n$media-bg                : $color-white !default;\n$media-color             : $global-text-color !default;\n$media-border            : $global-border-size $global-border-color-light !default;\n$media-border-radius     : $global-radius !default;\n$media-padding           : $space-sm $space-0 !default;\n$media-body-padding      : $space-md !default;\n$media-margin            : $space-0 $space-sm !default;\n$media-stripe-bg         : $color-gray-0 !default;\n$media-hover-bg          : $color-gray-0 !default;\n$media-header-bg         : $color-gray-0 !default;\n$media-action-color      : $global-text-color-light !default;\n$media-action-font-size  : $font-size-2 !default;\n$media-action-line-height: $line-height-xs !default;\n$media-min-height        : $global-size-xl !default;\n\n\n// --------------------------------------------\n// MODALS -------------------------------------\n// --------------------------------------------\n$modal-border-radius          : $global-radius !default;\n$modal-border                 : $global-border-size $global-border-color-light !default;\n$modal-close-size             : $global-size-md !default;\n$modal-body-color             : $global-text-color !default;\n$modal-bg-color               : $color-white !default;\n$modal-backdrop-bg-color      : $global-backdrop-dark !default;\n$modal-z-index                : $z-modal !default;\n$modal-shadow                 : $shadow-lg !default;\n$modal-close-color            : $global-text-color-light !default;\n$modal-body-font-size         : $font-size-2 !default;\n$modal-title-font-size        : $font-size-4 !default;\n$modal-title-color            : $global-text-color-dark !default;\n$modal-title-font-weight      : $font-weight-bold !default;\n$modal-title-line-height      : $line-height-sm !default;\n$modal-padding                : $space-lg !default;\n$modal-body-padding           : $space-lg !default;\n$modal-header-padding         : calc($space-lg / 3) calc($space-lg / 2) calc($space-lg / 3) $space-lg !default;\n$modal-footer-padding         : $space-lg !default;\n$modal-dialog-padding         : 40px !default;\n$modal-dialog-footer-padding  : calc($space-lg / 2) 0 0 !default;\n$modal-width                  : 640px !default;\n\n// Set the default sizes for modal - .c-modal-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$modal-widths: () !default;\n$modal-widths: map-merge(\n  (\n    sm: 480px,\n    lg: 800px,\n    responsive: 100%\n  ),\n  $modal-widths\n);\n\n\n// --------------------------------------------\n// NAV ---------------------------------------\n// --------------------------------------------\n$nav-height                : $global-size-md !default;\n$nav-color                 : #32363b !default;\n$nav-color-disabled        : $global-text-color-lighter !default;\n$nav-pill-radius           : $global-radius !default;\n$nav-pill-color            : #32363b !default;\n$nav-pill-color-disabled   : #32363b !default;\n$nav-font-size             : $font-size-2 !default;\n$nav-color-hover           : $global-text-color-dark !default;\n$nav-color-active          : $global-text-color-dark !default;\n$nav-disabled-opacity      : .7 !default;\n$nav-font-weight           : $font-weight-normal !default;\n$nav-pill-font-weight      : $font-weight-bold !default;\n$nav-pill-color-hover      : $global-text-color-dark !default;\n$nav-pill-color-active     : $global-text-color-dark !default;\n$nav-pill-bg-hover         : $color-gray-1 !default;\n$nav-pill-bg-active        : $color-gray-1 !default;\n$nav-pill-bg-disabled      : $color-gray-0 !default;\n$nav-pill-icon-opacity     : .25 !default;\n$nav-pill-icon-color-active: $color-accent !default;\n$nav-spacing               : $space-sm !default;\n\n\n// Set the default sizes for nav - .c-nav-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$nav-sizes: () !default;\n$nav-sizes: map-merge(\n  (\n    \"sm\": (\n      \"font-size\": $font-size-1,\n      \"height\": $global-size-sm,\n      \"padding\": $space-0 $space-sm\n    ),\n    \"lg\": (\n      \"font-size\": $font-size-3,\n      \"height\": $global-size-lg,\n      \"padding\": $space-0 ($space-sm * 3)\n    ),\n  ),\n  $nav-sizes\n);\n\n\n// --------------------------------------------\n// NOTIFICATIONS ------------------------------\n// --------------------------------------------\n$notification-margin      : $space-sm !default;\n$notification-shadow      : $shadow-xs !default;\n$notification-shadow-hover: $shadow-sm !default;\n$notification-read-bg     : $color-gray-0 !default;\n$notification-read-border : $global-border-size $global-border-color-light !default;\n\n\n// --------------------------------------------\n// PROGRESS -----------------------------------\n// --------------------------------------------\n$progress-height              : $global-size-sm !default;\n$progress-height-sm           : $global-size-xs !default;\n$progress-height-lg           : $global-size-lg !default;\n$progress-font-size           : $font-size-2 !default;\n$progress-font-size-sm        : $font-size-1 !default;\n$progress-font-size-lg        : $font-size-5 !default;\n$progress-background          : $color-gray-1 !default;\n$progress-margin-bottom       : $global-size-md !default;\n$progress-radius              : $global-radius !default;\n$progress-btn-color           : $color-white !default;\n$progress-btn-animate-size    : $global-size-lg !default;\n$progress-opaque-color        : rgba(0, 0, 0, 0.2) !default;\n\n// Set the checkbox sizes for checkboxes - .c-checkbox-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$progress-colors: () !default;\n$progress-colors: map-merge(\n  (\n    primary: $color-primary,\n    success: $color-success\n  ),\n  $progress-colors\n);\n\n\n// Set the defaults for .c-header-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$progress-sizes: () !default;\n$progress-sizes: map-merge(\n  (\n    \"sm\": (\n      \"font-size\": $progress-font-size-sm,\n      \"height\": $progress-height-sm\n    ),\n    \"lg\": (\n      \"font-size\": $progress-font-size-lg,\n      \"height\": $progress-height-lg\n    ),\n  ),\n  $progress-sizes\n);\n\n\n// --------------------------------------------\n// Sidebar ------------------------------------\n// --------------------------------------------\n$sidebar-bg                         : $color-white !default;\n$sidebar-bg-hover                   : $color-gray-2 !default;\n$sidebar-color                      : $color-gray-8 !default;\n$sidebar-border                     : $global-border-size $global-border-color-light !default;\n$sidebar-width                      : $global-sidebar-width !default;\n$sidebar-width-folded               : $global-sidebar-width-folded !default;\n$sidebar-font-size                  : $font-size-3 !default;\n$sidebar-z-index                    : $z-sidenav !default;\n$sidebar-link-padding               : $space-xs $space-md !default;\n$sidebar-link-margin                : $space-xs !default;\n$sidebar-link-line-height           : $space-xl !default;\n$sidebar-icon-margin                : $space-sm $space-md $space-sm 0 !default;\n$sidebar-icon-font-size             : $font-size-4 !default;\n$sidebar-category-padding           : $space-sm $space-md !default;\n$sidebar-submenu-link-padding-left  : 48px !default;\n$sidebar-submenu-level3-padding-left: 64px !default;\n$sidebar-submenu-level4-padding-left: 80px !default;\n\n$sidebar-submenu-bg                 : $sidebar-bg !default;\n$sidebar-color-active               : $color-accent !default;\n$sidebar-link-color                 : $sidebar-color !default;\n$sidebar-link-hover-color           : $sidebar-color !default;\n$sidebar-link-active-color          : $sidebar-color !default;\n$sidebar-link-open-color            : $sidebar-color !default;\n$sidebar-divider-color              : $color-gray-1 !default;\n$sidebar-link-hover-bg              : $sidebar-bg-hover !default;\n$sidebar-link-active-bg             : $sidebar-bg-hover !default;\n$sidebar-link-open-bg               : $sidebar-bg-hover !default;\n$sidebar-icon-color                 : $global-text-color-lighter !default;\n$sidebar-icon-color-active          : $sidebar-color-active !default;\n$sidebar-category-color             : $global-text-color-light !default;\n$sidebar-collapse-bg                : $color-gray-0 !default;\n$sidebar-collapse-bg-hover          : $color-gray-1 !default;\n$sidebar-collapse-bd                : $color-gray-2 !default;\n$sidebar-submenu-link-active-color  : $sidebar-color-active !default;\n\n\n// --------------------------------------------\n// SWITCHES -----------------------------------\n// --------------------------------------------\n$switch-height             : $global-size-xs !default;\n$switch-radius             : $radius-round !default;\n$switch-border             : $global-border-size $global-border-color !default;\n$switch-label-off          : $global-text-color !default;\n$switch-label-on           : $color-white !default;\n$switch-handle             : $color-white !default;\n$switch-disabled           : $global-bg-disabled !default;\n$switch-font-size          : $font-size-2 !default;\n$switch-off-bg             : $color-gray-0 !default;\n$switch-on-bg              : $color-primary !default;\n$switch-shadow             : inset 0 1px 1px 0 rgba(0, 0, 0, .1) !default;\n$switch-handle-disabled    : $color-gray-0 !default;\n$switch-disabled-checked-bg: $global-text-color-light !default;\n\n\n// Set the default sizes for switches - .c-switch-lg.\n// This map is looped - adding key/value pairs will generate more classes\n$switch-sizes: () !default;\n$switch-sizes: map-merge(\n  (\n    lg: $global-size-md\n  ),\n  $switch-sizes\n);\n\n\n// --------------------------------------------\n// TOAST --------------------------------------\n// --------------------------------------------\n$toast-margin             : 0 0 $space-md 0 !default;\n$toast-border             : $global-border-size $global-border-color-light !default;\n$toast-shadow             : $shadow-sm !default;\n$toast-background         : $color-white !default;\n$toast-color              : $global-text-color-dark !default;\n$toast-font-size          : $font-size-2 !default;\n$toast-radius             : $global-radius !default;\n$toast-font               : $font-family !default;\n$toast-font-weight        : $font-weight-bold !default;\n$toast-padding            : $space-md $space-md $space-md ($space-md + 4px) !default;\n$toast-icon-color         : $color-primary !default;\n$toast-icon-padding-right : $space-md !default;\n$toast-icon-font-size     : $font-size-2 + 2 !default;\n$toast-left-border-bg     : $color-primary !default;\n$toast-left-border-width  : 4px !default;\n$toast-left-border-color  : darken($color-primary, 20) !default;\n$toast-close-size         : 12px !default;\n$toast-close-color        : $color-gray-6 !default;\n\n\n// --------------------------------------------\n// TOOLTIPS -----------------------------------\n// --------------------------------------------\n$tooltip-bd-radius       : $global-radius !default;\n$tooltip-default-color   : $color-white !default;\n$tooltip-invert-bg       : $color-white !default;\n$tooltip-max-width       : 300px !default;\n$tooltip-padding         : $space-xs $space-sm !default;\n$tooltip-font-size       : $font-size-2 !default;\n$tooltip-line-height     : $line-height-xs !default;\n$tooltip-shadow          : $shadow-lg !default;\n$tooltip-z-index         : $z-tooltip !default;\n$tooltip-default-bg      : $color-gray-9 !default;\n$tooltip-invert-color    : $color-gray-9 !default;\n$tooltip-transition-style: cubic-bezier(0.73, 0.01, 0, 1) !default;\n$tooltip-border-width    : 4px !default;\n$tooltip-arrow-position  : 6px !default;\n\n\n// --------------------------------------------\n// TABS ---------------------------------------\n// --------------------------------------------\n$tabs-color             : $global-text-color !default;\n$tabs-bordered-radius   : $global-radius !default;\n$tabs-height            : $global-size-md !default;\n$tabs-font-family       : $font-family !default;\n$tabs-border            : $global-border-size $global-border-color-light !default;\n$tabs-bordered-bg-hover : $color-white !default;\n$tabs-bordered-bg-active: $color-white !default;\n$tabs-color-hover       : $color-black !default;\n$tabs-border-hover      : $color-accent !default;\n$tabs-color-active      : $color-black !default;\n$tabs-border-active     : $color-accent !default;\n$tabs-color-disabled    : $global-text-color-light !default;\n$tabs-font-size         : $font-size-2 !default;\n$tabs-font-weight       : $font-weight-bold !default;\n$tabs-padding           : $space-sm $space-md !default;\n$tabs-bordered-bg       : $color-gray-0 !default;\n$tabs-hover-transition  : border-color 0.2s ease 0s !default;\n$tabs-box-shadow        : inset 0 -1px 0 0 $global-border-color-light !default;\n$tabs-border-bottom     : 2px !default;\n\n// Set the default sizes for tabs - .c-tab-{{size}}.\n// This map is looped - adding key/value pairs will generate more classes\n$tabs-sizes: () !default;\n$tabs-sizes: map-merge(\n  (\n    \"sm\": (\n      \"height\": $global-size-sm,\n      \"font-size\": $font-size-1,\n      \"line-height\": $line-height-xs,\n      \"padding\": $space-xs $space-sm\n    ),\n    \"lg\": (\n      \"height\": $global-size-lg,\n      \"font-size\": $font-size-3,\n      \"line-height\": $line-height-sm,\n      \"padding\": $space-sm $space-md\n    ),\n  ),\n  $tabs-sizes\n);\n\n\n// --------------------------------------------\n// TABLES -------------------------------------\n// --------------------------------------------\n$table-background           : $color-white !default;\n$table-font-family          : $font-family !default;\n$table-font-size            : $font-size-2 !default;\n$table-font-size-lg         : $font-size-3 !default;\n$table-line-height          : $line-height-xs !default;\n$table-border               : 0 !default;\n$table-border-color         : $global-border-color-light !default;\n$table-padding              : ($space-sm - 1) ($space-sm + 2) $space-sm !default;\n$table-row-hover            : $color-gray-1 !default;\n$table-row-stripe-hover     : $color-gray-1 !default;\n$table-stripe               : 'even' !default;\n$table-stripe-bg            : $color-gray-0 !default;\n$table-head-bg              : $color-gray-0 !default;\n$table-head-cell-hover      : $color-gray-2 !default;\n$table-head-color           : $global-text-color-dark !default;\n$table-head-font-weight     : $font-weight-bold !default;\n$table-head-border-color    : $color-gray-3 !default;\n$table-head-border-width    : 1px 0 !default;\n$table-head-border-vertical : 1px solid $color-gray-3 !default;\n$table-foot-bg              : $color-white !default;\n$table-foot-color           : $global-text-color-dark !default;\n$table-padding-sm           : ($space-xs - 1) $space-sm $space-xs !default;\n$table-padding-lg           : ($space-sm + $space-xs) ($space-sm + 2) ($space-sm + ($space-xs - 1)) !default;\n$table-hover-bg-img         : url('data: image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1IiBoZWlnaHQ9IjIwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxLjMyMjkxNjYgNS4yOTE2NjY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0yOTEuNzEpIiBmaWxsPSIjYmJjMWM5Ij4gIDxyZWN0IHk9IjI5Ni40NyIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5MS43MSIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHg9Ii43OTM3NSIgeT0iMjkxLjcxIiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeD0iLjc5Mzc1IiB5PSIyOTYuNDciIHdpZHRoPSIuNTI5MTciIGhlaWdodD0iLjUyOTE3Ii8+ICA8cmVjdCB4PSIuNzkzNzUiIHk9IjI5NS42OCIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHg9Ii43OTM3NSIgeT0iMjk0Ljg4IiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeD0iLjc5Mzc1IiB5PSIyOTQuMDkiIHdpZHRoPSIuNTI5MTciIGhlaWdodD0iLjUyOTE3Ii8+ICA8cmVjdCB4PSIuNzkzNzUiIHk9IjI5My4zIiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeD0iLjc5Mzc1IiB5PSIyOTIuNSIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5NS42OCIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5NC44OCIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5NC4wOSIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5My4zIiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeT0iMjkyLjUiIHdpZHRoPSIuNTI5MTciIGhlaWdodD0iLjUyOTE3Ii8+IDwvZz48L3N2Zz4 = ') !default;\n$table-hover-bg-img-body-pos: 2px center !default;\n\n// Set the default styles for table states.\n// This map is looped - adding key/value pairs will generate more classes\n$table-states: () !default;\n$table-states: map-merge(\n  (\n    \"selected\": $color-primary-0,\n    \"starred\": $color-warning-0,\n    \"success\": $color-success-0,\n    \"warning\": $color-warning-0,\n    \"danger\": $color-danger-0\n  ),\n  $table-states\n);\n\n\n// --------------------------------------------\n// PAGINATION ---------------------------------\n// --------------------------------------------\n$pagination-item-size            : $global-size-md !default;\n$pagination-item-border-radius   : $global-radius !default;\n$pagination-item-spacing         : 2px !default;\n$pagination-font-size            : $font-size-2 !default;\n$pagination-icon-size            : $font-size-0 !default;\n$pagination-item-color           : $global-text-color-dark !default;\n$pagination-item-current-bg      : $color-gray-1 !default;\n$pagination-item-current-color   : $color-primary !default;\n$pagination-next-color           : $color-primary !default;\n$pagination-previous-color       : $color-primary !default;\n$pagination-bg-disabled          : $color-gray-1 !default;\n$pagination-color-disabled       : $global-text-color-light !default;\n","// Ascending evaluate grid breakpoints.\n@mixin _assert-ascending($map, $map-name) {\n  $prev-key: null;\n  $prev-num: null;\n\n  @each $key, $num in $map {\n    @if $prev-num == null {\n      // Do nothing\n    } @else if not comparable($prev-num, $num) {\n      @warn \"Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n    } @else if $prev-num >= $num {\n      @warn \"Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n    }\n    $prev-key: $key;\n    $prev-num: $num;\n  }\n}\n\n@include _assert-ascending($breakpoints, \"$breakpoints\");\n\n// ensures the min-width of the lowest breakpoint starts at 0.\n@mixin _assert-starts-at-zero($map) {\n  $values: map-values($map);\n  $first-value: nth($values, 1);\n\n  @if $first-value != 0 {\n    @warn \"First breakpoint in `$breakpoints` must start at 0, but starts at #{$first-value}.\";\n  }\n}\n\n@include _assert-starts-at-zero($breakpoints);\n\n@function breakpoint-next($name, $grid-breakpoints: $breakpoints, $breakpoint-names: map-keys($grid-breakpoints)) {\n  $n: index($breakpoint-names, $name);\n\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n@function breakpoint-min($name, $grid-breakpoints: $breakpoints) {\n  $min: map-get($grid-breakpoints, $name);\n\n  @return if($min != 0, $min, null);\n}\n\n@function breakpoint-max($name, $grid-breakpoints: $breakpoints) {\n  $next: breakpoint-next($name, $grid-breakpoints);\n\n  @return if($next, breakpoint-min($next, $grid-breakpoints) - 1px, null);\n}\n\n@function breakpoint-infix($name, $grid-breakpoints: $breakpoints) {\n  @return if(breakpoint-min($name, $grid-breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media breakpoint up is min-width up\n@mixin media-breakpoint-up($name, $grid-breakpoints: $breakpoints) {\n  $min: breakpoint-min($name, $grid-breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media breakpoint down is max-width down\n@mixin media-breakpoint-down($name, $grid-breakpoints: $breakpoints) {\n  $max: breakpoint-max($name, $grid-breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media breakpoint between sets min and max width and targets in between\n@mixin media-breakpoint-between($lower, $upper, $grid-breakpoints: $breakpoints) {\n  $min: breakpoint-min($lower, $grid-breakpoints);\n  $max: breakpoint-max($upper, $grid-breakpoints);\n\n  @media (min-width: $min) and (max-width: $max) {\n    @content;\n  }\n}\n\n// Media breakpoint only sets min and max width and targets in between\n@mixin media-breakpoint-only($name, $grid-breakpoints: $breakpoints) {\n  $min: breakpoint-min($name, $grid-breakpoints);\n  $max: breakpoint-max($name, $grid-breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($name);\n  } @else if $min == null {\n    @include media-breakpoint-down($name);\n  }\n}\n","$color-black: #000000 !default;\n$color-white: #ffffff !default;\n\n$color-accent-0: #ffedf1 !default;\n$color-accent-1: #ffe0e7 !default;\n$color-accent-2: #ffccd6 !default;\n$color-accent-3: #ffa3b5 !default;\n$color-accent-4: #ff7a94 !default;\n$color-accent-5: #ff2953 !default;\n$color-accent-6: #ff0032 !default;\n$color-accent-7: #d6002a !default;\n$color-accent-8: #9e001f !default;\n$color-accent-9: #660014 !default;\n\n$color-success-0: #ebfbee !default;\n$color-success-1: #d3f9d8 !default;\n$color-success-2: #b2f2bb !default;\n$color-success-3: #8ce99a !default;\n$color-success-4: #69db7c !default;\n$color-success-5: #51cf66 !default;\n$color-success-6: #40c057 !default;\n$color-success-7: #37b24d !default;\n$color-success-8: #2f9e44 !default;\n$color-success-9: #2b8a3e !default;\n\n\n$color-warning-0: #fff9db !default;\n$color-warning-1: #fff3bf !default;\n$color-warning-2: #ffec99 !default;\n$color-warning-3: #ffe066 !default;\n$color-warning-4: #ffd43b !default;\n$color-warning-5: #fcc419 !default;\n$color-warning-6: #fab005 !default;\n$color-warning-7: #f59f00 !default;\n$color-warning-8: #f08c00 !default;\n$color-warning-9: #e67700 !default;\n\n\n$color-danger-0: #fff5f5 !default;\n$color-danger-1: #ffe3e3 !default;\n$color-danger-2: #ffc9c9 !default;\n$color-danger-3: #ffa8a8 !default;\n$color-danger-4: #ff8787 !default;\n$color-danger-5: #ff6b6b !default;\n$color-danger-6: #fa5252 !default;\n$color-danger-7: #f03e3e !default;\n$color-danger-8: #e03131 !default;\n$color-danger-9: #c92a2a !default;\n\n\n$color-gray-0: #f8f9fa !default;\n$color-gray-1: #f1f3f5 !default;\n$color-gray-2: #e9ecef !default;\n$color-gray-3: #dee2e6 !default;\n$color-gray-4: #ced4da !default;\n$color-gray-5: #adb5bd !default;\n$color-gray-6: #868e96 !default;\n$color-gray-7: #495057 !default;\n$color-gray-8: #343a40 !default;\n$color-gray-9: #212529 !default;\n\n$color-blue-0: #e8f7ff !default;\n$color-blue-1: #ccedff !default;\n$color-blue-2: #a3daff !default;\n$color-blue-3: #72c3fc !default;\n$color-blue-4: #4dadf7 !default;\n$color-blue-5: #329af0 !default;\n$color-blue-6: #228ae6 !default;\n$color-blue-7: #1c7cd6 !default;\n$color-blue-8: #1b6ec2 !default;\n$color-blue-9: #1862ab !default;\n\n$color-cyan-0: #e3fafc !default;\n$color-cyan-1: #c5f6fa !default;\n$color-cyan-2: #99e9f2 !default;\n$color-cyan-3: #66d9e8 !default;\n$color-cyan-4: #3bc9db !default;\n$color-cyan-5: #22b8cf !default;\n$color-cyan-6: #15aabf !default;\n$color-cyan-7: #1098ad !default;\n$color-cyan-8: #0c8599 !default;\n$color-cyan-9: #0b7285 !default;\n\n$color-grape-0: #f8f0fc !default;\n$color-grape-1: #f3d9fa !default;\n$color-grape-2: #eebefa !default;\n$color-grape-3: #e599f7 !default;\n$color-grape-4: #da77f2 !default;\n$color-grape-5: #cc5de8 !default;\n$color-grape-6: #be4bdb !default;\n$color-grape-7: #ae3ec9 !default;\n$color-grape-8: #9c36b5 !default;\n$color-grape-9: #862e9c !default;\n\n$color-indigo-0: #edf2ff !default;\n$color-indigo-1: #dbe4ff !default;\n$color-indigo-2: #bac8ff !default;\n$color-indigo-3: #91a7ff !default;\n$color-indigo-4: #748ffc !default;\n$color-indigo-5: #5c7cfa !default;\n$color-indigo-6: #4c6ef5 !default;\n$color-indigo-7: #4263eb !default;\n$color-indigo-8: #3b5bdb !default;\n$color-indigo-9: #364fc7 !default;\n\n$color-lime-0: #f4fce3 !default;\n$color-lime-1: #e9fac8 !default;\n$color-lime-2: #d8f5a2 !default;\n$color-lime-3: #c0eb75 !default;\n$color-lime-4: #a9e34b !default;\n$color-lime-5: #94d82d !default;\n$color-lime-6: #82c91e !default;\n$color-lime-7: #74b816 !default;\n$color-lime-8: #66a80f !default;\n$color-lime-9: #5c940d !default;\n\n$color-orange-0: #fff4e6 !default;\n$color-orange-1: #ffe8cc !default;\n$color-orange-2: #ffd8a8 !default;\n$color-orange-3: #ffc078 !default;\n$color-orange-4: #ffa94d !default;\n$color-orange-5: #ff922b !default;\n$color-orange-6: #fd7e14 !default;\n$color-orange-7: #f76707 !default;\n$color-orange-8: #e8590c !default;\n$color-orange-9: #d9480f !default;\n\n$color-pink-0: #fff0f6 !default;\n$color-pink-1: #ffdeeb !default;\n$color-pink-2: #fcc2d7 !default;\n$color-pink-3: #faa2c1 !default;\n$color-pink-4: #f783ac !default;\n$color-pink-5: #f06595 !default;\n$color-pink-6: #e64980 !default;\n$color-pink-7: #d6336c !default;\n$color-pink-8: #c2255c !default;\n$color-pink-9: #a61e4d !default;\n\n$color-teal-0: #e6fcf5 !default;\n$color-teal-1: #c3fae8 !default;\n$color-teal-2: #96f2d7 !default;\n$color-teal-3: #63e6be !default;\n$color-teal-4: #38d9a9 !default;\n$color-teal-5: #20c997 !default;\n$color-teal-6: #12b886 !default;\n$color-teal-7: #0ca678 !default;\n$color-teal-8: #099268 !default;\n$color-teal-9: #087f5b !default;\n\n$color-violet-0: #f3f0ff !default;\n$color-violet-1: #e5dbff !default;\n$color-violet-2: #d0bfff !default;\n$color-violet-3: #b197fc !default;\n$color-violet-4: #9775fa !default;\n$color-violet-5: #845ef7 !default;\n$color-violet-6: #7950f2 !default;\n$color-violet-7: #7048e8 !default;\n$color-violet-8: #6741d9 !default;\n$color-violet-9: #5f3dc4 !default;\n","// Font Weights and map for generating helpers\n$font-weight-heavy: 900 !default;\n$font-weight-bold: 700 !default;\n$font-weight-semibold: 600 !default;\n$font-weight-normal: 400 !default;\n$font-weight-light: 300 !default;\n\n\n// This is a looped map & classes will be generated based on key/value pairs i.e. \"c-text-heavy\"\n$font-weight: () !default;\n$font-weight: map-merge(\n  (\n    'heavy': $font-weight-heavy,\n    'bold': $font-weight-bold,\n    'semibold': $font-weight-semibold,\n    'normal': $font-weight-normal,\n    'light': $font-weight-light,\n  ),\n  $font-weight\n);\n\n// Changing $global-px-grid will adapt all space values and $global-sizes.\n$global-px-grid: 8px !default;\n\n// --------------------------------------------\n// Spacing and map for generating helpers\n$space-0: 0 !default;\n$space-xxs: calc($global-px-grid / 4) !default;\n$space-xs:  calc($global-px-grid / 2) !default;\n$space-sm: $global-px-grid !default;\n$space-md: $global-px-grid * 2 !default;\n$space-lg: $global-px-grid * 3 !default;\n$space-xl: $global-px-grid * 4 !default;\n\n// This is a looped map & classes will be generated based on key/value pairs i.e. \"c-p-xxs\"\n$space: () !default;\n$space: map-merge(\n  (\n    0: $space-0,\n    'xxs': $space-xxs,\n    'xs': $space-xs,\n    'sm': $space-sm,\n    'md': $space-md,\n    'lg': $space-lg,\n    'xl': $space-xl,\n  ),\n  $space\n);\n\n\n// Radius and map for generating helpers\n$radius-0     : 0 !default;\n$radius-sm    : 2px !default;\n$radius-md    : 4px !default;\n$radius-lg    : 8px !default;\n$radius-square: 0 !default;\n$radius-pill  : 200px !default;\n$radius-round : 50px !default;\n\n// This is a looped map & classes will be generated based on key/value pairs i.e. \"c-radius-sm\"\n$radius: () !default;\n$radius: map-merge(\n  (\n    0: $radius-0,\n    'sm': $radius-sm,\n    'md': $radius-md,\n    'lg': $radius-lg,\n    'pill': $radius-pill,\n    'round': $radius-round,\n    'square': $radius-square,\n  ),\n  $radius\n);\n\n// Shadows and map for generating helpers\n$shadow-0: none !default;\n$shadow-xs: 0 2px 4px -2px rgba(33, 37, 41, .1) !default;\n$shadow-sm: 0 4px 4px -2px rgba(33, 37, 41, .1) !default;\n$shadow-md: 0 6px 8px -2px rgba(33, 37, 41, .1) !default;\n$shadow-lg: 0 8px 8px -2px rgba(33, 37, 41, .1) !default;\n\n// This is a looped map & classes will be generated based on key/value pairs i.e. \"c-shadow-sm\"\n$shadow: () !default;\n$shadow: map-merge(\n  (\n    0: $shadow-0,\n    'xs': $shadow-xs,\n    'sm': $shadow-sm,\n    'md': $shadow-md,\n    'lg': $shadow-lg\n  ),\n  $shadow\n);\n\n$z-modal       : 2000 !default;\n$z-action-panel: 1900 !default;\n$z-overlay     : 1800 !default;\n$z-alert       : 1750 !default;\n$z-dropdown    : 1700 !default;\n$z-tooltip     : 1650 !default;\n$z-header      : 1600 !default;\n$z-sidenav     : 1600 !default;\n$z-footer      : 1500 !default;\n\n$z-index: () !default;\n$z-index: map-merge(\n  (\n    'modal'       : $z-modal,\n    'action-panel': $z-action-panel,\n    'overlay'     : $z-overlay,\n    'alert'       : $z-alert,\n    'dropdown'    : $z-dropdown,\n    'tooltip'     : $z-tooltip,\n    'header'      : $z-header,\n    'sidenav'     : $z-sidenav,\n    'footer'      :$z-footer,\n  ),\n  $z-index\n);\n\n","$color-primary-0: #e8f7ff !default;\n$color-primary-1: #ccedff !default;\n$color-primary-2: #a3daff !default;\n$color-primary-3: #72c3fc !default;\n$color-primary-4: #4dadf7 !default;\n$color-primary-5: #329af0 !default;\n$color-primary-6: #228ae6 !default;\n$color-primary-7: #1c7cd6 !default;\n$color-primary-8: #1b6ec2 !default;\n$color-primary-9: #1862ab !default;\n\n@import \"var\";\n@import \"map\";\n\n","// --------------------------------------------\n// Backdrop Mixin -----------------------------\n// --------------------------------------------\n@mixin backdrop($position:fixed, $visibility: hidden) {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  position: $position;\n  z-index: $z-overlay;\n  visibility: $visibility;\n  justify-content: center;\n  background-color: rgba(0, 0, 0, 0.75);\n}\n\n\n@mixin caret($direction: down, $width: .3em, $color: black) {\n  width: 0;\n  height: 0;\n  content: \"\";\n  display: inline-block;\n\n  @if $direction == down {\n    border-top: $width solid $color;\n    border-right: $width solid transparent;\n    border-bottom: 0;\n    border-left: $width solid transparent;\n  } @else if $direction == up {\n    border-top: 0;\n    border-right: $width solid transparent;\n    border-bottom: $width solid $color;\n    border-left: $width solid transparent;\n  } @else if $direction == right {\n    border-top: $width solid transparent;\n    border-bottom: $width solid transparent;\n    border-left: $width solid $color;\n  }\n}\n\n\n@mixin icon-arrow($direction: down, $size: 10px) {\n  $icon-border-width: .2rem;\n\n  width: 1em;\n  height: 1em;\n  font-size: inherit;\n  font-style: normal;\n  position: relative;\n  text-indent: -9999px;\n  display: inline-block;\n  box-sizing: border-box;\n  vertical-align: middle;\n\n  &::before {\n    border: $icon-border-width solid currentColor;\n    position: absolute;\n    border-bottom: 0;\n    border-right: 0;\n    height: $size;\n    width: $size;\n    content: \"\";\n    display: block;\n    left: 50%;\n    top: 50%;\n\n    @if $direction == down {\n      transform: translate(-50%, -75%) rotate(225deg);\n    }\n\n    @if $direction == left {\n      transform: translate(-25%, -50%) rotate(-45deg);\n    }\n\n    @if $direction == right {\n      transform: translate(-75%, -50%) rotate(135deg);\n    }\n\n    @if $direction == up {\n      transform: translate(-50%, -25%) rotate(45deg);\n    }\n\n    @if $direction == back {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    @if $direction == downward {\n      transform: translate(-50%, -50%) rotate(-135deg);\n    }\n\n    @if $direction == forward {\n      transform: translate(-50%, -50%) rotate(135deg);\n    }\n\n    @if $direction == upward {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n  }\n\n  &::after {\n    content: \"\";\n    display: block;\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    @if $direction == back {\n      background: currentColor;\n      height: $icon-border-width;\n      width: .8em;\n      left: 55%;\n    }\n\n    @if $direction == forward {\n      background: currentColor;\n      height: $icon-border-width;\n      width: .8em;\n      left: 45%;\n    }\n\n    @if $direction == downward {\n      background: currentColor;\n      height: .8em;\n      width: $icon-border-width;\n      top: 45%;\n    }\n\n    @if $direction == upward {\n      background: currentColor;\n      height: .8em;\n      width: $icon-border-width;\n      top: 55%;\n    }\n  }\n}\n\n\n@mixin icon-ellipsis($direction: horizontal) {\n  $vertical: 0 -.4em, 0 .4em;\n  $horizontal: -.4em 0, .4em 0;\n\n  width: 1em;\n  height: 1em;\n  font-size: inherit;\n  font-style: normal;\n  position: relative;\n  text-indent: -9999px;\n  display: inline-block;\n  box-sizing: border-box;\n  vertical-align: middle;\n\n  &::before {\n    top: 50%;\n    left: 50%;\n    content: \"\";\n    width: .2em;\n    height: .2em;\n    display: block;\n    position: absolute;\n    background: currentColor;\n    border-radius: $radius-round;\n    transform: translate(-50%, -50%);\n\n    @if $direction == vertical {\n      box-shadow: $vertical;\n    } @else {\n      box-shadow: $horizontal;\n    }\n  }\n\n  &::after {\n    top: 50%;\n    left: 50%;\n    content: \"\";\n    display: block;\n    position: absolute;\n    transform: translate(-50%, -50%);\n  }\n}\n"]}