.tooltip-div {
    position: relative;
    display: inline-block;
    
}

.img-tooltip-div {
    /* position: relative; */
    float: right;
    width: 45px;
    display: inline-block;
    
}

.tooltip-div .tooltiptext {
    visibility: hidden;
    width: 374px;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 3px;
    padding: 2px 0;
    margin-top: -30px;
    margin-left: 0px;
    border: solid 1px rgba(0, 0, 0, 0.367);
    opacity: 0.92;
    font-family: cursive;
    font-size: 14px;
    

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}



.img-tooltip-div .tooltiptext {
    visibility: hidden;
    width: 374px;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 3px;
    padding: 2px;
    margin-top: -40px;
    margin-left: -80px;
    border: solid 1px rgba(0, 0, 0, 0.367);
    opacity: 0.92;
    font-family: cursive;
    font-size: 14px;
    position: absolute;
    z-index: 1;
}
.tooltip-div:hover #po-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}


.img-tooltip-div:hover #home-image-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.img-tooltip-div:hover #download-image-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.img-tooltip-div:hover #csv-download-image-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.tooltip-div:hover #unit-cost-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.tooltip-div:hover #other-cost-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.tooltip-div:hover #own-date-tooltip-text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.img-tooltip-div:hover #home-image-tooltip-text {
    visibility: visible;
    margin-left: -324px;
    margin-top: -80px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
.img-tooltip-div:hover #download-image-tooltip-text {
    visibility: visible;
    margin-left: -260px;
    margin-top: -80px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
.img-tooltip-div:hover #csv-download-image-tooltip-text {
    visibility: visible;
    margin-left: -260px;
    margin-top: -80px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
/* ----------------------------------------- */
.tooltip-div:focus-within #po-tooltip-text {
    visibility: hidden;
}

.tooltip-div:focus-within #unit-cost-tooltip-text {
    visibility: hidden;
}

.tooltip-div:focus-within #other-cost-tooltip-text {
    visibility: hidden;
}

.tooltip-div:focus-within #own-date-tooltip-text {
    visibility: hidden;
}