body { font-family: Arial, sans-serif; margin: 0; padding: 0; }

#location-info {position: absolute; left: 50%; transform: translateX(-50%);  /* 向左偏移自身一半宽度，实现真正居中 */
    width: 80%; background-color: rgba(255, 255, 255, 1); border-radius: 0 0 5px 5px; text-align: center;  /* 内部文字、链接内容居中 */
    font-size: 14px; color: #666; z-index: 999;}

#mapX { position: relative; height: 340px; width: 90%; overflow: hidden; border-radius: 5px; margin: 0 5% 1% 5%; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('/static/images/poilist.jpg'); }
#map { width: 100%; height: 360px; background-color: transparent !important;/*transform: translate(-50%, -50%);*/ }
@media (max-width:768px){ #mapX{ width:94%; height:240px; } #mao{height:240px; }}
#demo { display: flex; width: 90%; margin: 2% 5% 1% 5%; text-align: center; }
#demo input { width: 40%; height: 35px; padding: 0px 18px; }
#sushi-button { float: left; width: 25%; height: 35px; padding: 2px; margin: 0 auto; font-size: 16px; background-color: #22aa22; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px; }
#sushi-button:hover { background-color: #22cc22; }
#button-container { margin: 0px auto; height: auto; padding: 0; display: flex; flex-wrap: wrap; gap: 0px 15px; justify-content: center; }
#sort-button { background-color: #22aa22; color: white; width:25%; margin-left:5%; padding:0 10px; border:none; border-radius: 5px; }
#sort-button:active { background-color: #fff; }
#sort-button:hover { background-color: #0099DD; }
#simiao-button { width: 25%; background-color: #0077FF; color: white; margin-left: 10px; border-radius: 5px; }
#simiao-button:hover { background-color: #22aa22; }
#poi-list { width: 90%; list-style-type: none; padding: 0; margin: auto 5%; }
#poi-list li { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
#message { text-align: center; color: green; margin-bottom: 2px; }
.no-pagination { font-size: 12px; font-weight: bold; color: #22aa22; }
#liName { font-size: 18px; font-weight: bold; color: #22aa22; }
#liId a { font-size: 14px; text-decoration: none; color: inherit; }
#liaddr {}
#liTel {}
/*  #liDistance {width:30%; border-radius: 4px;padding-top:2px;padding-bottom:2px;font-size:12px;padding-left:10px; background-color: #22aa22;color: #fff; }*/
#liDistance { font-weight: bold; color: #22aa22; }
#liNav { margin-left: auto; text-align: right; margin-top: -3px; }
#liNav a { font-size: 13px; color: inherit; text-decoration: none; }

/* district-tags 容器样式 */
#district-tags { width: 90%; height: auto; margin: 1% 5%; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 15px; justify-content: ; align-items: start; }
/* 按钮基本样式 */
#district-tags button { padding: 5px 10px; border: none; border-radius: 4px; background-color: #f0f0f0; color: #333; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; border: 1px solid #ccc; }
/* 按钮悬停样式 */
#district-tags button:hover { background-color: #22aa22; color: #fff; }
#district-tags button.active { background-color: #22aa22; color: #fff; }

/* 按钮基本样式 */
#district-tags .sortBtn { padding: 5px 10px; border: none; border-radius: 4px; background-color: #0099DD; color: #fff; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; border: 1px solid #ccc; }
/* 按钮悬停样式 */
#district-tags .sortBtn:hover { background-color: #22aa22; color: #fff; }
#district-tags .sortBtn.active { background-color: #22cc22; color: #fff; }

/* 错误信息样式 */
#error-message { color: red; margin-top: 10px; }
#pagination { display: flex; justify-content: flex-end; width: 90%; margin: 1% 5%; color: #909090; }
/* 定义按钮类的样式 */
#pagination button { color: white; padding: 3px 8px; border: none; border-radius: 3px; cursor: pointer; background-color: #22aa22; }
.sortBtn { color: white; padding: 3px 8px; border: none; border-radius: 3px; cursor: pointer; background-color: #0099DD; }
.current-page { font-size: 12px; color: #909090; padding: 3px 8px }
.poili { margin: 3px 8px 0px 8px; color: #505050; font-size: 14px; }
/* 补充下拉内容的样式 */
.Vcity-dropdown { position: relative; display: inline-block; }
.Vcity-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }
.Vcity-dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.Vcity-dropdown-content a:hover { background-color: #f1f1f1; }
.Vcity-dropdown:hover .Vcity-dropdown-content { display: block; }
#pos-area { background-color: #0077FF; margin-bottom: 10px; width: 100%; margin: 0; height: auto; max-height: 30px; overflow: scroll; text-align: left; color: white; }
#fix { padding: 8px; font-size: small; }
#btn-area { height: 100px; }
#sushi-button, #simiao-button { margin-bottom: 10px; padding: 8px; width: 42%; border-radius: 8px; background-color: #0099DD; color: white; font-size: 14px; border: none; cursor: pointer; }



 /*  #liDistance {width:30%; border-radius: 4px;padding-top:2px;padding-bottom:2px;font-size:12px;padding-left:10px; background-color: #22aa22;color: #fff; }*/