* {box-sizing: border-box;}  

 

.img-comp-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* object-fit: cover; */
  margin-inline: auto !important;
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
  margin-inline: auto !important; 
}

.img-divider-horizontal{  
  border-right: 2px solid #ffffff;  
}
.img-divider-vertical{  
  border-bottom: 2px solid #ffffff;  
}

.img-comp-container img{
  max-width: none !important;
  
}

.img-comp-img img {
  display: block; 
  margin-inline: auto !important; 
 
}

.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* Tetap transparan di tengah */
  border: none; /* Hilangkan border sebenarnya */
  box-shadow: 0 0 0 2px #ffffff;
}
 
.img-comp-slider i {
  font-size: 14px;
  color: #ffffff;
  padding: 2px; 

}

.img-comp-slider.vertical {
  position: absolute;
  z-index: 9;
  cursor: ns-resize;
  width: 40px; 
  height: 40px; 
  background-color: #ffffff;
  display: flex;
  display: flex;
  flex-direction: column;  
  align-items: center;
  justify-content: space-between; 
  /* transform: translateX(-50%); */
  transform: translatex(-50%, -50%);
}

.img-comp-slider.vertical i {
  font-size: 14px;
  color: #ffffff;
  padding: 2px; 

}


  /* caption css style */
  /* caption left */
  .caption-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
  }
  
  .caption-top-left {
    position: absolute;
    top: 8px;
    left: 16px;
  }

  .caption-center-left {
    position: absolute;
    top: 50%;
    left: 16px; 
  }
/* caption left */

/* caption right */
  .caption-top-right {
    position: absolute;
    top: 8px;
    right: 16px;
  }
  
  .caption-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }

  .caption-center-right {
    position: absolute;
    top: 50%;
    right: 16px; 
  }
  /* caption right */
  

  /* filter image */
  .filter-blur img {
    filter: blur(5px);
}

.filter-greyscale img {
    filter: grayscale(100%);
}

.filter-contrast img {
    filter: contrast(150%);
}

.filter-brightness img {
    filter: brightness(120%);
}