.before-after-slider-container {
    width: 100%;
    position: relative;
}
.before-after-slider-first {
    width: 100%;
    overflow: hidden;
}
.before-after-slider-second {
    top: 0;
    position: absolute;
    overflow: hidden;
}
.before-after-slider-container img {
    max-width: none;
    width: 100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.slider-container {
    --coca-image-compare-handle-color: #fff;
    --coca-image-compare-handle-stroke: 3px;
    --coca-image-compare-handle-circle-width: 40px;
    --coca-image-compare-handle-circle-height: 40px;
    --coca-image-compare-handle-box-shadow: 0px 0px 12px rgba(51,51,51,.5);
    --coca-image-compare-handle-triangle-color: var(--coca-image-compare-handle-color);
    --coca-image-compare-handle-triangle-size: 6px;
    --coca-image-compare-handle-triangle-position: 5px;
    --coca-image-compare-handle-radius: 1000px;
    --coca-image-compare-overlay-bg: rgba(0,0,0,.5);
    --coca-image-compare-overlay-label-color: #fff;
    --coca-image-compare-overlay-label-bg: hsla(0,0%,100%,.2);
    --coca-image-compare-overlay-label-height: 38px;
    --coca-image-compare-overlay-label-width: 90px;
    --coca-image-compare-overlay-label-padding: 20px;
    --coca-image-compare-overlay-label-font-size: 13px;
    --coca-image-compare-overlay-label-letter-spacing: 0.1em;
    --coca-image-compare-label-radius: 2px;
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.slider {
    position: relative;
    width: 100%;
}

.slider img {
    width: 100%;
    display: block;
    user-select: none;
}

.before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    clip-path: rect(0% 100% 100% 50%);
    /*clip: rect(0, 400px, 300px, 0);  Adjust the width of the visible area */
}

.slider-handle {
    border: var(--coca-image-compare-handle-stroke) solid var(--coca-image-compare-handle-color);
    border-radius: var(--coca-image-compare-handle-radius);
    box-shadow: var(--coca-image-compare-handle-box-shadow);
    cursor: pointer;
    height: var(--coca-image-compare-handle-circle-height);
    left: 50%;
    margin-left: calc(var(--coca-image-compare-handle-circle-width)*-1/2 - var(--coca-image-compare-handle-stroke));
    margin-top: calc(var(--coca-image-compare-handle-circle-height)*-1/2 - var(--coca-image-compare-handle-stroke));
    position: absolute;
    top: 50%;
    transition: none !important;
    width: var(--coca-image-compare-handle-circle-width);
    z-index: 40;
}
.slider-handle::after {
    box-shadow: 0 var(--coca-image-compare-handle-stroke) 0 var(--coca-image-compare-handle-color),var(--coca-image-compare-handle-box-shadow);
    margin-top: calc(var(--coca-image-compare-handle-circle-height)/2);
    top: 50%;
}
.slider-handle::before {
    bottom: 50%;
    box-shadow: 0 var(--coca-image-compare-handle-stroke) 0 var(--coca-image-compare-handle-color),var(--coca-image-compare-handle-box-shadow);
    margin-bottom: calc(var(--coca-image-compare-handle-circle-height)/2 + var(--coca-image-compare-handle-stroke));
}
.slider-handle::before {
    height: 9999px;
    left: 50%;
    margin-left: calc(var(--coca-image-compare-handle-stroke) * -1 / 2);
    width: var(--coca-image-compare-handle-stroke);
}
.slider-handle::before,
.slider-handle::after
{
    background: var(--coca-image-compare-handle-color);
    content: " ";
    display: block;
    position: absolute;
    z-index: 30;
}
.slider-handle::before {
    transition: .3s ease-in-out;
}
.slider-handle::after {
    height: 9999px;
    left: 50%;
    margin-left: calc(var(--coca-image-compare-handle-stroke)*-1/2);
    width: var(--coca-image-compare-handle-stroke);
}
.slider-handle-left-arrow, .slider-handle-right-arrow {
    border: var(--coca-image-compare-handle-triangle-size) inset transparent;
    height: 0;
    position: absolute;
    width: 0;
}
.slider-handle-left-arrow {
    border-right: var(--coca-image-compare-handle-triangle-size) solid var(--coca-image-compare-handle-triangle-color);
    left: 50%;
    margin-left: calc(var(--coca-image-compare-handle-triangle-size)*-1*2 - var(--coca-image-compare-handle-triangle-position));
}
.slider-handle-right-arrow {
    border-left: var(--coca-image-compare-handle-triangle-size) solid var(--coca-image-compare-handle-triangle-color);
    margin-right: calc(var(--coca-image-compare-handle-triangle-size)*-1*2 - var(--coca-image-compare-handle-triangle-position));
    right: 50%;
}
.slider-handle-left-arrow, .slider-handle-right-arrow {
    margin-top: calc(var(--coca-image-compare-handle-triangle-size)*-1);
    top: 50%;
}