.dmw-ayc{
  position:relative;
  width:100%;
  display:block;
  overflow:hidden;
  border-radius: 12px;
  background:#eee;
}

.dmw-ayc__base{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}

.dmw-ayc__overlayWrap{
  position:absolute;
  top:0; left:0;
  height:100%;
  width:50%;
  overflow:hidden;
}

.dmw-ayc__overlayImg{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

.dmw-ayc__handle{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  width:52px;
  cursor:ew-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  outline:none;
  touch-action:none;
  z-index: 10;
}

.dmw-ayc__line{
  position:absolute;
  top:0; bottom:0;
  width: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.35);
  border-radius: 4px;
}

.dmw-ayc__knob{
  position:relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background:#fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.75), 0 10px 26px rgba(0,0,0,.45);
}
.dmw-ayc__knob:before,
.dmw-ayc__knob:after{
  content:"";
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  border-top:3px solid rgba(0,0,0,.8);
  border-right:3px solid rgba(0,0,0,.8);
  transform:translateY(-50%) rotate(45deg);
}
.dmw-ayc__knob:before{ left:12px; transform:translateY(-50%) rotate(225deg); }
.dmw-ayc__knob:after{ right:12px; transform:translateY(-50%) rotate(45deg); }

.dmw-ayc__range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index: 20;
}

.dmw-ayc__caption{
  position:absolute;
  bottom:14px;
  padding:6px 10px;
  font-weight:800;
  font-size:16px;
  letter-spacing:.4px;
  color:#fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px  3px 0 rgba(0,0,0,.65);
  user-select:none;
  pointer-events:none;
  z-index: 30;
}
.dmw-ayc__caption--before{ left:14px; }
.dmw-ayc__caption--after{ right:14px; text-align:right; }

/* Vertical effect */
.dmw-ayc--vertical .dmw-ayc__overlayWrap{
  width:100%;
  height:50%;
}

.dmw-ayc--vertical .dmw-ayc__handle{
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:52px;
  cursor:ns-resize;
}

.dmw-ayc--vertical .dmw-ayc__line{
  left:0; right:0;
  top:50%;
  bottom:auto;
  height:4px;
  width:auto;
}

.dmw-ayc--vertical .dmw-ayc__knob:before,
.dmw-ayc--vertical .dmw-ayc__knob:after{
  width:10px; height:10px;
  border-top:3px solid rgba(0,0,0,.8);
  border-right:3px solid rgba(0,0,0,.8);
}
.dmw-ayc--vertical .dmw-ayc__knob:before{
  left:50%; top:14px;
  transform:translateX(-50%) rotate(315deg);
}
.dmw-ayc--vertical .dmw-ayc__knob:after{
  left:50%; top:auto; bottom:14px;
  transform:translateX(-50%) rotate(135deg);
}

.dmw-ayc--vertical .dmw-ayc__range{ cursor:ns-resize; }

/* RTL effect (overlay from right) */
.dmw-ayc--rtl .dmw-ayc__overlayWrap{
  left:auto;
  right:0;
}
.dmw-ayc--rtl .dmw-ayc__overlayImg{
  left:auto;
  right:0;
}
.dmw-ayc--rtl .dmw-ayc__knob:before{ left:12px; transform:translateY(-50%) rotate(45deg); }
.dmw-ayc--rtl .dmw-ayc__knob:after{ right:12px; transform:translateY(-50%) rotate(225deg); }