#stores-status {
    color: #fff;
}

#stores-status div {
    text-align   : left;
    position     : relative;
    float        : left;
    margin-right : 10px;
    font-size    : 12px;
    padding-right: 25px;
}

#stores-status .name {
    padding-left: 12px;
}

#stores-status .status {
    position: absolute;
    left    : 0;
}

#stores-status .status:before {
    content              : "";
    width                : 8px;
    height               : 8px;
    background           : red;
    display              : inline-block;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
}

#stores-status .status.disabled:before {
    background: #ccc;
}

#stores-status .status.off:before {
    background: red;
}

#stores-status .status.on:before {
    background: #b9ba0a;
}

#stores-status .time {
    font-size: 9px;
    position : absolute;
    top      : 3px;
    right    : 0;
}

#stores-status .fix {
    background           : #b3580a;
    font-size            : 10px;
    padding              : 1px 6px;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
    margin-right         : 5px;
    font-weight          : 700;
}

#stores-status .buttons {
    float  : none;
    display: inline-block;
    width  : 100%;
    padding: 0;
}

.live-panel {
    width     : 100%;
    text-align: center;
    display   : inline-block;
    float     : left;
    padding   : 10px;
    background: #1a1b1d;
    display   : none;
}

.netdata-wrapper {
    width     : 100%;
    text-align: center;
    display   : inline-block;
}

.netdata-elem {
    width     : 50%;
    height    : 23vh;
    text-align: center;
    display   : inline-block;
    float     : left;
    padding   : 20px;
    position  : relative;
}

.netdata-cpu,
.netdata-ram,
.netdata-app {
    width     : 100%;
    height    : 33%;
    text-align: center;
    display   : inline-block;
}

.netdata-title {
    position      : absolute;
    top           : 3px;
    right         : 10px;
    z-index       : 1;
    font-size     : 12px;
    color         : #b9ba0a;
    letter-spacing: 1px;
}

@media only screen and (max-width: 992px) {
    .netdata-elem {
        width  : 100%;
        height : auto;
        padding: 0;
    }

    .live-panel {}

    #stores-status div {
        width: 50%;
    }

    #stores-status .buttons {
        float: right;
        width: auto;
    }

    #stores-status .time {
        position: relative;
        top     : 0;
        left    : 0;
    }

    .netdata-cpu {
        height: 120px;
    }

    .netdata-ram,
    .netdata-app {
        height: 100px;
    }

    .netdata-ram .netdata-container-easypiechart {
        width: 12% !important;
    }

    .netdata-ram .netdata-container-gauge {
        width: 20% !important;
    }

    .netdata-ram .netdata-container-with-legend {
        width : 66% !important;
        height: 100px !important;
    }

    .netdata-cpu .netdata-container-with-legend {
        height: 120px !important;
    }

    .netdata-cpu .netdata-chart-legend,
    .netdata-cpu .netdata-legend-toolbox,
    .netdata-ram .netdata-chart-legend,
    .netdata-ram .netdata-legend-toolbox {
        display: none;
    }

    .netdata-cpu .netdata-chart-with-legend-right,
    .netdata-ram .netdata-chart-with-legend-right {
        margin-right: 0;
        width       : 100%;
    }

    .netdata-cpu .dygraph-label.dygraph-title {
        color    : #b9ba0a !important;
        font-size: 14px;
        right    : 0;
        left     : auto;
        top      : 0;
    }
}

@media only screen and (max-width: 425px) {
    .netdata-elem {
        width  : 100%;
        height : auto;
        padding: 0;
    }

    .netdata-cpu {
        height: 60px;
    }

    .netdata-cpu canvas {
        /* height: 80px !important; */
        width: 100% !important;
    }

    .netdata-ram,
    .netdata-app {
        display: none;
    }

    .netdata-cpu .netdata-container-with-legend {
        height    : 60px !important;
        min-height: 60px;
    }

    .netdata-cpu .netdata-chart-with-legend-right {
        height: 60px !important;
    }

    .netdata-cpu .dygraph-label.dygraph-title {
        font-size: 10px;
    }

    .netdata-cpu .dygraph-label-rotate-right {
        display: none;
    }

    .dygraph-axis-label.dygraph-axis-label-y {
        font-size: 8px;
    }

    .netdata-cpu .netdata-chart-with-legend-right .dygraph-axis-label.dygraph-axis-label-y {
        width: 20px !important;
    }

    .netdata-cpu .dygraph-axis-label.dygraph-axis-label-x,
    .netdata-cpu .netdata-legend-resize-handler {
        display: none !important;
    }

    .to_scroll_bar {
        width   : 40px;
        position: fixed;
        left    : 0;
        top     : 0;
        height  : 100%;
    }

    .to_scroll_bar.right {
        width   : 40px;
        position: fixed;
        left    : auto;
        right   : 0;
        top     : 0;
        height  : 100%;
    }

    .netdata-title {
        font-size: 10px;
        top      : 0px;
        right    : 5px;
    }
}