.navbar-default { background-color: #04477C; border: none; z-index: 13; }
.navbar-default .navbar-toggle { padding: 1px 5px; margin: 7px 16px 0 0; border-color: #076fc2; background-color: #076fc2; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #076fc2; }
.navbar-default .navbar-toggle .icon-bar { margin: 7px 0 !important; height: 1px; background-color: #fff; }
.navbar-default a.navbar-brand { width: 155px; color: #fff; }
.navbar-default a.navbar-brand:focus, .navbar-default a.navbar-brand:hover { color: #fff; }
.navbar-default .navbar-nav > li > a { padding-top: 13px; padding-bottom: 13px; color: #fff; border-top: 4px solid transparent; }
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { background-color: #003259; color: #fff; }
.navbar-default .navbar-nav > li.active > a { color: #fff; border-top: 4px solid #FD6800; background: none; }
.navbar-default .navbar-nav > li.active > a:focus, .navbar-default .navbar-nav > li.active > a:hover { background-color: #003259; color: #fff; }
.navbar-default .navbar-right { margin-right: 0; }
.navbar-default #chart-switch { float: left; margin-top: 8px; }
.navbar-default #chart-switch:hover, .navbar-default #chart-switch:active { border: 1px solid #04477C; }
.navbar-default #chart-switch:after { content: "CHART ON"; }
.navbar-default #chart-switch:before { content: "CHART OFF"; display: none; }
.navbar-default #chart-switch.disabled:before { display: block; }
.navbar-default #chart-switch.disabled:after { display: none; }
#myChart { width: 100%; height: 100%;margin:0 auto; }
@media (max-width: 768px) {
.navbar-default .navbar-collapse { padding: 0; }
.navbar-default .navbar-nav { margin: 0; }
.navbar-default .navbar-nav > li > a { border-left: 4px solid transparent; border-top: none; }
.navbar-default .navbar-nav > li.active > a { border-left: 4px solid #FD6800; border-top: none; }
#nav-leftchart { display: none; }
}
#nav-leftchart { position: fixed; top: 50px; bottom: 0; left: 0; border-top: 1px solid #fff; width: 155px; background-color: #04477C; overflow-y: hidden; z-index: 15; }
#nav-leftchart li { height: 54px; -webkit-transition: 0.5s; transition: 0.5s; }
#nav-leftchart li:hover > a { background-color: #003259; }
#nav-leftchart li.active { background-color: #FD6800; }
#nav-leftchart li.active:hover a .badge { background-color: #eee; color: #04477C; }
#nav-leftchart li.active a { color: #fff; }
#nav-leftchart li.active a .chart-icon { border: 1px solid #fff; }
#nav-leftchart li.active a .badge { background-color: #FD6800; color: #fff; }
#nav-leftchart li a { color: #ccc; position: relative; display: block; width: 100%; height: 100%; -webkit-transition: 0.5s; transition: 0.5s; }
#nav-leftchart li a:focus { background: none; }
#nav-leftchart li a .chart-icon { content: ''; display: inline-block; width: 32px; height: 32px; background-image: url("../M02-nav-leftchart/images/chart-icon.png"); background-size: 32px; background-repeat: no-repeat; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #999; }
#nav-leftchart li a .chart-name { display: inline-block; position: relative; top: -12px; margin-left: 10px; }
#nav-leftchart li a .badge { -webkit-transition: 0.5s; transition: 0.5s; float: right; margin-top: 6px; background-color: #eee; color: #04477C; }
#nav-leftchart li a#left-chart-nav-scatter .chart-icon { background-position: -1px -65px; }
#nav-leftchart li a#left-chart-nav-line .chart-icon { background-position: -1px -1px; }
#nav-leftchart li a#left-chart-nav-bar .chart-icon { background-position: -1px -33px; }
#nav-leftchart li a#left-chart-nav-map .chart-icon { background-position: -1px -257px; }
#nav-leftchart li a#left-chart-nav-pie .chart-icon { background-position: -1px -129px; }
#nav-leftchart li a#left-chart-nav-radar .chart-icon { background-position: -1px -161px; }
#nav-leftchart li a#left-chart-nav-candlestick .chart-icon { background-position: -1px -97px; }
#nav-leftchart li a#left-chart-nav-boxplot .chart-icon { background-position: -1px -577px; }
#nav-leftchart li a#left-chart-nav-heatmap .chart-icon { background-position: -1px -353px; }
#nav-leftchart li a#left-chart-nav-graph .chart-icon { background-position: -1px -225px; }
#nav-leftchart li a#left-chart-nav-treemap .chart-icon { background-position: -1px -449px; }
#nav-leftchart li a#left-chart-nav-parallel .chart-icon { background-position: -1px -513px; }
#nav-leftchart li a#left-chart-nav-sankey .chart-icon { background-position: -1px -545px; }
#nav-leftchart li a#left-chart-nav-funnel .chart-icon { background-position: -1px -321px; }
#nav-leftchart li a#left-chart-nav-gauge .chart-icon { background-position: -1px -289px; }
#nav-mask { position: fixed; top: 50px; left: 155px; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 12; }
#nav-layer { position: fixed; width: 620px; max-height: 350px; left: 155px; top: 200px; z-index: 15; background-color: #fff; overflow: hidden; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
#nav-layer > ul { display: table; line-height: 0; content: ""; width: 100%; clear: both; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; }
#nav-layer > ul > li { float: left; width: 180px; margin: 10px 10px; padding: 5px; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-transition: -webkit-box-shadow 0.5s ease-out; transition: -webkit-box-shadow 0.5s ease-out; transition: box-shadow 0.5s ease-out; transition: box-shadow 0.5s ease-out, -webkit-box-shadow 0.5s ease-out; }
#nav-layer > ul > li:hover { webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }
#nav-layer > ul > li img { width: 100%; height: 100%; }

@media (max-width: 768px) {
#nav-leftchart { display: none; }
#myChart { width: 90%; height: 100%;margin:0 auto; }
}
html { height: 100%; }
body { margin: 0; padding: 0; font-family: "微软雅黑", sans-serif; height: 100%; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
a:hover, a:focus { text-decoration: none; }
#cases-container { position: relative; padding-left: 155px; padding-top: 0px; z-index: 9; background-color: #f9f9f9; width: 100%; height: 100%; overflow-y: auto; margin-top: 50px; }
#case-container { position: absolute; padding-left: 155px; padding-top: 50px; z-index: 10; background-color: #f9f9f9; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; display: none; }

#chart-container { position: absolute; top: -90px; background-color: #fff; width: 100%; height: 100%; box-sizing: border-box; }
.chart-list-panel { padding: 30px 15px; }
.chart-list-panel h3 { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.chart-list-panel .chart { width: 100%; max-width: 350px; margin: 0 auto; margin-bottom: 30px; -webkit-border-radius: 4px; border-radius: 4px; background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.chart-list-panel .chart .chart-link { position: relative; display: block; overflow: hidden; }
.chart-list-panel .chart .chart-link .chart-loading { width: 100%; height: 100%; position: absolute; top: 30px; left: 0; background-color: #fff; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading { position: absolute; width: 600px; height: 36px; left: 50%; top: 40%; margin-left: -300px; overflow: visible; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div { position: absolute; width: 20px; height: 36px; opacity: 0; font-family: Helvetica, Arial, sans-serif; animation: move 2s linear infinite; -o-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; -webkit-animation: move 2s linear infinite; transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); color: #35C4F0; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 1) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; animation-delay: 0.6s; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -ms-animation-delay: 0.8s; animation-delay: 0.8s; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 5) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 6) { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -ms-animation-delay: 1.2s; animation-delay: 1.2s; }
.chart-list-panel .chart .chart-link .chart-loading #imgLoading div:nth-child( 7) { -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s; -ms-animation-delay: 1.4s; animation-delay: 1.4s; }
.chart-list-panel .chart .chart-link .chart-title { color: #293c55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 10px 2px 10px; margin: 0; font-weight: normal; font-size: 16px; }
.chart-list-panel .chart .chart-link .chart-area { width: 100%; height: 100%; padding: 8px; }

@media (max-width: 768px) {
#cases-container, #case-container { padding-left: 0; }
}
@keyframes move {
 0% {
 left: 0;
 opacity: 0;
}
 35% {
 left: 41%;
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 65% {
 left: 59%;
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 100% {
 left: 100%;
 -moz-transform: rotate(-180deg);
 -webkit-transform: rotate(-180deg);
 -o-transform: rotate(-180deg);
 transform: rotate(-180deg);
 opacity: 0;
}
}
@-moz-keyframes move {
 0% {
 left: 0;
 opacity: 0;
}
 35% {
 left: 41%;
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 65% {
 left: 59%;
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 100% {
 left: 100%;
 -moz-transform: rotate(-180deg);
 transform: rotate(-180deg);
 opacity: 0;
}
}
@-webkit-keyframes move {
 0% {
 left: 0;
 opacity: 0;
}
 35% {
 left: 41%;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 65% {
 left: 59%;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 100% {
 left: 100%;
 -webkit-transform: rotate(-180deg);
 transform: rotate(-180deg);
 opacity: 0;
}
}
@-o-keyframes move {
 0% {
 left: 0;
 opacity: 0;
}
 35% {
 left: 41%;
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 65% {
 left: 59%;
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 opacity: 1;
}
 100% {
 left: 100%;
 -o-transform: rotate(-180deg);
 transform: rotate(-180deg);
 opacity: 0;
}
}