/*
Forked from the example code on https://www.w3schools.com/howto/howto_js_image_comparison.asp
*/

.img-comp-container * {box-sizing: border-box;}
.img-comp-container {
	position: relative;
	height: auto;
	max-width: min-content;
}

.img-comp-img {
	position: absolute;
	width: auto;
	height: auto;
	overflow: hidden;
}
.img-comp-img:not(.img-comp-overlay) {position: relative;}
.img-comp-img.img-comp-overlay {top: 0;}

.img-comp-img img {
	display: block;
	vertical-align: middle;
}

.img-comp-slider {
	position: absolute;
	z-index: 9;
	cursor: ew-resize;
	/*set the appearance of the slider:*/
	width: 40px;
	height: 40px;
	background-color: #2196F3;
	opacity: 0.7;
	border-radius: 50%;
}
.img-comp-slider:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	filter: invert(1);
	background-image: url(/resources-ucp/mw143/dist/svg/wds-icons-preformat-small.svg);
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}