.avia-image-diff-container{
display: flex;
position: relative;
width: 100%;
justify-content: flex-start;
margin: 5px;
box-sizing: content-box;
overflow: hidden;
}
.avia-image-diff-container.avia-align-left{
justify-content: flex-start;
margin-right: 15px;
}
.avia-image-diff-container.avia-align-center{
justify-content: center;
}
.avia-image-diff-container.avia-align-center.avia-builder-el-no-sibling{
margin-bottom: 0;
margin-top: 0;
}
.avia-image-diff-container.avia-align-right{
justify-content: flex-end;
margin-left: 15px;
}
.avia-image-diff-container .av-image-diff-wrapper{
position: relative;
max-width: 100%;
display: block;
overflow: hidden;
}
.avia-image-diff-container.av-active-drag .av-image-diff-wrapper{
cursor: ew-resize; }
.avia-image-diff-container.av-active-drag.av-handle-horizontal .av-image-diff-wrapper{
cursor: ns-resize; }
.avia-image-diff-container:not(.av-active-drag):not(.av-initialise) .av-image-diff-wrapper *{
transition: all 0.7s ease-in-out;
}
.avia-image-diff-container:not(.avia-animate-admin-preview).av-animated-diff-img{
opacity: 0;
}
.avia-image-diff-container .av-image-diff-wrapper .avia_image{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.avia-image-diff-container .av-image-diff-wrapper .av-img-before{
position: relative;
z-index: 20;
}
.avia-image-diff-container .av-image-diff-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 1;
transition: all 0.7s ease-in-out;
}
.avia-image-diff-container .av-image-diff-overlay .av-img-diff-label{
padding: 5px 10px;
border: 1px solid transparent;
border-radius: 3px;
background: rgba(0,0,0,0.3);
color:#fff;
z-index: 30;
transition: all 0.7s ease-in-out;
font-size: 14px;
}
.avia-image-diff-container.btn-style-oval .av-image-diff-overlay .av-img-diff-label{
border-radius: 50%;
}
.avia-image-diff-container.btn-style-square .av-image-diff-overlay .av-img-diff-label{
border-radius: 0;
}
.avia-image-diff-container.btn-on-hover .av-image-diff-overlay .av-img-diff-label{
opacity: 0;
}
.avia-image-diff-container.btn-on-hover .av-image-diff-wrapper:hover .av-img-diff-label{
opacity: 1;
}
.avia-image-diff-container .av-image-diff-overlay .av-img-diff-label:hover,
.avia-image-diff-container.btn-on-hover .av-image-diff-wrapper .av-img-diff-label:hover{
opacity: 0.5;
cursor: pointer;
}
.avia-image-diff-container.btn-always-hide .av-image-diff-overlay{
display: none;
}
.avia-image-diff-container.av-handle-vertical .av-img-diff-label{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.avia-image-diff-container.av-handle-vertical .av-img-diff-label.label-before{
left: 10px;
}
.avia-image-diff-container.av-handle-vertical .av-img-diff-label.label-after{
right: 10px;
}
.avia-image-diff-container.av-handle-horizontal .av-img-diff-label{
position: absolute;
left: 50%;
text-align: center;
transform: translateX(-50%);
}
.avia-image-diff-container.av-handle-horizontal .av-img-diff-label.label-before{
top: 10px;
}
.avia-image-diff-container.av-handle-horizontal .av-img-diff-label.label-after{
bottom: 10px;
}
.avia-image-diff-container.av-handler-at-before .av-img-diff-label.label-before,
.avia-image-diff-container.av-handler-at-after .av-img-diff-label.label-after,
.avia-image-diff-container.av-handler-at-before.btn-on-hover .av-img-diff-label.label-before,
.avia-image-diff-container.av-handler-at-after.btn-on-hover .av-img-diff-label.label-after{
opacity: 0;
transition: all 0.7s ease-in-out;
pointer-events: none;
} .avia-image-diff-container .av-image-diff-handle{
height: 38px;
width: 38px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -19px; margin-top: -22px;
border: 4px solid #fff;
border-radius: 1000px;
box-shadow: 0 0 12px rgba(51,51,51,.5);
z-index: 40;
cursor: ew-resize;
}
#av-admin-preview .avia-image-diff-container.av-handle-vertical .av-image-diff-handle{
left: 0;
}
#av-admin-preview .avia-image-diff-container.av-handle-horizontal .av-image-diff-handle{
top: 0;
}
.avia-image-diff-container.av-handle-filled .av-image-diff-handle{
background-color: #000;
}
.avia-image-diff-container.av-handle-horizontal .av-image-diff-handle{
transform: rotate(90deg);
margin-left: -20px;
margin-top: -19px;
cursor: ns-resize;
}
.avia-image-diff-container.av-handle-oval .av-image-diff-handle{
height: 80px;
margin-top: -43px;
}
.avia-image-diff-container.av-handle-border .av-image-diff-handle{
backdrop-filter: blur(2px);
}
.avia-image-diff-container .av-image-diff-handle:before{
content: " ";
display: block;
position: absolute;
left: 50%;
bottom: 50%;
width: 4px;
height: 9999px;
margin-left: -2px;
margin-bottom: 22px;
background: #fff;
box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
z-index: 30;
}
.avia-image-diff-container.av-handle-oval .av-image-diff-handle:before{
margin-bottom: 43px;
}
.avia-image-diff-container.av-circle-dashed .av-image-diff-handle{
border-style: dashed;
}
.avia-image-diff-container.av-circle-dotted .av-image-diff-handle{
border-style: dotted;
}
.avia-image-diff-container.av-line-dotted .av-image-diff-handle:before,
.avia-image-diff-container.av-line-dotted .av-image-diff-handle:after{
background: transparent;
border-left: 4px dotted #fff;
width: 0;
}
.avia-image-diff-container.av-line-dotted .av-image-diff-handle:before{
margin-bottom: 27px;
}
.avia-image-diff-container.av-handle-oval.av-line-dotted .av-image-diff-handle:before{
margin-bottom: 48px;
}
.avia-image-diff-container .av-image-diff-handle:after{
content: " ";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 4px;
height: 9999px;
margin-left: -2px;
margin-top: 19px;
background: #fff;
box-shadow: 0 3px 0 #ffffff, 0px 0px 12px rgba(51, 51, 51, 0.5);
z-index: 30;
}
.avia-image-diff-container.av-handle-oval .av-image-diff-handle:after{
margin-top: 40px;
}
.avia-image-diff-container.av-handle-arrows .av-image-diff-handle{
border: 0px none;
background: transparent;
box-shadow: unset;
}
.avia-image-diff-container.av-handle-arrows .av-image-diff-handle:before{
margin-bottom: 0;
box-shadow: unset;
}
.avia-image-diff-container.av-handle-arrows .av-image-diff-handle:after{
margin-top: 0;
box-shadow: unset;
} .av-image-diff-handle .av-handle-arrow{
position: absolute;
top: 50%;
margin-top: -6px;
width: 0;
height: 0;
border: 6px inset transparent;
}
.av-image-diff-handle .av-handle-left-arrow{
border-right: 6px solid #fff;
left: 50%;
margin-left: -17px;
}
.av-image-diff-handle .av-handle-right-arrow{
border-left: 6px solid #fff;
right: 50%;
margin-right: -17px;
}
.avia-image-diff-container.av-handle-arrows-expand .av-handle-left-arrow,
.avia-image-diff-container.av-handle-arrows .av-handle-left-arrow{
margin-left: -14px;
}
.avia-image-diff-container.av-handle-arrows-expand .av-handle-right-arrow,
.avia-image-diff-container.av-handle-arrows .av-handle-right-arrow{
margin-right: -14px;
}
.avia-image-diff-container.av-handle-arrows-expand .av-image-diff-wrapper:hover .av-handle-left-arrow{
margin-left: -17px;
}
.avia-image-diff-container.av-handle-arrows-expand .av-image-diff-wrapper:hover .av-handle-right-arrow{
margin-right: -17px;
}