body.dark { background: #000000; color: #e3e3e3; }
a { text-decoration: black; color:rgb(100, 98, 98); }
.dark a { color: #5ae; }
#wrap { padding: 0 3.5%; }
svg { font-family: "Poppins", Sans-serif; }
canvas, svg { position: absolute; top: 0; left: 0; }
#chart { position: relative; }
.brush rect.extent { fill: rgba(100,100,100,0.15); stroke: #fff; }
.dark .brush rect.extent { fill: rgba(100,100,100,0.15); stroke: #ddd; }
.brush:hover rect.extent { stroke: #222; stroke-dasharray: 5,5; }
.brush rect.extent:hover { stroke-dasharray: none; }
.resize rect { fill: none; }
.background { fill: none; }
.dark .background { fill: none; }
.axis line, .axis path { fill: none; stroke: #777; stroke-width: 1; }
.dark .axis line, .dark .axis path { stroke: #777; }
.axis .tick { width: 200px; }
.axis text { fill: #111; text-anchor: right; font-size: 11px; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; }
.axis text.label { font-size: 12px; cursor: move; padding-bottom: 24px; }
.dark .axis text { fill: #f2f2f2;  text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000; }
.dark .axis text.label { fill: #ddd; }
.quarter, .third, .half { float: left; }
.quarter { width: 23%; margin: 0 1%; }
.third { width: 31.3%; margin: 0 1%; }
.half { width: 48%; margin: 0 1%; }
h3 { margin: 12px 0 9px;}
h3 small { color: #888; font-weight: normal; }
p { margin: 0.6em 0; }
small { line-height: 1.2em; }
button[disabled=disabled] { color: #555 !important; opacity: 0.4; }
.settings button[disabled=disabled] { display: none; }
.dark button[disabled=disabled] { opacity: 0.2; }
button#keep-data,
button#exclude-data { font-weight:bold; }
button#keep-data:hover { color: #080;}
button#exclude-data:hover { color: #900;}
#food-list { width: 100%;  height: 360px;  overflow-x: auto;  overflow-y: auto;}
#legend { text-align: left; overflow-y: auto; border-left: 0px solid rgba(140,140,140,0.5); font-weight: 600; font-size: 0.9em; }

.off { color: #999; font-weight: 500;}
.dark .off { color: #555; }
.dark #legend { border-left: 1px solid #777; }
.color-block { display: inline-block; height: 8px; width: 8px; margin: 1px 4px 1px 0px; float: left; }
.color-block:before{content: '';}
.color-bar { display: inline-block; height: 8px; width: 8px; margin: 1px 4px 1px 0px; }


#rendered-bar,
#selected-bar { width:0%; font-weight: bold; }
#rendered-bar { background: #888; border-right: 1px solid #666; }
#selected-bar { background: rgba(160,160,160,0.5); border-right: 1px solid #999; }
.fillbar {
 height: 12px; line-height: 12px; border:1px solid rgba(120,120,120,0.5);
 width: 120px; display: block; text-align: center; margin: 15px auto;
}
.little-box {
  width: 268px;
  float: left;
}
#header { border-bottom: 1px solid rgba(100,100,100,0.35); background: #d8d8d8; padding: 6px 24px 4px; line-height: 24px; }
.dark #header { background: #040404; color: #ffffff; }
#header h1 { display: inline-block; margin: 0px 14px 0 0; }
#header button { vertical-align: top; }
.controls { height: 24px; line-height: 0px; margin-top:5px; text-align: center; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
 
::-webkit-scrollbar-track { background: #ddd; border-radius: 12px; }
 
::-webkit-scrollbar-thumb { background: #b5b5b5; border-radius: 12px; }
.dark ::-webkit-scrollbar-track { background: #222; }
.dark ::-webkit-scrollbar-thumb { background: #444; }