body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#chart-container {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}

#wallets-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
#wallets-table th, #wallets-table td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: left;
}
#wallets-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
#wallets-table tr.highlighted {
    background-color: #e6f3ff;
}
#wallets-table tfoot td {
    font-weight: bold;
    background-color: #f2f2f2;
}
#wallets-table .launcher-id {
    font-family: monospace;
    color: gray;
}

#spends-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
#spends-table th, #spends-table td {
    border: 1px solid #ddd;
    padding: 6px 8px; 
    text-align: left;
}
#spends-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
#spends-table tr.highlighted {
    background-color: #e6f3ff;
}
#spends-table tfoot td {
    background-color: #f2f2f2;
}
#spends-table tfoot .total-row {
    font-weight:bold;
}
#spends-table a {
    text-decoration: none;
}

#header {
    text-align: center;
    margin-bottom: 20px;
}
#footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
#logo {
    max-width: 200px; /* Adjust the size as needed */
}
#ninja {
    max-height: 200px; /* Adjust the size as needed */
}
#tagline {
    font-size: 24px;
    font-weight: lighter;
    margin-top: 10px;
}
#resources {
    margin-top: 20px;
}

.copy-icon {
    cursor: pointer;
    font-size: 10px;
    color: gray;
}

img.explorer-icon {
    width: 16px;
    height: 16px;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: rgb(255, 255, 255);
    color: gray;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%; /* Position the tooltip above the icon */
    left: 50%;
    margin-left: -105px;
    opacity: 0;
    transition: opacity 0.3s;
    font-weight: normal;
    font-size: 12px;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
/* Show the tooltip text when hovering over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Button styles */
#toggle-data, #reset-zoom {
    background-color: #4CAF50; /* Green background */
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 5px;
}

#toggle-data:hover, #reset-zoom:hover {
    background-color: #45a049; /* Darker green on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#toggle-data:active, #reset-zoom:active {
    background-color: #3e8e41; /* Even darker green when pressed */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translateY(1px);
}

#toggle-data:focus, #reset-zoom:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5); /* Green glow on focus for accessibility */
}

@media (max-width: 768px) {
    #wallets-table {
        font-size: 12px;
    }
    #wallets-table th, #wallets-table td {
        padding: 8px;
    }
    #spends-table {
        font-size: 12px;
    }
    #spends-table th, #spends-table td {
        padding: 8px;
    }
    img.explorer-icon {
        width: 16px;
        height: 16px;
    }
    #toggle-data {
        font-size: 14px;
        padding: 8px 16px;
    }
}