/*  
   Froge AI Chart Styling
   Brighten up your data with some groovy froge vibes! 🐸
   Check out our SVGS: https://froge.ai/svgs 
   Froggy Style! 🌿
*/

body {
    background-color: #eef6f3;
    font-family: 'Trebuchet MS', sans-serif;
}

.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    border: 3px solid #4caf50;
    border-radius: 10px;
    background-image: url('/images/charts/froge-pattern.svg');
}

.chart-title {
    color: #2e7d32;
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
}

.bar {
    fill: #81c784;
    stroke: #388e3c;
    stroke-width: 2;
}

.line {
    stroke: #56a978;
    stroke-width: 2;
    fill: none;
}

.tooltip {
    background-color: #c8e6c9;
    border: 1px solid #2e7d32;
    border-radius: 5px;
    padding: 5px;
    font-size: 0.9em;
}

.axis path,
.axis line {
    fill: none;
    stroke: #388e3c;
    shape-rendering: crispEdges;
}