i {vertical-align:text-bottom;width:20px;height:20px;display:inline-block;background-color:currentColor;mask-position:center;mask-size:20px;mask-repeat:no-repeat;}
i.left {-webkit-mask-image:url(/images/left.svg);mask-image:url(/images/left.svg);}
i.right {-webkit-mask-image:url(/images/right.svg);mask-image:url(/images/right.svg);}

#page {display:grid;grid-template-columns:300px 1fr;padding-top:2px;background:var(--bol-color-background-primary);}
#sidebar {height:100vh;width:300px;border:0;border-right:1px solid var(--bol-color-border);background-color:var(--bol-color-background-secondary);display:flex;flex-flow:column;align-items:stretch;position:relative;}

#controls {padding:10px;border-bottom:1px solid var(--bol-color-border);background-color:var(--bol-color-background-primary);}
#depot {margin-top:4px;}

#map {flex:1;position:relative;}
#orders-filter-div {position:absolute;top:20px;right:20px;width:200px;z-index:9;}
#orders-filter {font-size:0.9em;}

#shifts {}
.shift {padding:10px;border-bottom:1px solid var(--bol-color-border);cursor:pointer;background-color:var(--bol-color-background-secondary);}
.shift.selected {background-color:var(--bol-color-background-tertiary);}
.shift .name {font-weight:400;}