/* Base style for a lozenge */
.lozenge {
    border-right: 1px solid #E1E3E3;
    border-left: 1px solid #E1E3E3;
    border-top: 1px solid #E1E3E3;
    border-bottom: 1px solid #E1E3E3;
}

/* Remove left border from all but the first column */
.lozenge + .lozenge {
    border-left: none;
}

/* Re-instate left border for the third child when using col-md-6 (tablet view) */
@media (max-width: 991px) {  /* Bootstrap 'md' breakpoint (992px and below) */
    .lozenge:nth-child(3) {
        border-left: 1px solid #E1E3E3;
        border-top: none;
    }
    .lozenge:nth-child(4) {
        border-top: none;
    }

}

/* Re-instate left border for the third child when using col-12 (tablet view) */
@media (max-width: 767px) {  /* Bootstrap 'md' breakpoint (992px and below) */
    .lozenge:nth-child(2) {
        border-left: 1px solid #E1E3E3;
        border-top: none;
    }
    .lozenge:nth-child(3) {
        border-left: 1px solid #E1E3E3;
        border-top: none;
    }
    .lozenge:nth-child(4) {
        border-left: 1px solid #E1E3E3;
        border-top: none;
    }

}

/* Base style around individual dashboard charts */
.dash-chart {
    border-right: 1px solid #E1E3E3;
    border-left: 1px solid #E1E3E3;
    border-top: 1px solid #E1E3E3;
    border-bottom: 1px solid #E1E3E3;
}

/* Remove left border from all but the first column */
.dash-chart + .dash-chart {
    border-left: none;
}

/* Re-instate left border for the third child when using col-md-6 (tablet view) */
@media (max-width: 991px) {  /* Bootstrap 'md' breakpoint (992px and below) */
    .dash-chart:nth-child(2) {
        border-left: 1px solid #E1E3E3;
        margin-top: 15px;
    }

}


/* Adjust height of dash-chart div to fit on landscape mobile devices */
@media (max-width: 992px) and (orientation: landscape)  {  /* Bootstrap 'md' breakpoint (992px and below) */
    .dash-chart {
        height: 335.188px;
    }
}

/* Adjust height of dash-graph div to fit on landscape mobile devices */
@media (max-width: 992px) and (orientation: landscape) {  /* Bootstrap 'md' breakpoint (992px and below) */
    .dash-graph {
        height: 300px;
    }
}

/* Adjust height of dash-chart div to fit on portrait mobile devices */
@media (max-width: 992px) and (orientation: portrait)  {  /* Bootstrap 'md' breakpoint (992px and below) */
    .dash-chart {
        height: 485.188px;
    }
}

/* Adjust height of dash-graph div to fit on portrait mobile devices */
@media (max-width: 992px) and (orientation: portrait) {  /* Bootstrap 'md' breakpoint (992px and below) */
    .dash-graph {
        height: 450px;
    }
}

/* Base style around individual dashboard charts */
.section-header {
    border-right: 1px solid #E1E3E3;
    border-left: 1px solid #E1E3E3;
    border-top: 1px solid #E1E3E3;
    background-color:  #F5F5F5;
    margin-top: 2.25rem;
}