.dipi_image_hotspot .dipi-hotspot{
    cursor: pointer;
}

.dipi_image_hotspot .dipi_image_hotspot_child {
	position: absolute !important;
}

.dipi_image_hotspot_child .dipi-hotspot-icon {
	font-size: 24px;
}

.dipi_image_hotspot_child .dipi-tooltip-icon {
    font-size: 40px;
}

.dipi_image_hotspot_child .dipi-hotspot > img {
    border-style: solid;
    width: 100px;
    height: auto;
}

.dipi-tooltip-wrap {
    width: 300px;
    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;
}

.dipi-image-hotspot-child:hover .dipi-tooltip-wrap {
	opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}
.dipi-image-hotspot-child .dipi-tooltip-wrap {
    transition: all 0.3s ease-in-out;
}

.dipi-tooltip-arrow::before {
    border: 15px solid transparent;
    content: '';
    position: absolute;
    display: block;    
    width: 0px;
}

.dipi-tooltip-arrow-left::before {
    border-right: 0;
    border-left: 15px solid #000;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
}

.dipi-tooltip-arrow-right::before {
    border-left: 0;
    border-right: 15px solid #000;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
}

.dipi-tooltip-arrow-top::before {
    left: 50%;
    bottom: 0;
    border-bottom: 0;
    border-top: 15px solid #000;
    transform: translate(-50%, 100%);
}

.dipi-tooltip-arrow-bottom::before {
    left: 50%;
    top: 0;
    border-top: 0;
    border-bottom: 15px solid #000;
    transform: translate(-50%, -100%);
}

.dipi-tooltip-position-left {
    transform: translateY(-50%);
    right: 100%;
    top: 50%;
    margin-right: 20px;
}

.dipi-tooltip-position-right {
    transform: translateY(-50%);
    top: 50%;
    left: 100%;
    margin-left: 20px;
}

.dipi-tooltip-position-top {
    transform: translateX(-50%);
    bottom: 100%;
    left: 50%;
    margin-bottom: 20px;
}

.dipi-tooltip-position-bottom {
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    margin-top: 20px;
}

.dipi-tooltip-image-icon,
.dipi-tooltip-desc,
.dipi-tooltip-button-wrap {
	margin-bottom: 15px !important;
}

.dipi-tooltip-image-icon > img {
    border-style: solid;
    width: 100px;
    height: auto;
}

.dipi-tooltip-button-wrap {
    width: 100%;
}