#calculator {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}
#calculator .inner-container {
    display:block;
    padding:16px;
}

.pulseMarker {
    animation: pulseAnimation 6s infinite; /* Extend the duration */
}

@keyframes pulseAnimation {
    0%, 20% { /* Complete the pulse quickly */
        transform: scale(1);
        opacity: 1;
    }
    10% { /* Peak of the pulse */
        transform: scale(1.5); /* Adjust size increase if needed */
        opacity: 0.5;
    }
    20%, 100% { /* Extended pause */
        transform: scale(1);
        opacity: 1;
    }
}

.progress-container {
    width: 100%; /* Full width */
    background-color: #ddd; /* Light grey background */
    border-radius: 10px; /* Rounded corners for the container */
    padding: 3px; /* Padding around the progress bar */
    position: relative; /* Needed for absolute positioning of the tooltip */
    max-width: 600px; /* Max width of the outer container */
    margin: 20px auto; /* Centering the container */
}

.progress-bar {
    background-color: #007bff; /* Bootstrap primary blue */
    height: 20px; /* Height of the progress bar */
    border-radius: 10px; /* Rounded corners for the progress bar */
    position: relative; /* Relative positioning for the tooltip */
}


.progress-tooltip {
    position: absolute; /* Absolute position */
    top: -35px; /* Position above the progress bar */
    right: 0; /* Align to the right */
    background-color: #333; /* Tooltip background */
    color: #fff; /* Tooltip text color */
    padding: 5px 10px; /* Padding inside the tooltip */
    border-radius: 5px; /* Rounded corners for the tooltip */
    white-space: nowrap; /* Ensure the tooltip text does not wrap */
    font-size: 13px; /* Smaller text size for tooltip */
    display: flex; /* Use flex for centering */
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Shadow for the tooltip */
}

/* Triangle pointing down from the tooltip */
.progress-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}