body{
font-family:'Roboto',sans-serif;
margin:0;
background:#f5f7fa;
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
background:#1976d2;
color:white;
padding:10px 16px;
}

.title{
font-size:20px;
font-weight:500;
}

.searchbar{
display:flex;
align-items:center;
background:white;
border-radius:4px;
padding:4px 8px;
color:#444;
}

.searchbar input{
border:none;
outline:none;
margin-left:6px;
width:260px;
}

.aboutButton{
background:#1565c0;
border:none;
color:white;
padding:6px 10px;
border-radius:4px;
cursor:pointer;
}

#layout{
display:grid;
grid-template-columns:260px 260px 260px 1fr;
height:calc(100vh - 50px);
}

.panel{
background:white;
border-right:1px solid #e0e0e0;
display:flex;
flex-direction:column;
}

.panelHeader{
font-weight:500;
padding:10px;
border-bottom:1px solid #eee;
background:#fafafa;
}

#orgList,#serviceList,#layerList{
overflow:auto;
padding:8px;
}

button{
background:#e3f2fd;
border:none;
margin-bottom:6px;
padding:6px;
border-radius:4px;
cursor:pointer;
text-align:left;
}

button:hover{
background:#bbdefb;
}

#map{
height:300px;
}

.datasetToolbar{
display:flex;
justify-content:space-between;
padding:6px 8px;
font-size:13px;
}

table{
width:100%;
border-collapse:collapse;
font-size:12px;
}

td,th{
border:1px solid #ddd;
padding:4px;
}

.modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
}

.modal-content{
background:white;
margin:10% auto;
padding:20px;
width:400px;
border-radius:6px;
}