.dmpro_image_hotspot {
position:relative;
z-index:16777209;
}
.dmpro_image_hotspot .dmpro-hotspot{
cursor: pointer;
display:inline-block;
overflow:visible;
}
.dmpro_image_hotspot .dmpro_image_hotspot_child {
position: absolute !important;
}
.dmpro_image_hotspot_child .dmpro-hotspot-icon {
font-size: 24px;
}
.dmpro_image_hotspot_child .dmpro-tooltip-icon {
font-size: 40px;
}
.dmpro_image_hotspot_child .dmpro-hotspot-icon .divi-icon,
.dmpro_image_hotspot_child .dmpro-tooltip-icon .divi-icon {
content: attr(data-icon);
}
.dmpro_image_hotspot_child .dmpro-hotspot > img {
border-style: solid;
width: 100px;
height: auto;
}
.dmpro-tooltip-wrap {
width: 300px;
height: -moz-fit-content;
opacity: 0;
padding: 10px;
visibility: hidden;
background: #fff;
z-index: 16777210;
border-style: solid;
transition: opacity 0.2s ease-in-out;
overflow: visible !important;
display:none;
}
.dmpro-tooltip-wrap[data-show] {
display:block;
visibility: visible;
}
.dmpro-tooltip-wrap.dmpro-tooltip-opacity {
opacity:1;
}
.dmpro-tooltip-closebutton {
position: absolute;
top: 9px;
right: 9px;
display:none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
width:20px;
height:20px;
padding:0;
border: 0;
border-radius: .25rem;
opacity: .5;
cursor:pointer;
z-index:2;
}
.dmpro-tooltip-closebutton svg {
width:20px;
height:20px;
color: #000;
}
.dmpro-tooltip-wrap [data-popper-arrow],
.dmpro-tooltip-wrap [data-popper-arrow]:before {
position: absolute;
width: 15px;
height: 15px;
z-index:-1;
}
.dmpro-tooltip-wrap [data-popper-arrow]:before {
top:0;
left:0;
content: '';
transition: transform 0.2s ease-out 0s, visibility 0.2s ease-out 0s;
visibility: visible;
transform: translateX(0px) rotate(45deg);
transform-origin: center center 0px;
}
.dmpro-tooltip-wrap[data-popper-placement^='top'] > [data-popper-arrow] {
bottom: -7px;
}
.dmpro-tooltip-wrap[data-popper-placement^='bottom'] > [data-popper-arrow] {
top: -7px;
}
.dmpro-tooltip-wrap[data-popper-placement^='left'] > [data-popper-arrow] {
right: -7px;
}
.dmpro-tooltip-wrap[data-popper-placement^='right'] > [data-popper-arrow] {
left: -7px;
}
.dmpro-tooltip-content {
z-index: 1;
position: relative;
width: auto;
height: 100%;
background: inherit;
}
.dmpro-image-hotspot-child .dmpro-tooltip-wrap {
transition: opacity 0.3s ease-in-out;
}
.dmpro-tooltip-position-left {
transform: translateY(-50%);
right: 100%;
top: 50%;
margin-right: 20px;
}
.dmpro-tooltip-position-right {
transform: translateY(-50%);
top: 50%;
left: 100%;
margin-left: 20px;
}
.dmpro-tooltip-position-top {
transform: translateX(-50%);
bottom: 100%;
left: 50%;
margin-bottom: 20px;
}
.dmpro-tooltip-position-bottom {
transform: translateX(-50%);
top: 100%;
left: 50%;
margin-top: 20px;
}
.dmpro-tooltip-image-icon,
.dmpro-tooltip-desc,
.dmpro-tooltip-button-wrap {
margin-bottom: 15px !important;
}
.dmpro-tooltip-image-icon > img {
border-style: solid;
width: 100px;
height: auto;
}
.dmpro-tooltip-button-wrap {
width: 100%;
}
@media (max-width: 768px) {
.dmpro-tooltip-position-right {
transform: translateX(-50%);
top: 100%;
left: 0;
margin-top: 20px;
}
.dmpro-tooltip-position-left {
transform: translateX(-50%);
top: 100%;
left: 50%;
margin-top: 20px;
}
.dmpro-tooltip-arrow-right:before, 
.dmpro-tooltip-arrow-left:before,
.dmpro-tooltip-arrow-top:before, 
.dmpro-tooltip-arrow-bottom:before,
.dmpro-tooltip-arrow::before {  
display: none;  
}
}.dmpro-image-hotspot > img {
width: 100%;
display: block;
}
@media all and (max-width: 767px){
.dmpro-image-hotspot {
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.dmpro_image_hotspot_child .dmpro-tooltip-wrap.dmpro-tooltip-wrap {
max-width: calc(100vw - 20px);
position: fixed;
transform: translateY(-40%) translateX(-50%);
margin: 0;
left: 50%;
}
}