@charset "utf-8";
/* common */
.custom-checkbox {position:absolute;opacity:0;width:20px;height:20px;cursor: pointer; }
.custom-checkbox-label {display:flex;position:relative;padding-left:57px;cursor:pointer; user-select:none;font-size:16px;color:#333;}
.custom-checkbox-label::before {content: "";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:3px;background-color:#CCD3EA; }
.custom-checkbox:checked + .custom-checkbox-label::before{background-color: #5A71E9;border-color: #5A71E9}
.custom-checkbox:checked + .custom-checkbox-label::after{content: "";position:absolute;left:5px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.custom-checkbox-wrapper{display:flex;align-items:center;gap:5px;position:relative;cursor:pointer}
.custom-checkbox-label.icon-seismic > span::before {content: '';position:absolute;left:25px;top:50%;transform:translateY(-50%);width:24px;height:24px;background-size:contain;background-repeat:no-repeat;background-position:center;}
.custom-checkbox-label.icon-seismic > span.name1::before{background-image:url('../images/icon/icon_input_with1.png')}
.custom-checkbox-label.icon-seismic > span.name2::before{background-image:url('../images/icon/icon_input_with2.png')}
.custom-checkbox-label.icon-seismic > span.name3::before{background-image:url('../images/icon/icon_input_with3.png')}
.custom-checkbox-label.icon-seismic > span.name4::before{background-image:url('../images/icon/icon_input_with4.png')}
.custom-checkbox-label.icon-seismic > span.name5::before{background-image:url('../images/icon/icon_input_with5.png')}
.custom-checkbox-label.icon-seismic > span.name6::before{background-image:url('../images/icon/icon_input_with6.png')}

.checkbox-basic .custom-checkbox-label{padding-left:24px}


/* title */
.dash_title{color:#28388C;padding-bottom:8px}
.dash_title2{color:#28388C;padding-bottom:8px;font-size:24px;padding:15px 0 10px 0}
.dash_title_h4{color:#fff;font-size:15px;padding:10px 0}

/* table */
.dashboard_tab2{display:flex;width:100%;margin-top:8px}
.dashboard_tab2 li{flex:1}
.dashboard_tab2 li a{display:block;height:45px;line-height:43px;background:#E2E5F9;text-align:center;color:#6C7EB4;margin-right:1px;/* padding:0 30px */}
.dashboard_tab2 li:last-child a{margin-right:0}
.dashboard_tab2 li a.active{background:#5A71E9;color:#fff}
.dashboard_tab2 li a:hover{background:#dbdff7;font-weight:700}
.dashboard_tab2 li a.active:hover{background:#5A71E9;}
.dashboard_tab_cont{display:none; height:100%;}
.dashboard_tab_cont.active{display: block}

/* title안에 탭이 있을때 */
.title_tab_wrap{display:flex;align-items:center;} 
.dashboard_tab3{display:flex;margin-top:8px;margin-left:auto}
.dashboard_tab3 li a{display:block;height:35px;line-height:35px;background:#E2E5F9;text-align:center;color:#6C7EB4;margin-right:1px;padding:0 20px;font-size:14px}
.dashboard_tab3 li:last-child a{margin-right:0}
.dashboard_tab3 li a.active{background:#5A71E9;color:#fff}
.dashboard_tab3 li a:hover{background:#dbdff7;font-weight:700}
.dashboard_tab3 li a.active:hover{background:#5A71E9;}

/* layout  */
#header {width:100%;height:68px;position:fixed;top:0;background:#3D448D;display:flex;align-items:center;padding:0 20px;box-shadow:0 10px 15px rgba(0,0,0,0.1);z-index:9} 
#header .top_menu{margin:0 auto;display:flex;justify-content:center;align-items:center;height:100%}
#header .top_menu ul{display:flex;gap:50px}
#header .top_menu ul li{position:relative;}
#header .top_menu ul li a{color:#fff;font-size:17px;padding:0 0 30px 0;transition:color 0.3s ease;}
#header .top_menu ul li a::after {content: '';position:absolute;bottom:-25px;left:0;width:0;height:4px;background-color:#5A71E9;transition: width 0.3s ease;}
#header .top_menu ul li a:hover::after,
#header .top_menu ul li:hover > a::after{width:100%}

#header .top_menu .sub_menu{display:none;position:absolute;top:42px;left:50%;transform:translateX(-50%);width:100%;box-shadow:0 10px 15px rgba(0,0,0,0.1);z-index:9;flex-direction:column;gap:0;min-width:140px}

#header .top_menu .sub_menu li a{display:block;width:100%;font-size:16px !important;line-height:40px;background:#474C7C;padding:0 12px}
#header .top_menu .sub_menu li a:hover{background-color:#32355c;color:#fff}
#header .top_menu .sub_menu li a:hover::after{display:none}

#header .header_login_info{display:flex;gap:15px;align-items:center;}
#header .header_login_info .profile_img{display:flex;color:#fff;font-weight:600;align-items:center}
#header .header_login_info .profile_img img{margin-right:8px}
#header .header_login_info .profile_img span{color:#C3C7FB;font-size:14px;font-weight:400;letter-spacing:0;padding-left:6px}
#header .header_login_info a{color:#fff;font-size:16px;}

#main_container_wrap{margin-top:68px;display:flex; height: calc(100vh - 68px);margin-top: 68px; }
.left_list, .right_list {position:relative;width: 485px;height: 100%;background: #F2F5FF;padding: 20px;overflow-y:auto;transition: all 0.3s ease-in-out;}
/*#right_list_detail {overflow-y:scroll;}*/

/* 접기버튼 */
#main_container_wrap .btn_fold_left{position:absolute;left:0px;z-index:3;width:25px;height:25px;cursor:pointer;transition:transform 0.3s ease;}
.left_list.fold{margin-left:-485px;}
.btn_fold_left img{transition:transform 0.3s ease;}
.btn_fold_left.fold img{transform:rotate(180deg);}
.right_list.fold{margin-right:-485px;}
#main_container_wrap .btn_fold_right{position:absolute;right:0px;z-index:3;width:25px;height:25px;cursor:pointer;transition:transform 0.3s ease;}
.btn_fold_right img{transition:transform 0.3s ease;transform:rotate(180deg);}
.btn_fold_right.fold img{transform:rotate(360deg);}

/* main table */
.main_table_type1{margin-top:10px;max-height:98%;overflow-y:scroll}
.main_table_type1 table{width:100%;border-collapse:separate;}
.main_table_type1 th{background:#CCD9FD;color:#3856CB;font-weight:700;font-size:14px;border-right:1px solid #C1CAE4;padding:2px;vertical-align: middle;position:sticky;top:0;z-index:2;}
.main_table_type1 thead tr:nth-child(2) th {top:20px;}
.main_table_type1 td{min-height:40px;padding:12px 4px;text-align:center;color:#646C95;border-bottom:1px solid #C1CAE4;background:#fff}
.main_table_type1 tr:nth-child(odd) td{background-color:rgba(255, 255, 255, 0.6)}
.main_table_type1 tr:nth-child(even) td{background-color: #F0F3FB}
.main_table_type1.gis_main td{padding:4px !important}

.main_table_type2{margin-top:10px;max-height:99%;overflow-y:scroll}
.main_table_type2 table{width:100%;border-collapse:separate;}
.main_table_type2 th{background:#CCD9FD;color:#3856CB;font-weight:700;font-size:14px;border-right:1px solid #C1CAE4;padding:4px;vertical-align: middle;height:40px;position:sticky;top:0;z-index:2;}
.main_table_type2 td{min-height:40px;padding:12px 4px;text-align:center;color:#646C95;border-bottom:1px solid #C1CAE4;background:#fff}
.main_table_type2 tr:nth-child(odd) td{background-color:rgba(255, 255, 255, 0.6)}
.main_table_type2 tr:nth-child(even) td{background-color: #F0F3FB}
.main_table_type2 td.td_title{color:#3856CB;font-weight:500}

/* 개발 추가 */
.main_table_type2.main_right_list th{height:20px !important;padding:0 4px !important;}

.main_table_type3{margin-top:10px;max-height:99%;overflow-y:scroll}
.main_table_type3 table{width:100%;border-collapse:separate;table-layout:fixed}
.main_table_type3 th{background:#CCD9FD;color:#3856CB;font-weight:700;font-size:14px;border-right:1px solid #C1CAE4;padding:2px;vertical-align: middle;position:sticky;top:0;z-index:2;}
.main_table_type3 thead tr:nth-child(2) th {top:20px;}
.main_table_type3 td{min-height:40px;padding:12px 4px;text-align:center;color:#646C95;border-bottom:1px solid #C1CAE4;background:#fff;height:40px}
.main_table_type3 td.rawris_n{padding:4px !important;}
.main_table_type3 td.td_title{background:#7893DF;color:#fff;vertical-align:middle;border-bottom:2px solid #747D94}
.main_table_type3 td.td_title2{background:#EDF1FF;color:#222;font-weight:300}

/* 개발 추가 */
.main_table_type3 tr.last-of-rowspan td:not(.td_title) {border-bottom:2px solid #8790a7}
.main_table_type3 tr:last-child td {border-bottom:none !important}
.main_table_type3 td.last-td-title {border-bottom:none !important}

.main_table_type4{margin-top:10px;max-height:99%;}
.main_table_type4 table{width:100%;border-collapse:separate;}
.main_table_type4 th{background:#CCD9FD;color:#3856CB;font-weight:700;font-size:14px;border-right:1px solid #C1CAE4;padding:4px;vertical-align: middle;height:40px;position:sticky;top:0;z-index:2;}
.main_table_type4 td{min-height:40px;padding:12px 4px;text-align:center;color:#646C95;border-bottom:1px solid #C1CAE4;background:#fff}
.main_table_type4 tr:nth-child(odd) td{background-color:rgba(255, 255, 255, 0.6)}
.main_table_type4 tr:nth-child(even) td{background-color: #F0F3FB}
.main_table_type4 td.td_title{color:#3856CB;font-weight:500}

.main_table_type4.main_right_list th{padding:0 4px !important;}

/* recent_status_top #최근지진 계측현황 */ 
.left_list .article_status{padding-bottom:20px}
.left_list .aricle_list, #art_table{height:calc(100vh - 220px)}

/* 계측소검색 */
.article_measure_search .search_wrapper{display:flex;flex-wrap:wrap;gap:12px;padding:16px 0}


.search_wrap{display:flex;gap:1px}
/* 지도api 임시 */
.map_select{padding:12px;background:rgba(255,255,255,0.8)}
.map_placeholder{position:relative;flex:1;height:100%;background:#222;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 18px;font-weight: bold;}
.map_float{position:absolute;left:20px;top:20px}

/* 지도 라디오버튼 */
.map_select2{padding:20px 25px;background:rgba(255,255,255,0.8)}
.map_select2 h5{color:#5A71E9;margin-bottom:8px}
.map_select_list{display:flex}
.map_select_list .custom-radio-wrapper{display:flex;font-size:15px;margin-right:20px}
.map_select_list .custom-radio-wrapper label{color:#676767;font-weight:400;padding-left:6px;align-items:center}

/* 범례1 */
.legend-container{position:absolute;bottom:80px;left:20px;background-color:rgba(40, 48, 72, 0.9);padding:20px 35px 25px 15px;box-shadow:0 1px 5px rgba(0,0,0,0.1);min-height:130px}
.legend-container .legend-items .custom-checkbox-label{color:#fff;font-weight:400;font-size:14px}
.legend-title{font-size:14px;color:#fff;padding-bottom:8px}
.legend-title2{font-size:14px;color:#fff;padding-bottom:3px}
.legend-items{display:flex;flex-direction:column;gap:5px;}
.legend-item{display:flex;align-items:center;font-size:13px;color:#fff;font-weight:300}
.legend-color{width:12px;height:12px;border-radius:50%;margin-right:5px;}
.color-blue{background-color:#0DA6FD;}
.color-yellow{background-color:#F7C33B;}
.color-orange{background-color:#F7A355;}
.color-red{background-color:#F85C5C;}
.color-purple{background-color:#B180F8;}
.color-green{background-color:#29A940;}
.color-gray{background-color:#A0A0A0;}
.color-black{background-color:#000000;}
#raw_info_table .legend-color{vertical-align:middle; display:inline-block}
/* 범례 기능 추가 */
.legend_title{display:flex;justify-content:space-between;align-items:center;padding:0;cursor:pointer}
.legend_title h3{font-size:15px;color:#fff;margin:0}
.legend_title .btn_fold{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.legend_title .btn_fold i{color:#fff;font-size:14px;transition:transform 0.3s ease}
.legend_title .btn_fold.collapsed i{transform:rotate(-180deg)}
.legend_contents{opacity:1;transform:scaleY(1);transform-origin:top;transition:opacity 0.3s ease, transform 0.3s ease}
.legend_contents.collapsed{opacity:0;transform:scaleY(0);height:0;overflow:hidden}

.legend-container-table{position:absolute;bottom:80px;left:20px;background-color:rgb(40, 48, 72, 0.9);padding:10px;box-shadow:0 1px 5px rgba(0,0,0,0.1);min-height:130px;transition:height 0.3s ease,min-height 0.3s ease}
.legend-container-table.collapsed{height:auto !important;min-height:auto !important}
.legend-container-table table th,.legend-container-table table td{font-size:14px;padding:6px 10px;font-weight:300}
.legend-container-table table th{border-bottom:1px solid rgba(255,255,255,0.2);}
.legend-container-table table td{border-bottom:1px solid rgba(255,255,255,0.2);text-align:left}

.icon-cell {
  text-align: center;
  vertical-align: middle;
}
.icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-wrapper img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.legend-condensed-footer {
  margin-top: 15px;
}
.type-wrapper {
	display: flex;
	align-items: center;
}
.legend-sensors-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-weight: 300;
  font-size: 13px;
  padding-left: 10px;
}
.legend-sensors-inline > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
}
.legend-status-line {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-right: 10px;
  margin-bottom: 5px;
}
.sensor-label {
  white-space: nowrap;
}
/* 누수 지역선택시 */
.area_on{position:relative;background:#313E68}
.area_on .dash_title{color:#fff;font-size:20px;padding-left:15px;font-weight:600}
.area_on .dash_title span{font-weight:300;font-size:18px}
.area_on .title_wrap{display:flex;align-items:center;margin-bottom:4px}
.area_on .btn_cctv{position:relative;display:flex;margin-left:auto;justify-content:center;align-items:center;width:130px;height:45px;background:#8E98B9;color:#fff;font-size:15px;}
.area_on .btn_cctv::before{content: "";display: inline-block;width:20px;height: 20px;background:url('../images/icon/icon_btn_cctv_wh.png') no-repeat center center;background-size: contain;margin-right: 8px}
.area_on .search_wrap{display:flex;gap:1px}

.area_on .graph_area_wrap .legend-items-row{display:flex;padding:12px 0 0 0}
.area_on .graph_area_wrap .legend-items-row .legend-item{margin-right:12px}
.area_on .graph_area_wrap .graph{width:100%;height:200px;background:#fff;display:flex;justify-content:center;align-items:center;position:relative;margin-top:5px}
.area_on .graph_area_wrap .graph .graph_nodata{width:100%;height:200px;background:#4C587D url(../images/icon/icon_bg_nodata.png) center 40% no-repeat;color:#BDC8EA;position:absolute;top:0px;left:0;display:flex;justify-content:center;align-items:center;padding-top:35px}
.graph_nodata2{width:100%;height:100%;background:#4C587D url(../images/icon/icon_bg_nodata.png) center 43% no-repeat;color:#BDC8EA;position:absolute;top:0px;left:0;display:flex;justify-content:center;align-items:center;}

.table_area_wrap{width:100%}
.table_area_wrap table{width:100%;border-top:2px solid #1A2550}
.table_area_wrap table th,.table_area_wrap table td{font-size:14px;padding:6px 10px;font-weight:300;color:#fff}
.table_area_wrap table th{background:#566AB4;border-bottom:1px solid rgba(255,255,255,0.2);}
.table_area_wrap table td{background:#334380;border-bottom:1px solid rgba(255,255,255,0.2);text-align:left}
#table_w2 table td{text-align:center !important;}
#wlvl_table td{text-align:right !important;}
#wlvl_table th,td{vertical-align:middle !important;}

/* cctv팝업 */
.area_cctv_wrap{position:absolute;top:68px;right:485px;z-index:10;width:300px;background:#4B64B4;opacity:0;visibility: hidden;transform: translateX(-10px);transition:all 0.3s ease;}
.area_cctv_wrap.active {opacity:1;visibility:visible;transform: translateX(0)}
.area_on .btn_cctv.active{background: #3f569b;color: #fff;font-weight: bold;}
.area_cctv_wrap .title{display:flex;justify-content:space-between;align-items:center}
.area_cctv_wrap .title a{margin-right:12px}
.area_cctv_wrap .title h4{width:100%;height:40px;font-size:15px;color:#fff;font-weight:600;display:flex;align-items:center;padding:0 20px;}
.area_cctv_wrap .cctv_listbox{display:flex;flex-direction:column;padding:5px;overflow-y:scroll;max-height:calc(100vh - 108px)}
.area_cctv_wrap .cctv_listbox .cctv_screen{height:200px}
.area_cctv_wrap .cctv_listbox .cctv_screen img{width:100%;height:100%}
.area_cctv_wrap.active {display: block;}
.area_cctv_wrap .cctv_screen_wrap{position:relative;height:190px}
.area_cctv_wrap .cctv_listbox .cctv_screen{height:200px}
.area_cctv_wrap .cctv_listbox .cctv_screen img{width:100%;height:100%}
.area_cctv_wrap .cctv_listbox .alarm{width:100%;height:35px;line-height:33px;padding:0 10px;position:absolute;left:0;bottom:0;z-index:9;color:#fff;font-size:13px;font-weight:400}
.area_cctv_wrap .cctv_listbox .alarm-1{background:rgba(231, 43, 43, 0.7);}
.area_cctv_wrap .cctv_listbox .alarm-2{background:rgb(255, 170, 43,0.7);}
.area_cctv_wrap .cctv_listbox .alarm-3{background:rgb(64, 124, 215,0.7);}

.area_cctv_wrap .cctv_listbox ul.data_list{position:absolute;right:0px;bottom:35px;z-index:9;color:#fff;background:rgba(0,0,0,0.5);line-height:20px;padding:8px 35px 8px 12px;font-size:13px;font-weight:300}

/* 지진 */
.seismic_result{width:600px}
.seismic_result .search_wrap{display:flex;gap:1px}

.monitoring_tabs{display:flex;gap:15px;margin-bottom:15px;}
.monitoring_tab{padding:10px 0 0 0;font-size:16px;cursor:pointer;color:#333;}
.monitoring_tabs span{margin-left:5px;font-weight:600;color:#28388C;}

/* 관측소 테이블 */
.station_table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:15px;}
.station_table th{background-color:#CCD9FD;color:#3856CB;padding:7px;text-align:center;font-weight:700;font-size:15px;border:1px solid #b5c1e4;}
.station_table td{padding:6px 2px;text-align:center;font-size:15px;border-bottom:1px solid #b5c1e4}
.station_table tr{cursor:pointer;transition:background-color 0.2s;}
.station_table tr:nth-child(even){background-color:#F0F3FB;}
.station_table tr:hover{background-color:#E5EAF8;}
.station_table tr.selected{background-color:#efefef;}
.chart_container{display:none;margin-top:15px;}
.chart_row td{background-color:#fff;}
.chart_row_content{background:#fff;}
.seismic_station_name{background:transparent;color:#28388C;font-weight:700}
.seismic_station_info{background:#98B5DA;color:#fff;margin:1px;padding:5px;}
.station_table .info_color1{background-color:#6297FA}
.station_table .info_color2{background-color:#6A94C7}

/* 개발 추가 */
.top-row {font-weight: bold;}

/* 아이콘1 - 노란색 파동 효과 */
.earthquake-alert{position:relative;width:32px;height:32px}
.earthquake-icon{position:relative;z-index:2;width:100%;height:100%}
.alert-wave{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border:7px solid rgba(255,238,5,0.8);border-radius:50%;animation:wave 2s infinite;box-shadow:0 0 10px rgba(255,255,255,0.4)}
.alert-wave:nth-child(2){animation-delay:0.5s}
.alert-wave:nth-child(3){animation-delay:1s}
@keyframes wave{
    0%{width:100%;height:100%;opacity:0.8;border-width:4px}
    100%{width:200%;height:200%;opacity:0;border-width:2px}
}

/* 아이콘2 - 빨간색 펄스 효과 */
.earthquake-alert-red{position:relative;width:32px;height:32px}
.earthquake-alert-red .earthquake-icon{position:relative;z-index:2;width:100%;height:100%;animation:shake 0.8s infinite}
.earthquake-alert-red .pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background:rgba(255,2,2,0.685);animation:pulse 2s infinite}
.earthquake-alert-red .pulse-ring:nth-child(2){animation-delay:1s}
@keyframes pulse{
    0%{transform:translate(-50%,-50%) scale(1);opacity:0.8;background:rgba(255,0,0,0.7);box-shadow:0 0 0 0 rgba(255,0,0,0.7)}
    70%{transform:translate(-50%,-50%) scale(1.8);opacity:0.3;background:rgba(255,0,0,0.6);box-shadow:0 0 0 10px rgba(255,0,0,0)}
    100%{transform:translate(-50%,-50%) scale(2);opacity:0;background:rgba(255,0,0,0);box-shadow:0 0 0 0 rgba(255,0,0,0)}
}
@keyframes shake{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.1)}
}

/* 아이콘3 - 보라색 파동 효과 */
.earthquake-alert-purple{position:relative;width:32px;height:32px}
.earthquake-alert-purple .earthquake-icon{position:relative;z-index:2;width:100%;height:100%}
.earthquake-alert-purple .alert-wave{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;animation:wave-purple 2s infinite}
.earthquake-alert-purple .alert-wave:nth-child(1){border:5px solid rgba(77,0,212,0.7)}
.earthquake-alert-purple .alert-wave:nth-child(2){border:6px solid rgba(77,0,212,0.6);animation-delay:0.5s}
@keyframes wave-purple{
    0%{width:100%;height:100%;opacity:1}
    100%{width:200%;height:200%;opacity:0}
}

/* 서브탭 */
/*
.lnb_tab{display:flex;}
.lnb_tab li{min-width:175px}
.lnb_tab li a{display:block;height:45px;line-height:43px;background:#EAECF3;text-align:center;color:#6C7EB4;padding:0 30px}
.lnb_tab li:last-child a{margin-right:0}
.lnb_tab li a.active{background:#6675C5;color:#fff}
.lnb_tab li a:hover{background:#6675C5;color:#fff;font-weight:700}
.lnb_tab li a.active:hover{background:#6675C5;}

서브 타이틀 tab버전추가
.contents .sub_title_tab{width:100%;height:55px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;}
 */
 
/* 개발추가 */
.graph-date-label {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 12px;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
}

#div-water-3d-info,
#div-water-3d-info-bottom {
  position: absolute;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
}

/* 수위 정보 - 오른쪽 하단 위 */
#div-water-3d-info {
  right: 5px;
  bottom: 5px;
}

/* 사수위 - 왼쪽 하단 */
#div-water-3d-info-bottom {
  left: 5px;
  bottom: 10px;
}

.graph-info,
.graph-info-bottom {
  position: absolute;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
}

/* 수위 정보 - 오른쪽 하단 */
.graph-info {
  right: 5px;
  bottom: 5px;
}

/* 사수위 - 왼쪽 하단 */
.graph-info-bottom {
  left: 5px;
  bottom: 5px;
}

#sensor_type_filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}


/* 전체 수위 시각화 영역 */
.DivReservoirContainer {
	width: 100%;
	height: 200px;
	position: relative;
	background: url('../images/popup/Sky_Blue.gif') repeat-x;
}

.DivReservoirBack {
	width: 100%;
	height: 200px;
	position: relative;
	background: url('../images/popup/Layout_Reservoir_Background.gif') no-repeat;
	background-size: 160% 200px;
}

.DivReservoirWave {
	width: 100%;
	height: 0px; /* 애니메이션으로 동적으로 증가 */
	position: absolute;
	left: 0;
	bottom: 0;
	background: url('../images/popup/WaterWave-20-430x160.gif') repeat-y;
}

/* 전경 이미지 */
.DivReservoirFore {
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: url('../images/popup/Layout_Reservoir_Foreground.gif') no-repeat;
	background-size: 160% 200px;
	z-index: 2;
}

/* 수위 기준선 */
.DivLineReservoirBlue,
.DivLineReservoirYellow,
.DivLineReservoirRed {
	width: 100%;
	height: 7px;
	position: absolute;
	background-repeat: repeat-x;
	background-size: contain;
	z-index: 3;
}

.DivLineReservoirBlue {
	background-image: url('../images/popup/Line_Blue.png');
	bottom: 110px;
}
.DivLineReservoirYellow {
	background-image: url('../images/popup/Line_Yellow.png');
}
.DivLineReservoirRed {
	background-image: url('../images/popup/Line_Red.png');
	bottom: 23px;
}

/* 수위 텍스트 박스 Wrapper */
.DivBoxReservoirBlue_Wrap,
.DivBoxReservoirYellow_Wrap,
.DivBoxReservoirRed_Wrap {
	position: absolute;
	z-index: 4;
	/* 각 box는 JS에서 bottom 위치로 동적으로 설정 */
}

.DivBoxReservoirBlue_Wrap {
	bottom: 115px;
}
.DivBoxReservoirRed_Wrap {
	bottom: 4px;
}

/* 사통형일 경우의 백그라운드 스타일 */
.DivReservoirBack.tower-type-B {
	background: url('../images/popup/Layout_Inclined_Conduit2.png') no-repeat;
	background-size: 100% 200px;
}

.DivReservoirFore.tower-type-B {
	background: url('../images/popup/Layout_Inclined_Conduit.png') no-repeat;
	background-size: 180% 200px;
}

/* 투명 처리 (필요 시 유지) */
.transparent {
	width: 100%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

		
.graph_wrap_resv {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
}

.graph_visual {
  width: 60%;
  height: 200px;
  position: relative;
}

/* 공통 수위 라벨 스타일 */
.water-label {
  display: inline-block;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  line-height: 1.2;
}

/* 수위별 색상 */
.water-label.max {
  background: linear-gradient(to right, #3498db, #2980b9); /* 파란색 */
}

.water-label.curr {
  background: linear-gradient(to right, #f1c40f, #f39c12); /* 노란색 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.water-label.min {
  background: linear-gradient(to right, #e74c3c, #c0392b); /* 빨간색 */
}	

.btn_sides {
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: -1px;
    margin-top: -38px;
}

/* select 체크박스 스타일 */
.dropdown-box {
  position: relative;
  display: inline-block;
  width: 130px;
}

.dropdown-box button {
  width: 100%;
  height: 30px;
  border: 1px solid #cdd0dd;
  background: #fff url(../images/common/arrow_select_off.png) no-repeat;
  background-size: 12px;
  background-position: 95% center;
  color: #70789D;
  text-align: left;
  padding: 0 25px 0 10px;
  cursor: pointer;
  font-size: 14px;

  /* 🔽 추가된 부분 */
  white-space: nowrap;        /* 줄바꿈 방지 */
  overflow: hidden;           /* 넘치는 글자 숨김 */
  text-overflow: ellipsis;    /* 말줄임(...) 표시 */
  box-sizing: border-box;     /* padding 포함한 크기 계산 */
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #cdd0dd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 10;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-content label {
  display: block;
  padding: 5px 10px;
  font-size: 14px;
  color: #70789D;
  cursor: pointer;
}

.dropdown-content label:hover {
  background: #f3f4f8;
}