a, div, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, p, span {
        font-family: "ubuntu-medium", sans-serif;
    }
    .base-layer-icon {
        border-radius: 5px;
    }
    .container {
        width: 80%; /* 容器宽度为80% */
        background-color: rgba(0, 100, 0, 0.5); /* 绿色背景，50% 透明度 */
        padding: 20px; /* 适当的内边距 */
        border-radius: 8px; /* 圆角边框 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
        /* 添加最大高度和溢出滚动以处理内容过多的情况 */
        max-height: 90%;
        overflow: auto;
        font-family: 'Dancing Script', cursive; /* 設定 Cursive 字體 */
    }


    /* 手機裝置時的圖標大小 */
    @media (max-width: 768px) {
        .leaflet-control {
            font-size: 12px; /* 調整控件大小 */
        }
        .leaflet-marker-icon, .leaflet-marker-shadow {
            transform: scale(0.5); /* 縮小標記大小 */
        }
        .custom-fa-icon i {
            font-size: 20px; /* 調整自定義圖標大小 */
        }
        #map {
            height: 75vh;
        }
    }

    /* 電腦螢幕時的圖標大小 */
    @media (min-width: 769px) {
        .leaflet-control {
            font-size: 12px; /* 調整控件大小 */
        }
        .leaflet-marker-icon, .leaflet-marker-shadow {
            transform: scale(1); /* 標準標記大小 */
        }
        .custom-fa-icon i {
            font-size: 20px; /* 調整自定義圖標大小 */
        }
        #map {
            height: 80vh;
        }
    }


    @media (max-width: 768px) {
    .map-header {
        font-size: 10px; /* 調整字體大小 */
        padding: 2px 5px; /* 調整內邊距 */
    }
    .login-btn {
        font-size: 8px; /* 調整登入按鈕字體大小 */
        padding: 3px 6px; /* 調整登入按髕內邊距 */
    }
    /* 調整其他控件的大小和位置 */
  }


    /* 自定義控件樣式 */
    .custom-fa-icon {
        background-color: white;
        border: 2px solid rgba(0,0,0,0.2);
        cursor: pointer;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-setting-icon {
        background-color: white;
        border: 2px solid rgba(0,0,0,0.2);
        cursor: pointer;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0px;
        font-size: 20px; /* 調整自定義圖標大小 */
        margin: 0;
    }

    .custom-fa-icon i {
        margin: 0;
    }

    .leaflet-touch .leaflet-bar a {
        width: 50px;
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar {
        border: none; /* 這將移除邊框 */
        background-clip: border-box; /* 將 background-clip 設回預設值 */
        margin-right: 8px !important;
        margin-top: -3px !important;
    }

    .leaflet-touch .leaflet-control-geocoder {
        min-width: 50px;
        min-height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .leaflet-touch .leaflet-control-layers-toggle {
        width: 60px;
        height: 60px;
    }
    .map-header {
        display: flex;
        justify-content: space-between; /* This will push the button to the right */
        align-items: center;
        width: 100%;
        text-align: left;
        background-color: rgba(255, 255, 255, 0.8); /* 可根據需要調整背景顏色 */
        padding: 10px 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000; /* 確保它出現在地圖之上 */
    }

    .login-btn {
        background-color: yellow; /* Yellow background */
        color: black; /* Black text */
        border: none;
        padding: 4px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 10px;
        margin: 2px 11px;
        cursor: pointer;
        border-radius: 4px;
    }


    .custom-fa-icon {
        position: absolute;
        top: 50px; /* Adjust this value to move the icon up or down */
        right: 0px; /* This positions the icon on the right side */
        /* other styling properties */
    }
   .leaflet-right .leaflet-bookmarks-control {
      margin-top: 18px !important;
      width: 50px !important;
<!--      height: 50px !important;-->
      border-radius: 5px !important;
   }

    .leaflet-control-bookmarks .leaflet-bar a {
        background-image: url('/img/star-icon.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .leaflet-right .leaflet-bookmarks-control {
        margin-right: 8px !important;
    }

    .leaflet-bookmarks-control {
        padding: 15px !important;
    }
        .green-icon {
            background-color: green;
            border-radius: 50%;
            width: 25px;
            height: 25px;
        }
        .orange-icon {
            background-color: orange;
            border-radius: 50%;
            width: 25px;
            height: 25px;
        }
        .red-icon {
            background-color: red;
            border-radius: 50%;
            width: 25px;
            height: 25px;
        }
        .base-layer-icon {
            width: 32px;
            height: 32px;
            cursor: pointer;
            margin: 2px;
            display: block;
        }
        .base-layer-icon {
            width: 32px;
            height: 32px;
            cursor: pointer;
            margin: 2px;
            display: inline-block; /* 更改為橫向顯示 */
        }
        .custom-layer-control { /* 新增自定義控制器的樣式 */
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .leaflet-control-layers-toggle {
			width: 74px !important;
			height: 44px !important;
        }
        .custom-popup {
            width: 450px; /* 或您想要的任何尺寸 */
        }
        .card-body {
            flex: 1 1 auto;
            padding: 10px 10px;
        }
        .fa-map-marker-alt:before {
            content: "\f3c5";
            font-size: 17px !important;
        }
        .login-btn {
            font-size: 8px; /* 調整登入按鈕字體大小 */
            padding: 3px 6px; /* 調整登入按髕內邊距 */
        }

        .login-btn {
            background-color: yellow; /* Yellow background */
            color: black; /* Black text */
            border: none;
            padding: 4px 8px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 10px;
            margin: 2px 11px;
            cursor: pointer;
            border-radius: 4px;
        }
        .content-wrapper {
            background: #f2edf3;
            padding: 0.5rem 0.5rem 0.5rem 0.5rem !important;
            width: 100%;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
        }
        .card .card-body {
            padding: 3px 3px !important;
        }
        .card .card-title {
            font-size: 0.9rem !important;
        }
.leaflet-control-layers-overlays {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    align-content: flex-end;
    justify-content: space-around;
    align-items: stretch;
    flex-direction: row;
    width: 150px;
}

.custom-checkbox {
    display: inline-block;
    margin-right: 2px;
    cursor: pointer;
    text-align: center;
    position: relative;
    width: 65px;
}

.custom-checkbox span.image {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: 3px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 6px;
}