* { margin: 0; padding: 0; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; max-width: 660px; height: 400px; box-sizing: border-box; margin: 0 auto; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #666; overflow: hidden; }
h2 {font-family: 'Roboto Condensed', sans-serif;font-size: 1.4em;font-weight: 700;line-height: 1.2;color: #001246;/*text-shadow: 1px 1px rgba(0, 0, 0, .4);*/}
h3 { font-family: 'Source Sans Pro', sans-serif; font-weight: 600; color: #F4C175; }
h4 { font-family: 'Source Sans Pro', sans-serif; color: #2ab7b7; }
p, span, a { font-family: 'Source Sans Pro', sans-serif; }
.hidden { display: none }
.box {height: 100%;padding: 0 10px;background: #fff;overflow: hidden;}
.container {position: relative;width: 100%;max-width: 660px;margin: 0 auto;}

.container.title-container {margin-top: 0;margin-bottom: 5px;}

.container.chart-container {height: 315px;margin-bottom: 3px;padding: 10px 0 0 0;background: #ffffff;border-top: 2px solid #001246;border-bottom: 2px solid #001246;padding-bottom: 5px;}
.container.chart-container .desc {position: absolute;top: 0;left: 0;font-size: 1em;font-family: 'Source Sans Pro', sans-serif;font-weight: 700;color: #001246;}
.container.chart-container .scale {position: absolute;bottom: 5px;left: 0;height: 45px;padding: 0 12px;line-height: 45px;display: none;}
.container.chart-container .scale p { font-size: .95em; color: #446B62; }

.container.chart-container .toggles {position: absolute;top: 25px;left: 5px;z-index: 2;}
.container.chart-container .toggles .toggle {display: inline-block;float: left;margin-bottom: 5px;margin-right: 5px;padding: 0 5px;border-left: 3px solid #ffcb05;font-family: 'Roboto Condensed', sans-serif;font-weight: 700;line-height: 28px;color: #fff;background: #d9d9d9;cursor: pointer;transition: border-color .5s ease, background .5s ease;}
.container.chart-container .toggles .toggle:hover {background: #ffcb06;}
.container.chart-container .toggles .toggle.toggle-active {border-color: #ffcb05;background: #ffcb05;color: #001246;}
.container.chart-container .toggles:after { content: ''; display: table; clear: both; }

.container.chart-container .chart { width: 100%; height: calc(100% - 10px); margin-top: 10px; }
.container.chart-container .chart .chart-line { stroke-linejoin: round; stroke-linecap: round; fill: none; }
.container.chart-container .chart .domain {stroke: #444;stroke-width: 1;}
.container.chart-container .chart .tick line { display: none; }
.container.chart-container .chart .tick text {font-size: 12px;font-family: 'Roboto Condensed', sans-serif;font-weight: 700;fill: #444;}
.container.chart-container .chart .y-grid .tick line { display: block; stroke: #EAF3F1; }
.container.chart-container .chart .y-grid .tick text { display: none; }
.container.chart-container .chart .focus line {stroke: #222;stroke-width: .5;}
.container.chart-container .chart .focus circle {fill: rgba(218, 229, 226, .6);stroke: #1c3562;stroke-width: 2.5;}
.container.chart-container .chart .focus rect { fill: none; -webkit-tap-highlight-color: rgba(0,0,0,0); pointer-events: all; cursor: pointer; }
.container.chart-container .chart .brush .selection {stroke: none;fill: #ffd226;transition: fill .5s ease; }
.container.chart-container .chart .brush .overlay { fill:rgba(206, 206, 206, 0.25) }
.container.chart-container .chart .brush .handle-custom { cursor: ew-resize; }
.container.chart-container .chart .brush .handle-custom rect { fill: rgba(255, 203, 5, .8);  }
.container.chart-container .chart .brush.brush-left .handle-custom.handle-left rect, .container.chart-container .chart .brush.brush-right .handle-custom.handle-right rect {  fill: rgba(255, 203, 5, 1); }
.container.chart-container .chart .brush.brush-active .selection { fill: rgba(88, 119, 113, .8); }
.container.chart-container .chart .summary { fill: rgba(218, 229, 226, .3); }
.container.chart-container .chart .summary .date {font-size: .95em;font-family: 'Source Sans Pro', sans-serif;font-weight: 600;text-anchor: end;fill: #444;}
.container.chart-container .chart .summary .number {font-size: 1.4em;font-family: 'Source Sans Pro', sans-serif;font-weight: 600;text-anchor: end;fill: #001246;}
.container.chart-container .chart .summary .diff { font-size: .9em; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; text-anchor: end; fill: #446B62; }
.container.chart-container .chart .summary .diff .sign { font-size: 1.2em; font-family: 'FontAwesome'; }
.container.chart-container .chart .summary .diff.up { fill: #A85454; }
.container.chart-container .chart .summary .diff.down { fill: #619E56; }
.container.chart-container .chart .summary .diff.level .sign { font-size: .9em; }
.container.chart-container .chart .summary .diff-desc { font-size: .75em; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-anchor: end; fill: #8E9996; }
.container.chart-container .chart #chart-g1 .chart-line {stroke: #1c3562;stroke-width: 2;}
.container.chart-container .chart #chart-g2 .chart-line {stroke: #1c3562;stroke-width: 1.5;}

.container.bottom-container .source {font-size: .8em;text-align: left;color: #001246;}
.container.bottom-container .source a {text-decoration: none;color: #001246;transition: color .5s ease;}
.container.bottom-container .source a:hover {text-decoration: underline;color: #001246;}


@keyframes blink {
  50% { background: #9AE2D3; }
}

@keyframes blink-scmp { 
  50% { background: #9ACBE2; }
}

@keyframes blink-china { 
  50% { background: #E29AA4; }
}

@keyframes blink-hk { 
  50% { background: #E2B69A; }
}

@keyframes blink-mag { 
  50% { background: #E2E2E2; }
}

@media screen and (max-width: 425px) {
  .container.title-container h2 { font-size: 1.4em; }
  .container.district-container .district-title p { font-size: .9em; }
  .container.district-container .district-list .district-map { margin-left: calc(50% - 200px); }
  .container.chart-container { padding: 10px; }
}

@media screen and (max-width: 320px) {
  .container.title-container h2 { font-size: 1.3em; }
  .container.chart-container .toggles .toggle { padding: 0 4px; font-size: .9em; line-height: 25px; }
}