.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; transition: var(--wdtBaseTransition); }

.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 { -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: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 { display:none !important; pointer-events: none; position: absolute; min-width: 70px; height: 70px; padding: 0 10px; border-radius: var(--wdtRadius_Full);
  background-color: var(--wdt-elementor-color-accent); 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-white); 
  -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(--wdt-elementor-color-white); }

.wdt-before-after-slider-span-after, .wdt-before-after-slider-span-before { 
  font-size: var(--wdtFontSize_Ext); font-weight: normal; text-transform: capitalize; letter-spacing: normal; 
  position: absolute; color: var(--wdtPrimaryColor); padding: 8px clamp(1.25rem, 1.1461rem + 0.347vw, 1.5625rem); background-color: var(--wdtTertiaryColor); }

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

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


/* Horizontal Text Styles */

.wdt-before-after-slider-container.wdt-orientation-horizontal .wdt-before-after-slider-span-after { 
  -webkit-transform: translateY(10%) rotate(0deg); transform: translateY(10%) rotate(0deg); bottom: 15px; right: 10px;cursor:pointer; transition: var(--wdtBaseTransition); }

.wdt-before-after-slider-container.wdt-orientation-horizontal .wdt-before-after-slider-span-before { 
  -webkit-transform: translateY(10%) rotate(0deg); transform: translateY(10%) rotate(0deg); bottom: 15px; left:10px; cursor:pointer; transition: var(--wdtBaseTransition); }
    .wdt-before-after-slider-container.wdt-orientation-horizontal .wdt-before-after-slider-span-after:hover,
.wdt-before-after-slider-container.wdt-orientation-horizontal .wdt-before-after-slider-span-before:hover{background-color: var(--wdtHeadAltColor); color: var(--wdtAccentTxtColor);}


/* Drag Handle Sryle */

.wdt-before-after-sliders::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 0; height: 0; background: transparent; border: none; box-shadow: none; }

.wdt-before-after-sliders::-moz-range-thumb {
  width: 0; height: 0; background: transparent; border: none; box-shadow: none; }


/*--------------------------------------------------------------
    Vertical Layout
--------------------------------------------------------------*/

/* Vertical Mode */

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-before-after-sliders { 
  transform: translate(-50%, -50%) rotate(90deg); width: 100%; height: 100%; }

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-slider-button { 
  left: 50%; top: 50%; transform: translate(-50%, -35px); }


/* Vertical divider line */

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-slider-button:before,
.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-slider-button:after { width: 100vh; height: 2px; }

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-slider-button:before { left: -100vh; top: 50%; }

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-slider-button:after { right: -100vh; top: 50%; }


/* Vertical Text Styles */

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-before-after-slider-span-before {
  -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); top: 6%; bottom: auto; right: 4%; }

.wdt-before-after-slider-container.wdt-orientation-vertical .wdt-before-after-slider-span-after {
  -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); top: auto; bottom: 2%; left: 4%; }


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
  .wdt-before-after-slider-container .wdt-slider-button { 
    font-size: 12px; 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; }
}

@media only screen and (max-width: 480px) {
  .wdt-before-after-slider-container.wdt-orientation-vertical .wdt-before-after-slider-span-before { top: 10%; }
}