.wdt-before-after-slider-container { display: grid; position: relative; width: 100%; height: 100%; border: none; 
  overflow: hidden; -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); }
.wdt-before-after-slider-container .wdt-img { grid-area: 1/-1; width: 100%; height: 100%; overflow: hidden; }
.wdt-before-after-slider-container .wdt-img.wdt-background-img { position: relative; z-index: 0; }
.wdt-before-after-slider-container .wdt-img.wdt-foreground-img { position: relative; z-index: 1; }

.wdt-before-after-slider-container .wdt-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.wdt-before-after-slider-container .wdt-before-after-sliders,
.wdt-before-after-slider-container .wdt-slider-button { z-index: 2; }

.wdt-before-after-slider-container .wdt-before-after-sliders { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%;
  background: transparent; outline: none; margin: 0; transition: all 0.2s; display: flex; justify-content: center; align-items: center; padding: 0px; 
  border-width: 0px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; }

/* .wdt-before-after-slider-container .wdt-before-after-sliders:focus,
.wdt-before-after-slider-container .wdt-before-after-sliders:checked { -webkit-visibility: hidden; visibility: hidden; }
.wdt-before-after-slider-container .wdt-before-after-sliders:focus-within { -webkit-visibility: visible; visibility: visible; } */

.wdt-before-after-slider-container .wdt-before-after-sliders:hover { background: transparent; }

.wdt-before-after-slider-container .wdt-before-after-sliders::-webkit-slider-thumb,
.wdt-before-after-slider-container .wdt-before-after-sliders::-moz-range-thumb { display: none; outline: 0px; border: none;
  -webkit-appearance: none; appearance: none; width: 0px; height: 0px; background: transparent !important; cursor: pointer; }

.wdt-before-after-slider-container .wdt-slider-button { 
pointer-events: none;
position: absolute;
width: clamp(0.625rem, 0.4178rem + 0.6935vw, 1.25rem);/*20-10*/
height: clamp(5rem, 4.5856rem + 1.387vw, 6.25rem);/*100-80*/
border-radius: var(--wdtRadius_Zero);
background-color: var(--wdt-elementor-color-white);
transform: translateX(-35px) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
font-weight: var(--wdtFontWeight_Ext);
letter-spacing: normal;
text-transform: uppercase;
color: var(--wdt-elementor-color-black);
-webkit-transition: color var(--wdt-Ad-Transition);
transition: color var(--wdt-Ad-Transition);
 }

.wdt-before-after-slider-container:hover .wdt-slider-button,
.wdt-before-after-slider-container .wdt-slider-button:focus { color: var(--wdtPrimaryColor); }

.wdt-before-after-slider-span-after, .wdt-before-after-slider-span-before { 
  font-size: clamp(2.5rem, 1.5rem + 5vw, 7.5rem); /*120px - 40px*/
  font-family: var(--wdtFontTypo_Alt);
  font-weight: normal;
  text-transform: capitalize;
  letter-spacing: normal;
  position: absolute;
  color: rgba(var(--wdtAccentTxtColorRgb), 0.4);
  line-height: 1; }

.wdt-before-after-slider-span-after { transform: translateY(-50%) ; -webkit-transform: translateY(-50%) ; bottom: 5%; left: 10%; }
.wdt-before-after-slider-span-before { transform: translateY(-50%) ; -webkit-transform: translateY(-50%) ; bottom: 5%; right: 10%; }

.wdt-before-after-slider-container .wdt-slider-button:before,
.wdt-before-after-slider-container .wdt-slider-button:after { content: ""; width: 2px; left: auto; right: auto;
  display: inline-block; background-color: var(--wdt-elementor-color-white); position: absolute; }

.wdt-before-after-slider-container .wdt-slider-button:before { top: -100vh; bottom: 100%; }
.wdt-before-after-slider-container .wdt-slider-button:after { top: 100%; bottom: -100vh; }

body.rtl .wdt-before-after-slider-container .wdt-before-after-sliders { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.wdt-before-after-slider-container .wdt-slider-button span{position:relative;}

.wdt-before-after-slider-container .wdt-slider-button span:before,
.wdt-before-after-slider-container .wdt-slider-button span:after{
    content:"";
    height:10px;
    width:10px;
    border-width: 1px 0 0 1px;
    position:absolute;
    border-style:solid;
    border-color:var(--wdtAccentTxtColor);
    transform:rotate(-45deg);
    left:-20px;
    top:0;
    bottom:0;
    margin:auto;
}
.wdt-before-after-slider-container .wdt-slider-button span:after{
    border-width: 0 1px 1px 0;
    right:-20px;
    left:unset;
}

@media only screen and (max-width: 767px) {

    /* .wdt-before-after-slider-container .wdt-slider-button { font-size: 0px; width: 56px; height: 56px;
      transform: translateX(-28px) translateY(-50%); -webkit-transform: translateX(-28px) translateY(-50%); } */
  /* .wdt-before-after-slider-span-after, .wdt-before-after-slider-span-before { font-size: 60px; } */
  .wdt-before-after-slider-span-after { bottom: 0%; left: 5%; }
  .wdt-before-after-slider-span-before {  bottom: 0%; right: 5%; }
}