.control_btn[data-context="system"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/icons/cpu-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="system"]:hover,
.control_btn[data-context="system"][data-status="active"] {
    background: #28E056 url(../images/icons/cpu-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="memory"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/icons/memory-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="memory"]:hover,
.control_btn[data-context="memory"][data-status="active"] {
    background: #28E056 url(../images/icons/memory-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="heap"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/icons/heap-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="heap"]:hover,
.control_btn[data-context="heap"][data-status="active"] {
    background: #28E056 url(../images/icons/heap-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="server"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/icons/server-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="server"]:hover,
.control_btn[data-context="server"][data-status="active"] {
    background: #28E056 url(../images/icons/server-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="os"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/icons/cpu-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="os"]:hover,
.control_btn[data-context="os"][data-status="active"] {
    background: #28E056 url(../images/icons/cpu-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="network"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/icons/network-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="network"]:hover,
.control_btn[data-context="network"][data-status="active"] {
    background: #28E056 url(../images/icons/network-white.svg) no-repeat;
    background-position: 20px center;
    background-size: 24px;
    -o-background-size: 24px;
    -moz-background-size: 24px;
    -webkit-background-size: 24px;
}

.control_btn[data-context="nodejs"] {
    color: #fff;
    transition-duration: .35s;
    transition-property: background;
    transition-timing-function: ease-out;
    background: #000 url(../images/logo/nodejs-white.svg) no-repeat;
    background-position: -43px center;
    background-size: 50%;
    -o-background-size: 50%;
    -moz-background-size: 50%;
    -webkit-background-size: 50%;
}

.control_btn[data-context="nodejs"]:hover,
.control_btn[data-context="nodejs"][data-status="active"] {
    background: #28E056 url(../images/logo/nodejs-white.svg) no-repeat;
    background-position: -43px center;
    background-size: 50%;
    -o-background-size: 50%;
    -moz-background-size: 50%;
    -webkit-background-size: 50%;
}

/*  PANELS */

.panel_bg { background: #f0f0f0; }

.half_panel {
    width: calc(50% - 20px);
    height: calc(100% - 20px);
    border: 1px solid #000;
    margin-top: 20px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}

.quarter_panel {
    width: calc(25% - 22px);
    height: calc(100% - 20px);
    border: 1px solid #000;
    margin-top: 20px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}

.full_panel {
    width: 100%;
    height: calc(100% - 40px);
    margin-top: 20px;
    border: 1px solid #000;
    border-radius: 9px;
    background: #f0f0f0;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}

.panel_header {
    width: calc(100% - 40px);
    height: 50px;
    margin-left: 20px;
    border-bottom: 1px solid #000;
}

.panel_header figure {
    width: 24px;
    height: 24px;
    float: left;
    clear: left;
    margin-top: 13px;
    margin-right: 20px;
}

.panel_header figure[data-vendor="aix"] {
    background: url(../images/logo/ibm.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="gnu"] {
    background: url(../images/logo/gnu.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="sun"],
.panel_header figure[data-vendor="sunos"] {
    background: url(../images/logo/sun.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="darwin"] {
    background: url(../images/logo/apple.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="freebsd"] {
    background: url(../images/logo/freebsd.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="linux"] {
    background: url(../images/logo/linux.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="unixware"] {
    background: url(../images/logo/unixware.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-vendor="windows_nt"] {
    background: url(../images/logo/windows.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="core"] {
    background: url(../images/icons/core.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="memory"] {
    background: url(../images/icons/memory.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="load_average"] {
    background: url(../images/icons/load_average.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="heap_space_stats"] {
    background: url(../images/icons/heap_space_stats.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="heap_stats"] {
    background: url(../images/icons/stats.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="heap_size"] {
    background: url(../images/icons/size.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="loopback"] {
    background: url(../images/icons/infinity.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header figure[data-icon="wifi"] {
    background: url(../images/icons/wifi.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.clock_icon {
    width: 16px;
    height: 16px;
    float: left;
    clear: left;
    margin-top: 7px;
    margin-right: 10px;
    background: url(../images/icons/clock.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

.panel_header h4 {
    line-height: 50px;
}

.panel_body {
    width: 100%;
    height: calc(100% - 50px);
}

.panel_body_row {
    width: calc(100% - 40px);
    height: 30px;
    margin-left: 20px;
    line-height: 30px;
}

.panel_body_row span,
.panel_body_row label {
    font-size: 14px;
}

.panel_body_row a,
.panel_body_row a:link,
.panel_body_row a:visited {
    width: auto;
    height: 30px;
    color: #28E056;
    font-size: 14px;
    text-indent: 20px;
    margin-left: 5px;
    display: inline-block;
    text-decoration: underline;
    background: url(../images/icons/download.svg) no-repeat;
    background-position: left center;
    background-size: 16px;
}

/*  END: PANELS  */

/*  PIE CHART WIDGET  */

.pie_chart_widget {
    width: calc(100% - 40px);
    height: calc(100% - 60px);
    margin-top: 10px;
    margin-left: 20px;
}

.pie_chart {
    width: 148px;
    height: 150px;
    float: left;
    clear: left;
    border-radius: 50%;
    border: 1px solid #000;
    transition-duration: .25s;
    transition-property: background-image, background;
    transition-timing-function: ease-out;
}

.chart_legend {
    width: calc(100% - 250px);
    height: 150px;
    float: left;
}

.inner_circle {
    width: 90px;
    height: 90px;
    margin-top: 30px;
    margin-left: 30px;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.pie_chart_widget .large_lbl {
    width: 100%;
    height: 90px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin-top: unset;
    line-height: 90px;
    text-align: center;
    display: inline-block;
}

.large_lbl[data-level="warn"] { color: #f2e863; }

.large_lbl[data-level="critical"] { color: #f25757; }

.color_box {
    width: 16px;
    height: 16px;
    float: left;
    clear: left;
    margin-top: 7px;
    margin-right: 10px;
}

.free_mem_box { background: #28E056; }

.used_mem_box { background: #61e8e1; }

/*  END: PIE CHART WIDGET  */

@media (max-width: 1025px) {

    .control_btn[data-context="system"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/icons/cpu-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="system"]:hover,
    .control_btn[data-context="system"][data-status="active"] {
        background: #28E056 url(../images/icons/cpu-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="memory"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/icons/memory-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="memory"]:hover,
    .control_btn[data-context="memory"][data-status="active"] {
        background: #28E056 url(../images/icons/memory-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="heap"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/icons/heap-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="heap"]:hover,
    .control_btn[data-context="heap"][data-status="active"] {
        background: #28E056 url(../images/icons/heap-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="server"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/icons/server-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="server"]:hover,
    .control_btn[data-context="server"][data-status="active"] {
        background: #28E056 url(../images/icons/server-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="os"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/icons/cpu-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="os"]:hover,
    .control_btn[data-context="os"][data-status="active"] {
        background: #28E056 url(../images/icons/cpu-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="network"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/icons/network-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="network"]:hover,
    .control_btn[data-context="network"][data-status="active"] {
        background: #28E056 url(../images/icons/network-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="nodejs"] {
        color: #fff;
        transition-duration: .35s;
        transition-property: background;
        transition-timing-function: ease-out;
        background: #000 url(../images/logo/nodejs-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }
    
    .control_btn[data-context="nodejs"]:hover,
    .control_btn[data-context="nodejs"][data-status="active"] {
        background: #28E056 url(../images/logo/nodejs-white.svg) no-repeat;
        background-position: center;
        background-size: 50%;
        -o-background-size: 50%;
        -moz-background-size: 50%;
        -webkit-background-size: 50%;
    }

}