.charts {
    
    .avenir-next;
    margin-top: 0;
    margin-bottom: 50px;

    h3 {
        .avenir-next-demi;
        font-size: 1.375em;
        letter-spacing: 0;
        margin-top: 4px;
    }

    p {
        font-family: @body-font;
        line-height: 1.375em;
    }


    a.action-arrow {
        font-size: .95em;
        color: @pacific;
        margin-bottom: 2em;
        .avenir-next;
        font-weight: 400;
      }

    .help {
        height: 0;
        i {
            font-size: 15px;
            left: 10px;
            top: 7px;
        }
        i.bump-up {
            top: 0;
        }
    }

    


    label,
    .chart-label {
        .avenir-next-demi;
        display: block;
        font-weight: 600;
        font-size: 0.875em;
        line-height: 1.25em; 
    } 

    .toggle-series-heading {
        margin-top: 30px;
        border-width: 0 !important;
        .column(5);
    }

    .toggle-series-controls {
        margin-top: 30px;
        label {
            margin-right: 20px;
            .avenir-next;
            font-weight: 400;
            font-size: .8em;
            line-height: 2em;
            border: none;
            padding: 0;
            input {
                margin-right: 8px;
            }
        }
    }

    .toggle-series-controls.chart2 {
        .column(7);
        display: inline-block;
        .avenir-next;
        font-weight: 400;
        font-size: .8em;
        line-height: 2em;
        box-sizing: border-box;
        border: solid transparent;
        border-width: 0 15px;
        margin-right: -.25em;
        vertical-align: top;
        input {
            margin-right: 8px;
        }
    }

    .toggle-series-controls:nth-child(1) {
        width: 100%;
    }

    .chart-legend,
    .oblt {
        margin: 0 auto;
    }

    .chart-legend th, .chart-legend td {
        text-align: left;
        font-size: 0.75em;
        line-height: 1.25em;
        width: 180px;
        padding-right: 10px;
        white-space: nowrap;
    }

    .chart-legend th {
        .avenir-next-demi;
        line-height: 1.75em;
    }

    .chart-legend-box {
        display: inline-block;
        width: 40px;
        height: 10px;
        margin-right: 5px;
    }

    .chart-legend-box-purchases {
        background-color: #c9d5e2;
    }
    .chart-legend-box-refinancing {
        background-color: #7796b7;
    }
    .chart-legend-box-improvements {
        background-color: #003071;
    }
    .chart2-legend-box-con {
        background-color: @green_tint;
    }
    .chart2-legend-box-fha {
        background-color: @green_midtone;
    }
    .chart2-legend-box-va {
        background-color: @green;
    }
    .chart2-legend-box-rhs {
        background-color: @teal;
    }

}

@media only screen and ( min-width: 768px ) {

    .charts {
        margin-top: 2em;
        .chart-info {
            .column(5);
        }

        .chart-content {
            .column(7);
            .chart-container {
                padding-left: 12px;
            }
        }
        .chart-legend {
            margin: 0 auto 0 210px;
        }

        .oblt {
            margin: 0 auto 0 150px;
        }
    }

}

// This is to adjust the chart legends on small mobile screens

@media only screen and (max-device-width: 480px) {
    .chart-legend {
        th, td {
            padding-right: 0 !important;
            width: 32% !important;
        }
    }
    .chart-legend-box {
        display: block !important;
        margin-top: 10px;
        width: auto !important;
    }
}