/* 縮小失敗。正在傳回未縮小的內容。
(392,33): run-time error CSS1039: Token not allowed after unary operator: '-map-panel-width'
(854,15): run-time error CSS1036: Expected expression, found '!important'
 */
html {
    scroll-behavior: smooth; /* 點 anchor 會滑動過去，而不是瞬間跳 */
}

.div_nav {
    text-align: left
}

.btn-dark:hover,
.btn-dark:active:hover,
.btn-dark.btn-dropdown:hover {
    color: white;
    background-color: #d49500 !important;
    border-color: #d49500 !important;
}

.btn-dark:focus {
    box-shadow: none;
}

.control-label {
    font-size: 1.2rem;
    margin: 0;
    padding-right: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1.5rem;
}

a.control-label {
    font-size: .5rem;
}

hr {
    border-top: 1px dashed white;
    margin: 0.5rem;
}

.text-light-green {
    color: #8afbbd
}
/* #region 滾軸*/
/* width */
::-webkit-scrollbar {
    width: .75rem;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 .2rem grey;
    border-radius: .25rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #d49500;
    border-radius: .25rem;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }
/* #endregion 滾軸*/
/* #region 導覽列 */
#btn-nav, #listBtn {
    z-index: 2002;
    /*    position: absolute;
    left: 1rem;
    top: 3.5rem;*/
    background: unset;
    padding: .5rem;
    border-radius: .5rem;
    border-width: 0;
    color: white;
    font-size: 1.75rem;
    text-align: center;
}

#listBtn {
    /*    top: 6.8rem;*/
    padding: .5rem .75rem;
}

    #btn-nav:hover,
    #btn-nav:active:hover,
    #listBtn :hover,
    #listBtn :active:hover {
        color: white;
        background-color: #f39d00 !important;
        border-color: #f39d00 !important;
    }

button#btn-nav:focus,
button#listBtn:focus {
    outline: none;
}

div.nav {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 2001;
    min-height: 2rem;
    background: #191818;
    padding: .5rem .5rem .5rem 4rem;
    text-align: center;
}

    div.nav ul {
        margin: 0;
    }

        div.nav ul li {
            margin: .5rem;
            display: inline-block;
        }

            div.nav ul li a {
                font-size: 1.75rem;
                font-weight: 800;
                color: white;
                text-decoration: none;
            }

                div.nav ul li a:hover {
                    color: gold;
                }
/* #endregion 導覽列*/
/* #region Logo */
.div_logo {
    z-index: 2000;
    display: inline-block;
    /*    position: fixed;*/
    /*    top: 0.625rem;*/
    /*    left: 1.5rem;*/
    border-radius: .5rem
}

    .div_logo img {
        float: unset;
    }

    .div_logo div {
        margin: .5rem;
        display: inline-block;
        font-weight: 800;
    }

        .div_logo div:hover,
        .div_logo a:hover {
            color: white;
            text-decoration-line: none;
            background-color: #343a40;
        }

.gohome {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    color: black;
}
/* #endregion Logo */

/* #region 地圖工具:底圖、縮放、定位、測量 */
.btn-group.mapTool {
    float: right;
    padding: 0;
    /*    position: relative;*/
    /*    right: 0.5rem;
    top: 0.5rem;*/
    z-index: 2000;
    opacity: .8;
    padding: .25rem .75rem;
    border-radius: .5rem;
    border-width: 0;
    color: white;
    font-size: 1.75rem;
    text-align: center;
}

    .btn-group.mapTool:hover {
        opacity: 1;
    }

    .btn-group.mapTool .fa.fa-map-o {
        margin-right: 0.2rem;
    }

    .btn-group.mapTool span,
    .btn-group.mapTool .dropdown-item {
        font-weight: 600;
    }

    .btn-group.mapTool .dropdown-menu {
        background-color: #343a40;
        opacity: 1;
    }

        .btn-group.mapTool .dropdown-menu a {
            color: white;
            font-weight: 600;
        }

            .btn-group.mapTool .dropdown-menu a:hover {
                background-color: #d49500
            }

    .btn-group.mapTool .btn {
        padding: 0.2rem 0.75rem;
        background: none;
        border: none;
    }

#loCate {
    vertical-align: text-top !important;
    padding-top: 0
}

/* #endregion 地圖工具:底圖、縮放、定位、測量 */
/* #region 地圖 */
#map {
    width: 100%;
    /*    height: 100%;*/
    height: calc(100% - 50px);
}
/* #endregion 地圖 */

/* #region Icon */
.restaurant,
.badgehotel_g, .badgehotel_s, .badgehotel_c,
.Chainstore_Y, .Chainstore_N {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.hotel {
    border-radius: 50%;
}

.inteCase1, .inteCase2, .inteCase3 {
    border-radius: 0.5rem;
}

.restaurant {
    background: #28a745;
}

.badgehotel_g {
    background: gold;
}

.badgehotel_s {
    background: #6495ed;
}

.badgehotel_c {
    background: coral;
}

.hotel {
    background: #b200ff;
}

.Chainstore_Y {
    background: #f68be7;
}

.Chainstore_N {
    background: #eaaa7c;
}

/* #endregion Icon */
@media (max-width: 850px) {
    /* #region 地圖工具 #*/
    .btn-group.mapTool span {
        display: none;
    }
    /* #endregion 地圖工具 #*/
}

@media (max-width: 550px) {
    /* #region 導覽列*/
    .div_logo {
        /*right: 42vw;*/
        /*left: 4.25rem;*/
    }
    /* #endregion 導覽列*/

    /* #region 地圖工具 #*/
    #zoomIn, #zoomOut {
        display: none;
    }
    /* #endregion 地圖工具 #*/
}

@media (max-width: 450px) {
    /* #region 導覽列 #*/
    .div_logo div {
        display: none;
    }
    /* #endregion 導覽列 #*/
}
/* 遮罩 */
.modal-backdrop {
    background-color: rgba(248, 247, 247,1) /*!important;  */
}

#carouselHelpModal.modal {
    z-index: 2000;
}

.modal-title {
    color: #CFD8DC;
    color: white;
}

.modal-footer {
    background: #4DB6AC
}

.modal-header, modal-body, .modal-footer {
    background-color: #455A64;
    color: white;
}

    .modal-footer button {
        background-color: #4DB6AC
    }

.modal-content {
    background: #1b2327;
    color: white
}

.help-modal .modal-header {
    justify-content: center;
    position: relative;
}

    .help-modal .modal-header .close {
        position: absolute;
        right: 1rem;
        color: white;
    }
/* 適用於所有螢幕的 carousel 圖片 */
.carousel-img {
    width: 100%; /* 寬度滿版 */
    height: auto; /* 高度自動依比例縮放 */
    object-fit: contain; /* 保持完整圖片，不裁切 */
}

#scrollToDiv {
    display: none;
}



@media (max-width: 1420px) {
    .carousel-img {
        width: auto;
        max-height: 70vh; /* 高度最多佔螢幕 70%，避免溢出 */ /* 小螢幕時額外限制最大高度，避免太長 */
        object-fit: contain; /* 讓整張圖縮在範圍內 */
    }

    #scrollToDiv {
        display: block;
    }

    .modal-content {
        width: 80%;
        margin: auto;
    }
}
@media (max-width: 1210px) {
    .modal-content {
        width: 100%;
        margin: auto;
    }
}
body {
    margin: 0;
    /*font-family: Arial, sans-serif;*/
}

.gridDiv {
    display: grid;
    grid-template-columns: var(--map-panel-width, 58%) minmax(320px, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "d1 rightTop"
        "d1 d4";
    gap: 10px;
    padding: 10px;
    height: 100vh;
}
.dashboard-panel {
    display: contents;
}
.dashboard-resizer {
    display: none;
}
.rightTop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "d2 d3";
  gap: 10px;
  height: 100%;
}
.dashboard-toggle-btn {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1101;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}
.dashboard-toggle-btn,
.dashboard-toggle-btn:hover,
.dashboard-toggle-btn:focus,
.dashboard-toggle-btn:active,
.dashboard-toggle-btn:not(:disabled):not(.disabled):active,
.dashboard-toggle-btn:not(:disabled):not(.disabled).active {
    border: 2px solid #fff;
    border-color: #fff;
}
.dashboard-toggle-btn:focus,
.dashboard-toggle-btn:active {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}
.gridDiv.dashboard-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "d1";
    gap: 0;
    padding-right: 0;
}
.gridDiv.dashboard-collapsed #dashboardPanel {
    display: none;
}
.gridDiv.dashboard-collapsed .dashboard-resizer {
    display: none;
}
.gridDiv.dashboard-collapsed .d1 {
    grid-area: d1;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100vh;
}
.gridDiv.dashboard-collapsed .dashboard-toggle-btn i {
    transform: rotate(180deg);
}
.box {
/*    display: flex;*/
    align-items: center;
    justify-content: center;
    background-color: #37474F;
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
    /*padding: 20px;*/
    border: 2px solid #37474F;
    text-align: center;
    min-height: 2rem;
    border-radius: 1rem;
}

.d1 {
    grid-column: 1;
    grid-row: 1;
    border-radius: 0;
}

.d4 {
    grid-column: 1;
    grid-row: 2;
}

.d2 {
    grid-column: 2;
    grid-row: 1;
}

.d3 {
    grid-column: 2;
    grid-row: 2;
}

/* 中螢幕 (平板) 時變成 D1 → (D2+D3) → D4 */
@media (max-width: 1420px) {
    .gridDiv {
       
        display: unset;
        padding:0
        /*grid-template-columns: 1fr 1fr;
        grid-template-rows: fit-content();
        grid-template-areas: "d1 d1" "d1 d2 " "d1 d3" "d1 d4";*/
    }
    .box {
        height: 100vh;
        width:100vw;

    }
    .d1 {
        grid-area: d1;
    }
       /* .d1 #map {
            height:100%
        }*/
    .d2 {
        grid-area: d2;
        width: 50vw;
        height: 55vh;
        border-radius: unset
    }

    .d3 {
        grid-area: d3;
        width: 50vw;
        height: 55vh;
        border-radius:unset
    }

    .d4 {
        grid-area: d4;
        border-radius: unset;
        height: 45vh;
    }
    .rightTop {
        gap:unset
    }
    .dashboard-panel {
        display: block;
    }
    .dashboard-resizer {
        display: none;
    }
    .dashboard-toggle-btn {
        display: none;
    }
   
}

/* 小螢幕 (手機) 時變為垂直排列 */
@media (max-width: 768px) {
    #map {
        height:calc(100vh - 50px);
    }
    #sidebar {
        height: calc(100vh - 80px);
        top:70px
    }
    .gridDiv {
        padding: 0;
        display: block;
        width: 100vw;
        /*flex-direction: column;*/
        height: auto;
    }
    .rightTop {
        display: block;
    }
    .dashboard-panel {
        display: block;
    }
    .box {
        width: 100vw
    }
    
}

#greenHotelCardbody *, #storeCardbody * {
    /*display:none;*/
}

.sidebar {
    display: none;
    position: absolute;
    top: 3.8rem;
    left: 0rem;
    z-index: 1000;
    width: 20rem;
    max-width: calc(100vw - 9rem);
    /* max-width: 80vw;*/
    /*max-width: calc( 100vw - 5rem );*/
    min-height:16rem;
    background-color: rgba(0,0,0,.7);
    border-radius: .25rem;
}

#sidebar {
    display: unset;
    height: calc(100vh - 72px);
    top:50px
    /*width: calc(100vw)*/
}

.sidebar .card {
    background-color: rgba(0, 0, 0, 0.00);
    color: white;
    border: none;
}

.sidebar .card label,
.sidebar .card label {
    margin: 0;
}

.sidebar > .card-header {
    background-color: rgb(216, 142, 9);
    color: white ;
    padding:0.28rem;
}
    .sidebar > .card-body {
        text-align:left;
        /*height: calc(100% - 40rem);*/
        overflow: auto;
        /*padding:0.5rem*/
    }
        .sidebar > .card-body > .sidebarPartial {
            /*height: calc(100% -60rem );*/
            /*overflow:auto;*/
        }

.sidebar .mapLegend {
    line-height: 1rem;
    border-radius: 50% 50%
}
.sidebar .dropdown-menu {
    max-height: 16rem;
    overflow: auto;
}


a.toggleLayerIcon {
    color: white;
    text-decoration-line: none;
}
a.toggleLayerIcon > h4 {
    font-size: 1.2rem;
    margin-bottom:0;
    margin-top:0.1rem;
    
}
.card-header span.selected {
    display: none;
    padding: 0.025rem 0.15rem;
    vertical-align: middle;
    font-size: 0.5rem;
    width: 1.15rem;
    height: 1.15rem;
    color: black;
    margin-right: 0.2rem;
}
.card-header span.selectedAll {
    display:none;
    background-color: #d39e00;
    border-radius: 0.1rem;
    padding:0;
}

.card-body li {
    margin: 0.5rem;
}
.card-body li label {
    margin: 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
    display:inline-block
}
.card-body li input[type=checkbox],.activityItem input[type=checkbox] {
    height: 1rem;
    width: 1.2rem;
}
.activityItem input[type=checkbox] {
    height: 1rem;
    width: 1rem;
}
.activityItem {
    color:white;
}
.activityItem div label{
   line-height:1.2rem;
   font-size:1.15rem;
}
.card-body label.selectAll {
    color: yellow;
}

.circle {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.circle.allRestaurant {
    background-color: #28a745;
}
.circle.shopGift {
    background-color: #e25090;
}

.circle.consumptionPoint {
    background-color: #007bff;
}

.circle.pointsDiscount {
    background-color: #bbde1f;
}
.circle.greenPoint {
    background-color: #06f506;
}
.circle.badgehotel_g {
    background-color: gold
}

.circle.badgehotel_s {
    background-color: cornflowerblue
}

.circle.badgehotel_c {
    background-color: coral
}
.rec {
    border-radius: 0.25rem;
    width: fit-content;
    height: auto;
    padding: 0.25rem;
    margin-top: 0;
    display: inline-block;
}

.rec.EcoHotel {
    background-color: #b200ff;
    width: 1rem;
    height: 1rem;
}

.rec.inteCase1 {
    background: #997c08;
    width: 1rem;
    height: 1rem;
}

.rec.inteCase2 {
    background: #99130f;
    width: 1rem;
    height: 1rem;
}

.rec.inteCase3 {
    background: #0f1599;
    width: 1rem;
    height: 1rem;
}



.circle.Chainstore_Y {
    background-color: #f68be7
}
.circle.Chainstore_N {
    background-color: #eaaa7c
}

.selected.Chainstore_Y {
    background-color: #f68be7;
    border-radius: 0.1rem;
    padding: 0;
}
.selected.Chainstore_N {
    background-color: #eaaa7c;
    border-radius: 0.1rem;
    padding: 0;
}
.resultbar .information img.goodsClass {
    height:2rem;
    width:auto;
    position: relative;
    transform: translateY(50%);
   /* background:white;*/
}
#resultbar_badgehotel .rec.EcoHotel {
    width: fit-content;
    height: fit-content;
}
/*@media() {
    #sidebar {
        height: calc(100vh - 72px);
        top: 50px
    }
}*/
@media(min-width: 1422px) {
    #sidebar {
        height: calc(100vh - 80px);
        top: 60px
    }
}
@media (min-width: 768px) and (max-width: 1420px) {
    #sidebar {
        height: calc(100vh - 80px);
        top: 50px
    }
}
@media (max-width: 768px) {
    #sidebar {
        height: calc(100vh - 80px);
        top: 50px;
        max-width:unset;
    }
   
}
@media (min-width: 380px) and (max-width:767) {
    #sidebar {
        height: calc(100vh - 90px);
        /*max-height: calc(50vh - 22rem);*/
        /*width: calc(100vw - 1rem);*/
        /*max-width: calc(100vw - 1rem);*/
    }
}
@media (max-width: 380px) {
    
    .sidebar > .card-body {
        padding: 0.5rem;
    }
}
@media (max-width: 412px) and (max-heigh: 914px) {
    #sidebar.sidebar {
        top: 5px;
        box-sizing: border-box;
        /*width: !important 100vw*/
    }
}

@media (max-width: 375px) and (max-heigh: 667px) {
    
}
@media (max-width: 407px) {
    #sidebar {
        width:!important 100vw
    }

    .card-body li {
        
        margin: 0.25rem
    }
}

.resultbar {
    display: none;
    position: absolute;
    top: 0rem;
    right: 4rem;
    z-index: 999;
    width: 18.75rem;
    max-width: calc(100% - 5rem);
    padding-bottom: 1rem;
/*    height: calc(100% - 5rem);*/
    background-color: rgba(0,0,0,.7);
    border-radius: .5rem;
    overflow:auto;
    right:3.5rem;
}
    .resultbar.detailResult {
        top:0;

    }
.resultbar div {
    margin-top: 0.5rem;
}
    .resultbar label, .resultbar h4#names, h4#names_restaurant {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }
.resultbarheader {
    max-height: 30vh;
    overflow: hidden
}

.resultClose {
    width: 2rem;
    height: 2rem;
    float: right;
    margin-right: -0.5rem;
    padding: 0;
    border: 2px solid white;
    border-radius: 50% 50%;
    background: rgba(0, 0, 0, 0.38);
    color: white;
}


.resultbar img {
    width: 100%;
    z-index: -1;
    margin-top: -1.5rem;
    padding: 0;
}

/*h4#names, h4#names_restaurant,*/ 
h4.name {
    color: gold;
    margin: 0;
    text-align: center;
}


.resultbar p.p {
    max-height: 25vh;
    overflow: auto;
    margin: 0;
    padding: .5rem;
    color: white;
    font-size: 1rem;
    line-height: 1.5rem;
    /*background-color: rgba(90, 100, 109, 0.95)*/
}
.resultbar #tel, .resultbar #address ,
    .resultbar #tel_restaurant, .resultbar #address_restaurant {
    font-size: 1rem;
}
#resultbar_hotel .rec {
    width:unset;
    height:unset;
}
#resultbar_list {
    position:relative;
    overflow:unset;
    height:100%
}
#result_list {
    max-height: calc( 100vh - 9rem);
    overflow: unset;
    height: calc(100% - 50px);
}

@media(max-height:760px) {
    .resultbar p.p {
        max-height: 12vh;
    }
}
.helpbtn {
    position: fixed;
    bottom: 0.375rem;
    left: 0.375rem;
    z-index: 1500;
    border: 1px solid white
}

@media (max-width: 320px) {
    h4 #names, h4#names_restaurant {
        text-align: left
    }

    .resultbar p.p {
        max-height: 12vh;
    }
}

#restaurant_list {
    height: 100%;
    overflow: auto;
}
#resultbar_list .resultClose {
    width: 3rem;
    height: 3rem;
    float: left;
    margin-right: 0rem;
    padding: 0;
    border: none;
    border-radius: 50% 50%;
    background: none;
    color: white;
}
#resultbar_list .backQuery {
    width: 3rem;
    height: 3rem;
    float: right;
    margin-right: 0rem;
    padding: 0;
    border: none;
    border-radius: 50% 50%;
    background: none;
    color: white;
}
#resultbar_list .IconText {
    font-size: 0.5rem
}
#resultbar_list h4 {
    font-size: 2rem;
}

#resultbar_list.resultbar div {
    margin-top: 0rem;
    overflow: auto;
}
#resultbar_list.resultbar #result_list {
    margin-top: 0rem;
    overflow: unset;
}
.sidebar > div#resultbar_list.card-body {
    overflow: unset
}
#result_listTabContent {
    max-height: 100%;
    overflow: auto;
}

#result_list .nav-tabs .nav-item.show .nav-link,
#result_list .nav-tabs .nav-link.active {
    background-color: rgba(48, 105, 209, 0.5);
}
#result_list a {
    color: white;
}

#result_listTabContent h6, #result_listTabContent a {
    display: block;
    text-decoration: none;
    line-height: 1.5rem;
}
#result_listTabContent h6 {
    margin: 0;
    padding: 0.5rem;
    line-height: 1.5rem;
    color: orange;
    font-size: 1.5rem;
    font-weight:800;
}
#result_listTabContent a span.selected {
    margin-left: 0.2rem;
    color: black;
    font-size: 0.5rem;
    text-align: center;
}
#result_listTabContent a span.selected.rec {
    padding:0;
    color:white;
}