@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.tooltip.bs-tooltip-top .tooltip-inner {
    background-color: #0056b3; /* Deep blue background */
    color: #fff; /* White text color */
    font-size: 14px; /* Larger text size */
    padding: 10px 15px; /* More padding */
    font-family: 'Roboto', sans-serif; /* Roboto font */
    line-height: 1.5; /* Better line spacing */
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #0056b3; /* Matching arrow color */
}

.tooltip.bs-tooltip-top {
    margin-top: -5px; /* Position adjustment */
}

.tooltip-inner {
    max-width: 400px; /* or whatever you want */
    width: auto;
}