@charset "UTF-8";
/* GIS 탑메뉴 */
header.gis-top { position: absolute; left:0; top:0; z-index: 100; width:100%; height: 65px; background-color:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
header.gis-top .inner { padding: 0 40px; }
header.gis-top .logo { display: inline-block; margin: 9px 0; }
header.gis-top .logo img { vertical-align: middle; }
header.gis-top .logo .gis_logo { display: inline-block; margin-left: 10px; padding-left: 10px; vertical-align: middle; border-left: 1px solid #d2d2d2; }
header.gis-top .btn-menuToggle { display: inline-block; position: absolute; right: 30px; top: 45px; z-index: 20; width: 38px; height: 38px; background: #fff url("../images/icon_arrowup.png") no-repeat center 24px; border-radius: 50%; box-shadow: 0 2px 2px #a9a9a9; cursor: pointer; }
header.gis-top .btn-menuToggle.off { background: #fff url("../images/icon_arrowdown.png") no-repeat center 25px; }
header.gis-top .nav-gis { position: absolute; left: 420px; top: 0; z-index: 100; }
header.gis-top .nav-gis > ul > li { position: relative; float: left; height: 65px; margin-right: 60px; padding: 0 15px; font-size: 18px; font-weight: bold; line-height: 65px; }
header.gis-top .nav-gis > ul > li > a { display: inline-block; height: 80px; box-sizing: border-box; }
header.gis-top .nav-gis > ul > li:hover > a, header.gis-top .nav-gis > ul > li.on > a { color: #ed2728; border-bottom: 3px solid #ed2728; }
header.gis-top .nav-gis > ul > li:hover div.first-level { display: block; }
header.gis-top .nav-gis div.first-level { display: none; position: absolute; left: -57px; top: 65px; z-index: 100; width: 180px; padding-top: 5px; text-align: left; }
header.gis-top .nav-gis div.first-level ul { padding: 10px 0; background-color: #fff; border-top: 2px solid #ed2728; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
header.gis-top .nav-gis div.first-level ul li { position: relative; padding: 0 25px; font-size: 14px; line-height: 30px; }
header.gis-top .nav-gis div.first-level ul li a { display: block; color: #444; }
header.gis-top .nav-gis div.first-level ul li.depth:after { content: ""; display: inline-block; position: absolute; right: 10px; top: 10px; width: 10px; height: 10px; background: url("../images/gis/icon_arrow_right02.png") no-repeat center top; }
header.gis-top .nav-gis div.first-level ul li.depth:hover:after { background: url("../images/gis/icon_arrow_right.png") no-repeat center top; }
header.gis-top .nav-gis div.first-level ul li:hover > a { color: #ed2728; }
header.gis-top .nav-gis div.first-level ul li:hover .second-level { display: block; }
header.gis-top .nav-gis div.first-level .second-level { display: none; position: absolute; left: 180px; top: -12px; width: 200px; padding-left: 5px; }
header.gis-top .nav-gis div.first-level .second-level li { line-height: 28px; font-size: 13px; }
header.gis-top .nav-gis div.first-level .second-level li:hover:after { display: none; }
header.gis-top .nav-gis div.first-level .second-level li:hover > a { color: #ed2728; }
header.gis-top .nav-gis div.first-level .second-level li > a { color: #777; }
header.gis-top .right-menu { position: absolute; right: 40px; top: 0; z-index: 90; overflow: hidden; background-color: #fff; }
header.gis-top .right-menu li { float: left; height: 40px; margin: 12px 0 12px 20px; line-height: 40px; font-size: 12px; color: #444; }
header.gis-top .right-menu li.user { padding-left: 30px; /* background: url("../images/gis/icon_user.png") no-repeat left center; */ }
header.gis-top .right-menu li.sitemap { line-height: 40px; cursor: pointer; }
header.gis-top .right-menu li.sitemap img { vertical-align: middle; }

/* GIS 레이어메뉴 */
.gis { position: relative; /* GIS 사이트맵 */ }
.gis .map-layer { position: absolute; left: 330px; top: 93px; z-index: 100; }
.gis .map-layer > li { position: relative; margin-bottom: 10px; background-color: #000; border-radius: 3px; cursor: pointer; }
.gis .map-layer > li.on, .gis .map-layer > li:hover { background-color: #ed2728; }
.gis .map-layer li { font-size: 13px; }
.gis .map-layer li img { vertical-align: middle; }
.gis .map-layer .sub-menu { display: none; position: absolute; left: 50px; top: 0; z-index: 100; width: 240px; font-weight: bold; background-color: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); cursor: default; }
.gis .map-layer .sub-menu .close { display: none; position: absolute; right: 15px; top: 15px; z-index: 80; width: 10px; height: 10px; background: url("../images/icon_close02.png") no-repeat center top; opacity: 1; cursor: pointer; }
.gis .map-layer .sub-menu .tit { padding: 0 17px; color: #777; line-height: 40px; border-bottom: 1px solid #dddee1; }
.gis .map-layer li.etc .sub-menu { width: 330px; }
.gis .map-layer > li.on .sub-menu{display:block;}
.gis .map-layer input[type="checkbox"] + label span { margin: -5px 5px 0 0; }
.gis .site-map { display: none; position: fixed; left: 50%; top: 50%; z-index: 90; width: 1080px; height: 730px; margin: -365px 0 0 -540px; background-color: #fff; border: 1px solid #d9d9d2; box-sizing: border-box; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
.gis .site-map .inner { width:auto; min-width:auto; padding:20px 30px;overflow:hidden; }
.gis .site-map .close { position: absolute; right: 25px; top: 25px; z-index: 90; width: 14px; height: 14px; background: url("../images/icon_close.png") no-repeat center center; background-size: 100% auto; cursor: pointer; }
#map { height:100%; overflow: hidden; }

#map .bgMapApiListBtn {position:absolute; right: 35px; top:10px; z-index: 9; cursor:pointer;}
#map .bgMapApiList {position: absolute; right: 90px; top: 10px; z-index: 9;width: 262px;height: 65px;margin: 0px;padding: 5px ;border-radius: 4px;border: solid 1px #b6b6b6;background-color: #fff;}
#map .bgMapApiList .infoLabel {width: 56px;height: 31px;margin: 10px 6px 0 0;font-family: NotoSansCJKkr;font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #5b5d5b; float:left;}
#map .bgMapApiList .bgMap {width:50px;height: 58px;float:left;text-align: center;cursor: pointer; }
/* #map .bgMapApiList .bgMap .icon.on  {    max-width: 100%; height: auto; border:1px solid #ed1c24; padding: 0px; border-radius: 5px;} */
#map .bgMapApiList .bgMap:hover { border:1px solid #fff;  }
#map .bgMapApiList .apiLabel {width: 33px;height: 11px;font-family: NotoSansCJKkr;font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #7f7f7f;}
#map .bgMapApiList .apiLabel.on {color: #000; font-weight: 600;}

#map .buldLayerListBtn {position:absolute; right: 35px; top:87px; z-index: 9; cursor:pointer;}
#map .buldLayerList {position: absolute; right: 90px; top: 83px; z-index: 9;width: 323px;height: 75px;margin: 0px;padding: 5px 5px 3px 8px;border-radius: 4px;border: solid 1px #b6b6b6;background-color: #fff;}
#map .buldLayerList .infoLabel { position: absolute; top: 3px;width: 56px;height: 14px;margin: 12px 13px 11px 0;font-family: NotoSansCJKkr;font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #5b5d5b; float:left;}
/* #map .buldLayerList .buldLayer {position:absolute; top:10px; left:80px; float: left;} */
#map .buldLayerList .buldLayer select { width: 200px; border-radius: 4px;}
#map .buldLayerList .buldLayerItem {display:inline-block; background:#f0f0f0; border-radius:11px;}

#map .buldLayersItem {display:inline-block; background:#f0f0f0; margin:0px 5px; font-size:11px; text-align:center; padding:1px 10px; border-radius:10px;  cursor:pointer; }
#map .buldLayersItem span {display:block;}
#map .buldLayersItem .buldLayerTitle {color:#000000; font-weight:bold;}
#map .buldLayersItem .buldLayerExp {font-size:10px; color:#a0a0a0;}
#map .buldLayersItem:hover {  top:1px; position: relative; }

#map .lassoListBtn {position:absolute; right: 20px; top:163px; z-index: 9; cursor:pointer;}
#map .lassoList {position: absolute; right: 75px; top: 163px; z-index: 9;width: 272px;height: 65px;margin: 0 0 9px;padding: 5px 13px 3px 13px;border-radius: 4px;border: solid 1px #8d8d8d;background-color: #fff;}
#map .lassoList .lassoListItem {display:inline-block; font-size:11px; margin:0px 5px;}
#map .lassoList .lassoListItem span {display:block; text-align:center; color:#7f7f7f;}

.inhegaBtn {position:absolute; right: 35px; top:241px; z-index: 9; cursor:pointer;}
#searchBld {padding:0px; text-align: center; background-color: transparent; border: 0; cursor: pointer; }

#map .map-level { position: absolute; right: 37px; top: 504px; z-index: 100; width: 22px; height: 22px; line-height: 20px; text-align: center; font-size: 15px; color: #fff; background-color: #ed1c24; border: 1px solid #5e6368; border-radius: 3px; cursor: default; }

/*
#map .map-type { }
#map .map-type li { float: left; margin-left: 2px; background-color: #fff; border: 1px solid #5e6368; border-radius: 3px; overflow: hidden; cursor: pointer; }
#map .map-type li div { font-size: 11px; color: #444; text-align: center; line-height: 20px; }
#map .map-type li.on, #map .map-type li:hover { border-color: #ed1c24; }
*/
#map .map-type-buld { position: absolute; right: 16px; top: 50px; z-index: 100; }
#map .map-type-buld li { float: left; margin-left: 2px; background-color: #fff; border: 1px solid #5e6368; border-radius: 3px; overflow: hidden; cursor: pointer; }
#map .map-type-buld li div { font-size: 11px; color: #444; text-align: center; line-height: 20px; }
#map .map-type-buld li.on, #map .map-type li:hover { border-color: #ed1c24; }

/* #map .btn-area { position: absolute; right: 22px; top: 388px; z-index: 100; width: 24px; } */
#map .btn-area {position:absolute; right: 35px; top:164px; z-index: 9; cursor:pointer;}
#map .btn-area .group { margin-bottom: 2px; background-color: #fff; border-radius: 2px; border: 1px solid #8d8d8d; }
/* #map .btn-area .group button { width: 22px; height: 22px; padding: 0; text-align: center; background-color: #fff; border: 0; cursor: pointer; } */
#map .btn-area .group button {padding:0px; text-align: center; background-color: transparent; border: 0; cursor: pointer; }
/* #map .btn-area .group button + button { border-top: 1px solid #cacdd1; } */

#map .btn-area #lassoTools {position:absolute; right:55px; top:-3px; z-index:9; width:202px; height:76px; padding: 0px 5px 3px 5px;border-radius: 4px;border: solid 1px #b6b6b6;background-color: #fff;}
/* #map .btn-area #lassoTools .selmenu {display:flex; } */
#map .btn-area #lassoTools .lassoToolsItem {padding:4px 4px 0px 4px; margin:2px 2px 0px 2px; text-align:-webkit-center;float:left;}
#map .btn-area #lassoTools .lassoToolsItem img {display:block;}
#map .btn-area #lassoTools .lassoToolsItem span {font-size:12px; color:#7f7f7f;}
/* #map .btn-area #lassoTools .lassoToolsItem:hover {   border:1px solid #ffffff;} */
#map .btn-area #lassoTools .lassoToolsItem:hover {  top:1px; position: relative; }
#map .btn-area #lassoTools .lassoToolsItem .lassoMsg {width: 33px;height: 11px;font-family: NotoSansCJKkr;font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #7f7f7f;}
#map .btn-area #lassoTools .lassoToolsItem .lassoMsg.on {color: #4441d4; font-weight: 600;}

#map .btn-area #lassoTools .lassoToolsSearch {padding:0px 4px 4px 4px; margin:0px 2px 2px 2px; text-align:-webkit-center;float:left;}
#map .btn-area #lassoTools .lassoToolsSearch .lassoToolsSearchLabel{background-color: #7f7f7f;width: 173px;color: white;border-radius: 5px;font-size: small;}
#map .btn-area #lassoTools .lassoToolsSearch .lassoToolsSearchLabel.on {background-color: #4441d4; }
/* #map .btn-area #lassoToolsSubMenu {position:absolute; right:55px; top:0px; z-index:9; width:120px; padding: 0px 5px 3px 5px;border-radius: 4px;border: solid 1px #b6b6b6;background-color: #fff;} */


.activeLasso {padding-top:3px; width:50px; height:66px; background:#4441d4; border-radius:5px; color:white; font-size:11px; text-align:-webkit-center;}
.activeLasso img {display:block;}
.guideText{position:absolute; background:rgba(0,0,0,0.5); color:white; border-radius:15px; padding:5px 20px; width:450px; font-size:14px; text-align:center; bottom:15px; left:50%; transform:translate(-50%);}

.gis .site-map .header { height: 65px; padding: 0 30px; line-height: 65px; font-size: 20px; font-weight: bold; background-color: #ecedf0; border-bottom: 1px solid #dddee1; }
.gis .site-map .first-level { float: left; width: 200px; }
.gis .site-map .first-level .title { position: relative; padding-bottom: 30px; font-size: 16px; font-weight: bold; color: #444; }
.gis .site-map .first-level .title:after { content: ""; position: absolute; left: 0; top: 40px; width: 20px; height: 3px; background-color: #ed2728; }
.gis .site-map .first-level .list > li { font-size: 14px; line-height: 28px; color: #444; }
.gis .site-map .first-level .list > li:before { content: ""; display: inline-block; width: 3px; height: 3px; margin: -2px 5px 0 0; background-color: #979798; vertical-align: middle; }
.gis .site-map .first-level .list li a { color: #444; }
.gis .site-map .first-level .list li a:hover { color: #ed2728; }
.gis .site-map .first-level .second-level { padding-left: 20px; }
.gis .site-map .first-level .second-level li { font-size: 12px; line-height: 24px; color: #777; }
.gis .site-map .first-level .second-level li a { color: #777; }

/* 토폴로지맵 */
.topology { margin-bottom: 20px; }
.topology::after { content: ""; display: block; clear: both; }
.topology .map-wrap { float: left; width: 13%; min-width: 150px; max-width: 500px; }
.topology .map-wrap:before { content: ""; position: absolute; top: 0; right: -6px; width: 11px; height: 100%; background:transparent url('../images/bg_tabS.png') repeat-y center top; }
.topology .map-wrap:after { content: ""; position: absolute; top: 50%; right: -5px; z-index: 1; width: 10px; height: 62px; margin-top: -31px; background: url("../images/icon_handler.png") no-repeat center center; }
.topology .map { position: relative; z-index: 10; height: 100%; padding-bottom: 40px; overflow:hidden; border: 1px solid #444; border-radius: 5px; box-sizing: border-box; }
.topology .map .tree-type02 { height:calc(100% - 60px); overflow:auto; }
.topology .top { padding: 0 12px; font-size: 14px; color: #222; line-height: 32px; border-bottom: 1px solid #b2b4b8; white-space:nowrap; }
.topology .map li i { display: inline-block; width: 15px; height: 15px; margin: -2px 2px 0 0; vertical-align: middle; }
.topology .map li i.icon_equip_red { background: url("../images/icon_equip_red.png") no-repeat center center; }
.topology .map li i.icon_equip_green { background: url("../images/icon_equip_green.png") no-repeat center center; }
.topology .map li i.icon_equip_yellow { background: url("../images/icon_equip_yellow.png") no-repeat center center; }
.topology .option { position: absolute; left: 0; bottom: 0; width: 100%; padding:0 10px; font-size: 12px; color: #666; box-sizing:border-box; border-top: 1px solid #b2b4b8; }
.topology .map .option .setting { display: inline-block; padding: 0 12px; margin-right: 7px; border-right: 1px solid #b2b4b8; }
.topology .map .option .setting:before { content: ""; display: inline-block; width: 14px; height: 14px; margin: -1px 2px 0 0; background: url("../images/icon_setting02.png") no-repeat left center; vertical-align: middle; }
.topology .map .option label { display: inline-block; margin: -2px 10px 0 0; line-height: 30px; }

/* 편집 */
.topology.modify .map-wrap { width: 26%; min-width: auto; max-width: none; }
.topology.modify .top .btn-area { position: absolute; right: 10px; top: 4px; height: 20px; }
.topology.modify .top .btn-area span { display: inline-block; width: 20px; height: 20px; margin-left: 5px; cursor: pointer; }
.topology.modify .top .btn-area .minus { background: url("../images/icon_minus03.png") no-repeat center center; }
.topology.modify .top .btn-area .plus { background: url("../images/icon_plus03.png") no-repeat center center; }
.topology.modify .top .btn-area .refresh { background: url("../images/icon_refresh.png") no-repeat center center; }
.topology.modify .map { width:216px; height: 100%; float:left; padding-bottom:0; border-top-right-radius:0; border-bottom-right-radius:0; border:0; overflow:visible; }
.topology.modify .map:before { content: ""; position: absolute; top: 0; right: -6px; width: 11px; height: 100%; background:transparent url('../images/bg_tabS.png') repeat-y center top; }
.topology.modify .map:after { content: ""; position: absolute; top: 50%; right: -5px; z-index: 1; width: 10px; height: 62px; margin-top: -31px; background: url("../images/icon_handler.png") no-repeat center center; }
.topology.modify .map .map-inner { position:relative; height:calc(100vh - 160px); box-sizing:border-box; padding-bottom: 40px; overflow:hidden; border:1px solid #b2b4b8; }

.topology.modify .detail { position:relative; float:left; width:312px; height:calc(100vh - 160px); box-sizing: border-box; border: 1px solid #babbbe; }
.topology.modify .detail .top { padding: 0 17px; background-color: #dfe1e6; }
.topology.modify .detail .table-wrap { height:100%; overflow-y: auto; }
.topology.modify .detail .table-wrap table td { position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;background-color:transparent; }
.topology.modify .detail .bottom { padding: 12px 17px; line-height: 1.4; background-color: #eaebed; box-sizing: border-box; }
.topology.modify .detail .bottom .title { margin-bottom: 10px; font-size: 14px; line-height: 26px; color: #222; border-bottom: 1px solid #444; }
.topology.modify .detail .bottom table.type02 td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topology.modify .q-panel { width: 74%; height: 720px; }

/* Qunee */
.topology .q-panel { position: relative; float: right; width: 87%; height: 500px; box-sizing: border-box; }
.topology-wrap { position: relative; }
.topology-wrap.off { margin-top: 20px; }
.topology-wrap .btn-tm-close { display: inline-block; position: absolute; right: -30px; bottom: 0; width: 20px; height: 30px; background: url("../images/btn_folding_arr.png") no-repeat left top; border-radius: 2px; cursor: pointer; }
.topology-wrap .btn-tm-close.on { bottom: -24px; background: url("../images/btn_folding_arr.png") no-repeat left bottom; }

/* 토폴로지맵 하단 그리드 관련 검색 영역 */
.failure .search-area { position: relative; padding:5px 20px; margin-bottom: 10px; background-color: #dfe1e6; }
.failure .search-area > * { vertical-align:middle; }
.failure .search-area .subTitle { margin-right:150px; color:#000; font-size:15px; }
.failure .search-area .subTitle span{display: inline-block; padding-left: 50px; }
.failure .search-area .info { display: inline-block; margin: 0 10px 0 5px; }
.failure .search-area .btn-area { position: absolute; right: 20px; top: 5px; }
.failure .search-area .btn-area > * { vertical-align:middle; }

/* 그리드 영역 */
.grid-area { }
.grid-area + .grid-area { margin-top: 40px; }
.grid-area .tabMenuS { position: relative; margin-bottom: 10px; }
.grid-area .tabMenuS .right { position: absolute; right: 0; top: 12px; }
.grid-area .tabMenuS .date-time { font-size: 12px; }
.grid-area .tabMenuS .date-time b { display: inline-block; color: #909090; margin-left: 10px; }
.grid-area .top { position: relative; min-height: 28px; margin-bottom: 10px; line-height: 28px; }
.grid-area .top + .top { padding-top: 15px; border-top: 1px dotted #bababa; }
.grid-area .top + .top .right { top: 15px; }
.grid-area .top .info { font-size: 12px; font-family: "돋움", dotum; color: #666; }
.grid-area .top .info b { display: inline-block; margin-right: 20px; }
.grid-area .top .info b::before { content: ""; display: inline-block; margin: -2px 5px 0 5px; height: 10px; vertical-align: middle; border-left: 1px solid #ccc; }
.grid-area .top .total { font-size: 12px; font-family: "돋움", dotum; color: #666; }
.grid-area .top .total b { display: inline-block; color: #909090; }
.grid-area .top .total b::after { content: ""; display: inline-block; margin: -2px 10px 0 10px; height: 10px; vertical-align: middle; border-right: 1px solid #ccc; }
.grid-area .top .total b:last-child::after { display: none; }
.grid-area .top .right { position: absolute; right: 0; top: 0; }
.grid-area .top .status span { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -3px 3px 0 7px; border-radius: 12px; }
.grid-area .top .status span.red { background-color: #ed2728; }
.grid-area .top .status span.orange { background-color: #ff7814; }
.grid-area .top .status span.yellow { background-color: #f2ef08; }
.grid-area .top .status span.blue { background-color: #0897f2; }
.grid-area .top .status span.purple { background-color: #a70ccd; }
.grid-area .top .status span.pink { background-color:#f26d7d; }
.grid-area .top .status span.green { background-color:#0c0; }
.grid-area .top .status b { display: inline-block; color: #909090; margin: 0 10px 0 3px; }
.grid-area .top .grid-condition .color-board { display: inline-block; margin: 5px 0; padding-right: 25px; height: 14px; line-height: 12px; border-right: 1px solid #b7b7b7; }
.grid-area .top .grid-condition .color-board span.red { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color: #ed2728; }
.grid-area .top .grid-condition .color-board span.orange { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color: #ff7814; }
.grid-area .top .grid-condition .color-board span.yellow { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color: #f2ef08; }
.grid-area .top .grid-condition .color-board span.blue { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color: #0897f2; }
.grid-area .top .grid-condition .color-board span.gray { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color: #babbbe; }
.grid-area .top .grid-condition .color-board span.pink { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color:#f26d7d; }
.grid-area .top .grid-condition .color-board span.green { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: -2px 3px 0 7px; background-color:#0c0; }
.grid-area .top .grid-condition .select-tit { display: inline-block; margin: 0 3px 0 15px; color: #666; }
.grid-area .top .grid-condition .selectWrap { vertical-align: middle; }

.grid-set { display:inline-block; height:28px; line-height:25px; margin-right:10px; border-right:1px solid #ddd; vertical-align:middle; }
.grid-set label { display:inline-block; line-height:28px !important; vertical-align:middle; }
.grid-set b { display:inline-block; line-height:28px; vertical-align:middle; }
/* Qunee Edit */
#graph_panel { position: relative; overflow: hidden; border: solid 1px #ddd; border-radius:4px; }
#graph_panel #search_input { width: calc(100% - 52px); }
#graph_panel .q-toolbar { height: 30px; padding: 0; }
#graph_panel .q-toolbar #toolbar div { vertical-align: top; }
#graph_panel .q-toolbar .q-right { float: right; margin:0; }
#graph_panel .q-content { min-height:350px; }
#graph_panel .btn { display: inline-block; padding-left: 10px; widtn: 38px; margin-bottom: 2px; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
#graph_panel .btn:focus, #graph_panel .btn:active:focus, #graph_panel .btn.active:focus, #graph_panel .btn.focus, #graph_panel .btn:active.focus, #graph_panel .btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
#graph_panel .btn:hover, #graph_panel .btn:focus, #graph_panel .btn.focus { color: #333; text-decoration: none; }
#graph_panel .btn:active, #graph_panel .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
#graph_panel .btn.disabled, #graph_panel .btn[disabled], #graph_panel fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: 0.65; }
#graph_panel .btn-default { color: #333; padding: 5px 10px; background-color: #fff; border-color: #ccc; }
#graph_panel .btn-default:hover, #graph_panel .btn-default:focus, #graph_panel .btn-default.focus, #graph_panel .btn-default:active, #graph_panel .btn-default.active, #graph_panel .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; }
#graph_panel .btn-default:active, #graph_panel .btn-default.active, #graph_panel .open > .dropdown-toggle.btn-default { background-image: none; }
#graph_panel .btn-default.disabled, #graph_panel .btn-default[disabled], #graph_panel fieldset[disabled] .btn-default, #graph_panel .btn-default.disabled:hover, #graph_panel .btn-default[disabled]:hover, #graph_panel fieldset[disabled] .btn-default:hover, #graph_panel .btn-default.disabled:focus, #graph_panel .btn-default[disabled]:focus, #graph_panel fieldset[disabled] .btn-default:focus, #graph_panel .btn-default.disabled.focus, #graph_panel .btn-default[disabled].focus, #graph_panel fieldset[disabled] .btn-default.focus, #graph_panel .btn-default.disabled:active, #graph_panel .btn-default[disabled]:active, #graph_panel fieldset[disabled] .btn-default:active, #graph_panel .btn-default.disabled.active, #graph_panel .btn-default[disabled].active, #graph_panel fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; }
#graph_panel .btn-default .badge { color: #fff; background-color: #333; }
#graph_panel .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
#graph_panel .btn-primary:hover, #graph_panel .btn-primary:focus, #graph_panel .btn-primary.focus, #graph_panel .btn-primary:active, #graph_panel .btn-primary.active, #graph_panel .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #286090; border-color: #204d74; }
#graph_panel .btn-primary:active, #graph_panel .btn-primary.active, #graph_panel .open > .dropdown-toggle.btn-primary { background-image: none; }
#graph_panel .btn-primary.disabled, #graph_panel .btn-primary[disabled], #graph_panel fieldset[disabled] .btn-primary, #graph_panel .btn-primary.disabled:hover, #graph_panel .btn-primary[disabled]:hover, #graph_panel fieldset[disabled] .btn-primary:hover, #graph_panel .btn-primary.disabled:focus, #graph_panel .btn-primary[disabled]:focus, #graph_panel fieldset[disabled] .btn-primary:focus, #graph_panel .btn-primary.disabled.focus, #graph_panel .btn-primary[disabled].focus, #graph_panel fieldset[disabled] .btn-primary.focus, #graph_panel .btn-primary.disabled:active, #graph_panel .btn-primary[disabled]:active, #graph_panel fieldset[disabled] .btn-primary:active, #graph_panel .btn-primary.disabled.active, #graph_panel .btn-primary[disabled].active, #graph_panel fieldset[disabled] .btn-primary.active { background-color: #337ab7; border-color: #2e6da4; }
#graph_panel .btn-primary .badge { color: #337ab7; background-color: #fff; }
#graph_panel .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
#graph_panel .btn-success:hover, #graph_panel .btn-success:focus, #graph_panel .btn-success.focus, #graph_panel .btn-success:active, #graph_panel .btn-success.active, #graph_panel .open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; }
#graph_panel .btn-success:active, #graph_panel .btn-success.active, #graph_panel .open > .dropdown-toggle.btn-success { background-image: none; }
#graph_panel .btn-success.disabled, #graph_panel .btn-success[disabled], #graph_panel fieldset[disabled] .btn-success, #graph_panel .btn-success.disabled:hover, #graph_panel .btn-success[disabled]:hover, #graph_panel fieldset[disabled] .btn-success:hover, #graph_panel .btn-success.disabled:focus, #graph_panel .btn-success[disabled]:focus, #graph_panel fieldset[disabled] .btn-success:focus, #graph_panel .btn-success.disabled.focus, #graph_panel .btn-success[disabled].focus, #graph_panel fieldset[disabled] .btn-success.focus, #graph_panel .btn-success.disabled:active, #graph_panel .btn-success[disabled]:active, #graph_panel fieldset[disabled] .btn-success:active, #graph_panel .btn-success.disabled.active, #graph_panel .btn-success[disabled].active, #graph_panel fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c; }
#graph_panel .btn-success .badge { color: #5cb85c; background-color: #fff; }
#graph_panel .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
#graph_panel .btn-info:hover, #graph_panel .btn-info:focus, #graph_panel .btn-info.focus, #graph_panel .btn-info:active, #graph_panel .btn-info.active, #graph_panel .open > .dropdown-toggle.btn-info { color: #fff; background-color: #31b0d5; border-color: #269abc; }
#graph_panel .btn-info:active, #graph_panel .btn-info.active, #graph_panel .open > .dropdown-toggle.btn-info { background-image: none; }
#graph_panel .btn-info.disabled, #graph_panel .btn-info[disabled], #graph_panel fieldset[disabled] .btn-info, #graph_panel .btn-info.disabled:hover, #graph_panel .btn-info[disabled]:hover, #graph_panel fieldset[disabled] .btn-info:hover, #graph_panel .btn-info.disabled:focus, #graph_panel .btn-info[disabled]:focus, #graph_panel fieldset[disabled] .btn-info:focus, #graph_panel .btn-info.disabled.focus, #graph_panel .btn-info[disabled].focus, #graph_panel fieldset[disabled] .btn-info.focus, #graph_panel .btn-info.disabled:active, #graph_panel .btn-info[disabled]:active, #graph_panel fieldset[disabled] .btn-info:active, #graph_panel .btn-info.disabled.active, #graph_panel .btn-info[disabled].active, #graph_panel fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #46b8da; }
#graph_panel .btn-info .badge { color: #5bc0de; background-color: #fff; }
#graph_panel .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
#graph_panel .btn-warning:hover, #graph_panel .btn-warning:focus, #graph_panel .btn-warning.focus, #graph_panel .btn-warning:active, #graph_panel .btn-warning.active, #graph_panel .open > .dropdown-toggle.btn-warning { color: #fff; background-color: #ec971f; border-color: #d58512; }
#graph_panel .btn-warning:active, #graph_panel .btn-warning.active, #graph_panel .open > .dropdown-toggle.btn-warning { background-image: none; }
#graph_panel .btn-warning.disabled, #graph_panel .btn-warning[disabled], #graph_panel fieldset[disabled] .btn-warning, #graph_panel .btn-warning.disabled:hover, #graph_panel .btn-warning[disabled]:hover, #graph_panel fieldset[disabled] .btn-warning:hover, #graph_panel .btn-warning.disabled:focus, #graph_panel .btn-warning[disabled]:focus, #graph_panel fieldset[disabled] .btn-warning:focus, #graph_panel .btn-warning.disabled.focus, #graph_panel .btn-warning[disabled].focus, #graph_panel fieldset[disabled] .btn-warning.focus, #graph_panel .btn-warning.disabled:active, #graph_panel .btn-warning[disabled]:active, #graph_panel fieldset[disabled] .btn-warning:active, #graph_panel .btn-warning.disabled.active, #graph_panel .btn-warning[disabled].active, #graph_panel fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #eea236; }
#graph_panel .btn-warning .badge { color: #f0ad4e; background-color: #fff; }
#graph_panel .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
#graph_panel .btn-danger:hover, #graph_panel .btn-danger:focus, #graph_panel .btn-danger.focus, #graph_panel .btn-danger:active, #graph_panel .btn-danger.active, #graph_panel .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; }
#graph_panel .btn-danger:active, #graph_panel .btn-danger.active, #graph_panel .open > .dropdown-toggle.btn-danger { background-image: none; }
#graph_panel .btn-danger.disabled, #graph_panel .btn-danger[disabled], #graph_panel fieldset[disabled] .btn-danger, #graph_panel .btn-danger.disabled:hover, #graph_panel .btn-danger[disabled]:hover, #graph_panel fieldset[disabled] .btn-danger:hover, #graph_panel .btn-danger.disabled:focus, #graph_panel .btn-danger[disabled]:focus, #graph_panel fieldset[disabled] .btn-danger:focus, #graph_panel .btn-danger.disabled.focus, #graph_panel .btn-danger[disabled].focus, #graph_panel fieldset[disabled] .btn-danger.focus, #graph_panel .btn-danger.disabled:active, #graph_panel .btn-danger[disabled]:active, #graph_panel fieldset[disabled] .btn-danger:active, #graph_panel .btn-danger.disabled.active, #graph_panel .btn-danger[disabled].active, #graph_panel fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d43f3a; }
#graph_panel .btn-danger .badge { color: #d9534f; background-color: #fff; }
#graph_panel .btn-link { font-weight: normal; color: #337ab7; border-radius: 0; }
#graph_panel .btn-link, #graph_panel .btn-link:active, #graph_panel .btn-link.active, #graph_panel .btn-link[disabled], #graph_panel fieldset[disabled] .btn-link { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
#graph_panel .btn-link, #graph_panel .btn-link:hover, #graph_panel .btn-link:focus, #graph_panel .btn-link:active { border-color: transparent; }
#graph_panel .btn-link:hover, #graph_panel .btn-link:focus { color: #23527c; text-decoration: underline; background-color: transparent; }
#graph_panel .btn-link[disabled]:hover, #graph_panel fieldset[disabled] .btn-link:hover, #graph_panel .btn-link[disabled]:focus, #graph_panel fieldset[disabled] .btn-link:focus { color: #777; text-decoration: none; }
#graph_panel .btn-lg, #graph_panel .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
#graph_panel .btn-sm, #graph_panel .btn-group-sm > .btn { padding: 5px 10px; font-size: 11px; line-height: 1.5; border-radius: 3px; }
#graph_panel .btn-xs, #graph_panel .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
#graph_panel .btn-block { display: block; width: 100%; }
#graph_panel .btn-block + .btn-block { margin-top: 5px; }
#graph_panel input[type="submit"].btn-block, #graph_panel input[type="reset"].btn-block, #graph_panel input[type="button"].btn-block { width: 100%; }
#graph_panel .btn-group, #graph_panel .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; }
#graph_panel .btn-group > .btn, #graph_panel .btn-group-vertical > .btn { position: relative; float: left; }
#graph_panel .btn-group > .btn:hover, #graph_panel .btn-group-vertical > .btn:hover, #graph_panel .btn-group > .btn:focus, #graph_panel .btn-group-vertical > .btn:focus, #graph_panel .btn-group > .btn:active, #graph_panel .btn-group-vertical > .btn:active, #graph_panel .btn-group > .btn.active, #graph_panel .btn-group-vertical > .btn.active { z-index: 2; }
#graph_panel .btn-group .btn + .btn, #graph_panel .btn-group .btn + .btn-group, #graph_panel .btn-group .btn-group + .btn, #graph_panel .btn-group .btn-group + .btn-group { margin-left: -1px; }
#graph_panel .btn-toolbar { margin-left: -5px; }
#graph_panel .btn-toolbar .btn-group, #graph_panel .btn-toolbar .input-group { float: left; }
#graph_panel .btn-toolbar > .btn, #graph_panel .btn-toolbar > .btn-group, #graph_panel .btn-toolbar > .input-group { margin-left: 5px; }
#graph_panel .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
#graph_panel .btn-group > .btn:first-child { margin-left: 0; }
#graph_panel .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#graph_panel .btn-group > .btn:last-child:not(:first-child), #graph_panel .btn-group > .dropdown-toggle:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#graph_panel .btn-group > .btn-group { float: left; }
#graph_panel .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; }
#graph_panel .btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, #graph_panel .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#graph_panel .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#graph_panel .btn-group .dropdown-toggle:active, #graph_panel .btn-group.open .dropdown-toggle { outline: 0; }
#graph_panel .btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; }
#graph_panel .btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; }
#graph_panel .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
#graph_panel .btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none; }
#graph_panel .btn .caret { margin-left: 0; }
#graph_panel .btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; }
#graph_panel .dropup .btn-lg .caret { border-width: 0 5px 5px; }
#graph_panel .btn-group-vertical > .btn, #graph_panel .btn-group-vertical > .btn-group, #graph_panel .btn-group-vertical > .btn-group > .btn { display: block; float: none; width: 100%; max-width: 100%; }
#graph_panel .btn-group-vertical > .btn-group > .btn { float: none; }
#graph_panel .btn-group-vertical > .btn + .btn, #graph_panel .btn-group-vertical > .btn + .btn-group, #graph_panel .btn-group-vertical > .btn-group + .btn, #graph_panel .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; }
#graph_panel .btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
#graph_panel .btn-group-vertical > .btn:first-child:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#graph_panel .btn-group-vertical > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 4px; }
#graph_panel .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; }
#graph_panel .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, #graph_panel .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#graph_panel .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
#graph_panel .btn-group-justified { display: table; width: 100%; table-layout: fixed; border-collapse: separate; }
#graph_panel .btn-group-justified > .btn, #graph_panel .btn-group-justified > .btn-group { display: table-cell; float: none; width: 1%; }
#graph_panel .btn-group-justified > .btn-group .btn { width: 100%; }
#graph_panel .edit-box { position: absolute; right: 5px !important; top: 50px; z-index: 10; width: 220px; padding: 10px; background-color: rgba(255,255,255,0.9); box-sizing: border-box; border: 1px solid #a9a9a9; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 5px; }
#graph_panel .edit-box .btn-layer { position: absolute; left: -21px; top: 50%; z-index: 10; width: 20px; height: 50px; margin-top: -25px; background: #fff url("../images/icon_arrowleft.png") no-repeat center center; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border: 1px solid #333; border-right: 0; cursor: pointer; }

/* GIS layer */
.layer-gis { display: none; position: absolute; left: 50%; top: 50%; width: 710px; height: 600px; margin: -305px 0 0 -300px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.layer-gis .top { padding: 0 30px; line-height: 65px; font-size: 20px; color: #444; font-weight: bold; background-color: #ecedf0; border-bottom: 1px solid #dddee1; }
.layer-gis .body { padding: 30px; }

/* loading */
#loading { display: none; position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
#loading .lds-roller { display: inline-block; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
#loading .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; }
#loading .lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: -3px 0 0 -3px; }
#loading .lds-roller div:nth-child(1) { animation-delay: -0.036s; }
#loading .lds-roller div:nth-child(1):after { top: 50px; left: 50px; }
#loading .lds-roller div:nth-child(2) { animation-delay: -0.072s; }
#loading .lds-roller div:nth-child(2):after { top: 54px; left: 45px; }
#loading .lds-roller div:nth-child(3) { animation-delay: -0.108s; }
#loading .lds-roller div:nth-child(3):after { top: 57px; left: 39px; }
#loading .lds-roller div:nth-child(4) { animation-delay: -0.144s; }
#loading .lds-roller div:nth-child(4):after { top: 58px; left: 32px; }
#loading .lds-roller div:nth-child(5) { animation-delay: -0.18s; }
#loading .lds-roller div:nth-child(5):after { top: 57px; left: 25px; }
#loading .lds-roller div:nth-child(6) { animation-delay: -0.216s; }
#loading .lds-roller div:nth-child(6):after { top: 54px; left: 19px; }
#loading .lds-roller div:nth-child(7) { animation-delay: -0.252s; }
#loading .lds-roller div:nth-child(7):after { top: 50px; left: 14px; }
#loading .lds-roller div:nth-child(8) { animation-delay: -0.288s; }
#loading .lds-roller div:nth-child(8):after { top: 45px; left: 10px; }
@keyframes lds-roller { 0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

#loading2 { display: none; position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
#loading2 .ldsCancel { position: absolute; left: 50%; top: 50%; width:100px; margin:35px 0 0 -50px;}
#loading2 .ldsCancel a{display:block;width:40px;height:40px;margin:0 auto;border-radius:20px;background:#fff;padding:14px 0 0 14px;box-sizing:border-box;}
#loading2 .ldsCancel strong{display:block;width:100%;margin-top:15px;text-align:center;font-weight:normal;color:#fff;font-size:14px;}
#loading2 .secTime{position:absolute;left:50%;top:50%;width:50px;height:50px;line-height:50px;margin:-73px 0 0 -25px;text-align:center;font-size:12px;color:#fff;font-weight:bold;}
#loading2 #secTime{position:absolute;left:50%;top:50%;width:50px;height:50px;line-height:50px;margin:-73px 0 0 -25px;text-align:center;font-size:12px;color:#fff;font-weight:bold;}
#loading2 .lds-roller { display: inline-block; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -80px 0 0 -32px; }
#loading2 .lds-roller div { animation: lds-roller2 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; }
#loading2 .lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: -3px 0 0 -3px; }
#loading2 .lds-roller div:nth-child(1) { animation-delay: -0.036s; }
#loading2 .lds-roller div:nth-child(1):after { top: 50px; left: 50px; }
#loading2 .lds-roller div:nth-child(2) { animation-delay: -0.072s; }
#loading2 .lds-roller div:nth-child(2):after { top: 54px; left: 45px; }
#loading2 .lds-roller div:nth-child(3) { animation-delay: -0.108s; }
#loading2 .lds-roller div:nth-child(3):after { top: 57px; left: 39px; }
#loading2 .lds-roller div:nth-child(4) { animation-delay: -0.144s; }
#loading2 .lds-roller div:nth-child(4):after { top: 58px; left: 32px; }
#loading2 .lds-roller div:nth-child(5) { animation-delay: -0.18s; }
#loading2 .lds-roller div:nth-child(5):after { top: 57px; left: 25px; }
#loading2 .lds-roller div:nth-child(6) { animation-delay: -0.216s; }
#loading2 .lds-roller div:nth-child(6):after { top: 54px; left: 19px; }
#loading2 .lds-roller div:nth-child(7) { animation-delay: -0.252s; }
#loading2 .lds-roller div:nth-child(7):after { top: 50px; left: 14px; }
#loading2 .lds-roller div:nth-child(8) { animation-delay: -0.288s; }
#loading2 .lds-roller div:nth-child(8):after { top: 45px; left: 10px; }
@keyframes lds-roller2 { 0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

.loading { display: none; position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.loading .lds-roller { display: inline-block; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.loading .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; }
.loading .lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: -3px 0 0 -3px; }
.loading .lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.loading .lds-roller div:nth-child(1):after { top: 50px; left: 50px; }
.loading .lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.loading .lds-roller div:nth-child(2):after { top: 54px; left: 45px; }
.loading .lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.loading .lds-roller div:nth-child(3):after { top: 57px; left: 39px; }
.loading .lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.loading .lds-roller div:nth-child(4):after { top: 58px; left: 32px; }
.loading .lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.loading .lds-roller div:nth-child(5):after { top: 57px; left: 25px; }
.loading .lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.loading .lds-roller div:nth-child(6):after { top: 54px; left: 19px; }
.loading .lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.loading .lds-roller div:nth-child(7):after { top: 50px; left: 14px; }
.loading .lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.loading .lds-roller div:nth-child(8):after { top: 45px; left: 10px; }

.loading2 { display: none; position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.loading2 .ldsCancel { position: absolute; left: 50%; top: 50%; width:100px; margin:35px 0 0 -50px;}
.loading2 .ldsCancel a{display:block;width:40px;height:40px;margin:0 auto;border-radius:20px;background:#fff;padding:14px 0 0 14px;box-sizing:border-box;}
.loading2 .ldsCancel strong{display:block;width:100%;margin-top:15px;text-align:center;font-weight:normal;color:#fff;font-size:14px;}
.loading2 .secTime{position:absolute;left:50%;top:50%;width:50px;height:50px;line-height:50px;margin:-73px 0 0 -25px;text-align:center;font-size:12px;color:#fff;font-weight:bold;}
.loading2 #secTime{position:absolute;left:50%;top:50%;width:50px;height:50px;line-height:50px;margin:-73px 0 0 -25px;text-align:center;font-size:12px;color:#fff;font-weight:bold;}
.loading2 .lds-roller { display: inline-block; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -80px 0 0 -32px; }
.loading2 .lds-roller div { animation: lds-roller2 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; }
.loading2 .lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: -3px 0 0 -3px; }
.loading2 .lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.loading2 .lds-roller div:nth-child(1):after { top: 50px; left: 50px; }
.loading2 .lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.loading2 .lds-roller div:nth-child(2):after { top: 54px; left: 45px; }
.loading2 .lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.loading2 .lds-roller div:nth-child(3):after { top: 57px; left: 39px; }
.loading2 .lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.loading2 .lds-roller div:nth-child(4):after { top: 58px; left: 32px; }
.loading2 .lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.loading2 .lds-roller div:nth-child(5):after { top: 57px; left: 25px; }
.loading2 .lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.loading2 .lds-roller div:nth-child(6):after { top: 54px; left: 19px; }
.loading2 .lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.loading2 .lds-roller div:nth-child(7):after { top: 50px; left: 14px; }
.loading2 .lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.loading2 .lds-roller div:nth-child(8):after { top: 45px; left: 10px; }

/* Trouble Map 탑메뉴 */
header.tm-top { position:absolute; left:0; top:0; z-index: 100; width:100%; height: 65px; background-color:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
header.tm-top .inner { padding: 0 40px; }
header.tm-top .logo { display: inline-block; margin: 9px 0; }
header.tm-top .logo img { vertical-align: middle; }
header.tm-top .logo .tm_logo { display: inline-block; margin-left: 10px; padding-left: 10px; vertical-align: middle; border-left: 1px solid #d2d2d2; }
header.tm-top .btn-menuToggle { display: inline-block; position: absolute; right: 30px; top: 45px; z-index: 20; width: 38px; height: 38px; background: #fff url("../images/icon_arrowup.png") no-repeat center 24px; border-radius: 50%; box-shadow: 0 2px 2px #a9a9a9; cursor: pointer; }
header.tm-top .btn-menuToggle.off { background: #fff url("../images/icon_arrowdown.png") no-repeat center 25px; }
header.tm-top .nav-tm { position: absolute; left: 520px; top: 0; z-index: 100; }
header.tm-top .nav-tm > ul > li { position: relative; float: left; height: 65px; margin-right: 40px; padding: 0 15px; font-size: 18px; font-weight: bold; line-height: 65px; }
header.tm-top .nav-tm > ul > li > a { display: inline-block; height: 65px; box-sizing: border-box; }
header.tm-top .nav-tm > ul > li:hover > a, header.tm-top .nav-tm > ul > li.on > a { color: #ed2728; border-bottom: 3px solid #ed2728; }
header.tm-top .nav-tm > ul > li:hover div.first-level { display: block; }
header.tm-top .nav-tm div.first-level { display: none; position: absolute; left: -57px; top: 65px; z-index: 100; width: 180px; padding-top: 5px; text-align: left; }
header.tm-top .nav-tm div.first-level ul { padding: 10px 0; background-color: #fff; border-top: 2px solid #ed2728; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
header.tm-top .nav-tm div.first-level ul li { position: relative; padding: 0 25px; font-size: 14px; line-height: 30px; }
header.tm-top .nav-tm div.first-level ul li a { display: block; color: #444; }
header.tm-top .nav-tm div.first-level ul li.on:after { content: ""; display: inline-block; position: absolute; right: 10px; top: 10px; width: 10px; height: 10px; background: url("../images/gis/icon_arrow_right.png") no-repeat center top; }
header.tm-top .nav-tm div.first-level ul li.on > a, header.tm-top .nav-tm div.first-level ul li:hover > a { color: #ed2728; }
header.tm-top .nav-tm div.first-level ul li.on .second-level, header.tm-top .nav-tm div.first-level ul li:hover .second-level { display: block; }
header.tm-top .nav-tm div.first-level .second-level { display: none; position: absolute; left: 180px; top: -12px; width: 200px; padding-left: 5px; }
header.tm-top .nav-tm div.first-level .second-level li { line-height: 28px; font-size: 13px; }
header.tm-top .nav-tm div.first-level .second-level li:hover:after { display: none; }
header.tm-top .nav-tm div.first-level .second-level li:hover > a { color: #ed2728; }
header.tm-top .nav-tm div.first-level .second-level li > a { color: #777; }
header.tm-top .right-menu { position: absolute; right: 40px; top: 0; z-index: 90; overflow: hidden; background-color: #fff; }
header.tm-top .right-menu li { float: left; height: 65px; margin-left: 20px; line-height: 65px; font-size: 12px; color: #444; }
header.tm-top .right-menu li.user { padding-left: 30px; background: url("../images/gis/icon_user.png") no-repeat left center; }
header.tm-top .right-menu li.sitemap { line-height: 65px; cursor: pointer; }
header.tm-top .right-menu li.sitemap img { vertical-align: middle; }

/* 트러블맵 레이어*/
.gis .monitoring { position:fixed; left:0; top:65px; bottom:0; z-index:80; width:540px; height:calc(100% - 65px); background-color:#fff; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2); }
.gis .monitoring .btn-toggle { display:inline-block; position:absolute; right:-23px; top:50%; z-index:70; width:24px; height:62px; background:#fff url('../images/icon_arrowleft3.png') no-repeat center center; border-top-right-radius:2px; border-bottom-right-radius:2px; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.3); cursor:pointer; }
.gis .monitoring .btn-toggle.off { background:#fff url('../images/icon_arrowright3.png') no-repeat center center; }
.gis .monitoring .map-layer { left:565px; top:25px; }
.gis .monitoring .top-area { padding:15px 20px 10px 20px; background-color:#ecedf0; }
.gis .monitoring .top-area .info { position:relative; padding-right:125px; line-height:40px; border-bottom:1px solid #b8bbc2; }
.gis .monitoring .top-area .info .title { font-size:20px; border-bottom:1px solid #444; }
.gis .monitoring .top-area .info .txt { font-size:14px; }
.gis .monitoring .top-area .info .txt .date b { display:inline-block; margin: 0 3px 0 7px; }
.gis .monitoring .top-area .info .btn-area { position:absolute; right:0; top:0; }
.gis .monitoring .top-area .btn-excel { display:inline-block; width:50px; height:72px; margin:0 2px; padding-top:50px; text-align:center; font-size:12px; line-height:25px; cursor:pointer; box-sizing:border-box; background:url('../images/btn_excel.png') no-repeat center top; }
.gis .monitoring .top-area .btn-reset { display:inline-block; width:50px; height:72px; margin:0 2px; padding-top:50px; text-align:center; font-size:12px; line-height:25px; cursor:pointer; box-sizing:border-box; background:url('../images/btn_reset.png') no-repeat center top; }
.gis .monitoring .top-area .local { position:relative; padding-right:125px; line-height:40px; border-top:1px solid #fff; }
.gis .monitoring .top-area .local label { padding-left:20px; }
.gis .monitoring .top-area .local label + input + label { margin-left:10px; }
.gis .monitoring .top-area .btn-view { display:inline-block; position:absolute; right:0; top:10px; width:107px; height:25px; text-align:center; font-size:12px; line-height:21px; color:#fff; cursor:pointer; box-sizing:border-box; background-color:#ed2728; border:1px solid #a4343a; }
.gis .monitoring .tableWrap { height:calc(100% - 203px); border-top:1px solid #444; overflow-y:auto; }
.gis .monitoring .tableWrap table { width:100%; table-layout:fixed; border-bottom:1px solid #cacaca;}
.gis .monitoring .tableWrap table tr.total > * { padding:7px 3px; border-bottom:1px solid #444; }

.gis .monitoring .tableWrap table thead th input:read-only { height:12px; line-height:12px; padding:0; background:transparent; border:0; border-right:1px solid #979797; box-sizing:border-box; }
.gis .monitoring .tableWrap table thead th input:read-only:last-child { border:0; }
.gis .monitoring .tableWrap table thead th span { display:inline-block; width:40px; height:12px; line-height:12px; color:#888; border-right:1px solid #979797; box-sizing:border-box; }
.gis .monitoring .tableWrap table thead th span:last-child { border:0; }
.gis .monitoring .tableWrap table thead th { padding:7px 3px; border-right:1px solid #cacaca; border-bottom:1px solid #e5e5e5; }
.gis .monitoring .tableWrap table th,
.gis .monitoring .tableWrap table td { padding:4px 3px; text-align:center; border-right:1px solid #cacaca; }
.gis .monitoring .tableWrap table input[type="text"] { width:40px; height:23px; line-height:23px;text-align:right; padding:2px 5px; color:#888; border:1px solid #ced5dc }
.gis .monitoring .tableWrap table input.redBg { color:#fff; background-color:#a94955; border-color:#a94955; }
.gis .monitoring .tableWrap table input.grayBg { color:#fff; background-color:#657687; border-color:#657687; }
.gis .monitoring .tableWrap table input.redLine { color:#ed1c24; border-color:#ed1c24; }
.gis .monitoring .tableWrap table input.grayLine { color:#888; border-color:#ced5dc; }
.gis .monitoring .tableWrap table input.redNew { color:#fff; background:#ed1c24 url('../images/icon_disabilty.gif') no-repeat left top !important; border-color:#ed1c24; }
.gis .monitoring .tableWrap table tr:nth-child(even) input { background-color:#efefef; }
.gis .monitoring .tableWrap table tbody tr:last-child th,
.gis .monitoring .tableWrap table tbody tr:last-child td { padding-bottom:15px; }

/* 트러블맵 검색 */
.gis .monitoring .search-con { padding:15px 0 0 0; background-color:#ecedf0; }
.gis .monitoring .search-con .tabAct { padding:0 15px; box-sizing:border-box; }
.gis .monitoring .search-con .tabAct li { width:calc(50% - 1px); }
.gis .monitoring .search-con .tabAct li a { display:block; background-color:#ecedf0; border-radius:0; }
.gis .monitoring .search-con .tabAct li.on a { background-color:#f8f8f8; border-color:#444; }
.gis .monitoring .search-con .search-area { padding:20px 15px 15px 15px; overflow:hidden; background-color:#f8f8f8; }
.gis .monitoring .search-con .search-area .btn-search { width:19px; height:19px; padding:10px; text-align:center; background-color:#414141; border:1px solid #414141; }
.gis .monitoring .search-con .search-area input { float:left; }
.gis .monitoring .search-con .search-area input[type="text"] { height:41px; padding:10px 5px; box-sizing:border-box; }
.gis .monitoring .search-con .search-area .con { position:relative; clear:both; padding-top:7px; }
.gis .monitoring .search-con .search-area .con .reset { display:inline-block; position:absolute; right:0; bottom:0; padding-left:17px; line-height:16px; color:#222; cursor:pointer; background:url('../images/icon_reset.png') no-repeat left center; }
.gis .monitoring .search-result { height:calc(100vh - 256px); padding: 10px 15px; overflow:auto; background-color:#fff; border-top:1px solid #d8d8d8; }
.gis .monitoring .search-result .info { font-size:12px; margin-bottom:7px; color:#000; }
.gis .monitoring .search-result .list { border-top:2px solid #444; }
.gis .monitoring .search-result .list li { position:relative; padding: 12px 12px 12px 70px; line-height:18px; font-size:12px; color:#444; border-bottom:1px solid #e3e3e3; }
.gis .monitoring .search-result .list li .type { display:inline-block; position:absolute; left:0; top:20px; width:55px; height:55px; line-height:52px; text-align:center; font-size:20px; border:1px solid #e5e5e5; border-radius:50px; }
.gis .monitoring .search-result .list li .type02 { display:inline-block; position:absolute; left:0; top:20px; width:55px; height:55px; padding-top:10px; line-height:16px; letter-spacing:1px; text-align:center; color:#fff; font-weight:bold; font-size:16px; border:1px solid #e5e5e5; border-radius:50px; box-sizing:border-box; }
.gis .monitoring .search-result .list li .type02.orange { background-color:#f26522; }
.gis .monitoring .search-result .list li .type02.blue { background-color:#605ca8; }
.gis .monitoring .search-result .list li .type02.pink { background-color:#f26d7d; }
.gis .monitoring .search-result .list li .name { font-size:14px; font-weight:bold; }
.gis .monitoring .search-result .list li .num { margin:2px 0; color:#666; }
.gis .monitoring .search-result .list li .address { padding-left:12px; background:url('../images/icon_site.png') no-repeat left center; }
.gis .monitoring .search-result .list li .old { padding-left:30px; background:url('../images/icon_jibun.gif') no-repeat left center; }
.gis .monitoring .search-con .section .tableWrap02 { padding:15px; background-color:#f8f8f8; }
.gis .monitoring .search-con .section .tableWrap02 .reset { display:inline-block; padding-left:17px; line-height:16px; color:#222; cursor:pointer; background:url('../images/icon_reset.png') no-repeat left center; }
.gis .monitoring .search-con .section .tableWrap02 .btn-view { display:inline-block; width:160px; height:28px; margin-left:10px; text-align:center; font-size:12px; line-height:24px; color:#fff; cursor:pointer; box-sizing:border-box; background-color:#414141; border:1px solid #414141; }

/* 트러블맵 관심지역관리 */
.gis .monitoring .title-area { padding:0 15px 15px 15px;}
.gis .monitoring .title-area .subTitle { position:relative; padding-bottom:5px; font-size:20px; border-bottom:1px solid #000; }
.gis .monitoring .title-area .subTitle .refresh { display:inline-block; position:absolute; right:0; top:8px; padding-left:15px; line-height:16px; color:#222; font-weight:normal; font-size:12px; cursor:pointer; background:url('../images/icon_refresh03.png') no-repeat left center; }
.gis .monitoring .search-result .ztree { border-top:2px solid #444; }

/* 주소검색 */
.addSrchArea {overflow:auto; background-color:#fff;}
.addSrchArea .info { font-size:12px; margin-bottom:7px; color:#000; }
.addSrchArea .list { border-top:2px solid #444; height:280px; overflow-y:auto;}
.addSrchArea .list li { position:relative; padding: 12px 12px 12px 70px; line-height:18px; font-size:12px; color:#444; border-bottom:1px solid #e3e3e3; }
.addSrchArea .list li .type { display:inline-block; position:absolute; left:0; top:20px; width:55px; height:55px; line-height:52px; text-align:center; font-size:20px; border:1px solid #e5e5e5; border-radius:50px; }
.addSrchArea .list li .type02 { display:inline-block; position:absolute; left:0; top:20px; width:55px; height:55px; padding-top:10px; line-height:16px; letter-spacing:1px; text-align:center; color:#fff; font-weight:bold; font-size:16px; border:1px solid #e5e5e5; border-radius:50px; box-sizing:border-box; }
.addSrchArea .list li .type02.orange { background-color:#f26522; }
.addSrchArea .list li .type02.blue { background-color:#605ca8; }
.addSrchArea .list li .type02.pink { background-color:#f26d7d; }
.addSrchArea .list li .name { font-size:14px; font-weight:bold; }
.addSrchArea .list li .num { margin:2px 0; color:#666; }
.addSrchArea .list li .address { padding-left:12px; background:url('../images/icon_site.png') no-repeat left center; }
.addSrchArea .list li .old { padding-left:30px; background:url('../images/icon_jibun.gif') no-repeat left center; }

.folder-list li { padding:0 10px; line-height:32px; font-size:13px; color:#333; cursor:pointer;}
.folder-list li:hover { background-color:#c6c8cc; }
.folder-list li:before { content:''; display:inline-block; width:16px; height:12px; margin:-1px 5px 0 0; background:url('../images/icon_folder02.png') no-repeat center center; vertical-align:middle; }
.folder-list li.new { color:#8a8a8a; }
.folder-list li.new:before { background:url('../images/icon_folder01.png') no-repeat center center; }

/* mini size loading */
.small-loading { display:inline-block; position:relative; width: 22px; height: 22px; margin-right:5px; vertical-align:middle; }
.small-loading .lds-roller { display: inline-block; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.small-loading .lds-roller div { animation: lds-roller2 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 11px 11px; }
.small-loading .lds-roller div:after { content: " "; display: block; position: absolute; width: 2px; height: 2px; border-radius: 2px; background: #444; margin: -1px 0 0 -1px; }
.small-loading .lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.small-loading .lds-roller div:nth-child(1):after {top: 15px;left: 20px;}
.small-loading .lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.small-loading .lds-roller div:nth-child(2):after {top: 18px;left: 18px;}
.small-loading .lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.small-loading .lds-roller div:nth-child(3):after {top: 20px;left: 15px;}
.small-loading .lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.small-loading .lds-roller div:nth-child(4):after {top: 21px;left: 11px;}
.small-loading .lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.small-loading .lds-roller div:nth-child(5):after {top: 20px;left: 7px;}
.small-loading .lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.small-loading .lds-roller div:nth-child(6):after {top: 18px;left: 4px;}
.small-loading .lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.small-loading .lds-roller div:nth-child(7):after {top: 15px;left: 2px;}
@keyframes lds-roller2 { 0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

.gis .monitoring .guide { padding-right:20px; text-align:right; line-height:40px; font-size:12px; border-top:1px solid #a7a8aa; }
.gis .monitoring .guide span { display:inline-block; width:14px; height:14px; margin-top:-1px; box-sizing:border-box; vertical-align:middle; }
.gis .monitoring .guide span + span { margin-left:1px; }
.gis .monitoring .guide .redNew { background:#ed1c24 url('../images/icon_disabilty.gif') no-repeat left top; background-size:8px auto; }
.gis .monitoring .guide .grayLine { margin-left:10px; background-color:#efefef; border:1px solid #ced5dc; }
.gis .monitoring .guide .default { border:1px solid #ced5dc; }
.gis .monitoring .guide .grayBg { margin-left:10px; background-color:#657687; }
.gis .monitoring .guide .redBg { background-color:#a94955; }

.gis .monitoring .detail-layer { display:none; position:absolute; left:0; top:248px; bottom:39px; z-index:81; width:100%; background-color:#fff; }
.gis .monitoring .detail-layer .close { position: absolute; right: 20px; top: 58px; z-index: 80; width: 15px; height: 15px; background: url("../images/icon_close.png") no-repeat center top; background-size:15px auto; cursor: pointer; }
.gis .monitoring .detail-layer .tableWrap { height:auto; border-bottom:0; }
.gis .monitoring .detail-layer .detail { padding:20px 20px 0 20px; height:calc(100% - 50px); box-sizing:border-box;}
.gis .monitoring .detail-layer .detail .gridDataWrap { height:calc(100% - 35px); overflow-y:auto; }
.gis .monitoring .detail-layer .detail .popSubTit a{margin-left:20px;}
.gis .monitoring .detail-layer .table-title { margin:10px 0 5px; line-height:28px; overflow:hidden; }
.gis .monitoring .detail-layer .table-title span { font-size:12px; color:#323a41; font-weight:bold; }
.gis .monitoring .detail-layer .table-title .btn { float:right; }
.gis .monitoring .detail-layer table tbody tr:last-child th,
.gis .monitoring .detail-layer table tbody tr:last-child td { padding-bottom:3px; }

/* 드롭다운02 - 검은색 */
.gis .monitoring .drop-down{position:absolute;right:130px;top:52px;z-index:50;min-width:120px;width:120px;min-height:20px;font-size:12px;color:#fff;line-height:20px;background-color:#414143;border:0;}
.gis .monitoring .drop-down .text .big { display:inline-block; position:absolute; left:70px; top:-1px; font-size:14px; }
.gis .monitoring .drop-down .text .big b { font-size:16px; }
.gis .monitoring .drop-down .text:after{left:40px;top:5px;background:url("../images/icon_arrowdown3.png") no-repeat center center;}
.gis .monitoring .drop-down ul li:hover{background-color:#888;}
.gis .monitoring .drop-down.on .text:after{background:url("../images/icon_arrowup3.png") no-repeat center center;}


/* 포탈 메뉴관리 */
.menu-wrap { overflow: hidden; }
.menu-wrap .menu-modify { position: relative; float: left; width: 30%; min-height:600px; height:calc(100vh - 300px); padding-top:30px; border: 1px solid #444; border-radius: 5px; box-sizing: border-box; }
.menu-wrap .menu-modify .top { position:absolute; left:0; top:0; width:100%; padding: 0 12px; font-size: 14px; color: #222; line-height: 32px; border-bottom: 1px solid #b2b4b8; box-sizing: border-box; }
.menu-wrap .menu-modify .ztree { height:100%; padding: 20px 10px; overflow-y:scroll; box-sizing:border-box; }
.menu-wrap .top .btn-area { position: absolute; right: 10px; top: 4px; height: 20px; }
.menu-wrap .top .btn-area span { display: inline-block; width: 20px; height: 20px; margin-left: 5px; cursor: pointer; }
.menu-wrap .top .btn-area .minus { background: url("../images/icon_minus03.png") no-repeat center center; }
.menu-wrap .top .btn-area .plus { background: url("../images/icon_plus03.png") no-repeat center center; }
.menu-wrap .top .btn-area .refresh { background: url("../images/icon_refresh.png") no-repeat center center; }

.menu-wrap .detail { position:relative; float:right; width:70%; min-height:600px; height:calc(100vh - 300px); padding-bottom:80px; border:1px solid #babbbe; border-left:0; box-sizing:border-box; }
.menu-wrap .detail .title { padding: 0 17px; font-size:14px; color:#444; line-height: 32px; background-color: #dfe1e6; border-bottom:1px solid #b2b4b8; }
.menu-wrap .detail .table-wrap { margin: 10px; }
.menu-wrap .detail .bottom { position: absolute; right:0; bottom:0; width:100%; padding:20px 10px; text-align:right; background-color:#eaebed; box-sizing:border-box; }

/* 정합 */
header.Unity .logo_unity { display: inline-block; margin: 12px 0; }
header.Unity .logo_unity img { vertical-align: middle; }
header.Unity .logo_unity .tm_logo { display: inline-block; margin-left: 10px; padding-left: 10px; vertical-align: middle; border-left: 1px solid #606266; }
header.Unity .nav-bar li .sub-menu .list ul li { padding:0; }

.unity-wrap > div:first-child { max-width:800px; }
.unity-wrap > div { min-width:270px; }
.unity-wrap .box { position: relative; min-height:600px; height:calc(100vh - 140px); padding-top:30px; border: 1px solid #444; border-radius: 5px; border-bottom-left-radius:0; border-bottom-right-radius:0; box-sizing: border-box; }
.unity-wrap .box .detail { position:absolute; left:0; bottom:0; width:100%; min-height:200px; padding-top:15px; }
.unity-wrap .box .detail:before { content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 5px; border-top: 1px solid #b2b4b8; }
.unity-wrap .box .detail:after { content: ""; position: absolute; top: 2px; left: 50%; z-index: 1; height: 10px; width: 62px; margin-left: -31px; background: url("../images/icon_handler02.png") no-repeat center center; }
.unity-wrap .box .detail .ui-resizable-n { top:4px; }
.unity-wrap .ztree { height:100%; padding: 20px 10px; overflow-y:scroll; box-sizing:border-box; }
.unity-wrap .top { position:absolute; left:0; top:0; width:100%; padding: 0 12px; font-size: 14px; color: #222; line-height: 32px; border-bottom: 1px solid #b2b4b8; box-sizing: border-box; }
.unity-wrap .top .btn-area { position: absolute; right: 10px; top: 4px; height: 20px; }
.unity-wrap .top .btn-area span { display: inline-block; width: 20px; height: 20px; margin-left: 5px; cursor: pointer; }
.unity-wrap .top .btn-area .minus { background: url("../images/icon_minus03.png") no-repeat center center; }
.unity-wrap .top .btn-area .plus { background: url("../images/icon_plus03.png") no-repeat center center; }
.unity-wrap .top .btn-area .refresh { background: url("../images/icon_refresh.png") no-repeat center center; }

/* 감시 TT수신자 선택[추가] 레이어 */
.popLayer.receive .choice .box { position:relative; padding-left:30px; }
.popLayer.receive .choice .btn-rectLeft { position:absolute; left:0; top:50%; margin-top:-22px; }
.popLayer.receive .choice .btn-rectRight { position:absolute; left:0; top:50%; }

.graphWrap { padding:20px; border:1px solid #bfbfbf; box-sizing:border-box; border-radius:5px; box-shadow:0 0 10px rgba(0, 0, 0, 0.2); }
.graphWrap .subTitle { padding-bottom:20px; margin-bottom:30px; border-bottom:1px solid #bfbfbf; }
.graphWrap .chart { width:100%; height:300px; }

/* 감시 화살표 */
.btnBox { position:relative; }
.btnBox .btn-rectLeft { position:absolute; left:-55px; top:50%; margin-top:-22px; cursor:pointer;}
.btnBox .btn-rectRight { position:absolute; left:-55px; top:50%; cursor:pointer;}
.btn-rectRight.disabled,
.btn-rectLeft.disabled {opacity:0.6; cursor:default;}

.boxBorder { padding:20px; border:1px solid #c5c6c8; }
.check-area { margin:10px 10px 20px 10px; }
.check-area label { display:inline-block; margin-right:20px; }

.host-area { height:28px; padding:10px 25px; margin-bottom:10px; line-height:28px; border:1px solid #888; border-radius:10px;}
.host-area span.name { font-size:14px; font-weight:bold; }
.host-area span { display:inline-block; margin-right:20px; }

/* 감시 port구성정보 */
.port-list { padding:15px; margin-bottom:20px; background-color:#f0f5f8; border:1px solid #c5c7c6; border-radius:3px; overflow:hidden; }
.port-list li { float:left; width:30px; margin:5px 0; text-align:center; }
.port-list li .num { margin-bottom:2px; font-size:11px; color:#333; }
.port-list li:nth-child(6n) { margin-right:20px; }

/* 감시 세로스크롤 줄이려고 */
.popCntType.repeater hr { margin:5px 0 !important; }
.popCntType.repeater .inputCntGroup { padding:10px 15px; }
.popCntType.repeater .sideWrap > .rightSide .tabCntArea { padding:15px; }

/* 감시 상태 표시 */
.Critical {background-color:#ff0000 !important;}
.Major {background-color:#fc6e03 !important;}
.Minor {background-color:#f2b808 !important;}

/* 박스 블랙 테두리 + 라운딩 */
.roundBox { position: relative; border: 1px solid #444; border-radius: 5px; box-sizing: border-box; }

/* 회색배경 박스 테두리 */
.grayBox { padding:30px; border:1px solid #babbbe; background-color:#f2f4f5; }

/* 버튼 넓이50% */
.btn-half > * { width:calc(50% - 7px); margin-top:4px; }

/* 백홀 */
.backhole .search-area { position:relative; padding-right:41px; margin:10px; box-sizing:border-box; }
.backhole .search-area input[type="text"] { height:41px; border:1px solid #9ca0a7; border-right:0; }
.backhole .search-area .btn-search { position:absolute; right:0; top:0; padding:10px; background-color:#414143; border:1px solid #414143; }
.backhole .search-area .reset { display:inline-block; position:absolute; right:0; bottom:0; padding-left:17px; line-height:16px; color:#222; cursor:pointer; background:url('../images/icon_reset.png') no-repeat left center; }

.backhole .chart01 { float:left; width:33%; }
.backhole .chart02 { float:left; width:33%; margin:0 0.5%; }
.backhole .chart03 { float:left; width:33%; }

.backhole .hole-list { border-top:1px solid #ddd; border-left:1px solid #ddd; }
.backhole .hole-list td { padding:10px; text-align:center; line-height:20px; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}

.btn-list .btn { margin:0 5px 5px 0; }

/* 리얼그리드 상태*/
.gird-down {display:inline-block; padding-left:20px; margin-right:15px; background:url('../images/icon_download2.png') no-repeat left center; }

/* 테이블 */
table.data-table thead th,
table.data-table thead td {text-align:center;}
table.data-table tbody th {text-align:center;}
table.data-table tbody td {text-align:right;}

.energy-ctx-menu{
  display: none;
  width: 185px;
  inset: 613px auto auto 845px;
  position: absolute;
    padding: 0;
    background: #f8f8f8;
    color: #222;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid #8d8d8d;
    box-sizing: border-box;
}
.energy-ctx-menu li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: -2px 5px 0 0;
  background-color: #7e7e7e;
  border-radius: 4px;
  vertical-align: middle;
}
.energy-ctx-menu li {
  position: relative;
  line-height: 20px;
  padding: 3px 10px;
  color: #444;
  font-size: 12px;
  font-weight: bold;
}
.energy-ctx-menu li:hover{
  cursor: pointer;
  background-color: #eacece;
}

.btn-floor{
  display: none;
  position: absolute;
  left: 330px;
  top: 297px;
  width: 75px;
}

.btn-floor button {
  z-index: 10 !important;
  background-color: #fff;
  color: #5E5873;
  height: 40px !important;
  width: 134px !important;
  margin: 4px 0 !important;
  border-radius: 15px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  transition: 0.25s !important;
  border: 3px solid #6E6B7B !important;

}

.btn-floor button:hover {
  background-color: #EEEDFD;
  color: #9D95F4;
}

.btn-floor button.on {
  background-color: #EEEDFD;
  color: #9D95F4;
}

#btn-floor-close {
  display: none;
  position: absolute;
  left: 468px;
  top: 229px;
  font-size: 5px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: #fff;
  color: #5E5873;
  font-weight: 700;
  border: 1px solid #6E6B7B !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

/* 만족도 조사 */
#select-container {
  display: none;
  position: absolute;
  left: 330px;
  top: 250px;
  width: 710px;
}
.select-box {
  position: relative;
}
.btn-dropdown {
  padding: 10px 20px !important;
  border: none;
  border-radius: 4px !important;
  background: #7367F0;
  color: #fff;
  font-size: 15px !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer;
}
.btn-dropdown::after {
  display: inline-block !important;
  -webkit-transform: rotate(45deg) !important;
  transform: rotate(45deg) !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 10px !important;
  border-right: 2px solid #FFF !important;
  border-bottom: 2px solid #FFF !important;
  vertical-align: 4px !important;
  content: '' !important;
}
.btn-dropdown:hover {
  background-color: #887EF2;
}
.nav-dropdown {
  z-index: 10 !important;
  display: none ;
  position: absolute !important;
  top: 50px !important;
  left: 0 !important;
  right: 0 !important;
  padding: 10px 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, .1) !important;
  background-color: #fff !important;
  height: 380px !important;
  overflow: auto !important;
}
.nav-dropdown ul {
  padding-inline-start: 20px !important;
  padding-inline-end: 10px !important;
}
.nav-dropdown ul li {
  padding: 8px 0 !important;
  font-size: 13px !important;
  /* text-align: center; */
  cursor: pointer;
}
.nav-dropdown ul li {
  display: block;
  color: #3d3935;
  text-decoration: none;
}
.nav-dropdown ul li:hover {
  background-color: #EEEDFD;
  color: #9D95F4;
}
.nav-dropdown ul li.on{
  background-color: #7367F0;
  color: #fff;
}
.nav-dropdown.is-open {
  display: block;
}
.btn-dropdown.is-open::after {
  -webkit-transform: rotate(-135deg) !important;
  transform: rotate(-135deg) !important;
  vertical-align: -1px !important;
}