.ps__rail-x,
.ps__rail-y {
  display: none;
  opacity: 0;
  transition: opacity 0.2s linear;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:before,
.ps__rail-y:before {
  content: "";
  position: absolute;
  border-radius: calc(var(--kt-ui-scrollbar-rail-size) / 2);
  transition: background-color 0.2s linear;
}

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

.ps--active-x > .ps__rail-x:before,
.ps--active-y > .ps__rail-y:before {
  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: 1;
}

.ps .ps__rail-x:hover:before,
.ps .ps__rail-x:focus:before,
.ps .ps__rail-x.ps--clicking:before,
.ps .ps__rail-y:hover:before,
.ps .ps__rail-y:focus:before,
.ps .ps__rail-y.ps--clicking:before {
  background-color: var(--kt-ui-scrollbar-rail-color);
}

.ps__thumb-x,
.ps__thumb-y {
  background-color: var(--kt-ui-scrollbar-thumb-color);
  border-radius: calc(var(--kt-ui-scrollbar-thumb-size-active) / 2);
  transition: background-color 0.2s linear;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-x:hover > .ps__thumb-x {
  background-color: var(--kt-ui-scrollbar-thumb-color-hover);
}

.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: var(--kt-ui-scrollbar-thumb-color-active);
}

.ps__rail-y:hover > .ps__thumb-y:after,
.ps__rail-x:hover > .ps__thumb-x:after {
  content: "";
  position: absolute;
}

/*
 * Container style
 */

.ps {
  --kt-ui-scrollbar-rail-offset: calc((var(--kt-ui-scrollbar-thumb-size-active) - var(--kt-ui-scrollbar-rail-size)) / 2);
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */

.ps__rail-x {
  height: var(--kt-ui-scrollbar-thumb-size-active);
  margin-right: calc(var(--kt-ui-scrollbar-rail-size) + var(--kt-ui-scrollbar-rail-offset));
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0;
}

.ps__rail-x:before {
  width: 100%;
  height: var(--kt-ui-scrollbar-rail-size);
  bottom: var(--kt-ui-scrollbar-rail-offset);
}

.ps__rail-y {
  width: var(--kt-ui-scrollbar-thumb-size-active);
  margin-bottom: calc(var(--kt-ui-scrollbar-rail-size) + var(--kt-ui-scrollbar-rail-offset));
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
}

.ps__rail-y:before {
  width: var(--kt-ui-scrollbar-rail-size);
  height: 100%;
  right: var(--kt-ui-scrollbar-rail-offset);
}

/*
 * Scrollbar thumb styles
 */

.ps__thumb-x {
  height: var(--kt-ui-scrollbar-thumb-size);
  /* there must be 'bottom' for ps__thumb-x */
  bottom: var(--kt-ui-scrollbar-rail-offset);
  transition: height 0.2s ease-in-out, bottom 0.2s ease-in-out;
}

.ps__thumb-y {
  width: var(--kt-ui-scrollbar-thumb-size);
  /* there must be 'right' for ps__thumb-y */
  right: var(--kt-ui-scrollbar-rail-offset);
  transition: width 0.2s ease-in-out, right 0.2s ease-in-out;
}

.ps__rail-x:hover > .ps__thumb-x {
  height: var(--kt-ui-scrollbar-thumb-size-active);
  bottom: 0;
}

.ps__rail-x:hover > .ps__thumb-x:after {
  width: 7px;
  height: 6px;
  top: calc(50% - 3px);
  left: calc(50% - 3.5px);
  background: var(--kt-ui-icon-scrollbar-handler-x) center no-repeat;
}

.ps__rail-y:hover > .ps__thumb-y {
  width: var(--kt-ui-scrollbar-thumb-size-active);
  right: 0;
}

.ps__rail-y:hover > .ps__thumb-y:after {
  width: 6px;
  height: 7px;
  top: calc(50% - 3.5px);
  left: calc(50% - 3px);
  background: var(--kt-ui-icon-scrollbar-handler-y) center no-repeat;
}

/* MS supports */

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

/* Region quasar scrollarea */

.kt-scrollarea {
  padding-right: var(--kt-ui-offset-lg);
}

.kt-scrollarea .q-scrollarea__bar,
.kt-scrollarea .q-scrollarea__thumb {
  opacity: 1;
  cursor: default;
}

.kt-scrollarea .q-scrollarea__bar {
  background-color: transparent;
  transition: background-color 160ms ease-in-out;
}

.kt-scrollarea .q-scrollarea__bar:hover {
  background-color: var(--kt-ui-scrollbar-rail-color);
}

.kt-scrollarea .q-scrollarea__bar--v {
  width: var(--kt-ui-scrollbar-thumb-size);
}

.kt-scrollarea .q-scrollarea__bar--h {
  height: var(--kt-ui-scrollbar-thumb-size);
}

.kt-scrollarea .q-scrollarea__thumb {
  border-radius: calc(var(--kt-ui-scrollbar-thumb-size-active) / 2);
  background-color: var(--kt-ui-scrollbar-thumb-color);
}

.kt-scrollarea .q-scrollarea__thumb:active {
  background-color: var(--kt-ui-scrollbar-thumb-color-active);
}

.kt-scrollarea .q-scrollarea__thumb::after {
  content: "";
  width: 6px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: var(--kt-ui-icon-scrollbar-handler-y) center no-repeat;
  transition: opacity 200ms ease-in-out;
}

.kt-scrollarea .q-scrollarea__thumb--v {
  width: var(--kt-ui-scrollbar-thumb-size);
  transition: width 200ms ease-in-out, right 200ms ease-in-out;
}

.kt-scrollarea .q-scrollarea__thumb--h {
  height: var(--kt-ui-scrollbar-thumb-size);
  transition: height 200ms ease-in-out, right 200ms ease-in-out;
}

.kt-scrollarea .q-scrollarea__thumb--v:hover,
.kt-scrollarea .q-scrollarea__thumb--h:hover,
.kt-scrollarea .q-scrollarea__bar--v:hover ~ .q-scrollarea__thumb--v,
.kt-scrollarea .q-scrollarea__bar--h:hover ~ .q-scrollarea__thumb--h {
  background-color: var(--kt-ui-scrollbar-thumb-color-hover);
}

.kt-scrollarea .q-scrollarea__thumb--v:hover::after,
.kt-scrollarea .q-scrollarea__thumb--h:hover::after,
.kt-scrollarea .q-scrollarea__bar--v:hover ~ .q-scrollarea__thumb--v::after,
.kt-scrollarea .q-scrollarea__bar--h:hover ~ .q-scrollarea__thumb--h::after {
  opacity: 1;
}

.kt-scrollarea .q-scrollarea__thumb--v:hover,
.kt-scrollarea .q-scrollarea__bar--v:hover ~ .q-scrollarea__thumb--v {
  width: var(--kt-ui-scrollbar-thumb-size-active);
}

.kt-scrollarea .q-scrollarea__thumb--h:hover,
.kt-scrollarea .q-scrollarea__bar--h:hover ~ .q-scrollarea__thumb--h {
  height: var(--kt-ui-scrollbar-thumb-size-active);
}

/* End region quasar scrollarea */

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