.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;
}



.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;
}
.tooltip-div:hover #fid_tooltip_text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
    margin-top: -50px;
}


/* .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;
}

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

.tooltip-div:hover #txt-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 #down_date_tooltip_text {
    visibility: visible;
    box-shadow: 2px 4px 4px 2px #888888;
}

.tooltip-div:hover #home_image_tooltip_text {
    visibility: visible;
    margin-left: -324px;
    margin-top: -80px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}

.tooltip-div:hover #download_image_tooltip_text {
    visibility: visible;
    margin-left: -324px;
    margin-top: -40px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
.tooltip-div:hover #csv-download-image-tooltip-text {
    visibility: visible;
    margin-left: -260px;
    margin-top: -60px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
.tooltip-div:hover #txt-download-image-tooltip-text {
    visibility: visible;
    margin-left: -260px;
    margin-top: -60px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
.tooltip-div:hover #user_tooltip_text {
    visibility: visible;
    margin-left: -290px;
    margin-top: -40px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}
.tooltip-div:hover #logout_tooltip_text {
    visibility: visible;
    margin-left: -290px;
    margin-top: -40px;
    box-shadow: 2px 4px 4px 2px #888888;
   
}

/* ----------------------------------------- */
.tooltip-div:focus-within #po_tooltip_text {
    visibility: hidden;
}
.tooltip-div:focus-within #fid_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;
}