/*
 * Holy Lance
 * https://github.com/lincanbin/Holy-Lance
 *
 * Copyright 2016 Canbin Lin (lincanbin@hotmail.com)
 * http://www.94cb.com/
 *
 * Licensed under the MIT License:
 * https://opensource.org/licenses/MIT
 * 
 * A Linux Resource / Performance Monitor based on PHP. 
 */
html, #MainTab {
height:100%;
}
body {
height:100%;
margin: 0;
padding: 0;
background: #FFF;
font-family: 'Segoe UI';
}
table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
}
a {
text-decoration: none;
color: #3498db;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
cursor: pointer;
max-width: 400px;
}
.selected-col-desc:after {
content: "▼";
float: right;
}
.selected-col-asc:after {
content: "▲";
float: right;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
max-width: 400px;
}
ul.resp-tabs-list, p {
margin: 0;
padding: 0;
}
.resp-tabs-list li {
font-weight: 600;
font-size: 13px;
display: inline-block;
padding: 20px 65px;
margin: 0 4px 0 0;
list-style: none;
cursor: pointer;
float: left;
}
.resp-tabs-list .tab-label {
font-size: 11px;
}
.resp-tabs-container {
padding: 0;
background-color: #fff;
clear: left;
}
h2.resp-accordion {
cursor: pointer;
padding: 5px;
display: none;
}
.resp-tab-content {
display: none;
padding: 15px 0;
}
.resp-tab-item .main {
border-top: 4px solid #C1C1C1 !important;
}
.resp-tab-active {
border: 1px solid #5AB1D0 !important;
border-bottom: none;
margin-bottom: -1px !important;
padding: 16px 64px 20px 64px !important;
border-top: 4px solid #5AB1D0 !important;
border-bottom: 0 #fff solid !important;
}
.resp-tab-active {
border-bottom: none;
background-color: #fff;
}
.resp-content-active, .resp-accordion-active {
display: block;
}
.resp-tab-content {
/*border: 1px solid #c1c1c1;*/
border-top-color: #5AB1D0;
}
h2.resp-accordion {
font-size: 13px;
border: 1px solid #c1c1c1;
border-top: 0 solid #c1c1c1;
margin: 0;
padding: 10px 15px;
}
h2.resp-tab-active {
border-bottom: 0 solid #c1c1c1 !important;
margin-bottom: 0 !important;
padding: 10px 15px !important;
}
h2.resp-tab-title:last-child {
border-bottom: 12px solid #c1c1c1 !important;
background: blue;
}
/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list {
float: left;
width: 15%;
min-width: 150px;
}
.resp-vtabs .resp-tabs-list li {
display: block;
padding: 15px 15px !important;
margin: 0 0 4px;
cursor: pointer;
float: none;
}
.resp-vtabs .resp-tabs-container {
padding: 0;
background-color: #fff;
/*border: 1px solid #c1c1c1;*/
float: left;
width: 83%;
min-height: 460px;
border-radius: 4px;
clear: none;
}
.resp-vtabs .resp-tab-content {
border: none;
word-wrap: break-word;
}
.resp-vtabs li.resp-tab-active {
position: relative;
z-index: 1;
margin-right: -1px !important;
padding: 14px 15px 15px 14px !important;
border-top: 1px solid;
border: 1px solid #5AB1D0 !important;
border-left: 4px solid #5AB1D0 !important;
margin-bottom: 4px !important;
border-right: 1px #FFF solid !important;
}
.resp-arrow {
width: 0;
height: 0;
float: right;
margin-top: 3px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #c1c1c1;
}
h2.resp-tab-active span.resp-arrow {
border: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid #9B9797;
}
/*-----------Accordion styles-----------*/
h2.resp-tab-active {
background: #DBDBDB;
/* !important;*/
}
.resp-easy-accordion h2.resp-accordion {
display: block;
}
.resp-easy-accordion .resp-tab-content {
border: 1px solid #c1c1c1;
}
.resp-easy-accordion .resp-tab-content:last-child {
border-bottom: 1px solid #c1c1c1;
/* !important;*/
}
.resp-jfit {
width: 100%;
margin: 0;
}
.resp-tab-content-active {
display: block;
}
h2.resp-accordion:first-child {
border-top: 1px solid #c1c1c1;
/* !important;*/
}
/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 960px) {
ul.resp-tabs-list {
display: none;
}
h2.resp-accordion {
display: block;
}
.resp-vtabs .resp-tab-content {
border: 1px solid #C1C1C1;
}
.resp-vtabs .resp-tabs-container {
border: none;
float: none;
width: 100%;
min-height: 100px;
clear: none;
}
.resp-accordion-closed {
display: none !important;
}
.resp-vtabs .resp-tab-content:last-child {
border-bottom: 1px solid #c1c1c1 !important;
}
}

.chart-title-set{
width: 85%;
margin: 0 auto;
margin-top: 10px;
position:relative;
}

.chart-title {
display: inline;
font-size: 35px;
font-weight: 400;
}

.chart-sub-title {
font-size: 25px;
float: right;
position: absolute;
bottom: 0;
right: 20px;
}

.info_block_container {
width: 85%;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 200px;
}

.info_block_container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.info_block {
display: inline;
float: left;
}

.info {
min-width: 65px;
display: block;
float: left;
margin: 5px 30px;
}

.info-clear{
clear: both;
}

.info-label {
color: #707070;
font-size: 12px;
display: block;
}

.info-content {
font-size: 22px;
font-weight: 500;
display: block;
}


.info-inline {
font-size: 12px;
display: block;
margin: 7px 10px;
}

.info-inline-label {
width: 120px;
color: #707070;
display: inline-block;
}

.info-inline-content {
display: inline;
}