/* 스파이더 그래프 */
canvas {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}

#sensordata {position:relative;margin:0 auto;width:350px !important;height:350px !important;padding-top:18px; z-index:11;}
.sensordata-legend { position:absolute !important;left:0 !important;top:0 !important;}

.graph_link {position:relative;width:350px; height:auto; margin:27px auto;transform:translateY(5px);}
.graph_link a {position:absolute;left:0;right:0;display:inline-block;width:30px;height:30px;border-radius:30px;font-size:0;z-index:10;}
.graph_link .polygon_icon1 {left:45.6%;top:4px;background:url(/images/icon_category1.png) no-repeat center -29px #00a2df;}
.graph_link .polygon_icon2 {left:93%;top:124px;background:url(/images/icon_category2.png) no-repeat center -29px #e30046;}
.graph_link .polygon_icon3 {left:75%;top:318px;background:url(/images/icon_category3.png) no-repeat center -29px #ff6900;}
.graph_link .polygon_icon4 {left:15%;top:318px;background:url(/images/icon_category4.png) no-repeat center -29px #84bc00;}
.graph_link .polygon_icon5 {left:-2%;top:124px;background:url(/images/icon_category5.png) no-repeat center -29px #753abc;}
.graph_link .blank {position:absolute;left:50%;right:0;width:340px;height:25px;margin-left:-170px; z-index:9;}

/* 메인 라인그래프 */
.main_linegraph.type_new .graph_line {margin-top:0 !important;height:140px !important;}
.main_linegraph.type_new  {height:146px !important;padding:10px 15px 35px 0 !important;}

.main_linegraph {position:relative;height:175px;padding:30px 15px 5px 5px;}
.main_linegraph2 {position:relative;height:195px;padding:25px;}
.main_linegraph2 .legend {/*position:absolute;right:0;top:0;;*/text-align:right;line-height:12px;font-size:10px;z-index:12;letter-spacing:0;}
.main_linegraph2 .legend .icon {display:inline-block;width:10px;height:10px;margin:0 5px 0 25px;border-radius:20px;vertical-align:middle;}
.main_linegraph2 .legend .icon1 {background:#ff6900;}
.main_linegraph2 .legend .icon2 {background:#08b8af;}
.main_linegraph2 .unit span, .main_linegraph .unit span { position:absolute;font-size:11px;color:#888;}
.main_linegraph2 .unit .x {top:4px;left:17px;}
.main_linegraph2 .unit .y {bottom:9px;right:26px;}
/*.main_linegraph .blank {position:absolute;left:50%;right:0;width:340px;height:25px;margin-left:-170px; background:#e4e4e4;z-index:9;}
.main_linegraph .scroll_box {max-width:1220px;overflow-x:auto;}
.main_linegraph .scroll {width:1220px;height:220px;}
.main_linegraph .bar_x { position:absolute;left:20px;right:20px;bottom:33px;height:10px;border-top:1px solid #666; background:#e4e4e4;z-index:10;}
.main_linegraph .bar_y { position:absolute;left:15px;top:35px;bottom:43px;width:10px;border-right:1px solid #666;background:#e4e4e4;z-index:10;}*/
/*.main_linegraph.m_r0 .bar_x {left:30px;bottom:42px;height:0;}
.main_linegraph.m_r0 .bar_y {left:28px;top:25px;width:1px;}
.main_linegraph.m_r0 .scroll_box {max-width:auto;}
.main_linegraph.m_r0 .scroll {width:auto;}*/
.main_linegraph .unit .x {top:12px;left:22px;}
.main_linegraph .unit .y {bottom:9px;right:16px;}
.main_linegraph .legend {/*position:absolute;right:0;top:0;;*/text-align:right;line-height:22px;font-size:10px;z-index:12;letter-spacing:0;}
.main_linegraph .legend .icon {display:inline-block;width:10px;height:10px;margin:0 5px 0 25px;border-radius:20px;vertical-align:middle;}
.main_linegraph .legend .icon1 {background:#00a2df;}
.main_linegraph .legend .icon2 {background:#e30046;}
.main_linegraph .legend .icon3 {background:#ff6900;}
.main_linegraph .legend .icon4 {background:#84bc00;}
.main_linegraph .legend .icon5 {background:#753abc;}
.main_linegraph .category {display:none;position:absolute;left:0;top:41px;width:95px;padding-right:15px;border:0;text-align:right;line-height:22px;z-index:12;}
.main_linegraph .bar_x {position:absolute;left:58px;right:20px;bottom:53px;height:1px;border-top:1px solid #666; background:#e4e4e4;z-index:10;}
.main_linegraph .bar_y {position:absolute;left:56px;top:35px;bottom:53px;width:10px;border-right:1px solid #666;z-index:10;}
.main_linegraph.m_r0 {padding:0 0 5px 0;margin-left:45px;}
.main_linegraph.m_r0 .legend  {}

.main_linegraph .graph_line {margin-top:10px;width:100%;height:157px;}
.main_linegraph .flot-y-axis .tickLabel {width:50px;padding-right:5px;}
.main_linegraph .legend table {top:-25px !important;right:-10px !important;width:auto;}

.legend > div { background:none !important;}
.legend td > div {border:0 !important;padding:0;}
.legend td > div div {width:0 !important;border-width:5px !important;border-radius:10px;}
.legend table .legendLabel {padding-right:20px;color:#111; font-size:12px;}
.legend table .legendColorBox {padding-right:5px;}
.legend table .legendColorBox div div {height:13px !important;width:13px !important;border-radius:30px;border:0;}
.legend table .legendColorBox:first-child div div {background:url(/images/icon_category1.png) no-repeat center -37px #00a2df;}
.legend table .legendColorBox:nth-child(3) div div {background:url(/images/icon_category2.png) no-repeat center -37px #e30046;}
.legend table .legendColorBox:nth-child(5) div div {background:url(/images/icon_category3.png) no-repeat center -37px #ff6900;}
.legend table .legendColorBox:nth-child(7) div div {background:url(/images/icon_category4.png) no-repeat center -37px #84bc00;}
.legend table .legendColorBox:nth-child(9) div div {background:url(/images/icon_category5.png) no-repeat center -37px #753abc;}

/* 서브 라인그래프 */
.sub_linegraph {position:relative;height:220px;padding:0;}
.sub_linegraph .bar_x { position:absolute;left:70px;right:20px;bottom:24px;height:1px;border-top:1px solid #666;z-index:10;}
.sub_linegraph .bar_y { position:absolute;left:65px;top:5px;bottom:25px;width:5px;border-right:1px solid #666;z-index:10;}
.sub_linegraph .unit { position:absolute;left:8px;bottom:17px;width:40px;font-size:11px; text-align:right;}
.sub_linegraph .graph_line {width:100%;height:220px;}
.sub_linegraph .legend { display:none;}
.sub_linegraph .flot-y-axis .tickLabel {width:60px;padding-right:5px;}

.sub_linegraph.energy {margin-bottom:30px;}

/* 서브 만족도 막대그래프 */
.graph_bar { position:relative;margin:10px 20px 20px 70px;border:1px solid #444;}
.graph_bar .unit1, .graph_bar .unit2, .graph_bar .unit3, .graph_bar .unit4 {position:absolute;left:-64px;top:8px;width:55px;padding:17px 0 0 0;background-image:url(/images/icon_info.png);background-repeat:no-repeat;background-position:right top;font-size:12px; line-height:16px; text-align:right;}
.graph_bar .unit2 {padding:0 0 16px 0;top:69px;background-position:right bottom;}
.graph_bar .unit3 {padding:0 0 16px 0;top:178px;background-position:right bottom;}
.graph_bar .unit4 {padding:0 0 16px 0;top:133px;background-position:right bottom;}
.graph_bar .unit1 .tooltip, .graph_bar .unit2 .tooltip, .graph_bar .unit3 .tooltip, .graph_bar .unit4 .tooltip {display:none;position:absolute;left:64px;width:100%;height:40px;padding:15px 0 0;background:#e4e4e4;font-size:14px;color:#666;text-align:center;z-index:100;word-break:keep-all;word-wrap:break-word;}
.graph_bar .unit1 .tooltip {top:-8px;height:45px;line-height:30px;}
.graph_bar .unit2 .tooltip {top:-7px;height:43px;line-height:30px;}
.graph_bar .unit4 .tooltip {top:-11px;height:34px;line-height:20px;}
.graph_bar .unit3 .tooltip {top:-5px;height:45px;line-height:30px;}
.graph_bar .unit1:hover .tooltip, .graph_bar .unit2:hover .tooltip, .graph_bar .unit4:hover .tooltip, .graph_bar .unit3:hover .tooltip {display:block;}

.graph_bar td {position:relative;height:60px;border-right:1px solid #fff;border-bottom:1px solid #fff;text-align:center; vertical-align:middle;}
.graph_bar td.average {height:50px;}
.graph_bar .line td {height:120px;}
.graph_bar .line td:before {content:'';position:absolute;left:0;top:60px;width:100%;height:1px;border-top:1px dotted #999;z-index:10;}
.graph_bar td .bar {position:relative;margin:0 auto;height:80px;width:37px;.margin-top:25px;}
.graph_bar td .bar .good_bar, .graph_bar td .bar .bad_bar {width:37px;height:40px;display:table-cell;}
.graph_bar td .bar .good_bar {vertical-align:bottom;}
.graph_bar td .bar .bad_bar {position:absolute;left:0;vertical-align:top;}
.graph_bar td .bar .per {position:absolute;left:0;display:block;width:100%;font-size:12px;}
.graph_bar td .bar .per_top {margin-top:-22px; font-size:14px;color:#555; font-weight:bold;}
.graph_bar td .bar .per_bot {margin-top:4px;}
.graph_bar td .bar .rect {display:block;}
.graph_bar td .bar .rect1 {background:#006600;}
.graph_bar td .bar .rect2 {background:#339900;}
.graph_bar td .bar .rect3 {background:#84bc00;}
.graph_bar td .bar .rect4 {background:#adc700;}
.graph_bar td .bar .rect5 {background:#ffcc00;}
.graph_bar td .bar .rect6 {background:#ff6900;}
.graph_bar td .bar .rect7 {background:#e30046;}

.graph_circle {position:relative;margin:0 auto;width:40px;height:40px;}
/*.graph_circle canvas {width:50px !important;height:50px !important;transform:translate(-5px, -10px);}*/
.graph_circle .circle_text { position:absolute;left:50%;top:50%;width:40px;height:30px;margin:-10px 0 0 -21px;text-align:center;font-size:11px;font-weight:bold; z-index:9;}
.graph_circle .dounut {width:39px;height:39px;}

.graph_circle svg {width:40px;height:40px;transform:rotate(-90deg);transform-origin:50% 50%; background-color:#eee; border-radius:50%;}
.graph_circle circle {fill:#fff;stroke-width:5;stroke-dashoffset:0;}
.circle_air .graph_circle circle {stroke:#00A3E0;}
.circle_thermal .graph_circle circle {stroke:#e30345;}
.circle_lighting .graph_circle circle {stroke:#ff6808;}
.circle_acoustic .graph_circle circle {stroke:#84bd00;}
.circle_spatial .graph_circle circle {stroke:#753abc;}

/* 서브 하단 만족도 막대그래프 */
/*.graph_bar_mini .graph_line {width:100%;height:100px;}
.graph_bar_mini .flot-x-axis .tickLabel {text-indent:0 !important; line-height:14px; font-size:12px;word-break:keep-all;word-wrap:break-word;}
.graph_bar_mini .flot-y-axis .tickLabel {width:30px;padding-right:5px;text-indent:0 !important; font-size:12px;}*/
.graph_bar_mini {position:absolute;right:0;top:5px;width:72%;}
.graph_bar_mini .graph {height:80px;margin:0 5px;background:url(/images/main_line.png) repeat-x 0 20px;}
.graph_bar_mini .graph li {position:relative;float:left;width:14%;height:41px;margin-top:19px;text-align:center;}
.graph_bar_mini .graph li .bar { position:absolute;left:50%;bottom:0;margin-left:-15px;width:30px;min-height:0;}
.graph_bar_mini .graph li .num { position:absolute;left:0;top:-18px;width:100%;font-size:10px;text-align:center;color:#000;text-indent:0;}
.graph_bar_mini .graph li .icon {position:absolute;left:0;bottom:-25px;display:block;width:100%;height:17px; text-align:center;font-size:10px; text-indent:0;word-break:keep-all;word-wrap:break-word;line-height:14px;}
.graph_bar_mini .graph .bar1 .bar {background:#e30046;}
.graph_bar_mini .graph .bar2 .bar {background:#ff6900;}
.graph_bar_mini .graph .bar3 .bar {background:#ffcc00;}
.graph_bar_mini .graph .bar4 .bar {background:#adc700;}
.graph_bar_mini .graph .bar5 .bar {background:#84bc00;}
.graph_bar_mini .graph .bar6 .bar {background:#339900;}
.graph_bar_mini .graph .bar7 .bar {background:#006600;}


.en_ver .graph_bar_mini .graph li {width:33%;}

/* 에너지 도넛 */
.energy_donut {position:absolute;left:11%;top:50%;width:180px;height:90px;margin-top:-60px;overflow:hidden;/*background:url(/images/graph_bg.png) no-repeat;background-size:100% auto;*/}
.energy_circle .circle_text {position:absolute;left:50%;top:100%;width:160px;height:160px;border-radius:50%;overflow:hidden;background:#ececec;margin:-80px 0 0 -80px;padding-top:20px;text-align:center;z-index:10;color:#424242;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.energy_circle .circle_text .text1 {font-size:16px;}
.energy_circle .circle_text .text2 {font-size:12px;line-height:48px;}
.energy_circle .circle_text .text2 strong {padding-right:2px;font-size:36px;font-weight:normal;letter-spacing:-1px;}
.energy_circle .dounut {width:180px;height:180px;}
.energy_circle .text3 {position:absolute;left:33px;bottom:28px;font-size:14px;font-weight:bold;color:#00afa6;z-index:10;}

.energy_main_box.main .energy_circle .circle_text {background:#e4e4e4;}

@media all and (max-width:1550px) {
	.energy_donut {left:8%;}
}
@media all and (max-width:1400px) {
	.energy_donut {left:5%;}
}


/* 날씨 도넛 */
.weather_circle {position:relative;width:160px;height:160px;margin:0 auto;background:url(/images/graph_bg.png) no-repeat;background-size:100% auto;}
.weather_circle .circle_text {position:absolute;left:50%;top:50%;width:140px;height:140px;border-radius:50%;overflow:hidden;background:#fff;margin:-70px 0 0 -70px;padding-top:40px;text-align:center;z-index:10;color:#424242;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.weather_circle .circle_text .text1 {font-size:14px;line-height:1;}
.weather_circle .circle_text .text2 {font-size:16px;line-height:1;}
.weather_circle .circle_text .text2 strong {padding-right:2px;font-size:50px;font-weight:normal;letter-spacing:-1px;}
.weather_circle .dounut {width:160px;height:160px;}
.weather_circle .text3 {position:absolute;left:33px;bottom:28px;font-size:14px;font-weight:bold;color:#8457d6;z-index:10;}

.battery_img {position:relative;width:100%;height:66px;padding:6px 15px 6px 6px;background:url(/images/battery_bg.png) 0 0 no-repeat;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.battery_img .front {position:absolute;right:0;top:0;bottom:0;width:15px;background:url(/images/battery_bg2.png) no-repeat;}
.battery_img .battery_wrap {position:relative;width:100%;height:100%;}
.battery_img .progress {position:relative;display:inline-block;height:54px;background:#8457d6;z-index:2;overflow:hidden;}
.battery_img .progress .txt {color:#fff !important;z-index:2;}
.battery_img .progress .txt span {color:#fff;}
.battery_img .txt {position:absolute;width:100%;left:0;top:0;right:0;bottom:0;display:block;overflow:hidden;text-align:center;color:#424242;font-size:20px;font-weight:bold;line-height:54px;z-index:1;}
.battery_img .txt span {font-size:26px;color:#753BBD;}


/* ================================================================================================================================
	프린트 페이지
================================================================================================================================ */
.print_wrapper .graph_link .blank {background:#fff;}
.print_wrapper .graph_link a {font-size:12px !important;text-indent:35px;line-height:33px;}
.print_wrapper .main_linegraph .bar_y { background:#fff;}
/* .print_wrapper .main_linegraph .flot-y-axis .tickLabel {color:#fff;}
.print_wrapper .main_linegraph .legend { display:none;} */
.print_wrapper .sub_linegraph .bar_y {background:#fff;}

.print_wrapper .graph_bar td {border-right:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;}
.print_wrapper .graph_bar .unit1, .print_wrapper .graph_bar .unit2, .print_wrapper .graph_bar .unit3, .print_wrapper .graph_bar .unit4 {background:none;}
.print_wrapper .graph_bar .unit1:hover .tooltip, .print_wrapper .graph_bar .unit2:hover .tooltip, .print_wrapper .graph_bar .unit3:hover .tooltip, .print_wrapper .graph_bar .unit4:hover .tooltip {display:none !important;}