body { background: #ebebeb url('../img/light.png'); }
.navbar { min-height: 40px; }
.navbar-brand { color: #fff; padding: 10px; font-size: 20px; }
.dropdown .dropdown-toggle { padding-bottom: 10px; padding-top: 10px; }
.navbar-inverse .navbar-brand { color: #fff; padding: 10px; font-size: 20px; }
.content { background: #ffffff; padding: 20px; border-radius: 5px; border: 1px #cecece solid; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); box-shadow: 0 1px 10px rgba(0, 0, 0, .1); margin-bottom: 20px; }
.table { background: #ffffff; margin-bottom: 0; border-collapse: collapse; border-radius: 3px; }
.table th, .table td { text-align: center; }
.table td { vertical-align: middle !important; }
.table-striped tbody > tr.even > td, .table-striped tbody > tr.even > th { background-color: #F9F9F9; }
.table-striped tbody > tr.odd > td, .table-striped tbody > tr.odd > th { background-color: #FFF; }
.progress { margin-bottom: 0; }
.progress-bar { color: #000; }
.table-hover > tbody > tr:hover > td { background: #E6E6E6; }
tr.even.expandRow > :hover { background: #F9F9F9 !important; }
tr.odd.expandRow > :hover { background: #FFF !important; }
.expandRow > td { padding: 0 !important; border-top: 0px !important; }
#month_traffic { min-width: 85px; max-width: 95px;}
#network { min-width: 115px; }
#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; }
#ping { max-width: 95px; }

canvas{ width:100% !important; }

@media only screen and (max-width: 1200px) {
        #type, tr td:nth-child(4)                       { display:none; visibility:hidden; }
        #location, tr td:nth-child(5)           { display:none; visibility:hidden; }
        #uptime, tr td:nth-child(6)                     { display:none; visibility:hidden; }
        #ping, tr td:nth-child(13)          { display:none; visibility:hidden; }
}
@media only screen and (max-width: 720px) {
        body                                                            { font-size: 10px; }
        .content                                                        { padding: 0; }
        #type, tr td:nth-child(4)                       { display:none; visibility:hidden; }
        #location, tr td:nth-child(5)           { display:none; visibility:hidden; }
        #uptime, tr td:nth-child(6)                     { display:none; visibility:hidden; }
        #ping, tr td:nth-child(13)          { display:none; visibility:hidden; }
}
@media only screen and (max-width: 620px) {
        body                                                            { font-size: 10px; }
        .content                                                        { padding: 0; }
        #month_traffic, tr td:nth-child(2)      { display:none; visibility:hidden; }
        #type, tr td:nth-child(4)                       { display:none; visibility:hidden; }
        #location, tr td:nth-child(5)           { display:none; visibility:hidden; }
        #uptime, tr td:nth-child(6)                     { display:none; visibility:hidden; }
        #traffic, tr td:nth-child(9)            { display:none; visibility:hidden; }
        #ping, tr td:nth-child(13)          { display:none; visibility:hidden; }
}
@media only screen and (max-width: 533px) {
        body                                                            { font-size: 10px; }
        .content                                                        { padding: 0; }
        #month_traffic, tr td:nth-child(2)      { display:none; visibility:hidden; }
        #type, tr td:nth-child(4)                       { display:none; visibility:hidden; }
        #location, tr td:nth-child(5)           { display:none; visibility:hidden; }
        #uptime, tr td:nth-child(6)                     { display:none; visibility:hidden; }
        #traffic, tr td:nth-child(9)            { display:none; visibility:hidden; }
        #ping, tr td:nth-child(13)          { display:none; visibility:hidden; }
}
@media only screen and (max-width: 450px) {
        body                                                            { font-size: 10px; }
        .content                                                        { padding: 0; }
        #month_traffic, tr td:nth-child(2)      { display:none; visibility:hidden; }
        #name, tr td:nth-child(3)                       { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
        #type, tr td:nth-child(4)                       { display:none; visibility:hidden; }
        #location, tr td:nth-child(5)           { display:none; visibility:hidden; }
        #uptime, tr td:nth-child(6)                     { display:none; visibility:hidden; }
        #traffic, tr td:nth-child(9)            { display:none; visibility:hidden; }
        #cpu, #ram, #hdd                                        { min-width: 25px; max-width: 50px; }
        #ping, tr td:nth-child(13)          { display:none; visibility:hidden; }
}
