/*******************************************************************************
 * Copyright 2017 IBM Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 ******************************************************************************/

    @viewport {
        width: 320;
    }

    html {
        background-color: #3b4b54;
    }

    body {
        font: 12px Arial;
        fill: white;
    }

    .container-fluid {
        background-color: #3b4b54;
    }

    h1 {
        font: 26px Arial;
        font-weight: bold;
        text-align: center;
        color: white;
    }

    svg {
        margin: 3px;
        border: 1px solid #dfe6eb;
    }

    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6 {
        padding-right: 1px;
        padding-left: 1px;
        padding-top: 0px;
        padding-bottom: 0px
    }

    .cpuChart path,
    .memChart path,
    .flameGraph path,
    .httpThroughPutChart path,
    .httpChart path {
        stroke: #00b4a0;
        stroke-width: 2;
        fill: none;
    }

    path.line1 {
        stroke: #00b4a0;
        stroke-width: 2;
        fill: none;
    }

    path.line2,
    path.processLine {
        stroke: #95d13c;
        stroke-width: 2;
        fill: none;
    }

    path.line3,
    path.httpline {
        stroke: #5aaafa;
        stroke-width: 2;
        fill: none;
    }

    g.xAxis path,
    g.xAxis line,
    g.yAxis path,
    g.yAxis line {
        fill: none;
        stroke: white;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    g.tick line {
        stroke: white;
    }

    .axis2 path,
    .axis2 line {
    fill: none;
    stroke: white;
    stroke-width: 1;
    shape-rendering: crispEdges;
    }

    .lineLabel,
    .lineLabel2,
    .avglatestlabel,
    .minlatestlabel {
        font: 14px Arial;
        text-anchor: left;
    }

    .colourbox1 {
        fill: #00b4a0;
        stroke: #dbe6e9;
        stroke-width: 1px;
    }

    .colourbox2 {
        fill: #95d13c;
        stroke: #dbe6e9;
        stroke-width: 1px;
    }

    .colourbox3 {
        fill: #5aaafa;
        stroke: #dbe6e9;
        stroke-width: 1px;
    }

    .container {
        width: 100%;
    }

    .chart {
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    g.arc {
        fill: #6decd7;
    }

    g.pointer {
        fill: #959f9f;
        stroke: #000000;
    }

    g.label text {
        text-anchor: middle;
        text-align: center;
        font-size: 12px;
    }

    .httpTop5Chart .bar {
        fill: #5aaafa;
    }

    .titlebox {
        fill: #949394;
        stroke: #dbe6e9;
        stroke-width: 1px;
    }