.container-freight {
    width: 100% !important;
}
.ocean {
    width: 70%;
}
/* Tooltip container */
.tooltip-item {
    position: relative;
    display: block;
    cursor: help; /* Change cursor to pointer */
}

.ft {
    background: black;
    padding: 3px;
    color: white;
    position: flex;
}

/* Tooltip text */
.tooltip-item .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -125px; /* Half of the tooltip width */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip text when hovering over the tooltip container */
.tooltip-item:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    width: 80% !important;
}

/* Tooltip arrow */
.tooltip-item .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.container-tooltip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    padding: 10px;
    width: 70%;
}

@media screen and (max-width: 768px) {
    .ocean {
        width: 95%;
    }
    .container-tooltip {
        grid-template-columns: repeat(2, 150px);
        gap: 0px !important;
        width: 100% !important;
        padding: 0px;   
        
       display: grid;
    }
    .tooltip-item:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        width: 100% !important;
        margin-left: -58px !important;
    }
}