#weatherApp .active:first-child {
    background: #F8F9FB;
}

/*#weatherApp.weatherApp-newyear-active {
    background: #f8f9fb42;
}*/

    #weatherApp.active #mapOverlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 2;
    }

#weatherApp .nav-link {
    padding: 6px 24px 2px 20px !important;
}

.wearther-style {
    display: flex;
    align-items: center;
}

    .wearther-style p {
        font-size: 16px;
    }

    .wearther-style .wearther-icon {
        width: 40px;
        margin-right: 12px;
    }

        .wearther-style .wearther-icon img {
            width: 100%;
        }

    .wearther-style p {
        margin-bottom: 0;
    }

        .wearther-style p:nth-child(1) {
            color: #212529
        }

        .wearther-style p:nth-child(2) {
            color: #6C757D
        }

#mapWrapper {
    display: none;
    position: absolute;
    right: 2%;
    top: 98%;
    background: #ffffff;
    box-shadow: rgb(33 37 41 / 30%) 0px 4px 12px;
    width: 40%;
    z-index: 5;
}

    #mapWrapper.open {
        display: block;
        overflow: hidden;
    }

    #mapWrapper.webview {
        box-shadow: none !important;
    }

@media (min-width: 768px) {
    #mapWrapper.webview {
        width: 110%;
    }
}

#grayBlock {
    position: absolute;
    background: #F8F9FB;
    display: inline-block;
    padding: 14px 28px;
    margin-left: 24px;
    margin-top: 24px;
    width: 240px;
    z-index: 6;
}

    #grayBlock .today {
        color: #6C757D;
        font-size: 17px;
        margin-bottom: 0;
    }

    #grayBlock .TWT {
        color: #212529;
        font-size: 20px;
        margin-bottom: 0;
    }

#mapContent {
    margin-top: 50px;
    margin-bottom: 40px;
}

    #mapContent svg {
        transform: translateX(19%);
    }

.selected-color {
    fill: #1458e2 !important;
    stroke: #1458e2 !important;
}

#mapContent img {
    display: none;
    width: 64%;
    margin-left: 18%;
}

.closeBtn {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 24px;
    top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(33,37,41,.5);
    backdrop-filter: blur( 1px );
    -webkit-backdrop-filter: blur( 1px );
    z-index: 1000;
    cursor: pointer;
}

    .closeBtn i {
        color: #ffffff;
    }

.weatherBlock {
    position: absolute;
    box-shadow: rgb(15 97 253 / 20%) 0 3px 6px;
    background: #ffffff;
    padding: 14px;
    opacity: 0;
    z-index: -5;
}

    .weatherBlock.active {
        opacity: 1;
        z-index: 3;
    }

.weatherTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-content: space-between;
}

    .weatherTitle img {
        width: 26px;
        display: block;
    }

.locationName {
    font-size: 14px;
    color: #6C757D;
    margin-bottom: 0;
}

.weatherBody {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .weatherBody p {
        font-size: 16px;
    }

p.temperature {
    font-size: 32px;
    margin-bottom: 0;
}

.temperatureRange {
    margin-right: 14px;
}

p.temperatureRange {
    font-weight: bold;
    font-size: 32px;
}

.rainfallPercentage p {
    font-size: 16px;
    color: #212529;
    margin-bottom: 0;
    line-height: 28px;
}

.rainfallPercentage {
    display: flex;
    align-items: center;
}

    .rainfallPercentage img {
        width: 16px;
        margin-right: 2px;
        display: block;
    }

.weatherIcon {
    position: absolute;
    background: #ffffff;
    box-shadow: rgb(15 97 253 / 20%) 0px 4px 12px;
    border-radius: 100%;
    padding: 6px 7px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
}

    /* .weatherIcon.hide {
        opacity: 0;
    } */
    .weatherIcon.active {
        border: 2px solid #1458E2;
        box-shadow: none;
    }

.weatherTitle img {
    width: 26px;
}

.weatherIcon img {
    width: 24.68px;
    display: block;
    width: 100%;
}
/*---City-County--------------------*/
.weatherIcon.Chiayi_County {
    left: 27%;
    bottom: 36%;
}

.weatherIcon.New_Taipei_City {
    top: 11%;
    left: 57%;
}

.weatherIcon.Chiayi_City {
    top: 57%;
    left: 50%;
}

.weatherIcon.Hsinchu_County {
    right: 35%;
    top: 31%;
}

.weatherIcon.Hsinchu_City {
    left: 44%;
    top: 23%;
}

.weatherIcon.Taipei_City {
    top: 10%;
    right: 27.7%;
}

.weatherIcon.Tainan_City {
    left: 26%;
    bottom: 26%;
}

.weatherIcon.Yilan_County {
    top: 30%;
    right: 17%;
}

.weatherIcon.Miaoli_County {
    top: 29.5%;
    left: 39.5%;
}

.weatherIcon.Yunlin_County {
    bottom: 43.5%;
    left: 29%;
}

.weatherIcon.Hualien_County {
    right: 23%;
    top: 50%;
}


.weatherIcon.Taichung_City {
    top: 36%;
    left: 35.5%;
}

.weatherIcon.Taitung_County {
    bottom: 17%;
    right: 37%;
}

.weatherIcon.Taoyuan_City {
    top: 16%;
    left: 50%;
}


.weatherIcon.Nantou_County {
    top: 47%;
    left: 50%;
}

.weatherIcon.Kaohsiung_City {
    bottom: 18%;
    left: 30%;
}

.weatherIcon.Kinmen_Islands {
    top: 36%;
    left: 10%;
}

.weatherIcon.Pingtung_County {
    bottom: 6%;
    left: 39%;
}


.weatherIcon.Keelung_City {
    top: 15%;
    right: 20%;
}

.weatherIcon.Penghu {
    bottom: 45%;
    left: 13%;
}

.weatherIcon.Changhua_County {
    top: 42.5%;
    left: 32%;
}


.weatherIcon.Lienchiang_County {
    top: 23%;
    left: 13%;
}

@media (max-width: 1399px) {
    #weatherApp .nav-link {
        padding: 6px 4px 2px 4px !important;
    }
}

@media (max-width: 1199.98px) {
    #mapWrapper {
        width: 60%;
    }

    #weatherApp .nav-link {
        padding: 6px 4px 2px 4px !important;
    }
}

@media (max-width: 991.98px) {
    #mapWrapper {
        width: 80%;
    }
}







/*-----@max-width: 575.98px-------------------------------------------------------------------*/

@media (max-width: 576px) {
    #mapWrapper {
        width: 90%;
        right: 5%;
    }

    #weatherApp .active:first-child {
        background: #f8f9fb42;
    }

    #weatherApp .nav-link {
        /*padding: 12px 4px 2px 4px !important;*/
    }

    .wearther-style .wearther-icon {
        width: 28px;
        margin-right: 8px;
    }

    .wearther-style .wearther-icon img {
        vertical-align: middle;
    }

    .wearther-style p:nth-child(1) {
        font-size: 13px;
        line-height: 17px;
        color: #212529 !important;
    }

    .wearther-style p:nth-child(2) {
        font-size: 13px;
        line-height: 17px;
        color: #6C757D !important;
    }

    #weatherApp.default .wearther-style p:nth-child(1) {
        color: #FFF !important;
    }

    #weatherApp.default .wearther-style p:nth-child(2) {
        color: #FFF !important;
    }

    #mapContent svg {
        transform: translateX(8%);
        width: 140%;
    }

    #mapContent {
        margin-top: 66px;
    }

    .closeBtn {
        position: absolute;
        right: 14px;
        top: 14px;
    }

    #grayBlock {
        width: 180px;
        padding: 14px 14px;
        margin-left: 14px;
        margin-top: 14px;
    }

        #grayBlock .today {
            font-size: 13px;
        }

        #grayBlock .TWT {
            font-size: 15px;
        }

    .weatherTitle {
        margin-bottom: 4px;
    }

        .weatherTitle img {
            width: 22px;
        }

    .weatherBody p {
        font-size: 15px;
        line-height: 18px;
    }

    p.temperature {
        font-size: 20px;
    }

    .rainfallPercentage img {
        width: 14px;
    }

    .locationName {
        font-size: 13px;
    }

    .weatherIcon {
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    .weatherBlock {
        padding: 8px;
    }
    /*---City-County-------------------------*/

    .weatherIcon.Chiayi_County {
        left: 24%;
        bottom: 36%;
    }

    .weatherIcon.New_Taipei_City {
        top: 14.3%;
        left: 69%;
    }

    .weatherIcon.Chiayi_City {
        top: 58%;
        left: 52%;
    }

    .weatherIcon.Hsinchu_County {
        right: 24%;
        top: 35%;
    }

    .weatherIcon.Hsinchu_City {
        left: 50%;
        top: 24%;
    }

    .weatherIcon.Taipei_City {
        top: 14%;
        right: 11.7%;
    }

    .weatherIcon.Tainan_City {
        left: 24%;
        bottom: 26%;
    }

    .weatherIcon.Yilan_County {
        top: 29.5%;
        right: 2%;
    }

    .weatherIcon.Miaoli_County {
        top: 29.5%;
        left: 44.5%;
    }

    .weatherIcon.Yunlin_County {
        bottom: 42.5%;
        left: 26%;
    }

    .weatherIcon.Hualien_County {
        right: 7%;
        top: 50%;
    }

    .weatherIcon.Taichung_City {
        top: 36%;
        left: 38.5%;
    }

    .weatherIcon.Taitung_County {
        bottom: 17%;
        right: 26%;
    }

    .weatherIcon.Taoyuan_City {
        top: 18%;
        left: 58%;
    }

    .weatherIcon.Nantou_County {
        top: 49%;
        left: 57%;
    }

    .weatherIcon.Kaohsiung_City {
        bottom: 18%;
        left: 28%;
    }

    .weatherIcon.Kinmen_Islands {
        top: 40%;
        left: 3%;
    }

    .weatherIcon.Pingtung_County {
        bottom: 6%;
        left: 39%;
    }

    .weatherIcon.Keelung_City {
        top: 19%;
        right: 2%;
    }

    .weatherIcon.Penghu {
        bottom: 43%;
        left: 3%;
    }

    .weatherIcon.Changhua_County {
        top: 43.5%;
        left: 31%;
    }

    .weatherIcon.Lienchiang_County {
        top: 24.5%;
        left: 9%;
    }
}

@media (max-width: 414px) {
}

@media (max-width: 375px) {
    #mapContent svg {
        transform: translateX(8%);
    }

    .weatherIcon {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 320px) {
    #mapContent svg {
        width: 410px;
    }

    #grayBlock {
        padding: 10px 10px;
        width: 170px;
    }
}

@media (max-width: 280px) {
    #mapContent svg {
        width: 350px;
    }

    .weatherIcon {
        width: 22px;
        height: 22px;
    }
        /*---City-County-------------------------*/

        .weatherIcon.New_Taipei_City {
            top: 18.3%;
        }

        .weatherIcon.Taipei_City {
            top: 20%;
        }

        .weatherIcon.Yilan_County {
            top: 32.5%;
        }

        .weatherIcon.Miaoli_County {
            top: 30.5%;
        }

        .weatherIcon.Taoyuan_City {
            top: 20%;
            left: 59%;
        }

        .weatherIcon.Keelung_City {
            top: 24%;
        }
}