@charset "utf-8";

/* -------------------------------------------------- chart-label -------------------------------------------------- */
.chart-label { height: 16px; overflow: hidden; width: 710px; }
.chart-label-item { height: 16px; overflow: hidden; position: relative; float: left; width: 50%; z-index: 10; }
.chart-label-title { font-weight: 700; background-color: #fff; height: 16px; line-height: 16px; position: absolute; width: 70px; text-align: center; left: 50%; margin: 0 0 0 -35px; z-index: 13; }
.chart-line { height: 1px; overflow: hidden; background-color: #000; display: block; position: absolute; width: 100%; top: 8px; z-index: 11; }
.chart-line-left, .chart-line-right { display: block; height: 8px; width: 1px; background-color: #000; top: 8px; position: absolute; z-index: 12; }
.chart-line-left { left: 0; }
.chart-line-right { right: 0; }

/* reference */
.chart-label-ref .chart-label-title { color: #e9ad4a; }
.chart-label-ref .chart-line, .chart-label-ref .chart-line-left, .chart-label-ref .chart-line-right { background-color: #f9dfc5; }

/* quote */
.chart-label-qot .chart-label-title { color: #5bb3d2; }
.chart-label-qot .chart-line, .chart-label-qot .chart-line-left, .chart-label-qot .chart-line-right { background-color: #bbe0f9; }

/* chart-state-all */
.chart-state-all .chart-label-ref { margin: 0 34px 0 51px; width: 270px; }
.chart-state-all .chart-label-qot { margin: 0 51px 0 34px; width: 270px; }

/* chart-state-ref */
.chart-state-ref .chart-label-ref { margin: 0 64px 0 0; width: 646px; }
.chart-state-ref .chart-label-qot { display: none; }

/* chart-state-qot */
.chart-state-qot .chart-label-ref { display: none; }
.chart-state-qot .chart-label-qot { margin: 0 0 0 64px; width: 646px; }

/* -------------------------------------------------- chart-group -------------------------------------------------- */
.chart-group-item { height: 70px; width: 710px; overflow: hidden; position: relative; z-index: 10; }
.chart-button-left, .chart-button-right { cursor: pointer; display: block; width: 40px; height: 34px; line-height: 34px; color: #2b2a26; position: absolute; top: 18px; z-index: 11; }
.chart-button-left { background: url(Images/chart-left.png) no-repeat; text-align: right; padding: 0 7px 0 0; left: 0; }
.chart-button-right { background: url(Images/chart-right.png) no-repeat; padding: 0 0 0 7px; right: 0; }
.chart-button-center { cursor: pointer; background: url(Images/chart-center.png) no-repeat; display: block; height: 70px; width: 60px; line-height: 70px; text-align: center; position: absolute; top: 0; font-size: 14px; color: #0e97be; z-index: 11; }
.chart-ref, .chart-qot { height: 34px; position: absolute; top: 18px; z-index: 12; }
.chart-ref { background-color: #f2dfcb; }
.chart-qot { background-color: #c8e0f0; }
.chart-ref li, .chart-qot li { float: left; height: 34px; background-color: #000; text-align: center; display: none; position: relative; z-index: 13; }
.chart-ref span, .chart-qot span { display: block; width: 100%; height: 34px; line-height: 34px; color: #fff; }
.chart-ref em, .chart-qot em { font-size: 10px; width: 100%; left: 0; top: 38px; position: absolute; z-index: 14; }

/* chart-group-all */
.chart-group-all .chart-button-center { left: 325px; }
.chart-group-all .chart-ref { width: 270px; left: 51px; }
.chart-group-all .chart-qot { width: 270px; right: 51px; }

/* chart-group-ref */
.chart-group-ref .chart-button-center { right: 0; }
.chart-group-ref .chart-ref { width: 646px; left: 0; }

/* chart-group-qot */
.chart-group-qot .chart-button-center { left: 0; }
.chart-group-qot .chart-qot { width: 646px; right: 0; }

/* -------------------------------------------------- chart-controler -------------------------------------------------- */
.chart-controler { padding: 10px 10px 0 10px; position: fixed; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100; }
.chart-controler div { overflow: hidden; padding: 0 0 10px 0; height: 38px; }
.chart-controler input { border: 1px #ccc solid; float: left; padding: 10px; height: 16px; width: 400px; color: #666; }
.chart-controler button { float: right; height: 38px; border: 0; background-color: #aaa; color: #fff; cursor: pointer; width: 50px; margin: 0 0 0 10px; }
.chart-controler button:hover { background-color: #ccc; }
.chart-controler .cc-1, .chart-controler .cc-2 { width: 184px; }
.chart-controler .cc-1 { margin: 0 10px 0 0; }
.chart-ref .empty, .chart-qot .empty { width: 100%; background-color: transparent !important; }