OwlCyberSecurity - MANAGER

Edit File: hotspots.css

.lakit-hotspot--active .lakit-hotspot--fade-in-out,
.lakit-hotspot--active .lakit-hotspot--overlay,
.lakit-hotspot--overlay:hover {
    opacity: 1
}
@-webkit-keyframes lakit-hotspot-soft-beat {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(1.1)
    }
}
@keyframes lakit-hotspot-soft-beat {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(1.1)
    }
}
@-webkit-keyframes lakit-hotspot-expand {
    from {
        transform: scale(.5);
        opacity: 1
    }
    to {
        transform: scale(1.5);
        opacity: 0
    }
}
@keyframes lakit-hotspot-expand {
    from {
        transform: scale(.5);
        opacity: 1
    }
    to {
        transform: scale(1.5);
        opacity: 0
    }
}
.elementor-widget-lakit-hotspots {
    --hotspot-color: #fff;
    display: flex;
    justify-content: var(--background-align);
    overflow: hidden
}
.elementor-widget-lakit-hotspots .elementor-widget-container {
    width: 100%;
    min-height: var(--container-height);
}
.elementor-widget-lakit-hotspots .elementor-widget-container > img {
    display: block;
    width: 100%;
    height: var(--container-height);
    opacity: var(--opacity, 1);
    object-fit: cover
}
.lakit-hotspot {
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute
}
.lakit-hotspot--active {
    z-index: 2
}
.lakit-hotspot__inner-circle, .lakit-hotspot__outer-circle {
    content: "";
    display: inline-block;
    box-sizing: content-box;
    border-radius: 50%
}
.lakit-hotspot__inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--hotspot-color);
    padding: calc(var(--hotspot-size, 18px) / 2)
}
.lakit-hotspot__outer-circle {
    background-color: var(--hotspot-color);
    padding: var(--hotspot-padding, 4px);
    width: var(--hotspot-size, 18px);
    height: var(--hotspot-size, 18px)
}
.lakit-hotspot--icon .lakit-hotspot__button {
    line-height: 0;
    box-sizing: content-box;
    font-size: var(--hotspot-size, 18px);
    width: var(--hotspot-size, 18px);
    height: var(--hotspot-size, 18px)
}
.lakit-hotspot__icon, .lakit-hotspot__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center
}
.lakit-hotspot__icon svg, .lakit-hotspot__label svg {
    width: var(--hotspot-size, 18px);
    height: auto
}
.lakit-hotspot__button {
    cursor: pointer;
    position: relative;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    color: var(--hotspot-color);
    font-size: var(--hotspot-size, 18px);
    min-width: var(--hotspot-button-width);
    min-height: var(--hotspot-button-height)
}
.lakit-hotspot__button:before {
    z-index: -2;
    content: "";
    width: 100%;
    height: 100%;
    left: -5px;
    top: -5px;
    position: absolute;
    padding: 5px;
    box-sizing: content-box
}
.lakit-hotspot__button svg {
    fill: var(--hotspot-color)
}
.lakit-hotspot:not(.lakit-hotspot--circle) .lakit-hotspot__button {
    min-width: var(--hotspot-min-width);
    min-height: var(--hotspot-min-height);
    background-color: var(--hotspot-box-color);
    padding: var(--hotspot-padding, 4px);
    border-radius: var(--hotspot-border-radius, 3px)
}
.lakit-hotspot:not(.lakit-hotspot--circle) .lakit-hotspot__button:before {
    border-radius: var(--hotspot-border-radius, 3px)
}
.lakit-hotspot:not(.lakit-hotspot--circle) .lakit-hotspot--expand::before {
    background-color: var(--hotspot-box-color);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    opacity: 0;
    animation: 2s infinite lakit-hotspot-expand
}
.lakit-hotspot--overlay {
    opacity: .7;
    transition: opacity .2s
}
.lakit-hotspot--fade-direction, .lakit-hotspot--fade-in-out {
    opacity: 0
}
.lakit-hotspot--soft-beat {
    animation: .7s infinite alternate lakit-hotspot-soft-beat
}
.lakit-hotspot--expand .lakit-hotspot__outer-circle {
    animation: 2s infinite lakit-hotspot-expand
}
.lakit-hotspot--sequenced {
    animation: .3s both fadeIn
}
.lakit-hotspot__direction-mask {
    overflow: hidden;
    position: absolute;
    pointer-events: none
}
.lakit-hotspot__tooltip {
    white-space: var(--white-space, nowrap);
    transition-property: transform, opacity;
    transition-duration: var(--tooltip-transition-duration, 500ms);
    transform-origin: center center;
    position: absolute;
    pointer-events: none;
    color: var(--tooltip-text-color, #000);
    text-align: var(--tooltip-align);
    min-width: var(--tooltip-min-width);
    padding: var(--tooltip-padding, 8px);
    border-radius: var(--tooltip-border-radius);
    background-color: var(--tooltip-color, #fff);
    width: 280px
}
.lakit-hotspot__tooltip p:last-of-type {
    margin-bottom: 0
}
.lakit-hotspot__direction-mask .lakit-hotspot__tooltip {
    box-shadow: none !important;
    position: static
}
.lakit-hotspot.lakit-hotspot--active{
    --hotspot-color: var(--hotspot-active-color, #c36);
    --hotspot-box-color: var(--hotspot-box-active-color, #fff);
}
.lakit-hotspot--active .lakit-hotspot__tooltip {
    pointer-events: visible
}
.lakit-hotspot--fade-grow {
    opacity: 0;
    transform: scale(0)
}
.lakit-hotspot--active .lakit-hotspot--fade-grow {
    opacity: 1;
    transform: scale(1)
}
.lakit-hotspot--override-tooltip-animation-from-top, .lakit-hotspot--tooltip-animation-from-top {
    transform: translate(0, calc(-100% - 1px))
}
.lakit-hotspot--override-tooltip-animation-from-left, .lakit-hotspot--tooltip-animation-from-left {
    transform: translate(calc(-100% - 1px), 0)
}
.lakit-hotspot--override-tooltip-animation-from-right, .lakit-hotspot--tooltip-animation-from-right {
    transform: translate(calc(100% + 1px), 0)
}
.lakit-hotspot--override-tooltip-animation-from-bottom, .lakit-hotspot--tooltip-animation-from-bottom {
    transform: translate(0, calc(100% + 1px))
}
.lakit-hotspot--active .lakit-hotspot--fade-direction, .lakit-hotspot--active .lakit-hotspot--slide-direction {
    transform: translate(0, 0) scale(1);
    opacity: 1
}
.lakit-hotspot--show-tooltip {
    transition: none;
    opacity: 1;
    pointer-events: visible;
    transform: translate(0, 0)
}
.lakit-hotspot__product {
    display: flex;
    width: 100%;
    line-height: 1.2;
    align-items: flex-start;
    position: relative;
}
.lakit-hotspot__tooltip .lakit-hotspot__product img{
    width: var(--tooltip-box-img-width,90px);
    height: var(--tooltip-box-img-height, auto);
    object-fit: cover;
    margin: var(--tooltip-box-img-margin, 0)
}
.lakit-hotspot__product .lakit-hotspot__product_info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    white-space: normal;
    padding: var(--tooltip-inner-padding, 0);
}
.elementor-root-fake {
    height: 0;
    overflow: hidden;
}
.elementor-root-fake .lakit-hotspot {
    position: static
}
.elementor-root-fake .lakit-hotspot__tooltip {
    position: fixed;
    z-index: 2
}
.box-tpl-default{

}
.box-tpl-layout01 .lakit-hotspot__product{
    flex-direction: column;
}
.box-tpl-layout02 .lakit-hotspot__product{
    flex-direction: row-reverse;
}
.lakit-hotspot__tooltip .lakit-hotspot__product .lakit-hotspot--linkoverlay{
    position: absolute;
    opacity: 0;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
}
.elementor-widget-lakit-hotspots .lakit-hotspot .lakit-hotspot__tooltip{
    opacity: 0;
    pointer-events: none;
}