#chart-dashboard .chart-card
{
    position: relative;
}

#chart-dashboard .chart-card #main-card
{
    position: relative;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

#chart-dashboard .chart-card #main-card #hkcd-logo
{
    display: block;

    margin: auto;
    padding-top: 2%;
}

#chart-dashboard .chart-card #top-right-section
{
    position: relative;
}

#chart-dashboard .chart-card #top-right-section .card
{
    position: relative;
    top: 0;
}

@media only screen and (max-width: 600px)
{
    #chart-dashboard .chart-card
    {
        height: 400px;
    }
    #chart-dashboard .chart-card .card-chart-area
    {
        top: 0;

        width: 100%;
        height: 200px;
    }
    #chart-dashboard .chart-card .card-current
    {
        bottom: 0;

        width: 100%;
        height: 200px;
    }
    #chart-dashboard .chart-card.tall
    {
        height: 300px;
    }
    #chart-dashboard .chart-card.tall .card-chart-area
    {
        height: 300px;
    }
    #chart-dashboard .row-section
    {
        height: 400px;
    }
    #chart-dashboard .row-section #alarms-bar
    {
        position: relative;

        height: 400px;
    }
    #chart-dashboard .row-section #alarms-bar .alarms-bar-title
    {
        top: 0;

        margin: 10px;
    }
    #chart-dashboard .row-section #alarms-bar #alarms-bar-body .collection
    {
        overflow-y: scroll;

        height: 2600px;
    }
    #chart-dashboard .row-section #main-card
    {
        height: 400px;
    }
    #chart-dashboard .row-section #main-card #hkcd-logo
    {
        max-width: 50%;
        height: auto;
    }
    #chart-dashboard .row-section #top-right-section
    {
        height: 400px;
    }
    #chart-dashboard .row-section #top-right-section .card
    {
        height: 43%;
    }
}

@media only screen and (min-width: 601px)
{
    #chart-dashboard .row-section
    {
        height: 400px;
    }
    #chart-dashboard .row-section #alarms-bar
    {
        height: 90%;
    }
    #chart-dashboard .row-section #alarms-bar .alarms-bar-title
    {
        height: 10%;
    }
    #chart-dashboard .row-section #alarms-bar #alarms-bar-body
    {
        height: 90%;
    }
    #chart-dashboard .row-section #alarms-bar #alarms-bar-body .collection
    {
        overflow-y: scroll;

        height: 70%;
    }
    #chart-dashboard .row-section #main-card
    {
        height: 90%;
    }
    #chart-dashboard .row-section #main-card #hkcd-logo
    {
        display: block;

        max-width: 55%;
        height: 100%;
        margin-right: auto;
        margin-left: auto;
    }
    #chart-dashboard .row-section #top-right-section
    {
        height: 90%;
    }
    #chart-dashboard .row-section #top-right-section .card
    {
        height: 43%;
    }
}

#chart-dashboard .state-card
{
    height: 180px;
}

#chart-dashboard .container
{
    height: 100%;
}

#chart-dashboard .container .card
{
    width: 100%;
    height: 30%;
}

#chart-dashboard .container .card .title-card
{
    height: 40px;
}

#chart-dashboard .container .card .card-title
{
    font-size: 200%;
    font-weight: bold;

    position: relative;

    display: table-cell;

    height: 120px;

    vertical-align: middle;
}

#chart-dashboard .container .card .card-content
{
    position: absolute;

    display: inline;

    height: 120px;
    padding-top: 5%;
}

#chart-dashboard .container .card .card-content .alive-circle-title
{
    font-size: 20px;
}

#chart-dashboard .circle-indicator
{
    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 12px;

    border-radius: 50%;
    background-color: limegreen;
}

#chart-dashboard .contentCON
{
    padding-left: -20px;
}

#chart-dashboard .contentStatus
{
    padding-left: 15px;
}

#chart-dashboard .contentBattery
{
    padding-left: 10px;
}

#chart-dashboard .unit
{
    font-size: .74em;
}

#chart-dashboard .card-sparkline-area
{
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
            align-content: center;
}

#chart-dashboard .card-sparkline-area .card-sparkline
{
    position: relative;

    width: 169px;
    height: 120px;
    margin: 0 auto;
}

#chart-dashboard .card-sparkline-area .card-sparkline .sparkline-svg
{
    stroke: white;
    fill: rgba(255, 255, 255, .2);
}

#chart-dashboard .card-sparkline-area .card-sparkline .sparkline-tooltip
{
    font-size: 12px;

    position: absolute;
    z-index: 9999;

    padding: 2px 5px;

    -webkit-transform: translateX(-50%) translateY(-3em) translateY(-40px);
        -ms-transform: translateX(-50%) translateY(-3em) translateY(-40px);
            transform: translateX(-50%) translateY(-3em) translateY(-40px);
    white-space: nowrap;

    color: white;
    background: rgba(0, 0, 0, .6);
}

#chart-dashboard .iaqcard
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
}

#chart-dashboard #contentbar1
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: 25px;

    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
            justify-content: space-around;
}

#chart-dashboard #contentbar2
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: 25px;

    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
            justify-content: space-around;
}

#chart-dashboard #contentbar3
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: 25px;

    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
            justify-content: space-around;
}

.chart-card
{
    height: 200px;
}

.chart-card .card-chart-area
{
    right: 200px;
    left: 0;

    height: 100%;
}

.chart-card .card-current
{
    right: 0;

    width: 200px;
    height: 100%;
}

.chart-card.tall
{
    height: 400px;
}

.emergency-card
{
    height: calc(200px + 1rem);
}

.state-card
{
    position: relative;

    height: 200px;
}

.state-card .card-current
{
    position: absolute;

    width: 100%;
    height: 100%;

    text-align: center;
}

.state-card .card-current .card-title
{
    text-align: start;
}

.state-card .card-action
{
    position: absolute;
    bottom: 0;

    width: 100%;
}