body { margin: 0; padding: 0; font-family: sans-serif, sans; background-color: #f0f0f0; } #app { margin: 10px 120px; } h1,h2,h3,h4 { margin: 0; } .infobox { margin: 5px; } .infobox .header { background-color: #f3f3f3; padding: 15px; /*border-radius: 10px 10px 0 0;*/ border: 1px solid #ddd; border-bottom: 0; } .infobox .content { padding: 10px; background-color: #ececec; border: 1px solid #ddd; } .infobox-row { display: flex; flex-direction: row; } .infobox-row .infobox { flex-grow: 1; } .row { margin-bottom: 5px; } .row label { min-width: 50%; display: inline-block; } .bar-inner { height: 40px; background-color: #ddd; border-radius: 5px; } .bar-progress { height: 40px; background-color: #00c9e1; border-radius: 5px; } .bar-stats { display: flex; flex-direction: row; margin-top: 5px; } .bar-stats span { flex-grow: 1; color: #9c9c9c; } .bar-stats .stat-now { text-align: center; } .bar-stats .stat-high { text-align: right; } .ip-addr { display: block; } .sec-info { margin-top: 20px; margin-bottom: 10px; } .disks .disk { margin-bottom: 20px; } @media only screen and (max-width: 800px) { #app { margin: 15px; } .infobox-row { display: block; } .infobox { width: 100%; } }