.fill-svg {
  fill: silver;
}
.bg-svg {
  background-color: rgba(238, 238, 238, 1);
}
.picture-comparison-container .comparion-render-wrapper {
  height: 100% !important;
}
.picture-comparison-container .comparison-sub-heading p {
  margin: 0;
}
.picture-comparison-container .picture-comparison__before-image {
  background: var(--pre-image) no-repeat right center;
  background-size: cover;
}
.picture-comparison-container .picture-comparison__after-image-wrapper {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0 0 0 calc(var(--comparison-width, 50%)));
          clip-path: inset(0 0 0 calc(var(--comparison-width, 50%)));
  overflow: hidden;
}
html[dir='rtl'] .picture-comparison-container .picture-comparison__after-image-wrapper {
  -webkit-clip-path: inset(0 calc(var(--comparison-width, 50%)) 0 0);
          clip-path: inset(0 calc(var(--comparison-width, 50%)) 0 0);
}
.picture-comparison-container .picture-comparison__after-image-border {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: calc(100% - var(--comparison-width, 50%));
  height: 100%;
  -webkit-border-start: 1px solid var(--color-border);
          border-inline-start: 1px solid var(--color-border);
  z-index: 1;
}
.picture-comparison-container .after-image-overlay {
  background: rgba(0, 0, 0, 0.1);
}
.picture-comparison-container .picture-comparison__after-image {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  background: var(--post-image) no-repeat right center;
  background-size: cover;
  width: 100%;
}
.picture-comparison-container .post-comparison-text p {
  margin: 0;
}

/* Slider style */
.picture-comparison-container .range-input-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
}

.picture-comparison-container input[type='range'] {
  position: absolute;
  width: 100%;
  top: -2px;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  height: 0;
}
.picture-comparison-container input[type='range']::-webkit-slider-runnable-track {
  height: 0;
}
.picture-comparison-container input[type='range']::-webkit-slider-thumb {
  position: absolute;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  background-image: var(--drag-cursor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%, auto, contain;
  box-shadow: none;
}
/* Compatible with Firefox browser */
.picture-comparison-container input[type='range']::-moz-range-track {
  height: 0;
  position: relative;
}
.picture-comparison-container input[type='range']::-moz-range-thumb {
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  background: none;
  background-image: var(--drag-cursor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%, auto, contain;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.picture-comparison-container .picture-comparison-wrapper {
  height: 175px;
}
.picture-comparison-container .pre-comparison-text {
  -webkit-padding-end: 16px;
          padding-inline-end: 16px;
  inset-inline-start: 16px;
  max-width: calc(100% - 32px);
}
.picture-comparison-container .post-comparison-text {
  -webkit-padding-start: 16px;
          padding-inline-start: 16px;
  inset-inline-end: 16px;
  max-width: calc(100% - 32px);
}
.picture-comparison-container.text-pos-top .pre-comparison-text,
.picture-comparison-container.text-pos-top .post-comparison-text {
  top: 16px;
}
.picture-comparison-container.text-pos-bottom .pre-comparison-text,
.picture-comparison-container.text-pos-bottom .post-comparison-text {
  bottom: 16px;
}

/* Identify Firefox */
@-moz-document url-prefix() {
  .picture-comparison-container input[type='range'] {
    width: calc(100% + 14px);
    left: -9px;
  }
}

.picture-comparison-container input[type='range']::-webkit-slider-thumb {
  inset-inline-start: calc(var(--comparison-width, 50%) - 9px);
  height: 175px;
  width: 14px;
}

.picture-comparison-container input[type='range']::-moz-range-thumb {
  inset-inline-start: calc(var(--comparison-width, 50%) - 9px);
  height: 175px;
  width: 14px;
}

@media (min-width: 960px) {
  .picture-comparison-container .picture-comparison-wrapper {
    height: 620px !important;
  }
  .picture-comparison-container .pre-comparison-text {
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
    inset-inline-start: 40px;
    max-width: calc(100% - 80px);
  }
  .picture-comparison-container .post-comparison-text {
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
    inset-inline-end: 40px;
    max-width: calc(100% - 80px);
  }
  .picture-comparison-container.text-pos-top .pre-comparison-text,
  .picture-comparison-container.text-pos-top .post-comparison-text {
    top: 40px;
  }
  .picture-comparison-container.text-pos-bottom .pre-comparison-text,
  .picture-comparison-container.text-pos-bottom .post-comparison-text {
    bottom: 40px;
  }
  /* Identify Firefox */
  @-moz-document url-prefix() {
    .picture-comparison-container input[type='range'] {
      width: calc(100% + 28px);
      inset-inline-start: -16px;
      top: 50%;
    }
  }
  .picture-comparison-container input[type='range']::-webkit-slider-thumb {
    inset-inline-start: calc(var(--comparison-width, 50%) - 16px);
    height: 620px;
    width: 28px;
  }

  .picture-comparison-container input[type='range']::-moz-range-thumb {
    inset-inline-start: calc(var(--comparison-width, 50%) - 16px);
    height: 620px;
    width: 28px;
  }
}