@charset "UTF-8";

/* 카메라 정보 */
.info-detail .info-table table tr td .normal-btn { vertical-align: middle; margin-left: 5px; }

/* input[type=text] 영역 */
.sensor-range-select .normal-txt-input { width: 60px; padding-right: 15px; }
.info-detail .info-table table tr td .normal-txt-input.w100 { width: 100%; }

/* 센서 탭 */
ul.cont-tab{margin-bottom : 10px}

/* form validation */
div.txt-invalid { margin-left: 0; }


/* 센서 설정 */
.info-table .notice p {font-size: 12px; color: #c74747} 

/* file input */
.file-input { margin-bottom: 5px; }

/* 이미지 영역  */
.coordinate-section {margin:10px 0 30px;}
.coordinate-section .img-section { position: relative; height: 450px; border: 1px solid #dee3eb; }
.coordinate-section .img-area { width: 100%; height: 100%; background:#fff; }
.coordinate-section .img-area.default .default-txt {text-align: center; padding-top: 200px; line-height: 20px; color: #666c97; display: block}
.coordinate-section .img-area .img-box {width: 100%; height: 100%; text-align: center; padding: 20px 270px 20px 20px;}
.coordinate-section .img-area .img-box svg { max-height: 100%; max-width: 100%; }

/* input[type=text] 영역 */
.sensor-range-select .normal-txt-input { width: 60px; padding-right: 15px; }
.info-detail .info-table table tr td .normal-txt-input.w100 { width: 100%; }

/* 공지 문구 영역 */
.notice-wrap { color: #c74747; padding: 7px 10px; margin-bottom: 10px; background-color: #eceef4;}
.notice-wrap > div { position: relative; padding-left: 7px; }
.notice-wrap > div:after { content: ''; position: absolute; top: 7px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #c74747; }


/* 센서그룹 관리 버튼 */
.tab-group-wrap { position: relative; }
.tab-group-wrap .btn-wrap { display: inline-block; margin-top: 0; position: relative; top: 11px; }
.tab-group-wrap .btn-wrap .set-btn { font-weight: 500; color: #12144d; padding: 0 10px; font-size: 11px; color: #9b9cb4; }
.tab-group-wrap .btn-wrap .set-btn:hover { background: #e4e5ed; }
.tab-group-wrap .btn-wrap .set-btn .material-icons { font-size: 14px; position: relative; top: 3px; margin-right: 3px;}


/* 센서그룹 설정 레이어팝업 */
.pop-wrap.sensor-group-pop .sensor-group:not(:last-child) { margin-bottom: 5px; }
.pop-wrap.sensor-group-pop .sensor-group .normal-txt-input { width: 140px;}
.pop-wrap.sensor-group-pop .sensor-group .normal-txt-input:read-only { background:#eee; cursor: default;}
.pop-wrap.sensor-group-pop .sensor-group .normal-txt-input:read-only:hover {box-shadow: none;}
.pop-wrap.sensor-group-pop .info-detail .info-table table tr td .sensor-add-btn .normal-btn { margin-left: 0; font-size: 12px; font-weight: 500; padding: 0 52px; }
.pop-wrap.sensor-group-pop .info-detail .info-table table tr td .sensor-add-btn .normal-btn i { font-size: 10px; margin-right: 3px; }


/* disable  */
.normal-btn.disabled {background: #c6c6c6; cursor: no-drop;}


/* 센서 좌표 목록 */
.coordinate-section .list-box { position: absolute; top: 0; right: 0; width: 250px; height: 100%; background: #f8f8f8; transition: right .25s; overflow: hidden; border-left: 1px solid #dee3eb;}
.coordinate-section .list-box .list { overflow-y: auto; height: 100%; -ms-overflow-style: none;scrollbar-width: none;}
.coordinate-section .list-box .list::-webkit-scrollbar { display: none; }
.coordinate-section .list-box h2.title { color: #12144d; font-size: 1.5rem; padding: 10px; font-weight: 600; text-align: center; background:#dadbe1; }
.coordinate-section .list-box h2.title .material-icons { font-size: 19px; position: relative; top: 4px; margin-right: 3px;}
.coordinate-section .list-box ul.ul-list { padding: 20px; }
.coordinate-section .list-box ul.ul-list > li { position: relative; color: #444; background: rgba(255,255,255,0.1); font-size: 1.2rem; margin-bottom: 20px;}
.coordinate-section .list-box ul.ul-list > li .sensor-label { font-size: 1.1rem; padding-bottom: 7px; position: relative; border-bottom: 1px solid #aaa; display: block; margin-bottom: 3px; font-weight: 500; letter-spacing: 0; }
.coordinate-section .list-box ul.ul-list > li .sensor-label .hover-txt { display: none; position: absolute; bottom: -10px; left: 0; background: rgba(0,0,0,0.7); border-radius: 3px; font-size: 1rem; color: #fff; padding: 2px 0; z-index: 10; width: 50px; text-align: center; }
.coordinate-section .list-box ul.ul-list > li .sensor-label .sensor-tit { position: relative; display: inline-block; padding-left: 15px; cursor: pointer; }
.coordinate-section .list-box ul.ul-list > li .sensor-label .sensor-tit:before { content: ''; width: 9px; height: 9px; position: absolute; top:4px; left:0; background:#000; border-radius: 2px; }
.coordinate-section .list-box ul.ul-list > li .sensor-label .sensor-tit:hover + .hover-txt { display: block; }
.coordinate-section .list-box ul.ul-list > li .visibility { position: absolute; top: 2px; right: 3px; color: #555; }
.coordinate-section .list-box ul.ul-list > li .visibility .material-icons { font-size: 14px; cursor: pointer;}
.coordinate-section .list-box ul.ul-list > li .visibility .material-icons:hover { opacity: 1 !important; }
.coordinate-section .list-box ul.ul-list > li .visibility .v-off { display: none; }
.coordinate-section .list-box ul.ul-list > li .visibility.visb-off .v-on { display: none; }
.coordinate-section .list-box ul.ul-list > li .visibility.visb-off .v-off { display: block; opacity: .5;}
.coordinate-section .list-box ul.ul-list > li.visb-off .visibility .v-on { display: none; }
.coordinate-section .list-box ul.ul-list > li.visb-off .visibility .v-off { display: block; opacity: .5;}
.coordinate-section .list-box ul.ul-list > li .sensor-list .item { position: relative; padding:5px 25px 5px 5px; font-size: 1.1rem; cursor: pointer; border-radius: 3px;}
.coordinate-section .list-box ul.ul-list > li .sensor-list .item .visibility { top: 7px; right: 3px;}
.coordinate-section .list-box ul.ul-list > li .sensor-list .item:hover { background:#e7e7e7; }
.coordinate-section .list-box ul.ul-list > li .sensor-list .item .name { word-wrap: break-all; }
.coordinate-section .list-box ul.ul-list > li .sensor-list .item .sensor-num { display: inline-block; min-width: 15px; font-weight: 600; }


/* 센서 그룹 라벨 컬러 */
.coordinate-section .list-box ul.ul-list > li .sensor-label.red { border-color: #ef4444; color: #ef4444; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.orange { border-color: #ff7b54; color: #ff7b54; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.yellow { border-color: #e1bb2f; color: #e1bb2f; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.brown { border-color: #8b4513; color: #8b4513; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.green { border-color: #6bd848; color: #6bd848; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.darkgreen { border-color: #006400; color: #006400; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.teal { border-color: #008080; color: #008080; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.navy { border-color: #0e138b; color: #0e138b; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.blue { border-color: #4b59ff; color: #4b59ff; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.sky { border-color: #709dff; color: #709dff; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.mint { border-color: #32c7a3; color: #32c7a3; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.lightblue { border-color: #78d6eb; color: #78d6eb; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.purple { border-color: #944cff; color: #944cff; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.pink { border-color: #d978eb; color: #d978eb; }

.coordinate-section .list-box ul.ul-list > li .sensor-label.red .sensor-tit:before { background: #ef4444; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.orange .sensor-tit:before { background: #ff7b54; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.yellow .sensor-tit:before { background: #e1bb2f; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.brown .sensor-tit:before { background: #8b4513; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.green .sensor-tit:before { background: #6bd848; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.darkgreen .sensor-tit:before { background: #006400; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.teal .sensor-tit:before { background: #008080; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.navy .sensor-tit:before { background: #0e138b; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.blue .sensor-tit:before { background: #4b59ff; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.sky .sensor-tit:before { background: #709dff; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.mint .sensor-tit:before { background: #32c7a3; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.lightblue .sensor-tit:before { background: #78d6eb; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.purple .sensor-tit:before { background: #944cff; }
.coordinate-section .list-box ul.ul-list > li .sensor-label.pink .sensor-tit:before { background: #d978eb; }


/* 컬러 피커 */
.coordinate-section .list-box ul.ul-list > li .color-picker { display: none; position: absolute; top:20px; left: 0; z-index: 10; padding:15px; background:#fff; border-radius: 5px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); width: 210px; }
.coordinate-section .list-box ul.ul-list > li .color-picker.on { display: block; }
.coordinate-section .list-box ul.ul-list > li .color-picker .tit { font-size: 1rem; padding-bottom: 5px; font-weight: 600; color: #b4b4b4;}
.coordinate-section .list-box ul.ul-list > li .color-picker .alrt { font-size: 1.1rem; padding: 5px 7px; background: #f2f2f2; margin-top: 20px; word-break: keep-all; color:#8b8b8b;}
.coordinate-section .list-box ul.ul-list > li .color-picker .btn-wrap { margin-top: 15px; padding-top: 10px; border-top: 1px solid #dee3eb; height: auto; }
.coordinate-section .list-box ul.ul-list > li .color-picker .btn-wrap ul li { vertical-align: middle; }
.coordinate-section .list-box ul.ul-list > li .color-picker .btn-wrap ul li a {font-size: 1.2rem; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item { width: 17px; height: 17px; background:#eee; display: inline-block; cursor: pointer; border:1px solid #fff; border-radius: 3px; margin: 2px 3px;}
.coordinate-section .list-box ul.ul-list > li .color-picker .item:hover { border-color: #000; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.red { background: #ef4444; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.orange { background: #ff7b54; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.yellow { background: #e1bb2f; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.brown { background: #8b4513; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.green { background: #6bd848; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.darkgreen { background: #006400; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.teal { background: #008080; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.navy { background: #0e138b; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.blue { background: #4b59ff; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.sky { background: #709dff; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.mint { background: #32c7a3; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.lightblue { background: #78d6eb; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.purple { background: #944cff; }
.coordinate-section .list-box ul.ul-list > li .color-picker .item.pink { background: #d978eb; }