[data-component-id="viz_widgets:image-compare"]{
  width:100%;
  padding:1.5rem;
}
[data-component-id="viz_widgets:image-compare"] .image-compare-container{
  margin-left:auto;
  margin-right:auto;
  margin-top:2rem;
  margin-bottom:2rem;
  width:var(--image-width, 100%);
  border-radius:8px;
}
@media (min-width: 768px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-container:not(.layout-horizontal [data-component-id="viz_widgets:image-compare"] .image-compare-container){
    width:var(--image-width, 80%);
  }
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper{
  width:100%;
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-vertical .content-section{
  margin-bottom:0px;
  width:100%;
  text-align:center;
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal{
  display:flex;
  flex-direction:column;
  align-items:center;
}
@media (min-width: 768px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal{
    flex-direction:row;
    align-items:flex-start;
    gap:2rem;
  }
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .content-section{
  width:100%;
  align-self:center;
}
@media (min-width: 768px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .content-section{
    width:40%;
  }
}
@media (min-width: 768px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .content-section{
    text-align:right;
    padding-right:2rem;
    border-right:1px solid #eee;
  }
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .image-compare-container{
  margin-left:0.5rem;
  width:100%;
}
@media (min-width: 768px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .image-compare-container{
    flex:1 1 0%;
  }
}
[data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .image-compare-container{
  max-width:var(--image-width, 100%);
}
@media (max-width: 767px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-wrapper.layout-horizontal .content-section{
    margin-bottom:1.5rem;
    text-align:center;
  }
}
[data-component-id="viz_widgets:image-compare"] .image-compare-title{
  margin-bottom:0.625rem;
  font-size:1.5rem;
  line-height:2rem;
  font-weight:600;
}
@media (min-width: 640px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-title{
    font-size:1.875rem;
    line-height:2.25rem;
  }
}
@media (min-width: 1024px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-title{
    font-size:2.25rem;
    line-height:2.5rem;
  }
}
.layout-vertical [data-component-id="viz_widgets:image-compare"] .image-compare-title{
  text-align:center;
}
[data-component-id="viz_widgets:image-compare"] .image-compare-description{
  margin-bottom:1rem;
  text-wrap:balance;
  font-size:0.875rem;
  line-height:1.25rem;
  --tw-text-opacity:1;
  color:rgb(107 114 128 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  [data-component-id="viz_widgets:image-compare"] .image-compare-description{
    font-size:1rem;
    line-height:1.5rem;
  }
}
.layout-vertical [data-component-id="viz_widgets:image-compare"] .image-compare-description{
  text-align:center;
}
[data-component-id="viz_widgets:image-compare"] .content-section .image-compare-title{
  margin-top:0px;
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider{
  position:relative;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  overflow:hidden;
  width:100%;
  height:var(--image-height, auto);
  border-radius:4px;
  border:1px solid rgba(0, 0, 0, 0.1);
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider img{
  display:block;
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider .before-image{
  position:absolute;
  inset:0px;
  overflow:hidden;
  clip-path:inset(0 50% 0 0);
  height:100%;
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider .after-image{
  display:block;
  height:100%;
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider .after-image img{
  width:200%;
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider .resizer{
  position:absolute;
  left:50%;
  top:0px;
  z-index:50;
  display:flex;
  height:100%;
  width:0.25rem;
  align-items:center;
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transform:translateX(-50%);
  touch-action:pan-y;
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider .resizer::after{
  position:absolute;
  display:flex;
  height:2.5rem;
  width:2.5rem;
  align-items:flex-end;
  justify-content:center;
  border-radius:9999px;
  border-width:2px;
  --tw-border-opacity:1;
  border-color:rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1));
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 8 4 4-4 4"/><path d="M2 12h20"/><path d="m6 8-4 4 4 4"/></svg>');
  margin-left:-20px;
  background:var(--slider-color, #2f55d4);
}
[data-component-id="viz_widgets:image-compare"] .before-after-slider .resizer.resize{
  cursor:ew-resize;
}