:root{
  --zoomist-wrapper-bg-color: #efefef;
  --zoomist-slider-bg-color: rgba(255, 255, 255, .8);
  --zoomist-slider-border-radius: 0 0 4px 0;
  --zoomist-slider-padding-x: 20px;
  --zoomist-slider-padding-y: 20px;
  --zoomist-slider-track-color: #ddd;
  --zoomist-slider-track-color-hover: #ccc;
  --zoomist-slider-bar-size: 120px;
  --zoomist-slider-bar-side: 2px;
  --zoomist-slider-bar-border-radius: 2px;
  --zoomist-slider-bar-color: #666;
  --zoomist-slider-bar-color-hover: #444;
  --zoomist-slider-button-size: 12px;
  --zoomist-slider-button-color: #fff;
  --zoomist-zoomer-button-size: 48px;
  --zoomist-zoomer-button-color: rgba(255, 255, 255, .8);
  --zoomist-zoomer-button-color-hover: rgba(255, 255, 255, .9);
  --zoomist-zoomer-button-color-disabled: rgba(255, 255, 255, .8);
  --zoomist-zoomer-button-opacity-disabled: .7;
  --zoomist-zoomer-icon-size: 14px;
  --zoomist-zoomer-icon-color: #333;
  --zoomist-zoomer-icon-color-hover: #111;
  --zoomist-zoomer-icon-color-disabled: #999;
  --zoomist-modules-tranistion-duration: .3s
}
.zoomist-container{
  position:relative;
  padding:0!important;
  -webkit-user-select:none;
  user-select:none
}
.zoomist-wrapper{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:0!important;
  overflow:hidden;
  /*background-color:var(--zoomist-wrapper-bg-color)*/
}
.zoomist-image{
  position:relative;
  max-width:none!important;
  max-height:none!important
}
.zoomist-slider{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  padding:var(--zoomist-slider-padding-y) var(--zoomist-slider-padding-x);
  background-color:var(--zoomist-slider-bg-color);
  border-radius:var(--zoomist-slider-border-radius)
}
.zoomist-slider:hover .zoomist-slider-wrapper{
  background-color:var(--zoomist-slider-track-color-hover)
}
.zoomist-slider:hover .zoomist-slider-bar{
  background-color:var(--zoomist-slider-bar-color-hover)
}
.zoomist-slider:hover .zoomist-slider-button:before{
  box-shadow:0 0 8px #0009
}
.zoomist-slider-horizontal .zoomist-slider-wrapper{
  align-items:center;
  justify-content:flex-start;
  width:var(--zoomist-slider-bar-size);
  height:var(--zoomist-slider-bar-side)
}
.zoomist-slider-horizontal .zoomist-slider-bar{
  top:0;
  width:calc(var(--value) * 1%);
  height:100%
}
.zoomist-slider-horizontal .zoomist-slider-button{
  left:calc(var(--value) * 1%)
}
.zoomist-slider-vertical .zoomist-slider-wrapper{
  align-items:flex-end;
  justify-content:center;
  width:var(--zoomist-slider-bar-side);
  height:var(--zoomist-slider-bar-size)
}
.zoomist-slider-vertical .zoomist-slider-bar{
  bottom:0;
  width:100%;
  height:calc(var(--value) * 1%)
}
.zoomist-slider-vertical .zoomist-slider-button{
  bottom:calc(var(--value) * 1%)
}
.zoomist-slider-wrapper{
  position:relative;
  display:flex;
  background-color:var(--zoomist-slider-track-color);
  transition:background-color var(--zoomist-modules-tranistion-duration)
}
.zoomist-slider-bar{
  position:absolute;
  z-index:0;
  left:0;
  display:block;
  border-radius:var(--zoomist-slider-bar-border-radius);
  background-color:var(--zoomist-slider-bar-color);
  transition:background-color var(--zoomist-modules-tranistion-duration)
}
.zoomist-slider-button{
  position:relative;
  z-index:1;
  display:block;
  width:0!important;
  height:0!important
}
.zoomist-slider-button:before{
  content:"";
  position:absolute;
  left:calc(var(--zoomist-slider-button-size) * -.5);
  top:calc(var(--zoomist-slider-button-size) * -.5);
  width:var(--zoomist-slider-button-size);
  height:var(--zoomist-slider-button-size);
  display:block;
  background-color:var(--zoomist-slider-button-color, #fff);
  border-radius:50%;
  box-shadow:0 0 4px #0006;
  transition:box-shadow var(--zoomist-modules-tranistion-duration)
}
.zoomist-zoomer{
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  border-radius:0 0 0 4px;
  overflow:hidden
}
.zoomist-zoomer-button{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:var(--zoomist-zoomer-button-size);
  height:var(--zoomist-zoomer-button-size);
  background:none;
  background-color:var(--zoomist-zoomer-button-color);
  border:0;
  transition:background-color var(--zoomist-modules-tranistion-duration);
  cursor:pointer
}
.zoomist-zoomer-button:hover{
  background-color:var(--zoomist-zoomer-button-color-hover)
}
.zoomist-zoomer-button:hover .zoomist-zoomer-icon{
  fill:var(--zoomist-zoomer-icon-color-hover)
}
.zoomist-zoomer-button.zoomist-zoomer-disabled{
  pointer-events:none;
  background-color:var(--zoomist-zoomer-button-color-disabled);
  opacity:var(--zoomist-zoomer-button-opacity-disabled)
}
.zoomist-zoomer-button.zoomist-zoomer-disabled .zoomist-zoomer-icon{
  fill:var(--zoomist-zoomer-icon-color-disabled)
}
.zoomist-zoomer-icon{
  width:var(--zoomist-zoomer-icon-size);
  height:var(--zoomist-zoomer-icon-size);
  fill:var(--zoomist-zoomer-icon-color);
  transition:fill var(--zoomist-modules-tranistion-duration)
}