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

/* .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: 2px; height: 140px;
  background-color: var(--wdt-elementor-color-white); transform: translateX(-0px) translateY(-50%); -webkit-transform: translateX(-0px) 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: 2px solid var(--wdtSecondaryColor); }

.wdt-before-after-slider-container .wdt-slider-button span { font-size: 0; background:var(--wdtAccentTxtColor); border: 2px solid var(--wdtSecondaryColor); }
.wdt-before-after-slider-container .wdt-slider-button span:before {
  content: '';
  width: 30px;
  height: 120px;
  display: block;
  background: var(--wdtSecondaryColor);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 16 92' style='enable-background:new 0 0 16 92;' xml:space='preserve'%3E%3Cpath d='M7,10L0,0v92l7-10V10z'/%3E%3Cpath d='M14,22c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S12.9,22,14,22z'/%3E%3Cpath d='M13,30h2v40h-2V30z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 16 92' style='enable-background:new 0 0 16 92;' xml:space='preserve'%3E%3Cpath d='M7,10L0,0v92l7-10V10z'/%3E%3Cpath d='M14,22c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S12.9,22,14,22z'/%3E%3Cpath d='M13,30h2v40h-2V30z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center left;
  mask-position:center left;
}
.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); opacity: 0;}

.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: 4px; left: auto; right: auto;
  display: inline-block; background-color: rgba(var(--wdtSecondaryColorRgb), 0.5);; 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 input[type="range" i]::-webkit-slider-thumb{
  opacity: 0;
}

@media only screen and (max-width: 767px) {
.wdt-before-after-slider-container .wdt-slider-button {
    height: clamp(5rem, 0.9128rem + 16.3488vw, 8.75rem); /* Min-80 & Max-140 */
  }
  .wdt-before-after-slider-container .wdt-slider-button span:before {
    width: clamp(1.125rem, 0.3076rem + 3.2698vw, 1.875rem); /* Min-18 & Max-30 */
  height: clamp(4.6875rem, 1.6221rem + 12.2616vw, 7.5rem); /* Min-75 & Max-120 */
  }
  .wdt-before-after-slider-span-after,
  .wdt-before-after-slider-span-before {
    font-size: var(--wdtFontSize_Ext);
  }
}