html, body{
            margin:0;
            padding:0;
            height:100%;
            overflow:hidden;
        }

        .page-container{
            height:100vh;
            display:flex;
            flex-direction:column;
            overflow:hidden;
        }

        .header{
            background:#003366;
            color:white;
            padding:10px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight:bold;
            text-align:center;
        }

        .filters{
            background:#f2f2f2;
            padding:8px;
            display:flex;
            gap:10px;
            justify-content:center;
            align-items:center;
            flex-shrink:0;
        }

        #map{
            flex:1;
            width:100%;
            height:100%;
        }

        .layer-btn{
            padding:6px 10px;
            background:#003366;
            color:white;
            border:none;
            cursor:pointer;
        }
        
        .ol-popup {
            position: absolute;
            background: white;
            border-radius: 10px;
            width: 260px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            overflow: hidden;
            font-family: Arial;
        }

        /* Header */
        .popup-header {
            background: #003366;
            color: white;
            padding: 8px 10px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Close button */
        .popup-close {
            cursor: pointer;
            font-size: 16px;
        }

        /* Body */
        .popup-body {
            padding: 10px;
            font-size: 13px;
        }

        /* Table style */
        .popup-body table {
            width: 100%;
            border-collapse: collapse;
        }

        .popup-body td {
            padding: 4px;
            border-bottom: 1px solid #eee;
        }

        .popup-body td:first-child {
            font-weight: bold;
            color: #333;
        }

        /* Arrow */
        .ol-popup:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 40px;
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: white transparent;
        }
        #title {
	        position:absolute; 
	        right:0.4em;
	        top:5.0em;
	        z-index:100000;
        }
        #dis{
	        position: absolute;
	        right:0.5%;
            bottom:0em;
	        z-index: 100000;
            color: grey;
	        font-size: 9.5px;
        }

        .custom-mouse-position {
            position: absolute;
            bottom: 30px;
            left: 10px;
            background: rgba(255,255,255,0.9);
            /*padding: 4px 10px;
            border: 1px solid #999;*/
            border-radius: 4px;
            z-index: 9999;
            font-size: 12px;
            font-weight: bold;
        }

        .ol-scale-line {
            position: absolute !important;
            left: 10px !important;
            bottom: 12px !important;
            background: rgba(255,255,255,0.8) !important;
            border-radius: 4px;
            padding: 2px 5px;
            z-index: 99999 !important;
        }

        .ol-scale-line-inner {
            color: black !important;
            border: 1px solid black !important;
            border-top: none !important;
        }