body {
    font-family: Arial, sans-serif;
}
:root {
    --text: #000000;
    --bg: #ffffff;
    --bg-light: #ededed;
    --accent: #808080;
}
/* investment info */
.investment-info {
    /* border: 1px solid var(--text); */
    background-color: var(--bg-light);
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
    margin: 1rem 0;
    color: var(--text);
    display: inline-block;
}
.investment-info h2,
.investment-info label {
    font-size: 1.125rem;
    font-weight: bold;
}
.investment-info h2 span {
    font-weight: normal;
}
#initialInvestment {
    font-size: 1.125rem;
    border: none;
    border-bottom: 2px solid black;
    background: transparent;
    padding: 4px 8px;
    font-family: inherit;
    width: 120px;
    outline: none;
    transition: border-color 0.2s;
  }
  
  #initialInvestment:focus {
    border-bottom-color: #2b6cb0; /* subtle highlight on focus */
  }

/* tooltip */
.tooltip {
    color: var(--bg);
    position: absolute;
    background-color: var(--text);
    padding: 1rem;
    display: none;
    pointer-events: none;
    border-radius: 10px;
}
/* tooltip arrow */
.tooltip::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Adjust this based on arrow direction */
    top: 50%;
    left: -10px;
    width: 0; 
    height: 0; 
    transform: translateY(-50%); 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid var(--text); 
}
svg {
    display: block;
}