.dmpro_image_hotspot .dmpro-hotspot{
cursor: pointer;
}
.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 > img {
border-style: solid;
width: 100px;
height: auto;
}
.dmpro-tooltip-wrap {
width: 300px;
height: fit-content;
height: -moz-fit-content;
opacity: 0;
padding: 10px;
visibility: hidden;
background: #fff;
position: absolute;
display: inline-block;
transform: translate(-50%);
z-index: 99999999999;
border-style: solid;
transition: all 0.3s ease-in-out;
overflow: visible !important;
}
.dmpro-image-hotspot-child:hover .dmpro-tooltip-wrap {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease-in-out;
}
.dmpro-image-hotspot-child .dmpro-tooltip-wrap {
transition: all 0.3s ease-in-out;
}
.dmpro-tooltip-arrow::before {
border: 15px solid transparent;
content: '';
position: absolute;
display: block;    
width: 0px;
}
.dmpro-tooltip-arrow-left::before {
border-right: 0;
border-left: 15px solid #000;
right: 0;
top: 50%;
transform: translate(100%, -50%);
}
.dmpro-tooltip-arrow-right::before {
border-left: 0;
border-right: 15px solid #000;
left: 0;
top: 50%;
transform: translate(-100%, -50%);
}
.dmpro-tooltip-arrow-top::before {
left: 50%;
bottom: 0;
border-bottom: 0;
border-top: 15px solid #000;
transform: translate(-50%, 100%);
}
.dmpro-tooltip-arrow-bottom::before {
left: 50%;
top: 0;
border-top: 0;
border-bottom: 15px solid #000;
transform: translate(-50%, -100%);
}
.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%;
}
}