@charset "utf-8";

/* 대시보드 */
.dashboard-wrap .cont { padding: 70px 50px 30px; }
.left-area { float: left; position: relative; width: 740px; height: 100%; }
.left-area .cont-box { clear: both; }
.left-area .history-table .scroll-wrap { height: 280px; }
.left-area .eq-area { margin-top: 20px; background: #fff; border: 1px solid #d2d8e9; box-shadow: 0 0 0 5px #e7e9f4; border-radius: 8px; }
.left-area .eq-area .img-area { position: relative; float: left; width: calc(100% - 185px); padding: 50px; text-align: center;  }
.left-area .eq-area .img-area img { width: 100%; height: auto; margin-top: 10px; } 
.left-area .eq-area .img-area .svg { position: absolute; top: 46%; left: 50%; width: 100%; transform: translate(-50%,-50%); padding: 55px; } 
.left-area .eq-area .img-area h4 { position: relative; display: inline-block; font-size: 1.5rem; color: #444; margin-top: 30px; font-weight: 600;}
.left-area .eq-area .img-area h4 .t-label { font-weight: 500; font-size: 12px; padding: 0 10px 1px 7px; background: #12144d; margin-right: 5px; border-radius: 20px; display: inline-block; color:#fff;}
.left-area .eq-area .img-area h4 .t-label .material-icons { font-size: 13px; position: relative; top: 2px; margin-right: 3px; }
.left-area .eq-area .img-area h4 .cctv { display: block; margin-top: 15px;}
.left-area .eq-area .img-area h4 .cctv a.videocam { display: inline-block; border-radius: 30px; background: #e7e9f4; font-size: 12px; line-height: 25px; font-weight: 400; padding: 0 15px; color: #989ac6; margin: 0 2px; transition: background .25s, color .25s; }
.left-area .eq-area .img-area h4 .cctv a.videocam span.material-icons { font-size: 19px; position: relative; top: 5px; }
.left-area .eq-area .img-area h4 .cctv a.videocam:hover { background: #d3d8e8; }
.left-area .eq-area .img-area .select-wrap { margin-bottom:20px; }
.left-area .eq-area .img-area .select-wrap .selectbox { float: none; }
.left-area .eq-area .img-area .legend { margin-top: 20px;}
.left-area .eq-area .img-area .legend ul li { position: relative; display: inline-block; color: #a5a8b5; padding-left: 12px; margin: 0 5px; font-size: 12px; } 
.left-area .eq-area .img-area .legend ul li:after { content: ''; position: absolute; top: 5px; left: 0; width: 9px; height: 9px; border-radius: 10px; background: red; } 
.left-area .eq-area .img-area .legend ul li.lg-01:after { background: #4caf50; }
.left-area .eq-area .img-area .legend ul li.lg-02:after { background: #d89a00; }
.left-area .eq-area .img-area .legend ul li.lg-03:after { background: #dc4747;; }
.left-area .eq-area .status-list { float: right; width: 185px; text-align: center;}
.left-area .eq-area .status-list ul { padding: 25px 20px 20px; }
.left-area .eq-area .status-list ul li { position: relative; width: 100%; min-height: 105px; text-align: center; margin-bottom: 10px; background:#eff1f8; border-radius: 8px; }
.left-area .eq-area .status-list ul li:last-child { margin-bottom: 0; }
.left-area .eq-area .status-list ul li .wrap { position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #2f3984; width: 100%; }
.left-area .eq-area .status-list ul li .wrap h4 { font-size: 2.2rem; font-weight: 600; }
.left-area .eq-area .status-list ul li .wrap p { font-size: 1.1rem; margin-top: 7px; display: inline-block; padding: 0 10px 2px; border-radius: 10px; }
.left-area .eq-area .status-list ul li .wrap .normal { border: 1px solid #4caf50; color: #4caf50; }
.left-area .eq-area .status-list ul li .wrap .check { border: 1px solid #d89a00; color: #d89a00; }
.left-area .eq-area .status-list ul li .wrap .error { border: 1px solid #dc4747; color: #dc4747; }
.left-area .eq-area .status-list .btn-list {text-align: center; }
.left-area .eq-area .status-list .btn-list .left, 
.left-area .eq-area .status-list .btn-list .right {display: inline-block; color:#12144d; cursor:pointer; transition: color .3s ease; border-radius: 50%; padding: 4px 4px 0 4px; background: #e7e9f4;}
.left-area .eq-area .status-list .btn-list span.material-icons {font-size:28px}
.left-area .eq-area .status-list .btn-list .left.off,
.left-area .eq-area .status-list .btn-list .right.off {color:#bbbed1;cursor:no-drop}
.left-area .eq-area .status-list .btn-list .left:not(.off):hover,
.left-area .eq-area .status-list .btn-list .right:not(.off):hover {color:#212d61}
.left-area .eq-area .videocam-pop { display: none; position: absolute; top: 50%; left: 50%; width: 400px;  height: 250px; transform: translate(-50%,-50%); border: 3px solid #00baff; border-radius: 10px; box-shadow: 0 0 50px rgba(17,26,89,.3); background: #fff; z-index: 20;}
.left-area .eq-area .videocam-pop.on { display: block; }
.left-area .eq-area .videocam-pop .video-area { width: 100%; height: 100%; }
.left-area .eq-area .videocam-pop a.close { position: absolute; top: -50px; left: 50%; margin-left: -25px; color: #00baff; opacity: .7; }
.left-area .eq-area .videocam-pop a.close:hover { opacity: .9; }
.left-area .eq-area .videocam-pop a.close span { font-size: 40px; }


.right-area { float: left; position: relative; width: calc(100% - 785px); margin-left: 45px; height: 100%; }
.right-area .cont-title.tab { position: relative; width: 100%; }
.right-area .cont-title.tab h4 { display: inline-block; }
.right-area .cont-title.tab a.more span.material-icons { font-size: 1.5rem; position: relative; top: 3px; margin-left: 4px; }
.right-area .monitoring-table { height: 860px; overflow: hidden; margin-top:10px; }
.scroll-wrap .scroll-area.sticky-table {border-top: 1px solid #b6b8c3; margin-top: 10px}
.scroll-wrap.monitoring-table .scrollbar {margin-top: 50px}
.right-area .monitoring-table table {border-top: 0; margin-top: 0}
.right-area .monitoring-table table { position: relative; }
.right-area .monitoring-table table thead { position: sticky; top: 0; left: 0; z-index: 2; background:#f6f7fc}
.right-area .monitoring-table table tbody tr {position: relative}
.right-area .monitoring-table table tbody tr .load-wrapp {position: absolute; width: 100%; height: 100%; top: 11px; left: 60px; text-align: center;}
.right-area .monitoring-table table tbody tr td span.status { position: relative; padding-left: 14px; }
.right-area .monitoring-table table tbody tr td span.st01 { color: #4caf50 }
.right-area .monitoring-table table tbody tr td span.st02 { color: #dc4747; }
.right-area .monitoring-table table tbody tr td span.status:after { content: ''; position: absolute; top: 5px; left: 0; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } 
.right-area .monitoring-table table tbody tr td span.st01:after { background: #4caf50 } 
.right-area .monitoring-table table tbody tr td span.st02:after { background: #dc4747; } 
.right-area .monitoring-table table tbody tr.select { background: #d3d8e8}
.right-area .monitoring-table table tbody tr td span.material-icons { cursor: pointer; }
.right-area .monitoring-table table tbody tr td i.fa-caret-up,
.right-area .monitoring-table table tbody tr td i.fa-caret-down { font-size: 15px; margin-left: 5px; opacity: .8; }
.right-area .monitoring-table table tbody tr td i.fa-caret-up { color: #dc4747; }
.right-area .monitoring-table table tbody tr td i.fa-caret-down { color: #7fdf83 }
.right-area .monitoring-table table tbody tr td i.fa-minus { font-size: 11px; margin-left: 5px; opacity: .7; }

/* empty */
.right-area .monitoring-table.empty {height: auto;}
.right-area .monitoring-table.empty .scrollbar {display: none}
.right-area .monitoring-table .empty-area {width: 100%; height: 100%; text-align: center; padding:35px 10px; background: #eeeff6; border-radius:8px; margin-top: 5px; }
.right-area .monitoring-table .empty-area p {color: #b1b1b1}
.right-area .monitoring-table .empty-area span.material-icons {display: block; margin-bottom: 15px; font-size: 2.7rem}


.dashboard-wrap .normal-table table tbody tr { background: #e7e9f4; border-bottom: 4px solid #f6f7fc;transition: background .25s ease; }
.dashboard-wrap .normal-table table tbody tr:hover { background: #d3d8e8}
.dashboard-wrap .normal-table table tbody tr td:first-child{ border-radius: 8px 0 0 8px; }
.dashboard-wrap .normal-table table tbody tr td:last-child{ border-radius: 0 8px 8px 0; }


.letter {
  display: inline-block;
  font-size: 10px;
  color: #c1c1c1;
}


.load-6 .letter {
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}

.l-1 {
  animation-delay: 0.48s;
}
.l-2 {
  animation-delay: 0.6s;
}
.l-3 {
  animation-delay: 0.72s;
}
.l-4 {
  animation-delay: 0.84s;
}
.l-5 {
  animation-delay: 0.96s;
}
.l-6 {
  animation-delay: 1.08s;
}
.l-7 {
  animation-delay: 1.2s;
}
.l-8 {
  animation-delay: 1.32s;
}
.l-9 {
  animation-delay: 1.44s;
}
.l-10 {
  animation-delay: 1.56s;
}



@keyframes loadingF {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 탭메뉴 */
ul.cont-tab {margin-left: 30px; }

/* 뒤로 돌아가기 버튼 */
.back-btn { position: absolute; top:-3px; left: calc(100% + 20px); }
.back-btn button { display: inline-block; border-radius: 3px; font-size: 11px; background:#fff; border:0; padding: 3px 10px 4px 10px; font-weight: 600; border:1px solid #d0d5dc; color:#858597; transition: border .2s;}
.back-btn button:hover{ border-color:#abaac8; }
.back-btn button .material-icons { font-size: 14px; position:relative; top: 2px;}