.span12 {
    width: 100%;
}
.chart {
    min-width: 600px;
    /* correct also resource-usage yAxis positioning if you modify height */
    height: 550px;
}
.chart,
.note,
.filter {
    margin-bottom: 10px;
}
.filter {
    width: 100%;
}
.filter tr {
    border-bottom: 1px solid #EEEEEE;
}
.tabs {
    margin: 20px 0 5px;
    border-bottom: 1px solid #08C;
}
#content .tabs li,
.filter th,
.filter td {
    padding: 5px;
    border: none;
}
.filter th {
    text-align: right;
    background: none;
}
#content .tabs li,
.filter td {
    text-align: center;
}
#content .tabs li,
.filter label {
    display: inline-block;
    padding: 5px 15px 3px;
    border: 1px solid #08C;
}
.filter label {
    font-size: 1.1em;
    line-height: 1.1em;
    margin: 10px 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
#content .tabs li:hover,
.filter input:enabled+label:hover{
    background-color: #08C;
    color: #FFF;
    cursor: pointer;
}
.filter label:first-of-type {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.filter label:last-of-type {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.filter input {
    position: absolute;
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    margin: -1px;
}
#content .tabs li.active,
.filter input:checked + label {
    background-color: #025185;
    color: #FFF;
    border: 1px solid #025185;
    cursor: inherit;
}
#content .tabs li {
    border-bottom: 0;
    border-radius: 10px 0 0 0;
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 10px 0 -1px 6px;
}
#content .vertical-tabs {
    height: 30px;
    margin: 0;
    position: absolute;
    width: 430px;
    -webkit-transform: rotate(-90deg) translate(-440px, -32px);
    -moz-transform: rotate(-90deg) translate(-440px, -32px);
    -ms-transform: rotate(-90deg) translate(-440px, -32px);
    -o-transform: rotate(-90deg) translate(-440px, -32px);
    transform: rotate(-90deg) translate(-440px, -32px);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}
#content .tabs.vertical-tabs li {
    float: right;
    margin: 0 6px 0 0;
}
#content .tabs.vertical-tabs li.active {
    border-bottom: 0px;
}
.filter input[type=checkbox] + label {
    font-size: 10px;
    padding: 5px 2px 3px;
}
.filter input[type=checkbox]:checked + label {
    cursor: pointer;
}
button {
    background-color: #08C;
    border: medium none;
    border-radius: 5px;
    color: #FFF;
    font-size: 11px;
    line-height: 19px;
    padding: 0 5px;
    text-decoration: none;
}
button:hover {
    background-color: #005580;
}
#benchmark-tabs {
    position: relative;
}
#benchmark-info-toggle-button {
    position: absolute;
    bottom: -30px;
    right: 0;
}
#content td.tip {
    color: #888;
    font-size: 12px;
    line-height: 20px;
    vertical-align: bottom;
}

.nav-pills {
    display: flex;
    border-bottom: 0.1em solid #013893;
}

.nav-pills li {
    background-color: #fefefe;
    border-radius: 0.5em 0.5em 0 0;
    border: 0.1em solid #013893;
    border-bottom: 0;
    cursor: pointer;
    display: block;
    margin: 0.5em 0.5em 0 0;
    padding: 0.5em;
}

.nav-pills li:hover,
.nav-pills li:focus,
.nav-pills li.active {
    background-color: #013893;
    color: #fefefe;
}

.nav-pills + section {
    border: 0.1em solid #013893;
}

.chart-wrapper {
    margin-bottom: 3em;
}

.filter td,
.filter th {
    border-bottom: 0.1em solid #ddd;
    vertical-align: top;
}


.filter td:first-child,
.filter th:first-child {
    width: 15%;
    min-width: 15em;
}

.filter input:disabled+label {
    background-color: #bbb;
    color: #555
}