@charset "UTF-8";

@font-face {
	font-family:'NotoSansKR';
	font-style:normal;
	font-weight:300;
	src:local('*'),
	url('../fonts/NotoSansKR-Light.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Light.woff') format('woff');
}
@font-face {
	font-family:'NotoSansKR';
	font-style:normal;
	font-weight:400;
	src:local('*'),
	url('../fonts/NotoSansKR-Regular.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Regular.woff') format('woff');
}
@font-face {
	font-family:'NotoSansKR';
	font-style:normal;
	font-weight:500;
	src:local('*'),
	url('../fonts/NotoSansKR-Medium.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Medium.woff') format('woff');
}
@font-face {
	font-family:'NotoSansKR';
	font-style:normal;
	font-weight:700;
	src:local('*'),
	url('../fonts/NotoSansKR-Bold.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Bold.woff') format('woff');
}
@font-face {
	font-family:'NotoSansKR';
	font-style:normal;
	font-weight:900;
	src:local('*'),
	url('../fonts/NotoSansKR-Black.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Black.woff') format('woff');
}

/* 20231205 monitoring-css */
.monitoring-wrap .container{width: 100%; height:100vh; max-width: 1200px; margin: 0 auto; position: relative; font-family: 'NotoSansKR'; font-weight: 500; color: #333333;}
.monitoring-wrap .container .sub-info{height: 100%;}
.monitoring-wrap .monitoring-content{display: -ms-flexbox; display: flex; height: 100%; position: relative; overflow: hidden;}

#monitoring-sidebar{width: 250px; position: static; z-index: 100; transition: 0.3s; border: 1px solid #CCCCCC; background-color: #fff; overflow-x: hidden;}
#monitoring-sidebar .monitoring-btn-content{width: 100%; background-color: #F6F8FA; padding: 16px 8px; border-bottom: 1px solid #E8E8E8;}
#monitoring-sidebar .monitoring-btn-content > h4{padding-bottom: 12px; font-size: 12px; font-weight: 500; color: #626262;}
#monitoring-sidebar .monitoring-btn-content .btn-wrap{display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; gap: 8px; width: 100%;}
#monitoring-sidebar .monitoring-btn-content .btn-wrap button{border:1px solid #dddddd; border-radius: 12px; padding: 4px 12px; background-color: #fff; font-family: 'NotoSansKR'; font-weight: 500; font-size: 12px; color: #969696;}
#monitoring-sidebar .monitoring-btn-content .btn-wrap button.active,
#monitoring-sidebar .monitoring-btn-content .btn-wrap button:hover{border: none; background-color: #27416B; color: #fff; transition: 0.3s;}

#monitoring-sidebar .sidebar-section{width: 100%; border-bottom: none;}
#monitoring-sidebar .sidebar-section .sidebar-section-checkbox{position: relative; padding: 4px 0;}
#monitoring-sidebar .sidebar-section .sidebar-section-checkbox input[type="checkbox"] + label{padding-left: 24px;}

#sideOpen.active i{transform: rotate(180deg);}

.monitoring-map-wrap{position: relative; width: 100%;}
.monitoring-map-wrap > button{height: 100px; position: absolute; top: 50%; left:0; transform: translate(0%, -50%); background: #fff; border: 1px solid #ccc; border-left: 0; border-top-right-radius: 15px; border-bottom-right-radius: 15px; padding: 0 5px;}
.monitoring-map-wrap > button > a{color: #969696;}
.monitoring-map-wrap > button > a > i{font-size: 13px;}
.monitoring-map-wrap img{width: 100%;}

.monitoring-map-wrap .leaflet-control-container{width: 100%;}
.monitoring-map-wrap .leaflet-control {position: absolute; top: 8px; right: 8px; float: right; clear: both;}
.monitoring-map-wrap .leaflet-control .control-label{max-width: 100%;  background-color: #fff; padding: 4px 8px; border-radius: 2px; border: 1px solid #969696; vertical-align: middle; margin-bottom: 50px; font-family: 'NotoSansKR'; font-weight: 500; font-size: 14px;}

.monitoring-pop-wrap .cont-item{width:100%; position: relative; border-radius: 4px; box-shadow: 0 3px 12px rgba(0,0,0,0.16); background-color: #fff; padding: 12px;}
.monitoring-pop-wrap .cont-item h2{background:no-repeat center left / 18px; padding-left: 24px;}
.monitoring-pop-wrap .cont-item h2.icon01{background-image:url(../img/ico-tit01.png);}
.monitoring-pop-wrap .cont-item h2.icon02{background-image:url(../img/ico-tit02.png);}
.monitoring-pop-wrap .cont-item h2.icon03{background-image:url(../img/ico-tit03.png);}
.monitoring-pop-wrap .cont-item .close-btn{width: 15px; height: 15px; position: absolute; top: 12px; right: 12px; background: url(../img/ico-close.png) no-repeat center center / cover; cursor: pointer;}

.monitoring-pop-wrap .cont-item .table-info-wrap{display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; align-items: center; padding-top: 8px;}
.monitoring-pop-wrap .cont-item .table-info-wrap .info-alarm{font-size: 10px; color: #6E6E6E;}
.monitoring-pop-wrap .cont-item .table-info-wrap .info-alarm > span{background-color: #E6F0FF; border-radius: 2px; padding: 4px; margin-left: 4px; border: 1px solid #AAC2E9; color: #4E79B7; }

.monitoring-pop-wrap .cont-item .table{padding: 8px 0 16px;}
.monitoring-pop-wrap .cont-item .table:last-child{padding-bottom: 0;}
.monitoring-pop-wrap .cont-item .table table{width:100%; border-bottom: 1px solid #546888; font-weight: 400;}
.monitoring-pop-wrap .cont-item .table table th{font-weight: 400;}
.monitoring-pop-wrap .cont-item .table table thead th{background:#27416B; padding:5px; border-right:1px solid #546888; font-size:12px; color:#fff;}
.monitoring-pop-wrap .cont-item .table table tbody > tr > th{background-color: transparent; border-right: 1px solid #546888; border-bottom: 1px solid #546888;}
.monitoring-pop-wrap .cont-item .table table tbody td{padding:4px; border-right:1px solid #546888; border-bottom:1px solid #546888; font-size:11px; text-align:center;}
.monitoring-pop-wrap .cont-item .table table thead th:last-child,
.monitoring-pop-wrap .cont-item .table table tbody td:last-child{border-right:0;}
.monitoring-pop-wrap .cont-item .table table .b-top{border-top:1px solid #546888 !important;}
.monitoring-pop-wrap .cont-item .table table .b-right{border-right:1px solid #546888 !important;}
.monitoring-pop-wrap .cont-item .table table .chart_rain{border-top: 1px solid #27416B;}
.monitoring-pop-wrap .cont-item .table table .time-series-tbody th{background-color: #27416B; color: #fff;}
.monitoring-pop-wrap .cont-item .table table .time-series-tbody td > div{text-decoration: underline; cursor: pointer;}
.monitoring-pop-wrap .cont-item .table table .time-series-tbody td > div:hover{color: #0096D9;}

.monitoring-pop-wrap .cont-item input[type="checkbox"] + label{padding: 0;}
.monitoring-pop-wrap .cont-item input[type="checkbox"] + label::before{display: block; position:unset;}
.monitoring-pop-wrap .cont-item input[type="checkbox"]:checked + label:after{top: 2px;}

.monitoring-pop-wrap .cont-item .accordion-btn{display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; align-items: center; cursor: pointer;}
.monitoring-pop-wrap .cont-item .accordion-btn.active > i{transform: rotate(180deg);}
.monitoring-pop-wrap .cont-item .accordion-content{display: none;}
.monitoring-pop-wrap .cont-item .airport-time-series .accordion-btn > h4{font-size: 12px; color: #6E6E6E;}
.monitoring-pop-wrap .cont-item .airport-time-series .airport-chart > img{width: 100%;}

.monitoring-pop-wrap .left-side{width: 400px; position: absolute; bottom: 100px; left: 20px;}
.monitoring-pop-wrap .left-side .cont-item{position: absolute; bottom: 0; left: 0;}

.monitoring-pop-wrap .right-side{width: 480px; position: absolute; top: 40px; right: 8px;}

.monitoring-pop-wrap .airport-pop{width: 470px; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);}
.monitoring-pop-wrap .airport-pop span.vfr{border-radius: 12px; padding: 2px 4px; background-color: #33D9A6; border: 1px solid #2CBB8F; color: #fff; font-size: 10px; font-weight: 200;}
.monitoring-pop-wrap .airport-pop .cont-item .item{padding-top: 16px;}
.monitoring-pop-wrap .airport-pop .cont-item .item h4{font-size: 15px; font-weight: 500;}
.monitoring-pop-wrap .airport-pop .cont-item .item p{display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; gap: 4px; padding-top: 4px; font-size: 13px; font-weight: 400; color: #6E6E6E;}

.monitoring-pop-wrap .legend-wrap{display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; gap: 8px; width: calc(100% - 32px); position: absolute; left: 20px;}
.monitoring-pop-wrap .legend-wrap.lgt-pop{bottom: 60px;}
.monitoring-pop-wrap .legend-wrap.rdr-pop{bottom: 20px;}
.monitoring-pop-wrap .legend-wrap > div{display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; height: 34px; background-color: #fff; border-radius: 4px; box-shadow: 0 3px 12px rgba(0,0,0,0.16); padding: 8px 4px;}
.monitoring-pop-wrap .legend-wrap > div:first-child{width: 25%;}
.monitoring-pop-wrap .legend-wrap > div:last-child{width: fit-content;}
.monitoring-pop-wrap .legend-wrap > div input[type="checkbox"]{position: unset; appearance: checkbox; -webkit-appearance: checkbox; vertical-align: middle;}
.monitoring-pop-wrap .legend-wrap > div input[type="checkbox"]:focus{box-shadow: none;}
.monitoring-pop-wrap .legend-wrap > div img{height: 100%;}