@keyframes bubble-bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

.help-bubble {
    position: absolute;
    background-color: #005986;
    color: white;
    padding: 10px 10px;
    border-radius: 8px;
    border: 2px solid lightgray;
    font-family: Lato;
    font-size: 14px;
    max-width: 350px;
    min-width: 270px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    z-index: 2000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
    text-align: center;
    cursor: pointer;
    bottom: 30px;
    display: inline-block;
}

.help-bubble.bounce {
    animation: bubble-bounce 1s ease 0s 3;
}

.help-bubble.bottom::after, .help-bubble.bottom::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
}

.help-bubble.bottom::after {
    bottom: -15px;
    border-width: 16px 10px 0;
    border-color: #005986 transparent transparent transparent;
}

.help-bubble.bottom::before {
    bottom: -18px;
    border-width: 18px 12px 0;
    border-color: lightgray transparent transparent transparent;
    z-index: -1;
}

.help-bubble.top::after, .help-bubble.top::before {
    content: "";
    position: absolute;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-style: solid;
}

.help-bubble.top::after {
    top: -15px;
    border-width: 15px 15px 0;
    border-color: #005986 transparent transparent transparent;
}

.help-bubble.top::before {
    top: -18px;
    border-width: 18px 18px 0;
    border-color: lightgray transparent transparent transparent;
    z-index: -1;
}

.help-bubble.right::after {
    left: 50%;
    transform: translateX(-50%);
}

.help-bubble.left::after {
    left: 50%;
    transform: translateX(-50%);
}