*{box-sizing:border-box}
html,body,table,select,button{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;font-size:16px;line-height:1.5}
body{margin:0;color:#111;background-color:#fff;overflow-y:scroll}
a{color:inherit;text-decoration:none;font-weight:bold}
a:hover,a:focus{text-decoration:underline}
button{cursor:pointer}[v-cloak]{display:none}

.app{padding:.5rem 1rem;margin:0 auto;width:96rem}
.columns{display:flex}.column{flex:1}
.header{margin:1rem 0}
.options{display:flex;justify-content:flex-end;align-items:center}
.button,.select{padding:0 1rem;height:2.5rem;margin-left:1rem}
.item{margin-right:1rem}

.table{width:100%;border-collapse:collapse;table-layout:fixed}
.table>thead>tr{border-bottom:2px solid #ccc}
.table>tbody>tr{border-bottom:1px solid #ddd}
.table td,.table th{padding:.5rem 1rem;text-align:left}
.table th{cursor:pointer;user-select:none}
.positive{color:#388e3c}
.negative{color:#d32f2f}
.arrow{display:inline-block;font-size:0.75rem;transform:translateY(-0.075rem)}

.coin{height:4rem}
.coin-name{display:flex;align-items:center}
.coin-icon{width:1.5rem;height:1.5rem;margin-right:1rem}
.coin-symbol{color:#616161}

.icon{display:block;width:24px;height:24px}
.icon>path{fill:currentColor}

.pagination{text-align:center;margin:2rem 0}
.pagination>button{padding:.5rem 0;width:2.75rem;margin:0 .5rem}

.dark{color:#fff;background-color:#111}
.dark .table>thead>tr{border-color:#999}
.dark .table>tbody>tr{border-color:#888}
.dark .positive{color:#66bb6a}
.dark .negative{color:#ef5350}
.dark .coin-symbol{color:#bdbdbd}