.label-horizontal-top .template-style01.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style01.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style01.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style01.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style02.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style02.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style02.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style02.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style03.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style03.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style03.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style03.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style04.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style04.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style04.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style04.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style05.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style05.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style05.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style05.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style06.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style06.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style06.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style06.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style07.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style07.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-top .template-style07.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-top .template-style07.coca-image-compare-diagonal .coca-image-compare-before-label::before {
top: 10px;
margin-top: 0;
transform: translateY(0);
}
.label-horizontal-middle .template-style01.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style01.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style01.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style01.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style02.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style02.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style02.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style02.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style03.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style03.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style03.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style03.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style04.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style04.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style04.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style04.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style05.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style05.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style05.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style05.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style06.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style06.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style06.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style06.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style07.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style07.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-middle .template-style07.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-middle .template-style07.coca-image-compare-diagonal .coca-image-compare-before-label::before {
top: 50%;
}
.label-horizontal-bottom .template-style01.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style01.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style01.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style01.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style02.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style02.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style02.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style02.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style03.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style03.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style03.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style03.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style04.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style04.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style04.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style04.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style05.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style05.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style05.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style05.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style06.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style06.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style06.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style06.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style07.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style07.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.label-horizontal-bottom .template-style07.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.label-horizontal-bottom .template-style07.coca-image-compare-diagonal .coca-image-compare-before-label::before {
top: auto;
margin-top: 0;
} .label-vertical-left .template-style01.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style01.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-left .template-style02.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style02.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-left .template-style03.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style03.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-left .template-style04.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style04.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-left .template-style05.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style05.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-left .template-style06.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style06.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-left .template-style07.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-left .template-style07.coca-image-compare-vertical .coca-image-compare-before-label::before {
left: 10px;
}
.label-vertical-middle .template-style01.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-middle .template-style02.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-middle .template-style03.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-middle .template-style04.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-middle .template-style05.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-middle .template-style06.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-middle .template-style07.coca-image-compare-vertical .coca-image-compare-after-label::before {
bottom: 10px;
}
.label-vertical-middle .template-style01.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-middle .template-style02.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-middle .template-style03.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-middle .template-style04.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-middle .template-style05.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-middle .template-style06.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-middle .template-style07.coca-image-compare-vertical .coca-image-compare-before-label::before {
top: 10px;
}
.label-vertical-right .template-style01.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style01.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-right .template-style02.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style02.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-right .template-style03.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style03.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-right .template-style04.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style04.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-right .template-style05.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style05.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-right .template-style06.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style06.coca-image-compare-vertical .coca-image-compare-before-label::before,
.label-vertical-right .template-style07.coca-image-compare-vertical .coca-image-compare-after-label::before,
.label-vertical-right .template-style07.coca-image-compare-vertical .coca-image-compare-before-label::before {
right: 10px;
margin-right: 0;
transform: translateX(0);
}
.coca-bais-shortcode {
display: block;
position: relative;
}
.coca-bais-shortcode .coca-image-compare-left-arrow,
.coca-bais-shortcode .coca-image-compare-right-arrow,
.coca-bais-shortcode .coca-image-compare-down-arrow,
.coca-bais-shortcode .coca-image-compare-up-arrow {
transition: 300ms ease-in-out;
}
.coca-bais-shortcode .template-style01.coca-image-compare-wrapper.coca-image-compare-horizontal .coca-image-compare-handle, .coca-bais-shortcode .template-style01.coca-image-compare-wrapper.coca-image-compare-diagonal .coca-image-compare-handle, .coca-bais-shortcode .template-style01.coca-image-compare-wrapper.coca-image-compare-vertical .coca-image-compare-handle {
--coca-image-compare-handle-triangle-position: 5px;
}
.coca-bais-shortcode .template-style01.coca-image-compare-horizontal .coca-image-compare-handle {
--coca-image-compare-handle-radius: 0;
transform: rotate(45deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-horizontal .coca-image-compare-handle::before, .coca-bais-shortcode .template-style01.coca-image-compare-horizontal .coca-image-compare-handle::after {
width: 0 !important;
}
.coca-bais-shortcode .template-style01.coca-image-compare-horizontal .coca-image-compare-left-arrow {
top: 78%;
left: 49%;
transform: rotate(316deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-horizontal .coca-image-compare-right-arrow {
top: 22%;
right: 51%;
transform: rotate(316deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-diagonal:not(.handle-bottom) .coca-image-compare-handle {
--coca-image-compare-handle-radius: 0;
transform: rotate(calc(-1 * var(--bais-diagonal-angle, -45deg)));
}
.coca-bais-shortcode .template-style01.coca-image-compare-diagonal .coca-image-compare-left-arrow {
top: 78%;
left: 49%;
transform: rotate(316deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-diagonal .coca-image-compare-right-arrow {
top: 22%;
right: 51%;
transform: rotate(316deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-before-label::before {
margin-top: 0;
}
.coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-handle {
border-radius: 0;
transform: rotate(45deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-handle::before, .coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-handle::after {
width: 0 !important;
}
.coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-down-arrow {
bottom: 105%;
left: 25%;
transform: rotate(136deg);
}
.coca-bais-shortcode .template-style01.coca-image-compare-vertical .coca-image-compare-up-arrow {
top: 105%;
left: 75%;
transform: rotate(136deg);
}
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-vertical .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-vertical .coca-image-compare-before-label::before {
padding: 12px 20px;
margin-top: 0;
margin-left: 0;
line-height: 1.5;
}
.coca-bais-shortcode .template-style02.coca-image-compare-horizontal .coca-image-compare-before-label::before, .coca-bais-shortcode .template-style02.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-diagonal .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-horizontal .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-diagonal .coca-image-compare-before-label::before {
left: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.coca-bais-shortcode .template-style02.coca-image-compare-horizontal .coca-image-compare-after-label::before, .coca-bais-shortcode .template-style02.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-diagonal .coca-image-compare-after-label::before {
right: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-vertical .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style03.coca-image-compare-vertical .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-before-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-after-label::before {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.coca-bais-shortcode .template-style02.coca-image-compare-horizontal .coca-image-compare-left-arrow, .coca-bais-shortcode .template-style02.coca-image-compare-diagonal .coca-image-compare-left-arrow,
.coca-bais-shortcode .template-style05.coca-image-compare-horizontal .coca-image-compare-left-arrow,
.coca-bais-shortcode .template-style05.coca-image-compare-diagonal .coca-image-compare-left-arrow {
border-right-color: #737373;
}
.coca-bais-shortcode .template-style02.coca-image-compare-horizontal .coca-image-compare-right-arrow, .coca-bais-shortcode .template-style02.coca-image-compare-diagonal .coca-image-compare-right-arrow,
.coca-bais-shortcode .template-style05.coca-image-compare-horizontal .coca-image-compare-right-arrow,
.coca-bais-shortcode .template-style05.coca-image-compare-diagonal .coca-image-compare-right-arrow {
border-left-color: #737373;
}
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-down-arrow,
.coca-bais-shortcode .template-style05.coca-image-compare-vertical .coca-image-compare-down-arrow {
border-top-color: #737373;
}
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-up-arrow,
.coca-bais-shortcode .template-style05.coca-image-compare-vertical .coca-image-compare-up-arrow {
border-bottom-color: #737373;
}
.coca-bais-shortcode .template-style02.coca-image-compare-horizontal .coca-image-compare-handle, .coca-bais-shortcode .template-style02.coca-image-compare-diagonal .coca-image-compare-handle {
--coca-image-compare-handle-circle-width: 24px;
--coca-image-compare-handle-circle-height: 120px;
--coca-image-compare-handle-stroke: 1px;
background: #fff;
}
.coca-bais-shortcode .template-style02.coca-image-compare-vertical .coca-image-compare-handle {
--coca-image-compare-handle-circle-width: 120px;
--coca-image-compare-handle-circle-height: 24px;
--coca-image-compare-handle-stroke: 1px;
background: #fff;
}
.coca-bais-shortcode .template-style03 .coca-image-compare-handle {
--coca-image-compare-handle-circle-width: 85px;
--coca-image-compare-handle-circle-height: 85px;
}
.coca-bais-shortcode .template-style04 .coca-image-compare-handle {
border: none;
box-shadow: none;
}
.coca-bais-shortcode .template-style04.coca-image-compare-horizontal .coca-image-compare-handle::before, .coca-bais-shortcode .template-style04.coca-image-compare-diagonal .coca-image-compare-handle::before {
margin-bottom: 0;
margin-left: 0px;
}
.coca-bais-shortcode .template-style04.coca-image-compare-horizontal .coca-image-compare-handle::after, .coca-bais-shortcode .template-style04.coca-image-compare-diagonal .coca-image-compare-handle::after {
margin-top: 0;
margin-left: 0px;
}
.coca-bais-shortcode .template-style04.coca-image-compare-horizontal .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-horizontal .coca-image-compare-before-label::before, .coca-bais-shortcode .template-style04.coca-image-compare-diagonal .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-diagonal .coca-image-compare-before-label::before {
padding: 12px 20px;
margin-top: 0;
line-height: 1.5;
}
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-handle::before {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-handle::after {
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-handle .coca-image-compare-up-arrow {
margin-top: -17px;
}
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-after-label::before,
.coca-bais-shortcode .template-style04.coca-image-compare-vertical .coca-image-compare-before-label::before {
padding: 12px 20px;
margin-top: 0;
margin-left: 0;
line-height: 1.5;
border-radius: 0 5px 5px 0;
}
.coca-bais-shortcode .template-style05 .coca-image-compare-handle {
--coca-image-compare-handle-stroke: 3px;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-color: var(--coca-image-compare-handle-color, rgba(255, 255, 255, 0.53));
border-style: solid;
}
.coca-bais-shortcode .template-style05.coca-image-compare-horizontal:not(.handle-bottom) .coca-image-compare-handle:before, .coca-bais-shortcode .template-style05.coca-image-compare-diagonal:not(.handle-bottom) .coca-image-compare-handle:before {
margin-bottom: calc(var(--coca-image-compare-handle-circle-height) / 2 - 1px);
}
.coca-bais-shortcode .template-style05.coca-image-compare-horizontal:not(.handle-bottom) .coca-image-compare-handle:after, .coca-bais-shortcode .template-style05.coca-image-compare-diagonal:not(.handle-bottom) .coca-image-compare-handle:after {
margin-top: calc(var(--coca-image-compare-handle-circle-height) / 2 - 1px);
}
.coca-bais-shortcode .template-style05.coca-image-compare-vertical:not(.handle-bottom) .coca-image-compare-handle:before {
margin-left: calc(var(--coca-image-compare-handle-circle-width) / 2 - 1px);
}
.coca-bais-shortcode .template-style05.coca-image-compare-vertical:not(.handle-bottom) .coca-image-compare-handle:after {
margin-right: calc(var(--coca-image-compare-handle-circle-width) / 2 - 1px);
}
.coca-bais-shortcode .template-style06.coca-image-compare-horizontal .coca-image-compare-handle, .coca-bais-shortcode .template-style06.coca-image-compare-diagonal .coca-image-compare-handle {
--coca-image-compare-handle-circle-height: 70px;
--coca-image-compare-handle-circle-width: 15px;
--coca-image-compare-handle-triangle-position: 15px;
}
.coca-bais-shortcode .template-style06.coca-image-compare-vertical .coca-image-compare-handle {
--coca-image-compare-handle-circle-width: 70px;
--coca-image-compare-handle-circle-height: 15px;
--coca-image-compare-handle-triangle-position: 15px;
}
.coca-bais-shortcode .popup-button {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 999;
padding: 5px;
line-height: 0;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
}
.coca-bais-shortcode .popup-button.bottom-left {
right: auto;
left: 10px;
}
.coca-bais-shortcode .popup-button.top-left {
top: 10px;
right: auto;
bottom: auto;
left: 10px;
}
.coca-bais-shortcode .popup-button.top-right {
top: 10px;
right: 10px;
bottom: auto;
}
.coca-bais-shortcode .popup-button:hover, .coca-bais-shortcode .popup-button:focus, .coca-bais-shortcode .popup-button:active {
background: rgb(234, 84, 0);
}
.coca-bais-shortcode .popup-button:hover svg, .coca-bais-shortcode .popup-button:focus svg, .coca-bais-shortcode .popup-button:active svg {
color: #fff;
}
.coca-bais-shortcode .popup-button, .coca-bais-shortcode .popup-button svg {
transition: 300ms ease-in-out;
}
.coca-bais-shortcode .popup-button svg {
pointer-events: none;
}
.coca-bais-shortcode .shortcode-container,
.coca-bais-shortcode .coca-image-compare-wrapper,
.coca-bais-shortcode .coca-bais-container {
position: relative;
}
.coca-bais-shortcode .coca-bais-container {
display: block;
opacity: 1 !important;
}
.coca-bais-shortcode .coca-bais-container:not(.coca-image-compare-container) img:not(:first-child) {
display: none;
}
.coca-bais-shortcode .coca-bais-container img {
border: none;
border-radius: 0;
box-shadow: none;
}
.coca-bais-shortcode .coca-bais-container .coca-image-compare-after-label:before,
.coca-bais-shortcode .coca-bais-container .coca-image-compare-before-label:before {
min-width: fit-content;
}
.coca-bais-shortcode .coca-bais-caption-wrapper {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 10px;
}
.coca-bais-shortcode .coca-bais-caption-wrapper h3 {
font-size: 16px;
flex: 1;
text-align: center;
box-sizing: border-box;
padding: 10px;
overflow: hidden;
}
.coca-bais-shortcode .components-notice {
display: flex;
align-items: center;
padding: 8px 12px;
margin: 5px 0 2px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
background-color: #fff;
border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}
.coca-bais-shortcode .components-notice.is-warning {
background-color: #fef8ee;
border-left-color: #f0b849;
}
.coca-bais-shortcode .components-notice .components-notice__content {
flex-grow: 1;
margin: 4px 25px 4px 0;
}