/*
 * Container style
 */
 .ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto; }

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute; }

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent; }

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6; }

.ps__rail-x:hover,
.ps__rail-y:hover,
.ps__rail-x:focus,
.ps__rail-y:focus {
  background-color: #eee;
  opacity: 0.9; }

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x {
  background-color: #999;
  height: 11px; }

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y {
  background-color: #999;
  width: 11px; }

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important; } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important; } }

/*
  TODO: Remove important flags after this bug if fixed:
  https://github.com/angular/flex-layout/issues/381
*/
perfect-scrollbar {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* stylelint-disable */
  /* stylelint-enable */ }
  perfect-scrollbar[hidden] {
    display: none; }
  perfect-scrollbar[fxflex] {
    display: flex;
    flex-direction: column;
    -webkit-box-orient: column;
    -webkit-box-direction: column;
    height: auto;
    min-width: 0;
    min-height: 0; }
    perfect-scrollbar[fxflex] > .ps {
      flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      -webkit-box-flex: 1;
      width: auto;
      height: auto;
      min-width: 0;
      min-height: 0; }
  perfect-scrollbar[fxlayout] > .ps,
  perfect-scrollbar[fxlayout] > .ps > .ps-content {
    display: flex;
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    align-item: inherit;
    place-content: inherit;
    -webkit-box-pack: inherit;
    -webkit-box-align: inherit;
    flex-direction: inherit;
    -webkit-box-orient: inherit;
    -webkit-box-direction: inherit;
    width: 100%;
    height: 100%; }
  perfect-scrollbar[fxlayout="row"] > .ps,
  perfect-scrollbar[fxlayout="row"] > .ps > .ps-content {
    flex-direction: row !important;
    -webkit-box-orient: row !important;
    -webkit-box-direction: row !important; }
  perfect-scrollbar[fxlayout="column"] > .ps,
  perfect-scrollbar[fxlayout="column"] > .ps > .ps-content {
    flex-direction: column !important;
    -webkit-box-orient: column !important;
    -webkit-box-direction: column !important; }
  perfect-scrollbar > .ps {
    position: static;
    display: block;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit; }
    perfect-scrollbar > .ps > .ps-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      overflow: hidden;
      pointer-events: none; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-top,
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-left,
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-right,
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-bottom {
        position: absolute;
        opacity: 0;
        transition: opacity 300ms ease-in-out; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-top,
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-bottom {
        left: 0;
        min-width: 100%;
        min-height: 24px; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-left,
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-right {
        top: 0;
        min-width: 24px;
        min-height: 100%; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-top {
        top: 0; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-left {
        left: 0; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-right {
        right: 0; }
      perfect-scrollbar > .ps > .ps-overlay .ps-indicator-bottom {
        bottom: 0; }
    perfect-scrollbar > .ps.ps--active-y > .ps__rail-y {
      top: 0 !important;
      right: 0 !important;
      left: auto !important;
      width: 10px;
      cursor: default;
      transition: width 200ms linear, opacity 200ms linear, background-color 200ms linear; }
      perfect-scrollbar > .ps.ps--active-y > .ps__rail-y:hover {
        width: 15px; }
    perfect-scrollbar > .ps.ps--active-x > .ps__rail-x {
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      height: 10px;
      cursor: default;
      transition: height 200ms linear, opacity 200ms linear, background-color 200ms linear; }
      perfect-scrollbar > .ps.ps--active-x > .ps__rail-x:hover {
        height: 15px; }
    perfect-scrollbar > .ps.ps--active-x.ps--active-y > .ps__rail-y {
      margin: 0 0 10px; }
    perfect-scrollbar > .ps.ps--active-x.ps--active-y > .ps__rail-x {
      margin: 0 10px 0 0; }
    perfect-scrollbar > .ps.ps--scrolling-y > .ps__rail-y {
      opacity: 0.9;
      background-color: #eee; }
    perfect-scrollbar > .ps.ps--scrolling-x > .ps__rail-x {
      opacity: 0.9;
      background-color: #eee; }
  perfect-scrollbar.ps-show-always > .ps.ps--active-y > .ps__rail-y {
    opacity: 0.6; }
  perfect-scrollbar.ps-show-always > .ps.ps--active-x > .ps__rail-x {
    opacity: 0.6; }
  perfect-scrollbar.ps-show-active > .ps.ps--active-y > .ps-overlay:not(.ps-at-top) .ps-indicator-top {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
  perfect-scrollbar.ps-show-active > .ps.ps--active-y > .ps-overlay:not(.ps-at-bottom) .ps-indicator-bottom {
    opacity: 1;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
  perfect-scrollbar.ps-show-active > .ps.ps--active-x > .ps-overlay:not(.ps-at-left) .ps-indicator-left {
    opacity: 1;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
  perfect-scrollbar.ps-show-active > .ps.ps--active-x > .ps-overlay:not(.ps-at-right) .ps-indicator-right {
    opacity: 1;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); }
  perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-top .ps-indicator-top {
    background: linear-gradient(to bottom, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%); }
    perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-top .ps-indicator-top.ps-indicator-show {
      opacity: 1; }
  perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-bottom .ps-indicator-bottom {
    background: linear-gradient(to top, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%); }
    perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-bottom .ps-indicator-bottom.ps-indicator-show {
      opacity: 1; }
  perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-left .ps-indicator-left {
    background: linear-gradient(to right, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%); }
    perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-left .ps-indicator-left.ps-indicator-show {
      opacity: 1; }
  perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-right .ps-indicator-right {
    background: linear-gradient(to left, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%); }
    perfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-right .ps-indicator-right.ps-indicator-show {
      opacity: 1; }

/*# sourceMappingURL=perfect-scrollbar.component.css.map */