.elementor-widget-wdt-before-after-slider,
.elementor-widget-wdt-before-after-slider .elementor-widget-container{height: 100%;}
.wdt-before-after-slider-container { display: grid; position: relative; width: 100%; height: 100%; border: none; 
  overflow: hidden; }
.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%); cursor: grab; }

/* .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 { cursor:grab; pointer-events: none; position: absolute; width: 70px; height: 70px; border-radius: 50%;
  background-color: var(--wdt-elementor-color-white); transform: translateX(-35px) translateY(-50%); -webkit-transform: translateX(-35px) translateY(-50%);
  left: 50%; top: 50%; display: flex; justify-content: center; align-items: center; font-size: var(--wdtFontSize_Ext); 
  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 { display: inline-flex; gap: 18px; align-items: center; font-size: clamp(1.25rem, 1.0422rem + 0.694vw, 1.875rem); font-family: var(--wdtFontTypo_H5);
  font-weight: normal;text-transform: capitalize;letter-spacing: normal;
  position: absolute;color: var(--wdt-elementor-color-white); padding: 2px 10px;}

.wdt-before-after-slider-span-after {  bottom: 5%; left: 24%; }
.wdt-before-after-slider-span-before {  bottom: 5%; right: 26%; }

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

/* ---Additional code--- */

.wdt-before-after-slider-span-after:before, 
.wdt-before-after-slider-span-before:after{
    content: '';
    mask-size: 20px;
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--wdtAccentTxtColor);
    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000442157 1.85786C0.00044241 1.30558 0.448158 0.857864 1.00044 0.857864L10.0004 0.857865C10.5527 0.857864 11.0004 1.30558 11.0004 1.85786C11.0004 2.41015 10.5527 2.85786 10.0004 2.85786L2.00044 2.85786L2.00044 10.8579C2.00044 11.4101 1.55273 11.8579 1.00044 11.8579C0.448158 11.8579 0.000442621 11.4101 0.000442958 10.8579L0.000442157 1.85786ZM14.4355 16.7071L0.293336 2.56497L1.70755 1.15076L15.8497 15.2929L14.4355 16.7071Z' fill='white'/%3E%3C/svg%3E%0A");

}

.wdt-before-after-slider-span-before:after{
  transform: scaleX(-1);
}


@media only screen and (max-width: 1280px) {
 .wdt-before-after-slider-span-after {   left: 14%; }
.wdt-before-after-slider-span-before {   right: 16%; } 
}



@media only screen and (max-width: 767px) {
  .wdt-before-after-slider-container .wdt-slider-button {  width: 56px; height: 56px;
    transform: translateX(-28px) translateY(-50%); -webkit-transform: translateX(-28px) translateY(-50%); }
}

@media only screen and (max-width: 479px) {
  .wdt-before-after-slider-span-after {   left: 4%; }
 .wdt-before-after-slider-span-before {   right: 4%; } 
 }