body{
margin:0;
background:#08110d;
color:#d8eee2;
font-family:monospace;
}


header{
background:#102019;
padding:15px;
border-bottom:1px solid #284638;
display:flex;
justify-content:space-between;
align-items:center;
}

header a{
color:#6ee7a8;
text-decoration:none;
}


.container{
padding:15px;
}

.card{
background:#102019;
border:1px solid #284638;
border-radius:3px;
padding:15px;
margin-bottom:15px;
}

.stats{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.stat{
background:#08110d;
border:1px solid #284638;
border-radius:3px;
padding:15px;
min-width:160px;
}

.green{
color:#6ee7a8;
}

.yellow{
color:#fbbf24;
}

.red{
color:#ff7777;
}

button,
input,
textarea{
background:#08110d;
color:white;
border:1px solid #284638;
padding:7px;
border-radius:3px;
font-family:monospace;
}

button{
background:#15382a;
color:#6ee7a8;
cursor:pointer;
}

button.red{
background:#401515;
color:#ff7777;
}

input[type=color]{
width:40px;
height:30px;
padding:2px;
}

input[type=text]{
width:130px;
}

textarea{
width:150px;
height:40px;
resize:none;
}

table{
width:100%;
border-collapse:collapse;
}

th{
background:#08110d;
}

td,th{
padding:10px;
border-bottom:1px solid #284638;
vertical-align:top;
text-align:left;
}

.small{
font-size:12px;
color:#9abaaa;
}

.btn{
display:inline-block;
background:#15382a;
color:#6ee7a8;
padding:7px;
border-radius:3px;
text-decoration:none;
}

.device-id{
font-size:15px;
color:#ffffff;
}

.online{
font-weight:bold;
}

.offline{
font-weight:bold;
}

form.inline{
display:inline;
}

.refresh{
float:right;
}

@media(max-width:900px){

table{
font-size:12px;
}

input[type=text]{
width:100px;
}

}