.maxTemp>a, .positiveTemp>a, .msl>a, .gust>a, .hkhi>a, .grasstemp>a {
    color: #FFC52F!important;
    /* text-shadow: -1px -1px 4px #FFF, 2px 2px 4px #FFF, 3px 3px 9px #FFF!important; */
}

#se1_rh{
    display: none;
}

.minTemp>a {
    color: #02D4E2!important;
    /* text-shadow: -1px -1px 4px #FFF, 2px 2px 4px #FFF, 3px 3px 9px #FFF!important; */
}


#regionTimeChi {
/*  display: none;*/
}

#stnFullName{
  color: #FFF;
}





#regional_map_container .negativeTemp a{
    color: #00ECFF!important
}

.regional_map_container_wrapper{
background: rgb(19, 51, 124); 
padding: 0 15%;
}
    
#regional_map_container, #regional_map_container2 {
    z-index: 1;
    width: 100%;
    height: 370.565px;
    position: relative;
    color: black;
    font-size: 16px;
    font-weight: normal;
    background: url(../img/hko_map_terrain_v2.png) no-repeat;
    overflow: hidden;
}


#regional_map_container div {
  position: absolute;
    color: #F4F909;
    text-shadow: -1px -1px 4px #000, 2px 2px 4px #000, 3px 3px 9px #3c3c3c;
}


#regional_map_container div a {
    color: #F4F909;
}





#regional_map_container .temp, #regional_map_container .rh, #regional_map_container .maxTemp, #regional_map_container .minTemp, #regional_map_container .rf, #regional_map_container .temprange, #regional_map_container2 .temp, #regional_map_container2 .rh, #regional_map_container2 .maxTemp, #regional_map_container2 .minTemp, #regional_map_container2 .rf, #regional_map_container .gust, #regional_map_container .msl, #regional_map_container .hkhi, #regional_map_container .grasstemp {
    background-color: rgba(0, 0, 0, 0.25);
    padding: 2px 5px 1px 4px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 14px;
}






.windData {
    height: 40px;
    width: 40px;
    background-size: contain;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    text-shadow: none!important;
    color: black!important;
    line-height: 40px;
}

#regional_map_container .windData a{
    color: #000;
}






#wgl {left: 439px; top: 325px; cursor:pointer; text-align:center;}
#sty {left: 376px; top: 307px; cursor:pointer; text-align:center}
/* hks needed to be modified */
#hks {left: 337px; top: 279px; cursor:pointer; text-align:center;}
#skw {left: 392px; top: 247px; cursor:pointer; text-align:center;}
#skw_rh {left: 392px; top: 247px; cursor:pointer; text-align:center;}

#hko {left: 346px; top: 223px; cursor:pointer; text-align:center;}
#ty1 {left: 278px; top: 185px; cursor:pointer; text-align:center;}
/* jkb needed to be modified */
#jkb {left: 421px; top: 226px; cursor:pointer; text-align:center;} 
#tun { left:171px; top:144px; cursor:pointer;  text-align:center;}
#wlp { left:205px; top:77px; cursor:pointer;  text-align:center;}
#sek {left: 264px; top: 104px; cursor:pointer;  text-align:center;}
#hka { left:124px; top:217px; cursor:pointer;  text-align:center;}
#clk { left:124px; top:217px; cursor:pointer;  text-align:center;}
#pen { left:228px; top:235px; cursor:pointer;  text-align:center;}
#cch {left: 220px; top: 305px; cursor:pointer;  text-align:center;}
#tkl {left: 338px; top: 20px; cursor:pointer;  text-align:center;}
#ssh {left: 300px; top:43px; cursor:pointer;  text-align:center;}
#tls {left: 300px; top:62px; cursor:pointer;  text-align:center;}
#tls_rh {left: 300px; top:62px; cursor:pointer;  text-align:center;}
#tp {left: 337px; top: 84px; cursor:pointer; text-align:center;}

#tpo {left: 337px; top: 84px; cursor:pointer; text-align:center;}

/*Newly added at 1 Apr*/
#yct {left: 337px; top: 84px; cursor:pointer; text-align:center;}

#sha {left: 374px; top: 132px; cursor:pointer; text-align:center;}
#skg {left: 422px; top: 158px; cursor:pointer; text-align:center;}
#wts {left: 369px; top: 189px; cursor:pointer; text-align:center;}
#ksc {left: 468px; top: 174px; cursor:pointer; text-align:center;}
#tw {left: 295px; top: 151px; cursor:pointer; text-align:center;}
#tyw {left: 468px; top: 134px; cursor:pointer; text-align:center;}
#tyw_rh {left: 468px; top: 134px; cursor:pointer; text-align:center;}
#ngp {left: 112px; top: 261px; cursor:pointer; text-align:center;}
#lfs { left:194px; top:62px; cursor:pointer; text-align:center;}
#kp {left: 334px; top: 213px; cursor:pointer; text-align:center;}
#ssp  {left: 312px; top: 198px; cursor:pointer; text-align:center;}
#cen {left: 324px; top: 243px; cursor:pointer; text-align:center;}
#swh {left: 389px; top: 243px; cursor:pointer; text-align:center;}
#yl { left:223px; top:94px; cursor:pointer; text-align:center;}
/* hkp needed to be modified */
#hkp {left: 336px; top: 244px; cursor:pointer; text-align:center;}
#hkp_rh {left: 336px; top: 244px; cursor:pointer; text-align:center;}
#ylp { left:222px; top:104px; cursor:pointer; text-align:center;}
#ktg {left:386px; top:216px; cursor:pointer; text-align:center;}
#klt {left:355px; top:205px; cursor:pointer; text-align:center;}
#klt_rh {left:355px; top:205px; cursor:pointer; text-align:center;}
#vp1 {left:313px; top:261px; cursor:pointer; text-align:center;}
#hpv {left:358px; top:263px; cursor:pointer; text-align:center;}
#twn {left:280px; top:137px; cursor:pointer; text-align:center;}
#tms {left:303px; top:118px; cursor:pointer; text-align:center;}
#tc {left:386px; top:166px; cursor:pointer; text-align:center;}
#plc {left: 385px; top: 58px; cursor:pointer;}
#cwb {left: 447px; top: 250px; cursor:pointer;}
#cwb_rh {left: 447px; top: 250px; cursor:pointer;}

#tpk_wind {left: 356px; top: 94px; cursor:pointer;}
#lfs_wind { left:194px; top:62px; cursor:pointer;}
#wlp_wind { left:219px; top:78px; cursor:pointer;}
#tun_wind { left:171px; top:144px; cursor:pointer;}
#clk_wind { left:124px; top:217px; cursor:pointer;}
#hka_wind { left:117px; top:202px; cursor:pointer;}
#hka_wind.windData{top:190px}
#pen_wind { left:228px; top:235px; cursor:pointer;}
#ccb_wind {left: 220px; top: 305px; cursor:pointer;}
#hss_wind {left: 377px; top: 307px; cursor:pointer;}
#cch_wind {left: 210px; top: 325px; cursor:pointer;}

#tkl_wind {left: 338px; top: 13px; cursor:pointer;}
#sek_wind {left: 265px; top: 93px; cursor:pointer;}
#sha_wind {left: 374px; top: 132px; cursor:pointer;}
#wgl_wind {left: 436px; top: 314px; cursor:pointer;}
#hks_wind {left: 338px; top: 275px; cursor:pointer;}
#jkb_wind {left: 418px; top: 213px; cursor:pointer;}
#skg_wind {left: 422px; top: 158px; cursor:pointer;}
#ksc_wind {left: 468px; top: 174px; cursor:pointer;}
#ty1_wind {left: 283px; top: 187px; cursor:pointer;}
#ngp_wind {left: 112px; top: 261px; cursor:pointer;}
#sty_wind {left: 376px; top: 309px; cursor:pointer;}
#tw_wind {left: 295px; top: 151px; cursor:pointer;}
#sf_wind {left: 334px; top: 222px; cursor:pointer;}
#kp_wind {left: 334px; top: 206px; cursor:pointer;}
#se_wind   {left: 373px; top: 212px; cursor:pointer;}
#tap_wind {left: 496px; top: 56px; cursor:pointer;}
#gi_wind {left: 290px; top: 230px; cursor:pointer;}
#plc_wind {left: 385px; top: 58px; cursor:pointer;}
#tc_wind {left: 376px; top: 175px; cursor:pointer;}
#sc_wind.gust {left: 88px; top: 180px; cursor:pointer;}
#sc_wind.windData{left: 88px; top: 165px; cursor:pointer; }
#cp1_wind {left: 335px; top: 240px; cursor:pointer;}
#lam_wind {left: 291px; top: 293px; cursor:pointer;}
#np1_wind {left: 386px; top: 242px; cursor:pointer;}  

#hka_rh { left:133px; top:221px; cursor:pointer;  text-align:center;}
#clk_rh { left:133px; top:221px; cursor:pointer;  text-align:center;}
#cch_rh {left: 230px; top: 308px; cursor:pointer;  text-align:center;}
#pen_rh { left:237px; top:235px; cursor:pointer;  text-align:center;}
#wgl_rh {left: 446px; top: 325px; cursor:pointer; text-align:center;}
#hks_rh {left: 346px; top: 274px; cursor:pointer; text-align:center;}
#hko_rh {left: 349px; top: 223px; cursor:pointer; text-align:center;}
#jkb_rh {left: 422px; top: 216px; cursor:pointer; text-align:center;}
#tun_rh { left:182px; top:144px; cursor:pointer;  text-align:center;}
#ty1_rh {left: 288px; top: 185px; cursor:pointer; text-align:center;}
#tkl_rh {left: 344px; top: 20px; cursor:pointer;  text-align:center;}
#sek_rh {left: 271px; top: 104px; cursor:pointer;  text-align:center;}
#skg_rh {left: 430px; top: 158px; cursor:pointer; text-align:center;}
#ksc_rh {left: 474px; top: 174px; cursor:pointer; text-align:center;}
#tw_rh {left: 302px; top: 151px; cursor:pointer; text-align:center;}
#tp_rh {left: 348px; top: 84px; cursor:pointer; text-align:center;}

#tpo_rh {left: 348px; top: 84px; cursor:pointer; text-align:center;}
#yct_rh {left: 348px; top: 84px; cursor:pointer; text-align:center;}

#sha_rh {left: 374px; top: 132px; cursor:pointer; text-align:center;}
#ssh_rh {left: 300px; top:43px; cursor:pointer;  text-align:center;}
#wlp_rh { left:205px; top:77px; cursor:pointer;  text-align:center;}
#lfs_rh { left:194px; top:62px; cursor:pointer; text-align:center;}
#twn_rh {left:280px; top:137px; cursor:pointer; text-align:center;}




#hka_msl {left:124px; top:217px; cursor:pointer; text-align:center;}
#cch_msl {left:220px; top:305px; cursor:pointer; text-align:center;}
#hko_msl {left:346px; top:223px; cursor:pointer; text-align:center;}
#lfs_msl {left:194px; top:62px; cursor:pointer; text-align:center;}
#pen_msl {left:228px; top:235px; cursor:pointer; text-align:center;}
#sha_msl {left:347px; top:132px; cursor:pointer; text-align:center;}
#sek_msl {left:265px; top:93px; cursor:pointer; text-align:center;}
#ssh_msl {left: 300px; top:43px; cursor:pointer; text-align:center;}
#tkl_msl {left:338px; top:13px; cursor:pointer; text-align:center;}

#tpo_msl {left:337px; top:84px; cursor:pointer; text-align:center;}
#yct_msl {left:337px; top:84px; cursor:pointer; text-align:center;}

#wgl_msl {left:436px; top:314px; cursor:pointer; text-align:center;}
#wlp_msl {left:205px; top:77px; cursor:pointer; text-align:center;}


#br_hkhi {left:280px; top:43px; cursor:pointer; text-align:center;}
#kp_hkhi {left:346px; top:213px; cursor:pointer; text-align:center;}



#kp_grasstemp{left:334px; top:213px; cursor:pointer; text-align:center;}
#tkl_grasstemp{left:338px; top:13px; cursor:pointer; text-align:center;}
#tms_grasstemp {left:303px; top:118px; cursor:pointer; text-align:center;}


#HKOvis{left:340px; top:192px; cursor:auto; text-align:center;}
#CLKvis{left:90px; top:190px; cursor:auto; text-align:center;}
#CENvis{left:286px; top:259px; cursor:auto; text-align:center;}
#WGLvis{left:485px; top:315px; cursor:auto; text-align:center;}
#SWHvis{left:430px; top:254px; cursor:auto; text-align:center;}

#regional_map_container .redDotCLKvis{margin-top: 226px !important; margin-left: 140px !important; }
#regional_map_container .redDotSWHvis{margin-top: 244px !important; margin-left: 336px !important;}
#regional_map_container .redDotHKOvis{margin-top: 235.5px !important; margin-left: 355px !important;}
#regional_map_container .redDotCENvis{margin-top: 250.5px !important; margin-left: 404px !important;}
#regional_map_container .redDotWGLvis{margin-top: 343px !important; margin-left: 468px !important;}

#regional_map_container .swhline{width: 29.5304px !important; transform: rotate(-144deg) !important; top: 262.494px !important; left: 405.841px !important;}
#regional_map_container .hkoline{width: 34.0136px !important; transform: rotate(106.9744deg) !important; top: 220.57px !important; left: 346.045px !important; }
#regional_map_container .cenline{width: 37.306px !important; transform: rotate(148deg) !important; top: 257.747px !important; left: 301.521px !important; }
#regional_map_container .wglline{width: 19.7567px !important; transform: rotate(133.264deg) !important; top: 336.016px !important; left: 469.978px !important; }
#regional_map_container .clkline{width: 40.6117px !important; transform: rotate(-144.246deg) !important; top: 216.811px !important; left: 105.38px !important; }

@media(max-width:3400px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
             height: 350.565px;
        }
}

@media(max-width:3320px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
          height: 343.565px
        }
}

@media(max-width:3220px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
          height: 327.565px;
        }
}

@media(max-width:3100px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
          height: 316.565px;
        }
}

@media(max-width:2910px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
          height: 301.565px;
        }
}


@media(max-width:2880px){
        .regional_map_container_wrapper{
        padding: 0 10% ;
        }

        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
          height: 335.565px;
        }
}


@media(max-width:2830px){
      #wid-regional-map-container .one_hour_rainfall #regional_map_container{
          height: 320.565px;
        }
}

@media(max-width:2730px){
      #wid-regional-map-container .one_hour_rainfall #regional_map_container{
         height: 310.565px;
        }
}


@media(max-width:2580px){
        .regional_map_container_wrapper{
        padding: 0 5% ;
        }

        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
         height: 339.565px;
        }
}

@media(max-width:2480px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
            height: 317.565px;
        }
}


@media(max-width:2380px){
        .regional_map_container_wrapper{
        padding: 0% ;
        }

        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
            height: 342.565px;
        }
}


@media(max-width:2250px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
            height: 327.565px;
        }
}


@media(max-width:2200px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
            height: 306.565px;
        }
}

@media(max-width:2000px){
        #wid-regional-map-container .one_hour_rainfall #regional_map_container{
            height: 292.565px;
        }
}


@media(max-width:1980px){

#regional_map_container, #regional_map_container2 {
background-position: -80px 0;
}

 .regional_map_container_wrapper .one_hour_rainfall{
        height:263px ;
    }



#wgl {left: calc( 439px - 80px) ; }
#sty {left: calc( 376px - 80px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 80px) ; }
#skw {left: calc( 392px - 80px) ; }
#skw_rh {left: calc( 392px - 80px) ; }

#hko {left: calc( 346px - 80px) ; }
#ty1 {left: calc( 278px - 80px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 80px) ; } 
#tun {left: calc(171px - 80px) ; }
#wlp {left: calc(205px - 80px) ; }
#sek {left: calc( 264px - 80px) ; }
#hka {left: calc(124px - 80px) ; }
#clk {left: calc(124px - 80px) ; }
#pen {left: calc(228px - 80px) ; }
#cch {left: calc( 220px - 80px) ; }
#tkl {left: calc( 338px - 80px) ; }
#ssh {left: calc( 300px - 80px) ; }
#tls {left: calc( 300px - 80px) ; }
#tls_rh {left: calc( 300px - 80px) ; }
#tp {left: calc( 337px - 80px) ; }

#tpo {left: calc( 337px - 80px) ; }
#yct {left: calc( 337px - 80px) ; }

#sha {left: calc( 374px - 80px) ; }
#skg {left: calc( 422px - 80px) ; }
#wts {left: calc( 369px - 80px) ; }
#ksc {left: calc( 468px - 80px) ; }
#tw {left: calc( 295px - 80px) ; }
#tyw {left: calc( 468px - 80px) ; }
#tyw_rh {left: calc( 468px - 80px) ; }

#ngp {left: calc( 112px - 80px) ; }
#lfs {left: calc(194px - 80px) ; }
#kp {left: calc( 334px - 80px) ; }
#ssp  {left: calc( 312px - 80px) ; }
#cen {left: calc( 324px - 80px) ; }
#swh {left: calc( 389px - 80px) ; }
#yl {left: calc(223px - 80px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 80px) ; }
#hkp_rh {left: calc( 336px - 80px) ; }

#ylp {left: calc(222px - 80px) ; }
#ktg {left: calc(386px - 80px) ; }
#klt {left: calc(355px - 80px) ; }
#klt_rh {left: calc(355px - 80px) ; }
#vp1 {left: calc(313px - 80px) ; }
#hpv {left: calc(358px - 80px) ; }
#twn {left: calc(280px - 80px) ; }
#tms {left: calc(303px - 80px) ; }
#tc {left: calc(386px - 80px) ; }
#plc {left: calc( 385px - 80px) ; }
#cwb {left: calc( 447px - 80px) ; }
#cwb_rh {left: calc( 447px - 80px) ; }

#tpk_wind {left: calc(356px - 80px) ; }
#lfs_wind {left: calc(194px - 80px) ; }

#wlp_wind {left: calc(219px - 80px) ; }

#tun_wind {left: calc(171px - 80px) ; }
#clk_wind {left: calc(124px - 80px) ; }
#hka_wind {left: calc(120px - 80px) ; }
#pen_wind {left: calc(228px - 80px) ; }
#ccb_wind {left: calc(220px - 80px) ;}
#hss_wind {left: calc(220px - -69px); }
#cch_wind {left: calc(210px - 80px) ;}

#tkl_wind {left: calc( 338px - 80px) ; }
#sek_wind {left: calc( 265px - 80px) ; }
#sha_wind {left: calc( 374px - 80px) ; }
#wgl_wind {left: calc( 436px - 80px) ; }
#hks_wind {left: calc( 338px - 80px) ; }
#jkb_wind {left: calc( 418px - 80px) ; }
#skg_wind {left: calc( 422px - 80px) ; }
#ksc_wind {left: calc( 468px - 80px) ; }
#ty1_wind {left: calc( 283px - 80px) ; }
#ngp_wind {left: calc( 112px - 80px) ; }
#sty_wind {left: calc( 376px - 80px) ; }
#tw_wind {left: calc( 295px - 80px) ; }
#sf_wind {left: calc( 334px - 80px) ; }
#kp_wind {left: calc( 334px - 80px) ; }


#se_wind   {left: calc( 373px - 80px) ; } 
#tap_wind {left: calc( 496px - 80px) ; }
#gi_wind {left: calc( 290px - 80px) ; }
#plc_wind {left: calc( 385px - 80px) ; } 
#tc_wind {left: calc( 376px - 80px) ; }
#sc_wind.gust {left: calc( 103px - 80px) ; }
#sc_wind.windData {left: calc( 103px - 80px) ; }
#cp1_wind {left: calc( 335px - 95px) ; }
#lam_wind {left: calc( 291px - 80px) ; }
#np1_wind {left: calc( 386px - 80px) ; }

#hka_rh {left: calc(133px - 80px) ; }
#clk_rh {left: calc(133px - 80px) ; }
#cch_rh {left: calc( 230px - 80px) ; }
#pen_rh {left: calc(237px - 80px) ; }
#wgl_rh {left: calc( 446px - 80px) ; }
#hks_rh {left: calc( 346px - 80px) ; }
#hko_rh {left: calc( 349px - 80px) ; }
#jkb_rh {left: calc( 422px - 80px) ; }
#tun_rh {left: calc(182px - 80px) ; }
#ty1_rh {left: calc( 288px - 80px) ; }
#tkl_rh {left: calc( 344px - 80px) ; }
#sek_rh {left: calc( 271px - 80px) ; }
#skg_rh {left: calc( 430px - 80px) ; }
#ksc_rh {left: calc( 474px - 80px) ; }
#tw_rh {left: calc( 302px - 80px) ; }
#tp_rh {left: calc( 348px - 80px) ; }

#tpo_rh {left: calc( 348px - 80px) ; }
#yct_rh {left: calc( 348px - 80px) ; }

#sha_rh {left: calc( 374px - 80px) ; }
#ssh_rh {left: calc( 300px - 80px) ; }
#wlp_rh {left: calc(205px - 80px) ; }
#lfs_rh {left: calc(194px - 80px) ; }
#twn_rh {left: calc(280px - 80px) ; }


#hka_msl {left: calc(124px - 80px) ; }
#cch_msl {left: calc(220px - 80px) ; }
#hko_msl {left: calc(346px - 80px) ; }
#lfs_msl {left: calc(194px - 80px) ; }
#pen_msl {left: calc(228px - 80px) ; }
#sha_msl {left: calc(347px - 80px) ; }
#sek_msl {left: calc(265px - 80px) ; }
#ssh_msl {left: calc(300px - 80px) ; }
#tkl_msl {left: calc(338px - 80px) ; }

#tpo_msl {left: calc(337px - 80px) ; }
#yct_msl {left: calc(337px - 80px) ; }


#wgl_msl {left: calc(436px - 80px) ; }
#wlp_msl {left: calc(205px - 80px) ; }


#br_hkhi {left: calc(280px - 80px) ;}
#kp_hkhi {left: calc(346px - 80px) ;}


#kp_grasstemp{left: calc(334px - 80px) ;}
#tkl_grasstemp{left: calc(338px - 80px) ;}
#tms_grasstemp {left: calc(303px - 80px) ;}



#HKOvis{left: calc(340px - 80px) ;}
#CLKvis{left: calc(90px - 80px) ;}
#CENvis{left: calc(286px - 80px) ;}
#SWHvis{left: calc(430px - 80px) ;}
#WGLvis{left: calc(485px - 80px - 67px) ;} /*Customised*/


#regional_map_container .redDotCLKvis{margin-left: calc(140px - 80px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 80px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 80px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 80px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 80px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 80px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 80px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 80px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 80px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 80px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/

}




@media(max-width:1800px){
    .regional_map_container_wrapper .one_hour_rainfall {
    height: 252px;
    }
}


@media(max-width:1700px){

#regional_map_container, #regional_map_container2 {
background-position: -90px 0;
}

  .regional_map_container_wrapper .one_hour_rainfall {
    height: 248px;
}



#wgl {left: calc( 439px - 90px) ; }
#sty {left: calc( 376px - 90px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 90px) ; }
#skw {left: calc( 392px - 90px) ; }
#skw_rh {left: calc( 392px - 90px) ; }

#hko {left: calc( 346px - 90px) ; }
#ty1 {left: calc( 278px - 90px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 90px) ; } 
#tun {left: calc(171px - 90px) ; }
#wlp {left: calc(205px - 90px) ; }
#sek {left: calc( 264px - 90px) ; }
#hka {left: calc(124px - 90px) ; }
#clk {left: calc(124px - 90px) ; }
#pen {left: calc(228px - 90px) ; }
#cch {left: calc( 220px - 90px) ; }
#tkl {left: calc( 338px - 90px) ; }
#ssh {left: calc( 300px - 90px) ; }
#tls {left: calc( 300px - 90px) ; }
#tls_rh {left: calc( 300px - 90px) ; }
#tp {left: calc( 337px - 90px) ; }

#tpo {left: calc( 337px - 90px) ; }
#yct {left: calc( 337px - 90px) ; }

#sha {left: calc( 374px - 90px) ; }
#skg {left: calc( 422px - 90px) ; }
#wts {left: calc( 369px - 90px) ; }
#ksc {left: calc( 468px - 90px) ; }
#tw {left: calc( 295px - 90px) ; }
#tyw {left: calc( 468px - 90px) ; }
#tyw_rh {left: calc( 468px - 90px) ; }
#ngp {left: calc( 112px - 90px) ; }
#lfs {left: calc(194px - 90px) ; }
#kp {left: calc( 334px - 90px) ; }
#ssp  {left: calc( 312px - 90px) ; }
#cen {left: calc( 324px - 90px) ; }
#swh {left: calc( 389px - 90px) ; }
#yl {left: calc(223px - 90px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 90px) ; }
#hkp_rh {left: calc( 336px - 90px) ; }
#ylp {left: calc(222px - 90px) ; }
#ktg {left: calc(386px - 90px) ; }
#klt {left: calc(355px - 90px) ; }
#klt_rh {left: calc(355px - 90px) ; }
#vp1 {left: calc(313px - 90px) ; }
#hpv {left: calc(358px - 90px) ; }
#twn {left: calc(280px - 90px) ; }
#tms {left: calc(303px - 90px) ; }
#tc {left: calc(386px - 90px) ; }
#plc {left: calc( 385px - 90px) ; }
#cwb {left: calc( 447px - 90px) ; }
#cwb_rh {left: calc( 447px - 90px) ; }

#tpk_wind {left: calc(356px - 90px) ; }
#lfs_wind {left: calc(194px - 90px) ; }

#wlp_wind {left: calc(219px - 90px) ; }

#tun_wind {left: calc(171px - 90px) ; }
#clk_wind {left: calc(124px - 90px) ; }
#hka_wind {left: calc(120px - 90px) ; }
#pen_wind {left: calc(228px - 90px) ; }
#ccb_wind {left: calc(220px - 90px) ;}
#cch_wind {left: calc(210px - 90px) ;}

#tkl_wind {left: calc( 338px - 90px) ; }
#sek_wind {left: calc( 265px - 90px) ; }
#sha_wind {left: calc( 374px - 90px) ; }
#wgl_wind {left: calc( 436px - 90px) ; }
#hks_wind {left: calc( 338px - 90px) ; }
#jkb_wind {left: calc( 418px - 90px) ; }
#skg_wind {left: calc( 422px - 90px) ; }
#ksc_wind {left: calc( 468px - 90px) ; }
#ty1_wind {left: calc( 283px - 90px) ; }
#ngp_wind {left: calc( 112px - 90px) ; }
#sty_wind {left: calc( 376px - 90px) ; }
#tw_wind {left: calc( 295px - 90px) ; }
#sf_wind {left: calc( 334px - 90px) ; }
#kp_wind {left: calc( 334px - 90px) ; }


#se_wind   {left: calc( 373px - 90px) ; } 
#tap_wind {left: calc( 496px - 90px) ; }
#gi_wind {left: calc( 290px - 90px) ; }
#plc_wind {left: calc( 385px - 90px) ; } 
#tc_wind {left: calc( 376px - 90px) ; }
#sc_wind {left: calc( 103px - 90px) ; }
#cp1_wind {left: calc( 335px - 95px) ; }
#lam_wind {left: calc( 291px - 90px) ; }
#np1_wind {left: calc( 386px - 90px) ; }

#hka_rh {left: calc(133px - 90px) ; }
#clk_rh {left: calc(133px - 90px) ; }
#cch_rh {left: calc( 230px - 90px) ; }
#pen_rh {left: calc(237px - 90px) ; }
#wgl_rh {left: calc( 446px - 90px) ; }
#hks_rh {left: calc( 346px - 90px) ; }
#hko_rh {left: calc( 349px - 90px) ; }
#jkb_rh {left: calc( 422px - 90px) ; }
#tun_rh {left: calc(182px - 90px) ; }
#ty1_rh {left: calc( 288px - 90px) ; }
#tkl_rh {left: calc( 344px - 90px) ; }
#sek_rh {left: calc( 271px - 90px) ; }
#skg_rh {left: calc( 430px - 90px) ; }
#ksc_rh {left: calc( 474px - 90px) ; }
#tw_rh {left: calc( 302px - 90px) ; }
#tp_rh {left: calc( 348px - 90px) ; }
#tpo_rh {left: calc( 348px - 90px) ; }
#sha_rh {left: calc( 374px - 90px) ; }
#ssh_rh {left: calc( 300px - 90px) ; }
#wlp_rh {left: calc(205px - 90px) ; }
#lfs_rh {left: calc(194px - 90px) ; }
#twn_rh {left: calc(280px - 90px) ; }


#hka_msl {left: calc(124px - 90px) ; }
#cch_msl {left: calc(220px - 90px) ; }
#hko_msl {left: calc(346px - 90px) ; }
#lfs_msl {left: calc(194px - 90px) ; }
#pen_msl {left: calc(228px - 90px) ; }
#sha_msl {left: calc(347px - 90px) ; }
#sek_msl {left: calc(265px - 90px) ; }
#ssh_msl {left: calc(300px - 90px) ; }
#tkl_msl {left: calc(338px - 90px) ; }

#tpo_msl {left: calc(337px - 90px) ; }
#yct_msl {left: calc(337px - 90px) ; }

#wgl_msl {left: calc(436px - 90px) ; }
#wlp_msl {left: calc(205px - 90px) ; }


#br_hkhi {left: calc(280px - 90px) ;}
#kp_hkhi {left: calc(346px - 90px) ;}


#kp_grasstemp{left: calc(334px - 90px) ;}
#tkl_grasstemp{left: calc(338px - 90px) ;}
#tms_grasstemp {left: calc(303px - 90px) ;}



#HKOvis{left: calc(340px - 90px) ;}
#CLKvis{left: calc(90px - 90px) ;}
#CENvis{left: calc(286px - 90px) ;}
#SWHvis{left: calc(430px - 90px) ;}
#WGLvis{left: calc(485px - 90px - 67px) ;} /*Customised*/


#regional_map_container .redDotCLKvis{margin-left: calc(140px - 90px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 90px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 90px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 90px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 90px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 90px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 90px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 90px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 90px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 90px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/

}

@media(max-width:1680px){
   .regional_map_container_wrapper .one_hour_rainfall {
    height: 244px;
    }
}

 @media(max-width:1650px){
   .regional_map_container_wrapper .one_hour_rainfall {
    height: 234px;
    }
}



@media(max-width:1600px){

#regional_map_container, #regional_map_container2 {
background-position: -125px 0;
}

#regional_map_container .gust, #regional_map_container .temp, #regional_map_container .rh, #regional_map_container .maxTemp, #regional_map_container .minTemp, #regional_map_container .rf, #regional_map_container .temprange, #regional_map_container2 .temp, #regional_map_container2 .rh, #regional_map_container2 .maxTemp, #regional_map_container2 .minTemp, #regional_map_container2 .rf {
    font-size: 0.6em;
}

 .regional_map_container_wrapper .one_hour_rainfall{
        height:223px ;
    }

#wgl {left: calc( 439px - 125px) ; }
#sty {left: calc( 376px - 125px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 125px) ; }
#skw {left: calc( 392px - 125px) ; }
#skw_rh {left: calc( 392px - 125px) ; }

#hko {left: calc( 346px - 125px) ; }
#ty1 {left: calc( 278px - 125px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 125px) ; } 
#tun {left: calc(171px - 125px) ; }
#wlp {left: calc(205px - 125px) ; }
#sek {left: calc( 264px - 125px) ; }
#hka {left: calc(124px - 125px) ; }
#clk {left: calc(124px - 125px) ; }
#pen {left: calc(228px - 125px) ; }
#cch {left: calc( 220px - 125px) ; }
#tkl {left: calc( 338px - 125px) ; }
#ssh {left: calc( 300px - 125px) ; }
#tls {left: calc( 300px - 125px) ; }
#tls_rh {left: calc( 300px - 125px) ; }
#tp {left: calc( 337px - 125px) ; }

#tpo {left: calc( 337px - 125px) ; }
#yct {left: calc( 337px - 125px) ; }

#sha {left: calc( 374px - 125px) ; }
#skg {left: calc( 422px - 125px) ; }
#wts {left: calc( 369px - 125px) ; }
#ksc {left: calc( 468px - 125px) ; }
#tw {left: calc( 295px - 125px) ; }
#tyw {left: calc( 468px - 125px) ; }
#tyw_rh {left: calc( 468px - 125px) ; }
#ngp {left: calc( 112px - 113px) ; } /* Customized */
#lfs {left: calc(194px - 125px) ; }
#kp {left: calc( 334px - 125px) ; }
#ssp  {left: calc( 312px - 125px) ; }
#cen {left: calc( 324px - 125px) ; }
#swh {left: calc( 389px - 125px) ; }
#yl {left: calc(223px - 125px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 125px) ; }
#hkp_rh {left: calc( 336px - 125px) ; }

#ylp {left: calc(222px - 125px) ; }
#ktg {left: calc(386px - 125px) ; }
#klt {left: calc(355px - 125px) ; }
#klt_rh {left: calc(355px - 125px) ; }
#vp1 {left: calc(313px - 125px) ; }
#hpv {left: calc(358px - 125px) ; }
#twn {left: calc(280px - 125px) ; }
#tms {left: calc(303px - 125px) ; }
#tc {left: calc(386px - 125px) ; }
#plc {left: calc( 385px - 125px) ; }
#cwb {left: calc( 447px - 125px) ; }
#cwb_rh {left: calc( 447px - 125px) ; }

#tpk_wind {left: calc(356px - 125px) ; }
#lfs_wind {left: calc(194px - 125px) ; }
#wlp_wind {left: calc(219px - 125px) ; }

#tun_wind {left: calc(171px - 125px) ; }
#clk_wind {left: calc(124px - 125px) ; }
#hka_wind {left: calc(120px - 120px) ; top: 200px; }
#pen_wind {left: calc(228px - 125px) ; }
#ccb_wind {left: calc(220px - 125px) ; }
#hss_wind {left: calc(220px - -27px) ; }
#cch_wind {left: calc(210px - 125px) ; }

#tkl_wind {left: calc( 338px - 125px) ; }
#sek_wind {left: calc( 265px - 125px) ; }
#sha_wind {left: calc( 374px - 125px) ; }
#wgl_wind {left: calc( 436px - 125px) ; }
#hks_wind {left: calc( 338px - 125px) ; }
#jkb_wind {left: calc( 418px - 125px) ; }
#skg_wind {left: calc( 422px - 125px) ; }
#ksc_wind {left: calc( 468px - 125px) ; } 
#ty1_wind {left: calc( 283px - 125px) ; }
#ngp_wind {left: calc( 112px - 113px) ; } /*Customised*/
#sty_wind {left: calc( 376px - 125px) ; }
#tw_wind {left: calc( 295px - 125px) ; }
#sf_wind {left: calc( 334px - 125px) ; }
#kp_wind {left: calc( 334px - 125px) ; }
#se_wind   {left: calc( 373px - 125px) ; } 
#tap_wind {left: calc( 496px - 150px) ; } /*Customised*/
#gi_wind {left: calc( 290px - 125px) ; }
#plc_wind {left: calc( 385px - 125px) ; } 
#tc_wind {left: calc( 376px - 125px) ; }
#sc_wind.windData {left: calc( 103px - 110px)   } /*Customised*/
#sc_wind.gust {left: calc( 103px - 103px)   } /*Customised*/
#sc_wind.gust{top:180px;}
#cp1_wind {left: calc( 335px - 125px) ; }
#lam_wind {left: calc( 291px - 125px) ; }
#np1_wind {left: calc( 386px - 125px) ; }

#hka_rh {left: calc(133px - 125px) ; }
#clk_rh {left: calc(133px - 125px) ; }
#cch_rh {left: calc( 230px - 125px) ; }
#pen_rh {left: calc(237px - 125px) ; }
#wgl_rh {left: calc( 446px - 125px) ; }
#hks_rh {left: calc( 346px - 125px) ; }
#hko_rh {left: calc( 349px - 125px) ; }
#jkb_rh {left: calc( 422px - 125px) ; }
#tun_rh {left: calc(182px - 125px) ; }
#ty1_rh {left: calc( 288px - 125px) ; }
#tkl_rh {left: calc( 344px - 125px) ; }
#sek_rh {left: calc( 271px - 125px) ; }
#skg_rh {left: calc( 430px - 125px) ; }
#ksc_rh {left: calc( 474px - 125px) ; }
#tw_rh {left: calc( 302px - 125px) ; }
#tp_rh {left: calc( 348px - 125px) ; }

#tpo_rh {left: calc( 348px - 125px) ; }
#yct_rh {left: calc( 348px - 125px) ; }

#sha_rh {left: calc( 374px - 125px) ; }
#ssh_rh {left: calc( 300px - 125px) ; }
#wlp_rh {left: calc(205px - 125px) ; }
#lfs_rh {left: calc(194px - 125px) ; }
#twn_rh {left: calc(280px - 125px) ; }


#hka_msl {left: calc(124px - 125px) ; }
#cch_msl {left: calc(220px - 125px) ; }
#hko_msl {left: calc(346px - 125px) ; }
#lfs_msl {left: calc(194px - 125px) ; }
#pen_msl {left: calc(228px - 125px) ; }
#sha_msl {left: calc(347px - 125px) ; }
#sek_msl {left: calc(265px - 125px) ; }
#ssh_msl {left: calc(300px - 125px) ; }
#tkl_msl {left: calc(338px - 125px) ; }

#tpo_msl {left: calc(337px - 125px) ; }
#yct_msl {left: calc(337px - 125px) ; }

#wgl_msl {left: calc(436px - 125px) ; }
#wlp_msl {left: calc(205px - 125px) ; }



#br_hkhi {left: calc(280px - 125px) ;}
#kp_hkhi {left: calc(346px - 125px) ;}

#kp_grasstemp{left: calc(334px - 125px) ;}
#tkl_grasstemp{left: calc(338px - 125px) ;}
#tms_grasstemp {left: calc(303px - 125px) ;}

#HKOvis{left: calc(340px - 125px) ;}
#CLKvis{left: calc(90px - 60px) ;}  /* Customized */
#CENvis{left: calc(286px - 125px) ;}
#SWHvis{left: calc(430px - 125px) ;}
#WGLvis{left: calc(485px - 125px - 67px) ;} /*Customised*/

#regional_map_container .redDotCLKvis{margin-left: calc(140px - 125px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 125px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 125px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 125px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 125px) !important;}

#regional_map_container .clkline{ left: calc(105.38px - 87px) !important; transform: rotate(-211.246deg) !important;}   /*Customised*/
#regional_map_container .swhline{ left: calc(405.841px - 125px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 125px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 125px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 125px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/





}



 @media(max-width:1550px){
   .regional_map_container_wrapper .one_hour_rainfall {
    height: 218px;
    }
}


/* Special Handling , Left + Top */
@media(max-width:1480px){

    #regional_map_container{
        background-size: 436px auto !important;
        background-position: -50px 0;
    }
    
#regional_map_container, #regional_map_container2 {
    height: 244.565px;
}

.regional_map_container_wrapper .one_hour_rainfall {
    height: 212px;
}


#wid-regional-map-container .one_hour_rainfall  #regional_map_container {
    background-size: 102% !important; 
}


#wgl {left: calc( 439px - 122px) ; }
#sty {left: calc( 376px - 122px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 122px) ; }
#skw {left: calc( 392px - 122px) ; }
#skw_rh {left: calc( 392px - 122px) ; }
#hko {left: calc( 346px - 122px) ; }
#ty1 {left: calc( 278px - 122px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 122px) ; } 
#tun {left: calc(171px - 122px) ; }
#wlp {left: calc(205px - 122px) ; }
#sek {left: calc( 264px - 122px) ; }
#hka {left: calc(124px - 122px) ; }
#clk {left: calc(124px - 122px) ; }
#pen {left: calc(228px - 122px) ; }
#cch {left: calc( 220px - 122px) ; }
#tkl {left: calc( 338px - 122px) ; }
#ssh {left: calc( 300px - 122px) ; }
#tls {left: calc( 300px - 122px) ; }
#tls_rh {left: calc( 300px - 122px) ; }
#tp {left: calc( 337px - 122px) ; }

#tpo {left: calc( 337px - 122px) ; }
#yct {left: calc( 337px - 122px) ; }

#sha {left: calc( 374px - 122px) ; }
#skg {left: calc( 422px - 122px) ; }
#wts {left: calc( 369px - 122px) ; }
#ksc {left: calc( 468px - 122px) ; }
#tw {left: calc( 295px - 122px) ; }
#tyw {left: calc( 468px - 122px) ; }
#tyw_rh {left: calc( 468px - 122px) ; }
#ngp {left: calc( 112px - 113px) ; } /* Customized */
#lfs {left: calc(194px - 122px) ; }
#kp {left: calc( 334px - 122px) ; }
#ssp  {left: calc( 312px - 122px) ; }
#cen {left: calc( 324px - 122px) ; }
#swh {left: calc( 389px - 122px) ; }
#yl {left: calc(223px - 122px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 122px) ; }
#hkp_rh {left: calc( 336px - 122px) ; }

#ylp {left: calc(222px - 122px) ; }
#ktg {left: calc(386px - 122px) ; }
#klt {left: calc(355px - 122px) ; }
#klt_rh {left: calc(355px - 122px) ; }
#vp1 {left: calc(313px - 122px) ; }
#hpv {left: calc(358px - 122px) ; }
#twn {left: calc(280px - 122px) ; }
#tms {left: calc(303px - 122px) ; }
#tc {left: calc(386px - 122px) ; }
#plc {left: calc( 385px - 122px) ; }
#cwb {left: calc( 447px - 122px) ; }
#cwb_rh {left: calc( 447px - 122px) ; }

#tpk_wind {left: calc(356px - 122px) ; }
#lfs_wind {left: calc(194px - 122px) ; }
#wlp_wind {left: calc(219px - 122px) ; }

#tun_wind {left: calc(171px - 122px) ; }
#clk_wind {left: calc(124px - 122px) ; }
#hka_wind {left: calc(120px - 122px) ; }
#pen_wind {left: calc(228px - 122px) ; }
#ccb_wind {left: calc(220px - 122px) ;}
#cch_wind {left: calc(210px - 122px) ;}

#tkl_wind {left: calc( 338px - 122px) ; }
#sek_wind {left: calc( 265px - 122px) ; }
#sha_wind {left: calc( 374px - 122px) ; }
#wgl_wind {left: calc( 436px - 122px) ; }
#hks_wind {left: calc( 338px - 122px) ; }
#jkb_wind {left: calc( 418px - 122px) ; }
#skg_wind {left: calc( 422px - 122px) ; }
#ksc_wind {left: calc( 468px - 122px) ; } 
#ty1_wind {left: calc( 283px - 122px) ; }
#ngp_wind {left: calc( 112px - 113px) ; } /*Customised*/
#sty_wind {left: calc( 376px - 122px) ; }
#tw_wind {left: calc( 295px - 122px) ; }
#sf_wind {left: calc( 334px - 122px) ; }
#kp_wind {left: calc( 334px - 122px) ; }
#se_wind   {left: calc( 373px - 122px) ; } 
#tap_wind {left: calc( 496px - 150px) ; } /*Customised*/
#gi_wind {left: calc( 290px - 122px) ; }
#plc_wind {left: calc( 385px - 122px) ; } 
#tc_wind {left: calc( 376px - 122px) ; }
#sc_wind {left: calc( 103px - 103px) ; } /*Customised*/
#cp1_wind {left: calc( 335px - 122px) ; }
#lam_wind {left: calc( 291px - 122px) ; }
#np1_wind {left: calc( 386px - 122px) ; }

#hka_rh {left: calc(133px - 122px) ; }
#clk_rh {left: calc(133px - 122px) ; }
#cch_rh {left: calc( 230px - 122px) ; }
#pen_rh {left: calc(237px - 122px) ; }
#wgl_rh {left: calc( 446px - 122px) ; }
#hks_rh {left: calc( 346px - 122px) ; }
#hko_rh {left: calc( 349px - 122px) ; }
#jkb_rh {left: calc( 422px - 122px) ; }
#tun_rh {left: calc(182px - 122px) ; }
#ty1_rh {left: calc( 288px - 122px) ; }
#tkl_rh {left: calc( 344px - 122px) ; }
#sek_rh {left: calc( 271px - 122px) ; }
#skg_rh {left: calc( 430px - 122px) ; }
#ksc_rh {left: calc( 474px - 122px) ; }
#tw_rh {left: calc( 302px - 122px) ; }
#tp_rh {left: calc( 348px - 122px) ; }

#tpo_rh {left: calc( 348px - 122px) ; }
#yct_rh {left: calc( 348px - 122px) ; }

#sha_rh {left: calc( 374px - 122px) ; }
#ssh_rh {left: calc( 300px - 122px) ; }
#wlp_rh {left: calc(205px - 122px) ; }
#lfs_rh {left: calc(194px - 122px) ; }
#twn_rh {left: calc(280px - 122px) ; }


#hka_msl {left: calc(124px - 122px) ; }
#cch_msl {left: calc(220px - 122px) ; }
#hko_msl {left: calc(346px - 122px) ; }
#lfs_msl {left: calc(194px - 122px) ; }
#pen_msl {left: calc(228px - 122px) ; }
#sha_msl {left: calc(347px - 122px) ; }
#sek_msl {left: calc(265px - 122px) ; }
#ssh_msl {left: calc(300px - 122px) ; }
#tkl_msl {left: calc(338px - 122px) ; }

#tpo_msl {left: calc(337px - 122px) ; }
#yct_msl {left: calc(337px - 122px) ; }

#wgl_msl {left: calc(436px - 122px) ; }
#wlp_msl {left: calc(205px - 122px) ; }



#br_hkhi {left: calc(280px - 122px) ;}
#kp_hkhi {left: calc(346px - 122px) ;}

#kp_grasstemp{left: calc(334px - 122px) ;}
#tkl_grasstemp{left: calc(338px - 122px) ;}
#tms_grasstemp {left: calc(303px - 122px) ;}

#HKOvis{left: calc(340px - 122px) ;}
#CLKvis{left: calc(90px - 122px) ;}
#CENvis{left: calc(286px - 122px) ;}
#SWHvis{left: calc(430px - 122px) ;}
#WGLvis{left: calc(485px - 122px - 67px) ;} /*Customised*/

#regional_map_container .redDotCLKvis{margin-left: calc(140px - 122px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 122px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 122px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 122px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 122px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 122px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 122px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 122px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 122px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 122px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/



/* Top */
#tkl {top: 8px; left:173px; }
#ssh {top: calc( 43px - 20px); left: 147px;}
#tls {top: 35px; left: 147px;}
#tls_rh {top: 35px; left: 147px;}
#plc {top: calc( 58px - 20px) ; left: 201px;}
#wlp {top: calc( 77px - 24px) ; }
#ylp {top: 72px; }
#sek {top: 72px; left:125px; }

#tpo {top: 54px; left:163px; }
#yct {top: 54px; left:163px; }

#tun {top: 93px; left: 57px; }
#hka {top: 143px; left:34px; }
#ngp {top: 176px; left:18px; }
#cch {top: 200px; left:93px; }
#pen {top: 158px; left:99px; }
#tms {top: 80px; left:151px; }
#twn {top: 91px; left:141px; }
#tw  {top: 100px; left:149px; }
#sha {top: 90px; left:197px; }
#tyw {top: 89px; left: 257px; }
#tyw_rh {top: 89px; left: 257px; }
#ty1 {top: 120px; left: 132px; }
#ssp {top: 129px; left: 152px; }
#skg {top: 107px; left: 225px; }
#ksc {top: 118px; left: 251px; }
#wts {top: 126px; left: 190px; }
#tc  {top: 116px; left: 204px; }
#klt {top: 135px; left: 179px; }
#klt_rh {top: 135px; left: 179px; }
#hko {top: 144px; left: 173px; }
#ktg {top: 140px; left: 201px; }
#jkb {top: 150px; left: 225px; }
#cwb {top: 166px; left: 245px; }
#cwb_rh {top: 166px; left: 245px; }
#vp1 {top: 171px; left: 156px; }
#hkp {top: 160px; left: 173px; }
#hkp_rh {top: 160px; left: 173px; }

#hpv {top: 170px; left: 185px; }
#hks {top: 182px; left: 173px; }
#sty {top: 203px; left: 198px; }
#skw {top: 161px ;left: 206px;}
#skw_rh {top: 161px ;left: 206px;}
#wgl {top: 217px ;left: 245px;}

#kp {top: calc( 213px - 20px) ; }
#clk {top: calc( 217px - 20px) ; }
#tp  {top: calc( 84px - 20px) ; }
#lfs {top: calc(62px - 20px) ; }
#cen {top: calc( 243px - 20px) ; }
#swh {top: calc( 243px - 20px) ; }
#yl {top: calc(94px - 20px) ; }


#lfs_rh {left: 78px; top: 40px;}
#wlp_rh {left: 84px; top: 51px;}
#tkl_rh {left: 176px; top: 11px;}
#ssh_rh {left: 149px; top: 28px;}
#hka_rh {left: 35px; top: 147px;}
#pen_rh {left: 106px; top: 155px;}
#cch_rh {left: 102px; top: 201px;}
#hks_rh {left: 171px; top: 182px;}
#ty1_rh {left: 138px; top: 121px;}
#sek_rh {left: 128px; top: 66px;}

#tpo_rh {left: 178px; top: 53px;}
#yct_rh {left: 178px; top: 53px;}

#tw_rh {left: 148px; top: 101px;}
#twn_rh {left: 132px; top: 90px;}
#tun_rh  {left: 68px; top: 91px;}
#sha_rh {left: 195px; top: 90px;}
#skg_rh {left: 232px; top: 102px;}
#ksc_rh {left: 266px; top: 115px;}
#hko_rh {left: 179px; top: 139px;}
#jkb_rh {left: 225px; top: 140px;}
#wgl_rh {left: 245px; top: 213px;}

#tp_rh  {left: 0; top: 0;}
#clk_rh {left: calc(133px - 122px) ; }


#br_hkhi {left: 133px; top: 27px;}
#kp_hkhi {left: 173px; top:133px;}

#tms_grasstemp {left: 149px; top:74px;}
#kp_grasstemp {left: 160px; top:132px;}
#tkl_grasstemp{left: 162px; top:6px;}



#lfs_wind { left:74px; top:42px; }
#wlp_wind { left:92px; top:53px; }
#tkl_wind { left:171px;top:4px; }
#plc_wind { left:204px;top:40px; }
#tun_wind { left:67px; top:91px; }
#hka_wind { left:29px;  }
#hka_wind.windData{top:130px;}
#hka_wind.gust{top:130px;}
#ngp_wind { left:24px; top:174px; }
#pen_wind { left:100px; top:155px; }
#ccb_wind {left: 101px; top: 192px; }
#hss_wind {left: 197px; top: 201px; }
#cch_wind {left: 93px; top: 207px; }
#tap_wind {left: 281px; top: 47px; }
#tpk_wind {left: 176px; top: 54px; }
#sha_wind {left: 196px; top: 89px; }
#skg_wind {left: 228px; top: 104px; }
#tc_wind {left: 193px; top: 110px; }
#ty1_wind {left: 137px; top: 114px; }
#kp_wind {left: 175px; top: 137px; }
#se_wind {left: 190px; top: 129px; }
#jkb_wind {left: 214px; top: 132px; }
#sf_wind {left: 178px; top: 148px; }
#np1_wind {left: 194px; top: 155px; }
#cp1_wind {left: 165px; top: 156px; }
#hks_wind {left: 180px; top: 172px; }
#wgl_wind {left: 253px; top: 210px; }
#lam_wind {left: 139px; top: 196px; }
#gi_wind {left: 143px; top: 154px; }
#sc_wind.windData{left: 20px; top:118px;}
#sc_wind.gust{left: 20px; top: 118px}
#clk_wind { left:0px; top:0px; }
#sek_wind {left: 120px; top: 60px; }
#ksc_wind {left: 0px; top: 0px; }
#sty_wind {left: 0px; top: 0px; }
#tw_wind {left: 0px; top: 0px; }


.windData {
    height: 25px;
    width: 25px;
    line-height: 25px;
    font-size: 0.6em;
    line-height: 26px;
}


#CLKvis{left:8px; top:117px; }
#HKOvis{left:169px; top:115px; }
#CENvis{left:125px; top:176px; }
#SWHvis{left:224px; top:165px; }
#WGLvis{left:269px; top:200px; }

#regional_map_container .redDotCLKvis{margin-top: 149px !important; margin-left: 45px !important; }
#regional_map_container .redDotWGLvis{margin-top: 222px !important; margin-left: 257px !important;}
#regional_map_container .redDotHKOvis{margin-top: 152.5px !important; margin-left: 183px !important;}
#regional_map_container .redDotSWHvis{margin-top: 165px !important; margin-left: 211px !important;}
#regional_map_container .redDotCENvis{margin-top: 159.5px !important; margin-left: 175px !important;}

#regional_map_container .clkline {width: 21.6117px !important;transform: rotate(-141.246deg) !important;top: 142.811px !important;left: 28.38px !important;}
#regional_map_container .cenline {width: 33.306px !important;transform: rotate(148deg) !important;top: 171.747px !important;left: 145.521px !important;}
#regional_map_container .hkoline {width: 34.0136px !important;transform: rotate(106.9744deg) !important;top: 138.57px !important; left: 174.045px !important;}
#regional_map_container .wglline {width: 19.7567px !important;transform: rotate(137.264deg) !important;top: 218px !important;left: 257px !important;}
#regional_map_container .swhline {width: 17.5304px !important;transform: rotate(-144deg) !important;top: 172px !important;left: 211px !important;}

#tkl_msl {left:154px; top:3px; }
#ssh_msl {left:126px; top:28px; }
#lfs_msl {left:64px; top:36px; }
#wlp_msl {left:73px; top:52px; }

#tpo_msl {left:166px; top:50px; }
#yct_msl {left:166px; top:50px; }

#sha_msl {left:188px; top:79px;}
#sek_msl {left:120px; top:70px; }
#hka_msl {left:27px; top:135px;}
#hko_msl {left:137px; top:178px;}
#pen_msl {left:98px; top:149px; }
#cch_msl {left:97px; top:198px; }
#wgl_msl {left:243px; top:210px; }

}


@media (max-width: 1450px){
    .regional_map_container_wrapper .one_hour_rainfall {
       height: 204px;
    }
}


@media(max-width:1350px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 193px;
    }
}

@media(max-width:1300px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 185px;
    }
}


@media(max-width:1250px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 174px;
    }
}


@media(max-width:1200px){


   #regional_map_container{
        background-size: auto !important;
    }

#regional_map_container, #regional_map_container2 {
background-position: 0 0;
}

#regional_map_container, #regional_map_container2 {
    height: 370.565px;
}

#wid-regional-map-container .one_hour_rainfall #regional_map_container {
    height: 374.565px;
}

#regional_map_container .gust, #regional_map_container .gust, #regional_map_container .temp, #regional_map_container .rh, #regional_map_container .maxTemp, #regional_map_container .minTemp, #regional_map_container .rf, #regional_map_container .temprange, #regional_map_container2 .temp, #regional_map_container2 .rh, #regional_map_container2 .maxTemp, #regional_map_container2 .minTemp, #regional_map_container2 .rf {
    font-size: 0.6em;
}


.regional_map_container_wrapper{
    padding: 0 15% ;
}

 .regional_map_container_wrapper .one_hour_rainfall{
        height:374px ;
  }


#wgl {left: calc( 439px - 0px) ; }
#sty {left: calc( 376px - 0px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 0px) ; }
#skw {left: calc( 392px - 0px) ; }
#skw_rh {left: calc( 392px - 0px) ; }
#hko {left: calc( 346px - 0px) ; }
#ty1 {left: calc( 278px - 0px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 0px) ; } 
#tun {left: calc(171px - 0px) ; }
#wlp {left: calc(205px - 0px) ; }
#sek {left: calc( 264px - 0px) ; }
#hka {left: calc(124px - 0px) ; }
#clk {left: calc(124px - 0px) ; }
#pen {left: calc(228px - 0px) ; }
#cch {left: calc( 220px - 0px) ; }
#tkl {left: calc( 338px - 0px) ; }
#ssh {left: calc( 300px - 0px) ; }
#tls {left: calc( 300px - 0px) ; }
#tls_rh {left: calc( 300px - 0px) ; }
#tp {left: calc( 337px - 0px) ; }

#tpo {left: calc( 337px - 0px) ; }
#yct {left: calc( 337px - 0px) ; }

#sha {left: calc( 374px - 0px) ; }
#skg {left: calc( 422px - 0px) ; }
#wts {left: calc( 369px - 0px) ; }
#ksc {left: calc( 468px - 0px) ; }
#tw {left: calc( 295px - 0px) ; }
#tyw {left: calc( 468px - 0px) ; }
#tyw_rh {left: calc( 468px - 0px) ; }
#ngp {left: calc( 112px - 0px) ; } 
#lfs {left: calc(194px - 0px) ; }
#kp {left: calc( 334px - 0px) ; }
#ssp  {left: calc( 312px - 0px) ; }
#cen {left: calc( 324px - 0px) ; }
#swh {left: calc( 389px - 0px) ; }
#yl {left: calc(223px - 0px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 0px) ; }
#hkp_rh {left: calc( 336px - 0px) ; }
#ylp {left: calc(222px - 0px) ; }
#ktg {left: calc(386px - 0px) ; }
#klt {left: calc(355px - 0px) ; }
#klt_rh {left: calc(355px - 0px) ; }
#vp1 {left: calc(313px - 0px) ; }
#hpv {left: calc(358px - 0px) ; }
#twn {left: calc(280px - 0px) ; }
#tms {left: calc(303px - 0px) ; }
#tc {left: calc(386px - 0px) ; }
#plc {left: calc( 385px - 0px) ; }
#cwb {left: calc( 447px - 0px) ; }
#cwb_rh {left: calc( 447px - 0px) ; }

#tpk_wind {left: calc(356px - 0px) ; }
#lfs_wind {left: calc(194px - 0px) ; }
#wlp_wind {left: calc(219px - 0px) ; }
#tun_wind {left: calc(171px - 0px) ; }
#clk_wind {left: calc(124px - 0px) ; }
#hka_wind.gust {left: calc(114px + 15px) ; }
#hka_wind.windData {left: calc(114px + 15px) ; }
#pen_wind {left: calc(228px - 0px) ; }
#ccb_wind {left: calc(220px - 0) ;}
#cch_wind {left: calc(210px - 0px) ;}

#tkl_wind {left: calc( 338px - 0px) ; }
#sek_wind {left: calc( 265px - 0px) ; }
#sha_wind {left: calc( 374px - 0px) ; }
#wgl_wind {left: calc( 436px - 0px) ; }
#hks_wind {left: calc( 338px - 0px) ; }
#jkb_wind {left: calc( 418px - 0px) ; }
#skg_wind {left: calc( 422px - 0px) ; }
#ksc_wind {left: calc( 468px - 0px) ; }
#ty1_wind {left: calc( 283px - 0px) ; }
#ngp_wind {left: calc( 112px - 0px) ; } 
#sty_wind {left: calc( 376px - 0px) ; }
#tw_wind {left: calc( 295px - 0px) ; }
#sf_wind {left: calc( 334px - 0px) ; }
#kp_wind {left: calc( 334px - 0px) ; }
#se_wind   {left: calc( 373px - 0px) ; } 
#tap_wind {left: calc( 496px - 0px) ; }
#gi_wind {left: calc( 290px - 0px) ; }
#plc_wind {left: calc( 385px - 0px) ; } 
#tc_wind {left: calc( 376px - 0px) ; }
#sc_wind.windData {left: calc( 103px - 0px) ; top: 170px; }
#sc_wind.gust {left: calc( 103px - 0px) ; top: 170px; }

#cp1_wind {left: calc( 335px - 0px) ; }
#lam_wind {left: calc( 291px - 0px) ; }
#np1_wind {left: calc( 386px - 0px) ; }

#hka_rh {left: calc(133px - 0px) ; }
#clk_rh {left: calc(133px - 0px) ; }
#cch_rh {left: calc( 230px - 0px) ; }
#pen_rh {left: calc(237px - 0px) ; }
#wgl_rh {left: calc( 446px - 0px) ; }
#hks_rh {left: calc( 346px - 0px) ; }
#hko_rh {left: calc( 349px - 0px) ; }
#jkb_rh {left: calc( 422px - 0px) ; }
#tun_rh {left: calc(182px - 0px) ; }
#ty1_rh {left: calc( 288px - 0px) ; }
#tkl_rh {left: calc( 344px - 0px) ; }
#sek_rh {left: calc( 271px - 0px) ; }
#skg_rh {left: calc( 430px - 0px) ; }
#ksc_rh {left: calc( 474px - 0px) ; }
#tw_rh {left: calc( 302px - 0px) ; }
#tp_rh {left: calc( 348px - 0px) ; }

#tpo_rh {left: calc( 348px - 0px) ; }
#yct_rh {left: calc( 348px - 0px) ; }

#sha_rh {left: calc( 374px - 0px) ; }
#ssh_rh {left: calc( 300px - 0px) ; }
#wlp_rh {left: calc(205px - 0px) ; }
#lfs_rh {left: calc(194px - 0px) ; }
#twn_rh {left: calc(280px - 0px) ; }

#hka_msl {left: calc(124px - 0px) ; }
#cch_msl {left: calc(220px - 0px) ; }
#hko_msl {left: calc(346px - 0px) ; }
#lfs_msl {left: calc(194px - 0px) ; }
#pen_msl {left: calc(228px - 0px) ; }
#sha_msl {left: calc(347px - 0px) ; }
#sek_msl {left: calc(265px - 0px) ; }
#ssh_msl {left: calc(300px - 0px) ; }
#tkl_msl {left: calc(338px - 0px) ; }

#tpo_msl {left: calc(337px - 0px) ; }
#yct_msl {left: calc(337px - 0px) ; }

#wgl_msl {left: calc(436px - 0px) ; }
#wlp_msl {left: calc(205px - 0px) ; }

#br_hkhi {left: calc(280px - 0px) ;}
#kp_hkhi {left: calc(346px - 0px) ;}

#kp_grasstemp{left: calc(334px - 0px) ;}
#tkl_grasstemp{left: calc(338px - 0px) ;}
#tms_grasstemp {left: calc(303px - 0px) ;}

#HKOvis{left: calc(340px - 0px) ;}
#CLKvis{left: calc(90px - 0px) ;}
#CENvis{left: calc(286px - 0px) ;}
#SWHvis{left: calc(430px - 0px) ;}
#WGLvis{left: calc(485px - 0px - 67px) ;} /*Customised*/

#regional_map_container .redDotCLKvis{margin-left: calc(140px - 0px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 0px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 0px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 0px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 0px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 0px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 0px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 0px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 0px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 0px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/







/* Top Revert*/
#tkl {top: 20px;}
#ssh {top: 43px;}
#tls {top: 62px;}
#tls_rh {top: 62px;}
#plc {top: 58px;}

#wgl {top: calc( 325px ) ; }
#sty {top: calc( 307px ) ; }

#hks {top: calc( 2709px ) ; }
#skw {top: calc( 247px ) ; }
#skw_rh {top: calc( 247px ) ; }
#hko {top: calc( 223px ) ; }
#ty1 {top: calc( 185px ) ; }

#jkb {top: calc( 226px ) ; } 
#tun {top: calc( 144px ) ; }
#wlp {top: calc( 77px ) ; }
#sek {top: calc( 104px ) ; }
#hka {top: calc( 217px ) ; }
#clk {top: calc( 217px ) ; }
#pen {top: calc( 235px ) ; }
#cch {top: calc( 305px ) ; }



#tp  {top: calc( 84px ) ; }

#tpo {top: calc( 84px ) ; }
#yct {top: calc( 84px ) ; }

#sha {top: calc( 132px ) ; }
#skg {top: calc( 158px ) ; }
#wts {top: calc( 189px ) ; }
#ksc {top: calc( 174px ) ; }
#tw  {top: calc( 151px ) ; }

#tyw {top: calc( 134px ) ; }
#tyw_rh {top: calc( 134px ) ; }
#ngp {top: calc( 261px ) ; } 
#lfs {top: calc(62px ) ; }
#kp {top: calc( 213px ) ; }
#ssp  {top: calc( 198px ) ; }
#cen {top: calc( 243px ) ; }
#swh {top: calc( 243px ) ; }
#yl {top: calc(94px ) ; }
/* hkp needed to be modified */
#hkp {top: calc( 244px ) ; }
#hkp_rh {top: calc( 244px ) ; }

#ylp {top: calc( 104px ) ; }
#ktg {top: calc(216px ) ; }
#klt {top: calc(205px ) ; }
#klt_rh {top: calc(205px ) ; }
#vp1 {top: calc(261px ) ; }
#hpv {top: calc(263px ) ; }
#twn {top: calc(137px ) ; }
#tms {top: calc(118px ) ; }
#tc {top: calc(166px ) ; }

#cwb {top: calc( 250px ) ; }
#cwb_rh {top: calc( 250px ) ; }


#hka_rh { top:221px; }
#clk_rh { top:221px; }
#cch_rh { top: 308px;}
#pen_rh { top:235px; }
#wgl_rh { top: 325px;}
#hks_rh { top: 274px;}
#hko_rh { top: 223px;}
#jkb_rh { top: 216px;}
#tun_rh { top:144px; }
#ty1_rh { top: 185px;}
#tkl_rh { top: 20px; }
#sek_rh { top: 104px;}
#skg_rh { top: 158px;}
#ksc_rh { top: 174px;}
#tw_rh { top: 151px;}
#tp_rh { top: 84px;}

#tpo_rh { top: 84px; }
#yct_rh { top: 84px; }

#sha_rh { top: 132px; }
#ssh_rh { top:43px; }
#wlp_rh { top:77px; }
#lfs_rh { top:62px; }
#twn_rh { top:137px; }


#kp_grasstemp{top:213px; }
#tkl_grasstemp{ top:13px; }
#tms_grasstemp { top:118px; }

.windData {
    height: 40px;
    width: 40px;
    line-height: 25px;
    font-size: 14px;
    line-height: 40px;
}

#tpk_wind { top:94px; }
#lfs_wind { top:62px; }
#wlp_wind { top:78px; }
#tun_wind { top:144px;}
#clk_wind { top:217px;}
#hka_wind.gust { top:205px;}
#hka_wind.windData{top: 190px}
#pen_wind { top:235px;}
#ccb_wind { top: 305px;}
#cch_wind { top: 325px;}

#tkl_wind { top: 13px;}
#sek_wind { top: 93px; }
#sha_wind {top: 132px; }
#wgl_wind {top: 314px; }
#hks_wind { top: 275px; }
#jkb_wind {top: 213px;}
#skg_wind { top: 158px; }
#ksc_wind { top: 174px; }
#ty1_wind { top: 187px; }
#ngp_wind { top: 261px; }
#sty_wind { top: 309px; }
#tw_wind { top: 151px; }
#sf_wind { top: 222px; }
#kp_wind { top: 206px; }
#se_wind   { top: 212px; }
#tap_wind { top: 56px; }
#gi_wind { top: 230px; }
#plc_wind { top: 58px; }
#tc_wind { top: 175px; }
#sc_wind.gust { top: 186px; }
#cp1_wind { top: 240px; }
#lam_wind { top: 293px; }
#np1_wind {top: 242px; }  
#hss_wind {top: 303px; left: 375px;}


#br_hkhi { top:43px;  }
#kp_hkhi { top:213px; }



#HKOvis{left:340px; top:192px; cursor:auto; text-align:center;}
#CLKvis{left:90px; top:190px; cursor:auto; text-align:center;}
#CENvis{left:286px; top:259px; cursor:auto; text-align:center;}
#WGLvis{left:485px; top:315px; cursor:auto; text-align:center;}
#SWHvis{left:430px; top:254px; cursor:auto; text-align:center;}

#regional_map_container .redDotCLKvis{margin-top: 226px !important; margin-left: 140px !important; }
#regional_map_container .redDotSWHvis{margin-top: 244px !important; margin-left: 336px !important;}
#regional_map_container .redDotHKOvis{margin-top: 235.5px !important; margin-left: 355px !important;}
#regional_map_container .redDotCENvis{margin-top: 250.5px !important; margin-left: 404px !important;}
#regional_map_container .redDotWGLvis{margin-top: 343px !important; margin-left: 468px !important;}

#regional_map_container .swhline{width: 29.5304px !important; transform: rotate(-144deg) !important; top: 262.494px !important; left: 405.841px !important;}
#regional_map_container .hkoline{width: 34.0136px !important; transform: rotate(106.9744deg) !important; top: 220.57px !important; left: 346.045px !important; }
#regional_map_container .cenline{width: 37.306px !important; transform: rotate(148deg) !important; top: 257.747px !important; left: 301.521px !important; }
#regional_map_container .wglline{width: 19.7567px !important; transform: rotate(133.264deg) !important; top: 336.016px !important; left: 469.978px !important; }
#regional_map_container .clkline{width: 40.6117px !important; transform: rotate(-144.246deg) !important; top: 216.811px !important; left: 105.38px !important; }

#hka_msl { top:217px; }
#cch_msl { top:305px; }
#hko_msl { top:223px; }
#lfs_msl { top:62px; }
#pen_msl { top:235px; }
#sha_msl { top:132px; }
#sek_msl { top:93px; }
#ssh_msl { top:43px; }
#tkl_msl { top:13px; }

#tpo_msl { top:84px; }
#yct_msl { top:84px; }

#wgl_msl { top:314px; }
#wlp_msl { top:77px; }






}



@media(max-width:1200px){
       .regional_map_container_wrapper{
        padding: 0 12% ;
        }
}


@media(max-width:1100px){
   .regional_map_container_wrapper .one_hour_rainfall {
    height: 357px;
    }
}

@media(max-width:1050px){
   .regional_map_container_wrapper .one_hour_rainfall {
    height: 330px;
    }
}

@media(max-width:1000px){
   .regional_map_container_wrapper .one_hour_rainfall {
    height: 320px;
    }
}





@media(max-width:950px){

       .regional_map_container_wrapper{
        padding: 0 5% ;
        }

}

@media(max-width:850px){
    .regional_map_container_wrapper{
        padding: 0 ;
    }
     .regional_map_container_wrapper .one_hour_rainfall{
            height:374px ;
      }
}

@media(max-width:840px){
     .regional_map_container_wrapper .one_hour_rainfall{
            height:347px ;
      }
}

@media(max-width:820px){
     .regional_map_container_wrapper .one_hour_rainfall{
            height:334px ;
      }
}


@media(max-width:800px){

 .regional_map_container_wrapper .one_hour_rainfall{
        height:329px ;
  }

}

@media(max-width:770px){

 .regional_map_container_wrapper .one_hour_rainfall{
        height:375px ;
  }

}

@media(max-width:700px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 362px;
    }
}

@media(max-width:680px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 345px;
    }
}

@media(max-width:650px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 330px;
    }
}


@media(max-width:630px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 320px;
    }
}

@media(max-width:600px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 307px;
    }
}

@media(max-width:580px){
    .regional_map_container_wrapper .one_hour_rainfall {
        height: 293px;
    }
}

@media(max-width:550px){

    .regional_map_container_wrapper .one_hour_rainfall{
        height:265px ;
    }


}





@media(max-width:415px){

#regional_map_container, #regional_map_container2 {
background-position: -125px 0;
}



#wgl {left: calc( 439px - 125px) ; }
#sty {left: calc( 376px - 125px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 125px) ; }
#skw {left: calc( 392px - 125px) ; }
#skw_rh {left: calc( 392px - 125px) ; }
#hko {left: calc( 346px - 125px) ; }
#ty1 {left: calc( 278px - 125px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 125px) ; } 
#tun {left: calc(171px - 125px) ; }
#wlp {left: calc(205px - 125px) ; }
#sek {left: calc( 264px - 125px) ; }

#clk {left: calc(124px - 125px) ; }

#clk {left: calc(124px - 125px) ; }
#pen {left: calc(228px - 125px) ; }
#cch {left: calc( 220px - 125px) ; }
#tkl {left: calc( 338px - 125px) ; }
#ssh {left: calc( 300px - 125px) ; }
#tls {left: calc( 300px - 125px) ; }
#tls_rh {left: calc( 300px - 125px) ; }
#tp {left: calc( 337px - 125px) ; }

#tpo {left: calc( 337px - 125px) ; }
#yct {left: calc( 337px - 125px) ; }

#sha {left: calc( 374px - 125px) ; }
#skg {left: calc( 422px - 125px) ; }
#wts {left: calc( 369px - 125px) ; }
#ksc {left: calc( 468px - 125px) ; }
#tw {left: calc( 295px - 125px) ; }
#tyw {left: calc( 468px - 125px) ; }
#tyw_rh {left: calc( 468px - 125px) ; }
#ngp {left: calc( 112px - 113px) ; } /* Customized */
#lfs {left: calc(194px - 125px) ; }
#kp {left: calc( 334px - 125px) ; }
#ssp  {left: calc( 312px - 125px) ; }
#cen {left: calc( 324px - 125px) ; }
#swh {left: calc( 389px - 125px) ; }
#yl {left: calc(223px - 125px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 125px) ; }
#hkp_rh {left: calc( 336px - 125px) ; }

#ylp {left: calc(222px - 125px) ; }
#ktg {left: calc(386px - 125px) ; }
#klt {left: calc(355px - 125px) ; }
#klt_rh {left: calc(355px - 125px) ; }
#vp1 {left: calc(313px - 125px) ; }
#hpv {left: calc(358px - 125px) ; }
#twn {left: calc(280px - 125px) ; }
#tms {left: calc(303px - 125px) ; }
#tc {left: calc(386px - 125px) ; }
#plc {left: calc( 385px - 125px) ; }
#cwb {left: calc( 447px - 125px) ; }
#cwb_rh {left: calc( 447px - 125px) ; }

#tpk_wind {left: calc(356px - 125px) ; }
#lfs_wind {left: calc(194px - 125px) ; }
#wlp_wind {left: calc(219px - 125px) ; }
#tun_wind {left: calc(171px - 125px) ; }
#clk_wind {left: calc(124px - 125px) ; }
#hka_wind {left: calc(114px - 125px) ; }
#pen_wind {left: calc(228px - 125px) ; }
#ccb_wind {left: calc(220px - 125px) ;}
#cch_wind {left: calc(210px - 125px) ;}


#tkl_wind {left: calc( 338px - 125px) ; }
#sek_wind {left: calc( 265px - 125px) ; }
#sha_wind {left: calc( 374px - 125px) ; }
#wgl_wind {left: calc( 436px - 125px) ; }
#hks_wind {left: calc( 338px - 125px) ; }
#jkb_wind {left: calc( 418px - 125px) ; }
#skg_wind {left: calc( 422px - 125px) ; }
#ksc_wind {left: calc( 468px - 125px) ; }
#ty1_wind {left: calc( 283px - 125px) ; }
#ngp_wind {left: calc( 112px - 125px) ; } 
#sty_wind {left: calc( 376px - 125px) ; }
#tw_wind {left: calc( 295px - 125px) ; }
#sf_wind {left: calc( 334px - 125px) ; }
#kp_wind {left: calc( 334px - 125px) ; }
#se_wind   {left: calc( 373px - 125px) ; } 
#tap_wind {left: calc( 496px - 125px) ; }
#gi_wind {left: calc( 290px - 125px) ; }
#plc_wind {left: calc( 385px - 125px) ; } 
#tc_wind {left: calc( 376px - 125px) ; }
#sc_wind {left: calc( 103px - 125px) ; }
#cp1_wind {left: calc( 335px - 125px) ; }
#lam_wind {left: calc( 291px - 125px) ; }
#np1_wind {left: calc( 386px - 125px) ; }

#hka_rh {left: calc(133px - 125px) ; }
#clk_rh {left: calc(133px - 125px) ; }
#cch_rh {left: calc( 230px - 125px) ; }
#pen_rh {left: calc(237px - 125px) ; }
#wgl_rh {left: calc( 446px - 125px) ; }
#hks_rh {left: calc( 346px - 125px) ; }
#hko_rh {left: calc( 349px - 125px) ; }
#jkb_rh {left: calc( 422px - 125px) ; }
#tun_rh {left: calc(182px - 125px) ; }
#ty1_rh {left: calc( 288px - 125px) ; }
#tkl_rh {left: calc( 344px - 125px) ; }
#sek_rh {left: calc( 271px - 125px) ; }
#skg_rh {left: calc( 430px - 125px) ; }
#ksc_rh {left: calc( 474px - 125px) ; }
#tw_rh {left: calc( 302px - 125px) ; }
#tp_rh {left: calc( 348px - 125px) ; }

#tpo_rh {left: calc( 348px - 125px) ; }
#yct_rh {left: calc( 348px - 125px) ; }

#sha_rh {left: calc( 374px - 125px) ; }
#ssh_rh {left: calc( 300px - 125px) ; }
#wlp_rh {left: calc(205px - 125px) ; }
#lfs_rh {left: calc(194px - 125px) ; }
#twn_rh {left: calc(280px - 125px) ; }

#hka_msl {left: calc(124px - 125px) ; }
#cch_msl {left: calc(220px - 125px) ; }
#hko_msl {left: calc(346px - 125px) ; }
#lfs_msl {left: calc(194px - 125px) ; }
#pen_msl {left: calc(228px - 125px) ; }
#sha_msl {left: calc(347px - 125px) ; }
#sek_msl {left: calc(265px - 125px) ; }
#ssh_msl {left: calc(300px - 125px) ; }
#tkl_msl {left: calc(338px - 125px) ; }

#tpo_msl {left: calc(337px - 125px) ; }
#yct_msl {left: calc(337px - 125px) ; }


#wgl_msl {left: calc(436px - 125px) ; }
#wlp_msl {left: calc(205px - 125px) ; }


#br_hkhi {left: calc(280px - 125px) ;}
#kp_hkhi {left: calc(346px - 125px) ;}

#kp_grasstemp{left: calc(334px - 125px) ;}
#tkl_grasstemp{left: calc(338px - 125px) ;}
#tms_grasstemp {left: calc(303px - 125px) ;}

#HKOvis{left: calc(340px - 125px) ;}
#CLKvis{left: calc(90px - 125px) ;}
#CENvis{left: calc(286px - 125px) ;}
#SWHvis{left: calc(430px - 125px) ;}
#WGLvis{left: calc(485px - 125px - 67px) ;} /*Customised*/

#regional_map_container .redDotCLKvis{margin-left: calc(140px - 125px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 125px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 125px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 125px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 125px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 125px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 125px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 125px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 125px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 125px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/

}




/* Small Phone */

@media(max-width:601px){

#regional_map_container .gust, #regional_map_container .temp, #regional_map_container .rh, #regional_map_container .maxTemp, #regional_map_container .minTemp, #regional_map_container .rf, #regional_map_container .temprange, #regional_map_container2 .temp, #regional_map_container2 .rh, #regional_map_container2 .maxTemp, #regional_map_container2 .minTemp, #regional_map_container2 .rf {
    font-size: 0.6em;
}

#wid-col-left, #wid-col-center, #wid-col-right {
     padding-right: 0; 
     padding-left: 0;
}




#regional_map_container, #regional_map_container2 {
background-position: -80px 0;
}



#wgl {left: calc( 439px - 80px) ; }
#sty {left: calc( 376px - 80px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 80px) ; }
#skw {left: calc( 392px - 80px) ; }
#skw_rh {left: calc( 392px - 80px) ; }
#hko {left: calc( 346px - 80px) ; }
#ty1 {left: calc( 278px - 80px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 80px) ; } 
#tun {left: calc(171px - 80px) ; }
#wlp {left: calc(205px - 80px) ; }
#sek {left: calc( 264px - 80px) ; }
#hka {left: calc(124px - 80px) ; }
#clk {left: calc(124px - 80px) ; }
#pen {left: calc(228px - 80px) ; }
#cch {left: calc( 220px - 80px) ; }
#tkl {left: calc( 338px - 80px) ; }
#ssh {left: calc( 300px - 80px) ; }
#tls {left: calc( 300px - 80px) ; }
#tls_rh {left: calc( 300px - 80px) ; }
#tp {left: calc( 337px - 80px) ; }

#tpo {left: calc( 337px - 80px) ; }
#yct {left: calc( 337px - 80px) ; }

#sha {left: calc( 374px - 80px) ; }
#skg {left: calc( 422px - 80px) ; }
#wts {left: calc( 369px - 80px) ; }
#ksc {left: calc( 468px - 80px) ; }
#tw {left: calc( 295px - 80px) ; }
#tyw {left: calc( 468px - 80px) ; }
#tyw_rh {left: calc( 468px - 80px) ; }
#ngp {left: calc( 112px - 80px) ; }
#lfs {left: calc(194px - 80px) ; }
#kp {left: calc( 334px - 80px) ; }
#ssp  {left: calc( 312px - 80px) ; }
#cen {left: calc( 324px - 80px) ; }
#swh {left: calc( 389px - 80px) ; }
#yl {left: calc(223px - 80px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 80px) ; }
#hkp_rh {left: calc( 336px - 80px) ; }

#ylp {left: calc(222px - 80px) ; }
#ktg {left: calc(386px - 80px) ; }
#klt {left: calc(355px - 80px) ; }
#klt_rh {left: calc(355px - 80px) ; }
#vp1 {left: calc(313px - 80px) ; }
#hpv {left: calc(358px - 80px) ; }
#twn {left: calc(280px - 80px) ; }
#tms {left: calc(303px - 80px) ; }
#tc {left: calc(386px - 80px) ; }
#plc {left: calc( 385px - 80px) ; }
#cwb {left: calc( 447px - 80px) ; }
#cwb_rh {left: calc( 447px - 80px) ; }

#tpk_wind {left: calc(356px - 80px) ; }
#lfs_wind {left: calc(194px - 80px) ; }
#wlp_wind {left: calc(219px - 80px) ; }

#tun_wind {left: calc(171px - 80px) ; }
#clk_wind {left: calc(124px - 80px) ; }
#hka_wind.gust {left: calc(114px - 70px) ; }
#hka_wind.windData {left: calc(114px - 70px) ; }
#pen_wind {left: calc(228px - 80px) ; }
#ccb_wind {left: calc(220px - 80px) ;}
#cch_wind {left: calc(210px - 80px) ;}


#tkl_wind {left: calc( 338px - 80px) ; }
#sek_wind {left: calc( 265px - 80px) ; }
#sha_wind {left: calc( 374px - 80px) ; }
#wgl_wind {left: calc( 436px - 80px) ; }
#hks_wind {left: calc( 338px - 80px) ; }
#jkb_wind {left: calc( 418px - 80px) ; }
#skg_wind {left: calc( 422px - 80px) ; }
#ksc_wind {left: calc( 468px - 80px) ; }
#ty1_wind {left: calc( 283px - 80px) ; }
#ngp_wind {left: calc( 112px - 80px) ; }
#sty_wind {left: calc( 376px - 80px) ; }
#tw_wind {left: calc( 295px - 80px) ; }
#sf_wind {left: calc( 334px - 80px) ; }
#kp_wind {left: calc( 334px - 80px) ; }
#se_wind   {left: calc( 373px - 80px) ; } 
#tap_wind {left: calc( 496px - 80px) ; }
#gi_wind {left: calc( 290px - 80px) ; }
#plc_wind {left: calc( 385px - 80px) ; } 
#tc_wind {left: calc( 376px - 80px) ; }
#sc_wind.windData {left: calc( 103px - 80px) ; }
#sc_wind.gust {left: calc( 103px - 75px) ; }
#cp1_wind {left: calc( 335px - 80px) ; }
#lam_wind {left: calc( 291px - 80px) ; }
#np1_wind {left: calc( 386px - 80px) ; }
#hss_wind {left: calc( 386px - 80px) ; }

#hka_rh {left: calc(133px - 80px) ; }
#clk_rh {left: calc(133px - 80px) ; }
#cch_rh {left: calc( 230px - 80px) ; }
#pen_rh {left: calc(237px - 80px) ; }
#wgl_rh {left: calc( 446px - 80px) ; }
#hks_rh {left: calc( 346px - 80px) ; }
#hko_rh {left: calc( 349px - 80px) ; }
#jkb_rh {left: calc( 422px - 80px) ; }
#tun_rh {left: calc(182px - 80px) ; }
#ty1_rh {left: calc( 288px - 80px) ; }
#tkl_rh {left: calc( 344px - 80px) ; }
#sek_rh {left: calc( 271px - 80px) ; }
#skg_rh {left: calc( 430px - 80px) ; }
#ksc_rh {left: calc( 474px - 80px) ; }
#tw_rh {left: calc( 302px - 80px) ; }
#tp_rh {left: calc( 348px - 80px) ; }

#tpo_rh {left: calc( 348px - 80px) ; }
#yct_rh {left: calc( 348px - 80px) ; }

#sha_rh {left: calc( 374px - 80px) ; }
#ssh_rh {left: calc( 300px - 80px) ; }
#wlp_rh {left: calc(205px - 80px) ; }
#lfs_rh {left: calc(194px - 80px) ; }
#twn_rh {left: calc(280px - 80px) ; }



#hka_msl {left: calc(124px - 80px) ; }
#cch_msl {left: calc(220px - 80px) ; }
#hko_msl {left: calc(346px - 80px) ; }
#lfs_msl {left: calc(194px - 80px) ; }
#pen_msl {left: calc(228px - 80px) ; }
#sha_msl {left: calc(347px - 80px) ; }
#sek_msl {left: calc(265px - 80px) ; }
#ssh_msl {left: calc(300px - 80px) ; }
#tkl_msl {left: calc(338px - 80px) ; }

#tpo_msl {left: calc(337px - 80px) ; }
#yct_msl {left: calc(337px - 80px) ; }

#wgl_msl {left: calc(436px - 80px) ; }
#wlp_msl {left: calc(205px - 80px) ; }


#br_hkhi {left: calc(280px - 80px) ;}
#kp_hkhi {left: calc(346px - 80px) ;}

#kp_grasstemp{left: calc(334px - 80px) ;}
#tkl_grasstemp{left: calc(338px - 80px) ;}
#tms_grasstemp {left: calc(303px - 80px) ;}


#HKOvis{left: calc(340px - 80px) ;}
#CLKvis{left: calc(90px - 80px) ;}
#CENvis{left: calc(286px - 80px) ;}
#SWHvis{left: calc(430px - 80px) ;}
#WGLvis{left: calc(485px - 80px - 67px) ;} /*Customised*/

#regional_map_container .redDotCLKvis{margin-left: calc(140px - 80px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 80px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 80px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 80px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 80px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 80px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 80px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 80px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 80px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 80px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/


}






/* 320 size (I phone - 5) */

@media(max-width:411px){


    #regional_map_container{
        background-size: 436px auto !important;
        background-position: -50px 0;
    }
    
#regional_map_container, #regional_map_container2 {
    height: 244.565px;
}

.regional_map_container_wrapper .one_hour_rainfall {
    height: 180px;
}


#wid-regional-map-container .one_hour_rainfall  #regional_map_container {
    background-size: 102% !important; 
}


#wgl {left: calc( 439px - 122px) ; }
#sty {left: calc( 376px - 122px) ; }
/* hks needed to be modified */
#hks {left: calc( 337px - 122px) ; }
#skw {left: calc( 392px - 122px) ; }
#skw_rh {left: calc( 392px - 122px) ; }
#hko {left: calc( 346px - 122px) ; }
#ty1 {left: calc( 278px - 122px) ; }
/* jkb needed to be modified */
#jkb {left: calc( 421px - 122px) ; } 
#tun {left: calc(171px - 122px) ; }
#wlp {left: calc(205px - 122px) ; }
#sek {left: calc( 264px - 122px) ; }
#hka {left: calc(124px - 122px) ; }
#clk {left: calc(124px - 122px) ; }
#pen {left: calc(228px - 122px) ; }
#cch {left: calc( 220px - 122px) ; }
#tkl {left: calc( 338px - 122px) ; }
#ssh {left: calc( 300px - 122px) ; }
#tls {left: calc( 300px - 122px) ; }
#tls_rh {left: calc( 300px - 122px) ; }
#tp {left: calc( 337px - 122px) ; }

#tpo {left: calc( 337px - 122px) ; }
#yct {left: calc( 337px - 122px) ; }

#sha {left: calc( 374px - 122px) ; }
#skg {left: calc( 422px - 122px) ; }
#wts {left: calc( 369px - 122px) ; }
#ksc {left: calc( 468px - 122px) ; }
#tw {left: calc( 295px - 122px) ; }
#tyw {left: calc( 468px - 122px) ; }
#tyw_rh {left: calc( 468px - 122px) ; }
#ngp {left: calc( 112px - 113px) ; } /* Customized */
#lfs {left: calc(194px - 122px) ; }
#kp {left: calc( 334px - 122px) ; }
#ssp  {left: calc( 312px - 122px) ; }
#cen {left: calc( 324px - 122px) ; }
#swh {left: calc( 389px - 122px) ; }
#yl {left: calc(223px - 122px) ; }
/* hkp needed to be modified */
#hkp {left: calc( 336px - 122px) ; }
#hkp_rh {left: calc( 336px - 122px) ; }

#ylp {left: calc(222px - 122px) ; }
#ktg {left: calc(386px - 122px) ; }
#klt {left: calc(355px - 122px) ; }
#klt_rh {left: calc(355px - 122px) ; }
#vp1 {left: calc(313px - 122px) ; }
#hpv {left: calc(358px - 122px) ; }
#twn {left: calc(280px - 122px) ; }
#tms {left: calc(303px - 122px) ; }
#tc {left: calc(386px - 122px) ; }
#plc {left: calc( 385px - 122px) ; }
#cwb {left: calc( 447px - 122px) ; }
#cwb_rh {left: calc( 447px - 122px) ; }

#tpk_wind {left: calc(356px - 122px) ; }
#lfs_wind {left: calc(194px - 122px) ; }
#wlp_wind {left: calc(219px - 122px) ; }

#tun_wind {left: calc(171px - 122px) ; }
#clk_wind {left: calc(124px - 122px) ; }
#hka_wind {left: calc(114px - 122px) ; }
#pen_wind {left: calc(228px - 122px) ; }
#ccb_wind {left: calc(220px - 122px) ;}
#cch_wind {left: calc(210px - 122px) ;}

#tkl_wind {left: calc( 338px - 122px) ; }
#sek_wind {left: calc( 265px - 122px) ; }
#sha_wind {left: calc( 374px - 122px) ; }
#wgl_wind {left: calc( 436px - 122px) ; }
#hks_wind {left: calc( 338px - 122px) ; }
#jkb_wind {left: calc( 418px - 122px) ; }
#skg_wind {left: calc( 422px - 122px) ; }
#ksc_wind {left: calc( 468px - 122px) ; } 
#ty1_wind {left: calc( 283px - 122px) ; }
#ngp_wind {left: calc( 112px - 113px) ; } /*Customised*/
#sty_wind {left: calc( 376px - 122px) ; }
#tw_wind {left: calc( 295px - 122px) ; }
#sf_wind {left: calc( 334px - 122px) ; }
#kp_wind {left: calc( 334px - 122px) ; }
#se_wind   {left: calc( 373px - 122px) ; } 
#tap_wind {left: calc( 496px - 150px) ; } /*Customised*/
#gi_wind {left: calc( 290px - 122px) ; }
#plc_wind {left: calc( 385px - 122px) ; } 
#tc_wind {left: calc( 376px - 122px) ; }
#sc_wind.gust {left: calc( 103px - 80px) ; } /*Customised*/
#sc_wind.windData {left: calc( 103px - 87px) ; } /*Customised*/

#cp1_wind {left: calc( 335px - 122px) ; }
#lam_wind {left: calc( 291px - 122px) ; }
#np1_wind {left: calc( 386px - 122px) ; }

#hka_rh {left: calc(133px - 122px) ; }
#clk_rh {left: calc(133px - 122px) ; }
#cch_rh {left: calc( 230px - 122px) ; }
#pen_rh {left: calc(237px - 122px) ; }
#wgl_rh {left: calc( 446px - 122px) ; }
#hks_rh {left: calc( 346px - 122px) ; }
#hko_rh {left: calc( 349px - 122px) ; }
#jkb_rh {left: calc( 422px - 122px) ; }
#tun_rh {left: calc(182px - 122px) ; }
#ty1_rh {left: calc( 288px - 122px) ; }
#tkl_rh {left: calc( 344px - 122px) ; }
#sek_rh {left: calc( 271px - 122px) ; }
#skg_rh {left: calc( 430px - 122px) ; }
#ksc_rh {left: calc( 474px - 122px) ; }
#tw_rh {left: calc( 302px - 122px) ; }
#tp_rh {left: calc( 348px - 122px) ; }

#tpo_rh {left: calc( 348px - 122px) ; }
#yct_rh {left: calc( 348px - 122px) ; }

#sha_rh {left: calc( 374px - 122px) ; }
#ssh_rh {left: calc( 300px - 122px) ; }
#wlp_rh {left: calc(205px - 122px) ; }
#lfs_rh {left: calc(194px - 122px) ; }
#twn_rh {left: calc(280px - 122px) ; }


#hka_msl {left: calc(124px - 122px) ; }
#cch_msl {left: calc(220px - 122px) ; }
#hko_msl {left: calc(346px - 122px) ; }
#lfs_msl {left: calc(194px - 122px) ; }
#pen_msl {left: calc(228px - 122px) ; }
#sha_msl {left: calc(347px - 122px) ; }
#sek_msl {left: calc(265px - 122px) ; }
#ssh_msl {left: calc(300px - 122px) ; }
#tkl_msl {left: calc(338px - 122px) ; }

#tpo_msl {left: calc(337px - 122px) ; }
#yct_msl {left: calc(337px - 122px) ; }

#wgl_msl {left: calc(436px - 122px) ; }
#wlp_msl {left: calc(205px - 122px) ; }



#br_hkhi {left: calc(280px - 122px) ;}
#kp_hkhi {left: calc(346px - 122px) ;}

#kp_grasstemp{left: calc(334px - 122px) ;}
#tkl_grasstemp{left: calc(338px - 122px) ;}
#tms_grasstemp {left: calc(303px - 122px) ;}

#HKOvis{left: calc(340px - 122px) ;}
#CLKvis{left: calc(90px - 122px) ;}
#CENvis{left: calc(286px - 122px) ;}
#SWHvis{left: calc(430px - 122px) ;}
#WGLvis{left: calc(485px - 122px - 67px) ;} /*Customised*/

#regional_map_container .redDotCLKvis{margin-left: calc(140px - 122px) !important;}
#regional_map_container .redDotSWHvis{margin-left: calc(336px - 122px) !important;}
#regional_map_container .redDotHKOvis{margin-left: calc(355px - 122px) !important;}
#regional_map_container .redDotCENvis{margin-left: calc(404px - 122px) !important;}
#regional_map_container .redDotWGLvis{margin-left: calc(468px - 122px) !important;}

#regional_map_container .swhline{ left: calc(405.841px - 122px) !important;} 
#regional_map_container .hkoline{ left: calc(346.045px - 122px) !important;} 
#regional_map_container .cenline{ left: calc(301.521px - 122px) !important;} 
#regional_map_container .clkline{ left: calc(105.38px - 122px) !important;} 
#regional_map_container .wglline{ left: calc(469.978px - 122px - 17px) !important; transform: rotate(49deg) !important;} /*Customised*/



/* Top */
#tkl {top: 8px; left:173px; }
#ssh {top: calc( 43px - 20px); left: 147px;}
#tls {top: 35px; left: 147px;}
#tls_rh {top: 35px; left: 147px;}
#plc {top: calc( 58px - 20px) ; left: 201px;}
#wlp {top: calc( 77px - 24px) ; }
#ylp {top: 72px; }
#sek {top: 72px; left:125px; }

#tpo {top: 54px; left:163px; }
#yct {top: 54px; left:163px; }

#tun {top: 93px; left: 57px; }
#hka {top: 143px; left:34px; }
#ngp {top: 176px; left:18px; }
#cch {top: 200px; left:93px; }
#pen {top: 158px; left:99px; }
#tms {top: 80px; left:151px; }
#twn {top: 91px; left:141px; }
#tw  {top: 100px; left:149px; }
#sha {top: 90px; left:197px; }
#tyw {top: 89px; left: 257px; }
#tyw_rh {top: 89px; left: 257px; }
#ty1 {top: 120px; left: 132px; }
#ssp {top: 129px; left: 152px; }
#skg {top: 107px; left: 225px; }
#ksc {top: 118px; left: 251px; }
#wts {top: 126px; left: 190px; }
#tc  {top: 116px; left: 204px; }
#klt {top: 135px; left: 179px; }
#klt_rh {top: 135px; left: 179px; }
#hko {top: 144px; left: 173px; }
#ktg {top: 140px; left: 201px; }
#jkb {top: 150px; left: 225px; }
#cwb {top: 166px; left: 245px; }
#cwb_rh {top: 166px; left: 245px; }
#vp1 {top: 171px; left: 156px; }
#hkp {top: 160px; left: 173px; }
#hkp_rh {top: 160px; left: 173px; }

#hpv {top: 170px; left: 185px; }
#hks {top: 182px; left: 173px; }
#sty {top: 203px; left: 198px; }
#skw {top: 161px ;left: 206px;}
#skw_rh {top: 161px ;left: 206px;}
#wgl {top: 217px ;left: 245px;}

#kp {top: calc( 213px - 20px) ; }
#clk {top: calc( 217px - 20px) ; }
#tp  {top: calc( 84px - 20px) ; }
#lfs {top: calc(62px - 20px) ; }
#cen {top: calc( 243px - 20px) ; }
#swh {top: calc( 243px - 20px) ; }
#yl {top: calc(94px - 20px) ; }


#lfs_rh {left: 78px; top: 40px;}
#wlp_rh {left: 84px; top: 51px;}
#tkl_rh {left: 176px; top: 11px;}
#ssh_rh {left: 149px; top: 28px;}
#hka_rh {left: 35px; top: 147px;}
#pen_rh {left: 106px; top: 155px;}
#cch_rh {left: 102px; top: 201px;}
#hks_rh {left: 171px; top: 182px;}
#ty1_rh {left: 138px; top: 121px;}
#sek_rh {left: 128px; top: 66px;}

#tpo_rh {left: 178px; top: 53px;}
#yct_rh {left: 178px; top: 53px;}

#tw_rh {left: 148px; top: 101px;}
#twn_rh {left: 132px; top: 90px;}
#tun_rh  {left: 68px; top: 91px;}
#sha_rh {left: 195px; top: 90px;}
#skg_rh {left: 232px; top: 102px;}
#ksc_rh {left: 266px; top: 115px;}
#hko_rh {left: 179px; top: 139px;}
#jkb_rh {left: 225px; top: 140px;}
#wgl_rh {left: 245px; top: 213px;}

#tp_rh  {left: 0; top: 0;}
#clk_rh {left: calc(133px - 122px) ; }


#br_hkhi {left: 133px; top: 27px;}
#kp_hkhi {left: 173px; top:133px;}

#tms_grasstemp {left: 149px; top:74px;}
#kp_grasstemp {left: 160px; top:132px;}
#tkl_grasstemp{left: 162px; top:6px;}



#lfs_wind { left:74px; top:42px; }
#wlp_wind { left:92px; top:53px; }
#tkl_wind { left:171px;top:4px; }
#plc_wind { left:204px;top:40px; }
#tun_wind { left:67px; top:91px; }
#hka_wind.gust{left:30px; top:130px;}
#hka_wind.windData{left:32px; top:125px;}

#ngp_wind { left:24px; top:174px; }
#pen_wind { left:100px; top:155px; }
#ccb_wind {left: 101px; top: 192px; }
#cch_wind {left: 93px; top: 207px; }
#tap_wind {left: 281px; top: 47px; }
#tpk_wind {left: 176px; top: 54px; }
#sha_wind {left: 196px; top: 89px; }
#skg_wind {left: 228px; top: 104px; }
#tc_wind {left: 193px; top: 110px; }
#ty1_wind {left: 137px; top: 114px; }
#kp_wind {left: 175px; top: 137px; }
#se_wind {left: 190px; top: 129px; }
#jkb_wind {left: 214px; top: 132px; }
#sf_wind {left: 178px; top: 148px; }
#np1_wind {left: 194px; top: 155px; }
#cp1_wind {left: 165px; top: 156px; }
#hks_wind {left: 180px; top: 172px; }
#wgl_wind {left: 253px; top: 210px; }
#lam_wind {left: 139px; top: 196px; }
#gi_wind {left: 143px; top: 154px; }
#sc_wind {left: 15px;  }
#sc_wind.gust{ top: 118px}
#sc_wind.windData{ top: 115px}

#clk_wind { left:0px; top:0px; }
#sek_wind {left: 125px; top: 60px; }
#ksc_wind {left: 0px; top: 0px; }
#sty_wind {left: 0px; top: 0px; }
#tw_wind {left: 0px; top: 0px; }


.windData {
    height: 25px;
    width: 25px;
    line-height: 25px;
    font-size: 0.6em;
    line-height: 26px;
}


#CLKvis{left:8px; top:117px; }
#HKOvis{left:169px; top:115px; }
#CENvis{left:125px; top:176px; }
#SWHvis{left:224px; top:165px; }
#WGLvis{left:269px; top:200px; }

#regional_map_container .redDotCLKvis{margin-top: 149px !important; margin-left: 45px !important; }
#regional_map_container .redDotWGLvis{margin-top: 222px !important; margin-left: 257px !important;}
#regional_map_container .redDotHKOvis{margin-top: 152.5px !important; margin-left: 183px !important;}
#regional_map_container .redDotSWHvis{margin-top: 165px !important; margin-left: 211px !important;}
#regional_map_container .redDotCENvis{margin-top: 159.5px !important; margin-left: 175px !important;}

#regional_map_container .clkline {width: 21.6117px !important;transform: rotate(-141.246deg) !important;top: 142.811px !important;left: 28.38px !important;}
#regional_map_container .cenline {width: 33.306px !important;transform: rotate(148deg) !important;top: 171.747px !important;left: 145.521px !important;}
#regional_map_container .hkoline {width: 34.0136px !important;transform: rotate(106.9744deg) !important;top: 138.57px !important; left: 174.045px !important;}
#regional_map_container .wglline {width: 19.7567px !important;transform: rotate(137.264deg) !important;top: 218px !important;left: 257px !important;}
#regional_map_container .swhline {width: 17.5304px !important;transform: rotate(-144deg) !important;top: 172px !important;left: 211px !important;}

#tkl_msl {left:154px; top:3px; }
#ssh_msl {left:126px; top:28px; }
#lfs_msl {left:64px; top:36px; }
#wlp_msl {left:73px; top:52px; }
#tpo_msl {left:166px; top:50px; }
#yct_msl {left:166px; top:50px; }

#sha_msl {left:188px; top:79px;}
#sek_msl {left:120px; top:70px; }
#hka_msl {left:27px; top:135px;}
#hko_msl {left:137px; top:178px;}
#pen_msl {left:98px; top:149px; }
#cch_msl {left:97px; top:198px; }
#wgl_msl {left:243px; top:210px; }