.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;
  -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: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(var(--wdtSecondaryColorRgb), .6);
  transform: translateX(-39px) translateY(-50%);
  -webkit-transform: translateX(-39px) 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);
  border: 1px solid var(--wdtPrimaryColor);
}

.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: var(--wdtFontSize_Ext);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  position: absolute;
  color: var(--wdt-elementor-color-white);
  padding: 2px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.wdt-before-after-slider-span-after {
  transform: translateY(-50%) rotate(-90deg);
  -webkit-transform: translateY(-50%) rotate(-90deg);
  bottom: 10%;
  left: 4%;
}

.wdt-before-after-slider-span-before {
  transform: translateY(-50%) rotate(-90deg);
  -webkit-transform: translateY(-50%) rotate(-90deg);
  bottom: 10%;
  right: 4%;
}

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

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

.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 {
  display: inline-flex;
  width: 100%;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.wdt-before-after-slider-container .wdt-slider-button span::before,
.wdt-before-after-slider-container .wdt-slider-button span::after {
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  background-color: var(--wdtPrimaryColor);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M6.3,0.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L2.4,7l5.3,5.3c0.4,0.4,0.4,1,0,1.4C7.5,13.9,7.3,14,7,14s-0.5-0.1-0.7-0.3l-6-6 c-0.4-0.4-0.4-1,0-1.4L6.3,0.3z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: auto;
}

.wdt-before-after-slider-container .wdt-slider-button span::before {
  left: 18px;
}

.wdt-before-after-slider-container .wdt-slider-button span::after {
  right: 18px;
  transform: scaleX(-1);
}
/* Safari on macOS only */
@supports (-webkit-touch-callout: none) and (not (overflow: -webkit-marquee)) {
  .wdt-cus-bfr-aft-section {
    will-change: transform;
  }
}


@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%);
  } */

  .wdt-before-after-slider-span-after,
  .wdt-before-after-slider-span-before {
    font-size: 12px;
  }
}