/*
The darken/lighten is not giving accurate results for the toasters so specific vars for them below.

- Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20.
- Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20.
- Orange background: #ff9933
- The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text.

*/
/*is not being used anywhere; the same as @redAlert*/
:host {
  position: relative; }
  :host.gap-bottom {
    margin-bottom: 5px; }

.et-scroll-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; }

.et-scroll-track {
  background: #2E2E33;
  opacity: 0; }
  .et-scroll-track.active {
    opacity: 1 !important; }
    .et-scroll-track.active .et-scroll-thumb {
      background: #FF9933; }
  .et-scroll-track.hide-track {
    display: none; }
  .et-scroll-track.show-track {
    opacity: 1; }
  .et-scroll-track.fadeOut {
    opacity: 0;
    transition: opacity 500ms ease-in 1000ms; }

.et-scroll-thumb {
  background: #666570;
  border-radius: 50px; }
  .et-scroll-thumb:hover {
    background: #E2E2E2; }

.et-scroll-track-x {
  display: none;
  height: 7px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }
  .et-scroll-track-x .et-scroll-thumb-x {
    position: absolute;
    left: 0;
    height: 100%; }

.et-scroll-track-y {
  width: 7px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; }
  .et-scroll-track-y .et-scroll-thumb-y {
    position: absolute;
    top: 0;
    width: 100%; }