/* Accordion style */
.yfcharts-section {
    background: #111;
    border: 1px solid #222;
    border-radius: 0;
    margin: 0;
}

.yfcharts-header {
    padding: 14px 16px;
    font-size: 17px;
    font-weight: bold;
    background: #1a1a1a;
    color: #eee;
    border-bottom: 1px solid #222;
    cursor: pointer;
}

.yfcharts-header:hover {
    background: #222;
}

.yfcharts-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0;
}

.yfcharts-body.open {
    padding: 0px;
}

.yfcharts-wrapper canvas {
    width: 100% !important;
    height: 300px !important;
    margin-top: 0;
}

.yfcharts-wrapper {
    width: 80%;
    max-width: 900px;
    margin: 30px auto;
    background: #0d0d0d;
    padding: 25px;
    border-radius: 14px;
    border: 1px solid #222;
}

.yfcharts-wrapper .yfcharts-section:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.yfcharts-wrapper .yfcharts-section:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.yfcharts-title {
    color: #eee;
    text-align: center;
    margin-bottom: 25px;
    font-size: 26px;
    font-weight: 600;
}

.yfcharts-var-values {
    color: #eee;
    margin-top: 10px;
    font-size: 15px;
    text-align: center;
}

.yfcharts-var-values p {
    margin: 4px 0;
}