/* 로딩중 처리 */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
.spinner:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 50%;
    border: 10px solid rgba(38, 178, 231, 0.3);
    border-top-color: rgba(38, 178, 231, 1);
    animation: spinner 1.6s linear infinite;
}
/* openlayer 지도가 그려지는 dom */
.apccmap-block {
    width: 100%; /* 100%; */
    position:relative;
}
/* openlayer 지도 내 zoom 버튼 숨김처리 */
.apccmap-block .ol-zoom {
    display:none;
    top: .5em;
    right: .5em;
    left: auto;
}

/* copyright dom */
.apcc_map_copyright {
    position:absolute; bottom:20px; border:1px solid #CCC;
    padding:0.7em 1.0em 0.5em 1.0em;
    font-size:0.9em;
    width:auto; max-width:500px; min-width:100px;
    line-height:150% !important;
    background-color:rgba(255,255,255,0.85);
    text-align:left;
}
.apcc_map_copyright.tiny {
    border:0px solid #CCC !important;
    min-width:250px!important; white-space:nowrap;
    background-color:rgba(255,255,255,0.0) !important;
    text-align: right !important;
    font-size:1.25em;
    right:2.0em;
}

/* 바람 지도의 경우 기준 바람화살표 이미지 표시 DOM  */
.apcc_map_windbase {
    position:absolute; top:0px; right:0px; border:1px solid #CCC; padding:0.5em 0.5em 0.5em 0.5em; font-size:0.9em; width:calc(2.0em + 38px); height:auto; background-color:white;
    overflow:hidden;
    text-align: center; font-size:1.3em; font-weight: bold;
    line-height: 105%;

}

/* 지도 아래 색상표 dom  */
.apccmap-color { width: auto; margin:0 auto; margin-top:1.0em; text-align:center; font-size:18px; padding-bottom: 30px;}
/* vertical-align:top 명시 — 2026-06-16 수정:
   라벨이 빈 문자열인 박스(예: HSS 마지막 캐치올 칸)는 텍스트가 없어 기준선(baseline)이
   달라져서 다른 박스들과 수직으로 어긋나 보이는 문제가 있었음. top 정렬로 통일해 해결. */
.apccmap-color .color-item { display:inline-block; vertical-align:top; width:50px; height:35px; border:1px solid #000000; margin:0 6px; line-height: 200%; }
.apccmap-color .color-item span { position:relative; display:inline-block; width:50px; margin:0 6px; top:calc(100% + 5px); left:calc(50% + 0px); text-align:center; font-size:1.0em; }
.apccmap-color .color-item.hgt-avg span {letter-spacing: -1px; white-space: nowrap;}
.apccmap-color .color-item.sst-avg { width:35px; }
.apccmap-color .color-item.sst-avg span { width: 35px; }
.apccmap-color.wide .color-item { width:80px; }
/* .apccmap-color.wide.minheight { min-height:80px; } */
.apccmap-color.wide .color-item span { width:80px; }
.apccmap-color.width-sm .color-item { width:50px; font-size:0.85em; line-height: 250%;}
.apccmap-color.width-sm .color-item span { width: 50px; }
.apccmap-color.drought .color-item { width:120px; }
.apccmap-color.drought.width-sm .color-item { width:80px; font-size:0.85em;}

.apccmap-collormapping-gaus {overflow:hidden; display:inline-block; padding-bottom: 1.25em; }
.apccmap-collormapping-gaus .color-item { width:35px; margin:0 4px; }
.apccmap-collormapping-gaus .color-item span { width:37px; }
.apccmap-collormapping-gaus .below {display:inline-block; min-height:120px;}
.apccmap-collormapping-gaus .below .text {text-align:center; font-weight: bold; font-size:1.25em;}
.apccmap-collormapping-gaus .near {display:inline-block; min-height:120px;}
.apccmap-collormapping-gaus .near .text {text-align:center; font-weight: bold; font-size:1.25em;}
.apccmap-collormapping-gaus .above {display:inline-block; min-height:120px;}
.apccmap-collormapping-gaus .above .text {text-align:center; font-weight: bold; font-size:1.25em;}

.custom-md .apccmap-color .color-item { width:40px; }
.custom-md .apccmap-color .color-item span { width: 40px; }
.custom-md .apccmap-color .color-item.sst-avg { width:35px; }
.custom-md .apccmap-color .color-item.sst-avg span { width: 35px; }
.custom-md .apcc_sub_optionbox.type5 select,
.custom-md .apcc_sub_optionbox.type5 input,
.custom-md .apcc_sub_optionbox.type5 button { font-size: 0.8em }
.custom-md .apccmap-collormapping-gaus .text {font-size:1.0em;}
.custom-md .apccmap-collormapping-gaus .color-item {width:25px; height:25px; line-height: 100%;}
.custom-md .apccmap-collormapping-gaus .color-item span { width:25px; font-size:0.8em; line-height: 100%; }

/* 지도에 띄워지는 부스트랩 팝업 : popover : 부트스트랩 값 수정.*/
#PLOY-CHART4LINE {
    width:100%; height:130px;
}
#PLOY-CHART4PIE {
    width:140px; height:140px;
    margin:auto;
}
.popover .apcc_sub09_grapharea1_close {
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    display: flex;
    border: 0px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: transparent !important;
}
.popover {
    border-radius: 0.75rem !important;
    min-width : 350px !important;
    max-width : 450px !important;
    margin-bottom:50px !important;
    /* border:0; background-color:transparent; */
}
.popover .popover-body {

}
/* apccmap 팝업의 부트스트랩스타일 재정의 */
.popupinfo {
    /* min-width: 250px; max-width:500px; */
    width:100%;
    font-family: 'Nanum_Neo_R';
}
.popupinfo.scm, .popupinfo.gaus {
    /*min-width: 300px; width:400px;*/
    /*width: 100%;*/
}
.popupinfo .mt_10 { margin-top:10px; }
.popupinfo .pb_0 { padding-bottom:0px !important; }
.popupinfo .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.popupinfo .fbold {
    font-weight: bold;
}
.popupinfo .tline {
    border-top: 1px solid #EEE;
}
.popupinfo .bline {
    border-bottom: 1px solid #EEE;
}
.popupinfo .rline {
    border-right: 1px solid #EEE;
}
.popupinfo .lline {
    border-left: 1px solid #EEE;
}
.popupinfo .tline.whiteline {
    border-top: 1px solid #FFFFFF;
}
.popupinfo .bline.whiteline {
    border-bottom: 1px solid #FFFFFF;
}
.popupinfo .rline.whiteline {
    border-right: 1px solid #FFFFFF;
}
.popupinfo .lline.whiteline {
    border-left: 1px solid #FFFFFF;
}
.popupinfo.abnormal {
    min-width: 100px; width:auto;
}
.popupinfo.tiny {
    min-width: 100px; width:auto;
}
.popupinfo.tiny .lat, .popupinfo.tiny .lon, .popupinfo.tiny .value {
    white-space: nowrap;
}
.popupinfo.tiny .apcc_sub09_grapharea1_close {
    width: 40px; height:40px;
}
.popupinfo.scm .datafield, .popupinfo.scm .datavalue,
.popupinfo.gaus .datafield, .popupinfo.gaus .datavalue {
    float:left; width:50%; text-align:center; white-space: nowrap;
    font-size:1.15em;
    padding:10px;
}
.popupinfo.scm .datafield, .popupinfo.gaus .datafield {
    font-weight: bold;
    width:55%;
}
.popupinfo.scm .datafield.lightbg, .popupinfo.gaus .datafield.lightbg {
    background-color: #F6F6F6; justify-content: center; padding: 10px; text-align: center;
}
.popupinfo.scm .datavalue, .popupinfo.gaus .datavalue {
    width:45%;
}
.popupinfo.scm .datafield.rline, .popupinfo.scm .datavalue.rline,
.popupinfo.gaus .datafield.rline, .popupinfo.gaus .datavalue.rline {
    border-right: 1px solid #EEE;
}
.popupinfo.scm .datafield.lline, .popupinfo.scm .datavalue.lline,
.popupinfo.gaus .datafield.lline, .popupinfo.gaus .datavalue.lline {
    border-left: 1px solid #EEE;
}
.popupinfo.scm .datafield.tline, .popupinfo.scm .datavalue.tline,
.popupinfo.gaus .datafield.tline, .popupinfo.gaus .datavalue.tline {
    border-top: 1px solid #EEE;
}
.popupinfo.scm .datafield.bline, .popupinfo.scm .datavalue.bline,
.popupinfo.gaus .datafield.bline, .popupinfo.gaus .datavalue.bline {
    border-bottom: 1px solid #EEE;
}
.popupinfo.scm .hindcast_label,
.popupinfo.gaus .hindcast_label {
    font-size:1.25em;
    text-align:center;
    padding: 5px 0px;
}
.popupinfo.gaus .colortypes li {
    text-align:left;
    position:relative;
}
.popupinfo.gaus .colortypes li {
    text-align:left;
    padding: 0 0.5em;
}
.popupinfo.gaus .colortypes li .apcc_sub09_colorbox {
    position:absolute; top:5px; right:1.0em;
}
.popover-closer { cursor:pointer; }

.showTinyPopup + .popover {
    min-width:150px !important;
}
.showTinyPopup + .popover .popupinfo b {
    font-weight: bold;
    display:inline-block;
    width: 60px;
    font-size: 1.25em;
}