/* InforWindow*/
.InfoWindow {
    position: absolute;
    left: 50%; /* 將左側對齊畫面正中央 */
    top: 7.5em;
    transform: translateX(-50%); /* 向左偏移自身寬度的一半，達到真正置中 */
    box-shadow: 0px 0px 10px 0px #00000080;
    border-radius: .5em;
    background-color: #FFF;
    min-width: 25em;
    opacity: 1;
    display: none;
    z-index: 1;
    padding: 0.5em;
}

    .InfoWindow > div:first-child {
        cursor: pointer;
        height: 1em;
        width: 1em;                
        position: absolute;
        top: 1em;
        right: 1em;
    }
        .InfoWindow > div:first-child img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .InfoWindow > div:nth-child(2) {
            background: #FFF;
            border-radius: .5em .5em 0 0;
            color: #0071bc;
            font-size: 1.4rem;
            font-weight: bold;
            padding: 0.5em;
        }

    .InfoWindow > div:last-child {
        padding: 0.5em 1.5em;
        max-height: 80vh;
        overflow-y: auto;
    }

    .InfoWindow hr {
        width: 100%;
    }

    .InfoWindow .more {
        color: gray;
        text-decoration: none;
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 10px;
    }

    /*--------------------------------------*/
    .InfoWindow .guide {
        width: 25vw;
    }

        .InfoWindow .guide > div:first-child {
            color: #808080;
            margin: 1% 0 3% 0;
            font-size: 1em;
        }

        .InfoWindow .guide .PG_Body {
            border: 0;
            animation: ngdialog-flyin .5s;
            border-radius: 10px;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

#guidelist {
    padding: 0;
    margin: 0;
    list-style: none;
}

.guide-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75em 1em;
    border-bottom: 1px solid #eee;
}

.favoriteInfo {
    max-width: 30vw;
}

    .favoriteInfo label {
        color: #4689e7;
        font-size: 1.2em;
    }

    .favoriteInfo ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .favoriteInfo img {
        padding-left: 0.5em;
        width: 1.5em;
    }

    .favoriteInfo .oplink {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 1em;
    }

        .favoriteInfo .oplink img {
            width: 2em;
            cursor: pointer;
        }

.carNumInfo {
    font-size: 1.2em;
    max-width: 28vw;
}

    .carNumInfo div:first-child {
        margin: 0;
    }

    .carNumInfo div {
        margin: 0.5em 0
    }

    .carNumInfo .carType input {
        margin-right: 0.5em;
    }

    .carNumInfo .carNum {
        text-align: center;
    }

        .carNumInfo .carNum input {
            margin-right: 0.5em;
            width: 43%;
            text-align: center;
        }

            .carNumInfo .carNum input:last-child {
                margin-left: 0.5em;
                margin-right: 0;
            }

    .carNumInfo h4 {
        font-weight: bold;
        color: #0071bc;
    }

    .carNumInfo .tipInfo {
        font-size: 0.9em;
        font-weight: bold;
    }

    .carNumInfo .carCreate {
        display: flex;
        justify-content: center;
    }

    .carNumInfo button {
        display: flex;
        align-items: center;
        gap: 0.25em;
        border: 0;
        background-color: #0071bc;
        color: #fff;
        padding: 0.5em 2em;
        border-radius: 0.5em;
        font-size: 1em;
    }
        .carNumInfo button:disabled {
            background-color: #ccc;
            color: #666;
            cursor: not-allowed;
            opacity: 0.8;
        }

        .carNumInfo button img {
            width: 1.25em;
            height: 1.25em;
            object-fit: contain;
        }

    .carNumInfo .carInfo label {
        color: #0071bc;
        padding: 0;
    }

    .carNumInfo .carInfo .guide-item {
        padding: 0;
    }

    .carNumInfo .carInfo .oplink img {
        cursor: pointer;
    }

.bill p {
    font-weight: bold;
    color: #000;
    font-size: 1em;
    margin-bottom: 1em;
}

.bill ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size:1.1em;
}
    .bill ul li div{
        margin:0.25em 0;
    }
    .bill ul li div:first-child {
        color: #0071bc;
    }


#DeleteCheck {
    margin-top: 5em;
    text-align: center;
}

    #DeleteCheck div > div {
        padding: 1em;
    }

    #DeleteCheck div > button {
        padding: 0.25em 1em;
        border-radius: 10px;
        align-items: center;
        color: #FFF;
        border: 0;
        background-color: #808080;
        margin: 0 1em;
    }

        #DeleteCheck div > button:last-child {
            background-color: #0071bc;
        }

.info-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.parkname {
    font-size: 1.2em;
    color: #808080;
    font-weight: bold;
    margin-bottom: 0.3em;
    text-align: left;
}

.parkcontent {
    display: flex;
    align-items: center;
    font-size: 1em;
    color: #808080;
    gap: 0.25em;
}

.parkcolor {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.remainderweight {
    font-weight: bold;
}

.remindernum {
    font-size: 1.6em;
}

.maplink {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
}

    .maplink a {
        text-decoration: none;
        color: black;
    }

    .maplink img {
        width: 2.25em;
        height: auto;
        margin-bottom: 0.2em;
    }

.BtnClick {
    text-align: center;
}

    .BtnClick a {
        text-decoration: none;
        color: #fff !important;
        padding: 0.5em 2em;
        background: #0071bc;
        border-radius: 10px;
        cursor: pointer;
    }
/*--------------------------------------*/
.InfoWindow .pay div {
    margin: 1em 0;
    font-size: 1.1em;
}

.InfoWindow .pay p {
    margin: 0;
}

.InfoWindow .pay a {
    color: #808080;
    font-size: 0.85em;
    margin: 0;
}

.InfoWindow .pay img {
    width: 19%;
    padding: 0.2em;
    float: left;
}


/*--------------------------------------*/
.InfoWindow .news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.InfoWindow .news-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 100%;
}

    .InfoWindow .news-item:last-child {
        border-bottom: none;
    }

.InfoWindow .news-text-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 25vw;
}

.InfoWindow .news-text {
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    width: 25vw; /* 確保標題最大寬度 */
}

.InfoWindow .newsDetail {
    width: 32vw;
    font-size: 1.15rem;
    text-align: justify;
    margin-bottom: 1em;
}

    .InfoWindow .newsDetail .newsContent {
        white-space: pre-wrap; /*這樣會保留換行符號並自動換行*/
        word-wrap: break-word; /*確保長單詞也會換行*/
    }

.InfoWindow .remind {
    height: 10vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.4em;
}
/*--------------------------------------*/
.basicColor {
    width: 1em;
    height: 1.2em;
    float: left;
    /*margin: 3% 1.5% 0 0;*/
}

.parkcolor_g {
    background-color: #008e82;
}

.parkcolor_y {
    background-color: #dc801e;
}

.parkcolor_r {
    background-color: #c68f94;
}

.parkcolor_b {
    background-color: #FFF;
    border-color: #0071bc;
    border-width: 1px;
    border-style: solid;
}

.roadcolor_g {
    background-color: #1E7856;
}

.roadcolor_y {
    background-color: #E5892E;
}

.roadcolor_r {
    background-color: #f25562;
}

@media (max-width: 1200px) {

    .InfoWindow .news-text-wrapper, .InfoWindow .news-text {
        width: 45vw; /* 確保標題最大寬度 */
    }


    .InfoWindow .guide, .InfoWindow .newsDetail {
        width: 52vw;
    }

    .favoriteInfo {
        max-width: 60vw;
    }

    .carNumInfo {
        max-width: 60vw;
    }
    /*.carNumInfo .carNum input {            
            width: 9em;
        }*/
}

@media (max-width: 768px) {
    .InfoWindow .news-text-wrapper, .InfoWindow .news-text {
        width: 60vw; /* 確保標題最大寬度 */
    }

    .InfoWindow .guide, .InfoWindow .newsDetail, .InfoWindow .favoriteInfo {
        width: 90vw;
    }

    .InfoWindow hr {
        display: none;
    }

    .favoriteInfo {
        max-width: 90vw;
    }

    .carNumInfo {
        max-width: 90vw;
    }
    /*   .carNumInfo .carNum input {
            width: 7.5em;
        }*/
}