.outer-chart-container
{
    border: 2px solid #4d4d4d;
    padding: 20px 20px 0 20px;
}

.chart-container
{
    width:90%;
    height: 70vh;
}

.stat-boxes-container
{
    overflow: hidden; /*Overfow hidden allows the boxes to fill the rest of the screen. Not too sure why this works though. Could be to do with the way chart.js charts are rendered*/
    margin-left:30px;
    height:70vh;
    box-sizing:border-box;
}

.stat-box
{
    width:100%;
    margin-bottom:10px;
    border-width:3px;
    border-style:solid;
    font-size:20px;
    height:20%;
    box-sizing:border-box;
    display:table;
    padding: 0 5px;
    background-color:#eae7e7;
}

.stat-box-content
{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.stat-box-lbl
{
    display:block;
}

@media screen and (max-width:992px)
{
    .chart-container
    {
        width:100% !important;
    }
    
    .stat-boxes-container
    {   
        clear:both;
        margin:0;
        width:100%;
        height:auto;
        box-sizing:border-box;
    }
    
    .stat-box
    {
        width:50%;
        height:auto;
        float:left;
        padding:10px;
    }
}

@media screen and (max-width:600px)
{
    .stat-box
    {
        width:100%;
        clear:both;
    }
}