@charset "utf-8";
/* CSS Document */
.server-dashboard .usage-row { margin-bottom: 15px; position: relative; }
.server-dashboard .usage-row:last-child { margin-bottom: 0; }
.server-dashboard .usage-row .top-list { background: #fff; float: left; border: 1px solid #dee3eb; padding: 15px; width: 40%; height: auto; }
.server-dashboard .usage-row .top-list .list-header { position: relative; }
.server-dashboard .usage-row .top-list .list-header h2 { font-size: 16px; font-weight: 800; }
.server-dashboard .usage-row .top-list .list-header .date { font-size: 11px; color: #999; font-weight: 300; letter-spacing: 0; }
.server-dashboard .usage-row .top-list .list-header .refresh-btn { position: absolute; width: 80px; text-align: center; right: 0; top: 0; }
.normal-btn { font-size: 12px; }
.normal-btn.white-bg { line-height: 25px; border: 1px solid #dcdcdc; color: #999; font-weight: 400; transition: background .2s ease,border-color .3s ease; background: #fff; display: inline-block; border-radius: 3px; cursor: pointer; }
.normal-btn i { margin-right: 5px; font-size: 11px; }

.server-dashboard .usage-row .list { margin-top: 10px; border-top: 1px solid #dee3eb; }
.server-dashboard .usage-row .list ul li { padding: 10px 13px; }
.server-dashboard .usage-row .list ul li:last-child { margin-bottom: 0; }
.server-dashboard .usage-row .list ul li:nth-child(2n) { background: #F4F4F4; }
.server-dashboard .usage-row .list .numb { float: left;  width: 20px; height: 20px; background: #2D313A; text-align: center; color: #fff; font-size: 10px; font-weight: 500; border-radius: 50%; line-height: 20px; margin-top: 9px; }
.server-dashboard .usage-row .list .server-info-wrap { float: left; width: calc(100% - 20px); padding-left: 10px; }

.server-info-wrap .server-info { vertical-align: top; }
.server-info-wrap .server-info .name { vertical-align: top; font-size: 13px; font-weight: bold; line-height: 20px; }
.server-info-wrap .server-info .name { float: left; display: block; white-space: nowrap; width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; }

.server-info-wrap .server-info .status { display: inline-block; vertical-align: top; margin-top: 1px; float: right; }
.server-info-wrap .server-info .circle { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; vertical-align: top; }
.server-info-wrap .server-info .stats { font-weight: 400; font-size: 11px; vertical-align: top; }
.server-info-wrap .server-info .loader .stats { color: #03a9f4; }
.server-info-wrap .server-info .loader .circle { position: relative; background-color: #03a9f4; width: 10px; height: 10px; margin-top: 4px; }
.server-info-wrap .server-info .loader .circle:after { content: ''; position: absolute; border-radius: 50%; top: 50%; left: 50%; border: 0px solid white; transform: translate(-50%, -50%); animation: loading 1s ease forwards infinite; }
@keyframes loading { 0% { border: 0px solid white; } 20% { border: 2px solid white; width: 0%; height: 0%; } 100% { border: 2px solid white; width: 100%; height: 100%; } }
.server-info-wrap .detail-info span { font-size: 11px; color: #666; letter-spacing: 0; display: inline-block; margin-right: 5px; font-family: 'Arial,dotum'; word-break: break-all; }
.server-info-wrap .detail-info span:last-child { margin-right: 0; }

.server-dashboard .usage-row .chart-box { position: absolute; top: 0; right: 0; width: calc(60% - 10px); background: #fff; border: 1px solid #dee3eb; height: 100%; padding: 15px; overflow: hidden; }
.server-dashboard .usage-row .chart-box .chart-header { margin-bottom: 20px; }
.server-dashboard .usage-row .chart-box .chart-header h2 {  font-size: 16px; font-weight: 800; }
.server-dashboard .usage-row .chart-box figure { height: 100%; width: 100%; margin: 0; }
.server-dashboard .usage-row .chart-box figure>div { height: 320px; }
.server-dashboard .usage-row .chart-box .highcharts-title { display: none; }
.server-dashboard .usage-row .chart-box .highcharts-yaxis { display: none; }