:root {
    --sidebar-width: 200px;
    --content-padding: 20px;
}

body {
    font-family: Arial, sans-serif;
    margin: 50px;
}

label, input {
    display: block;
    margin-bottom: 10px;
}

input {
    width: 100px;
}

.result {
    margin-top: 20px;
}

.odds-container {
    display: flex;
    gap: 20px;
}

.odds-input {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none;
}

#tooltip {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%; /* Position the tooltip directly below the button */
    left: 50%;
    transform: translateX(-50%); /* Center the tooltip horizontally */
    font-size: 14px;
    font-style: italic; /* Italicize the text in the tooltip */
    white-space: nowrap; /* Display the text on a single line */
}

#tooltip:hover {
    display: block; /* Ensure the tooltip stays visible when hovering over it */
}

.icon-button {
    position: relative;
    display: inline-block;
}

@media (max-width: 440px) {
    .odds-container {
        flex-wrap: wrap;
    }

    .odds-input {
        flex-basis: 100%;
        /* margin-bottom: 10px; */
    }
}