: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;
touch-action: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;
pointer-events:none
}

.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)
}