body {
/*	font-family: Microsoft JhengHei;*/
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:14px;
}



.btn-delete{
  position: absolute;
  top: 20px;
  right: 2%;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  z-index: 9999999;
  padding: 5px 10px;
  background-color: red;
  border-radius: 5px;
}


#wid-my-city-weather .remove {
    position: absolute;
    top: 0px;
    right: 4px;
    z-index: 10;
}

#wid-my-city-weather .remove a {
    display: block;
    width: 17px;
    height: 17px;
    background: url(../img/close_black.png) no-repeat top left;
    color: #606060;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
}

#wid-my-city-weather .remove
 {
    position: absolute;
    top: -4px;
    right: 3px;
    z-index: 10;
}

#wid-my-loc-weather-report .remove
{
     position: absolute;
    top: 13px;
    right: 14px;
    z-index: 10;
}


#wid-my-loc-weather-report .city-name{
  position: absolute;
  top: 13px;
}


#wid-my-city-weather .remove a,
#wid-my-loc-weather-report .remove a  {
    display: block;
     width: 20px;
    height: 20px;
    background: url(../img/close_black.png) no-repeat top left;
    color: #606060;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
}


#wid-my-loc-weather-report .a-myloc{
  position: relative;
  padding-top: 40px;
}


#wid-local-weather-report .additional_info{
  padding: 5px 0 ;
}

#wid-local-weather-report .additional_info2{
  padding: 5px 15px ;
}


table#psrnote td {
    padding: 3px;
}
table#psrnote, table#psrnote td {
    border: solid 1px #000000;
}

.sidebar .cnt-wtcsgnl .panel-body h2{
  color:#0000EE;
}

#notePanel{
  width:80%;
}


#wid-my-city-weather .list-group-title button.active,
#wid-my-loc-weather-report .list-group-title button.active
{
background: url(../img/ico_cross.png) no-repeat 0px 0px !important;
}


.chzn-container .chzn-results {
    color: #000;
    max-height: 111px;
}

.chzn-container .chzn-search {
    color: #000;
}

.chzn-container .chzn-results li{
  line-height: 1.5em !important;
margin: 5px 0;
}


.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #FFF;
  position:absolute;
  top: -10px;
  right: 51px;
}


#wid-my-city-weather .setting_box,
#wid-my-loc-weather-report .setting_box
{
  padding:0 15px;
}

#wid-my-city-weather .list-group-title button {
    cursor: pointer;
    border: none;
    margin: 0;
    background: url(../img/ico_add.png) no-repeat 0px 0px !important;
    width: 20px;
    height: 22px;
    float: right;
    margin-top: 23px;
    margin-right: 18px;
}

#wid-my-loc-weather-report .list-group-title button {
    cursor: pointer;
    border: none;
    margin: 0;
    background: url(../img/ico_add.png) no-repeat 0px 0px !important;
    width: 20px;
    height: 22px;
    float: right;
}

#wid-special-news{
  background-color:#FFF;
  padding:15px 0;
  color:#000;
}


#wid-special-news .left-block{
text-align: right;  
}

#wid-special-news .center-block{
padding:10px 25px; 
}


#wid-special-news .center-block .cnt{
padding: 20px 0 ;
}

#wid-special-news .right-block{
padding: 15px 50px 0 0;
text-align: right;  
}

#wid-special-news .special-news-icon{
  width:48px;
}

.sidebar-m .upper-warning-panel .ctl-down-sidebar.active {
border-bottom: 0px solid #337ab7;
} 


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

.mCSB_inside > .mCSB_container{
  margin-right:0 !important;
}

#wid-awrf .r0{
border-bottom: 1px solid #fff;
padding-bottom: 15px;
}

#wid-awrf .awrf_icon {
  width: 28px;
  padding: 0 0 6px 0;
}

#wid-awrf .section-hour-wxicon {
  display:inline-block;
  padding: 0;
}

#wid-awrf .wx-icon{
 width:52px
/* min-width:52px;*/
}

#wid-awrf .indicator-hour {
  padding:15px 15px 0 0;
}


.arwf_psr{
  padding:15px 0 0 0;
  display:inline-block;
}


#wid-awrf .left-block{
 padding:15px 0;
}

#wid-awrf .right-block{
   border-left: 1px solid #fff;
   padding: 0;
}

#wid-awrf .row_hours{
  border-bottom: 1px solid #fff;
  padding: 15px 0;
}

#wid-awrf .a-day-row{
   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;
}

#wid-awrf .awrf_wind_dir{
/*  float:right;*/
text-align:right;
}

#wid-awrf .awrf_wind_speed{
 padding:0;
     text-align: right;
}


#setting-panel-center-part{
  height:65vh;
}

#wid-awrf .cnt{
    height: 500px;
    width: 100%;
}

#shared-lists{
  width:100%;
}

#btnMultiLang img{
  width:28px;
}


.icon-cmp img {
    max-width: 355px; 
}



.tc-track-switch {
  padding:0 15px 15px 15px;
}


.nine-day-switch{
  padding:15px 0;
}

#wid-nine-day .inner, #wid-nine-day-flexi .inner{
position:relative;
height: auto;
}

#wid-nine-day .more-section, #wid-nine-day-flexi .more-section{
  cursor:pointer;
}


#container_7day_chart_rh2{
  margin-top:0 !important;
}

.full-height{
  height:100%;
}

.pin-lock{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
/*  background: rgba(0,0,0,.5);*/
    z-index: 999998;
  display:none;
}

.pin-lock .lock-wrapper{
  position:relative;
  width: 100%;
  min-height: 100%;
}

.pin-lock .lock-wrapper img{
  position:absolute;
  top:45%;
  left:45%;
}

.easier_move_bottom{
  padding-bottom:1000px !important;
}

.refresh-bar{
  background-color:#FFF;
}

.refresh-bar img{
  width:32px;
}


.refresh-bar .btn-refresh{
  margin-left:15px;
}

.refresh-bar .btn-more{
  float:right;
  margin-right:15px;
}


.leaflet-control{
  display:none;
}

p {
    margin: 5px 0;
}

.panel-heading{
  min-height:35px;
}


.catlog-title{
/*  font-size:1.5vw;*/
  padding:20px 0;
}

#settingPanel .a-widget {
  position:relative;
  padding: 10px;
}


#settingPanel .widget-icon{
  position:absolute;
  left:0 ;
  top:-5px;
}


#settingPanel .row {
/*padding:20px 0;*/
}


.text-right{
  text-align: right;
}

.relative-wrapper{
position: relative;
    width: 100%;
    height: 100%;
}

.helper-scroll-top{
      cursor: pointer;
    position: fixed;
    bottom: 25px;
    right: 5%;
    z-index: 99999;
}


.tips-bar{
    position: fixed;
    margin-top: 101px;
    right: 0;
    z-index: 9999;
    height: 89px;
    width: 100%;
    background-color: #fff;
      transition:all 0.22s ease;
  -webkit-transition: all 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -moz-transition:all 0.22s ease;
  vertical-align:middle;
}


.tips-bar .btn-save,
.tips-bar .btn-cancel
 {
padding:12px 65px;
border-radius:0;
margin-top: 20px;
}

.tips-bar .button-wrapper-1{
  /*  position: absolute;
    top: 24%;
    right: 24.36666%;
    padding-left: 8.366666%;*/
}


.tips-bar .button-wrapper-2{
  /*  position: absolute;
    top: 24%;
    right:8.36666%;
    padding-left: 8.366666%;*/
}

.tips{
/*position: absolute;
    top: 30%;
    padding-left: 9%;*/
    padding: 30px 0 15px 9%;
    font-weight:400;
    z-index:999;

}

/* Added by Jonathan Lo @ 20210504 for 憭拇除��� buttons */
.toolbar{
    margin: 0 0 15px 0;
    width: 100%;
    text-align: center;
}

#wid-ground-weather-chart .previous_chart, #wid-ground-weather-chart .next_chart{
   padding: 0px 60px;
   border: 1px solid #fff;
   width:45%;
}

#wid-ground-weather-chart .previous_chart img, #wid-ground-weather-chart .next_chart img{
  width: 30px;
}

#wid-ground-weather-chart .previous_chart{
  margin-left:15px;
  margin-right:5px;
}




.toolbar button.latest_chart{
	background-image: url(../img/Icon_FirstPage@2x.png);
    width: 34px;
    height: 34px;
    background-size: 100%;
}

.toolbar button.previous_chart{
	background-image: url(../img/Icon_Previous@2x.png);
    width: 34px;
    height: 34px;
    background-size: 100%;
}

.toolbar button.next_chart{
	background-image: url(../img/Icon_Next@2x.png);
    width: 34px;
    height: 34px;
    background-size: 100%;
}

.toolbar button span{
	display: none;
}

#wid-metar .expaned-cnt table td,  #wid-taf .expaned-cnt table td{
    padding: 5px 20px 5px 5px;
}

#wid-metar .expaned-cnt .menualt, #wid-taf .expaned-cnt .menualt {
    background-color: #f0f0f0;
}

#wid-metar .cnt, #wid-taf .cnt{
	padding:0 15px;	
}

#wid-metar .expaned-cnt, #wid-taf .expaned-cnt{
	padding:15px; display:none; font-size:12px; overflow: scroll;
}




.list-group{
  padding:0;
}

.list-group-item{
padding:0;
/*cursor: grab;*/
}

.row{
	margin-right:0px;
	margin-left:0px;
  margin-bottom: 0px;
}

.bg-primary{
background-color: #13337C !important;
}

.navbar {
/*	padding:20px 0 17px 0;*/
/*  position: absolute;*/

  transition:all 0.22s ease;
  -webkit-transition: all 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -moz-transition:all 0.22s ease;
}


.navbar .desktop-menu-wrapper{
  padding-right: 11.133%;
  padding-top: 1.65%;
}

.navbar .calendar-date{
  margin:0 5px;
  font-size: 24px;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.padding{
  padding:0 15px;
}

.ctl-padding{
	padding:0 5px;
}

.navbar {
  border-radius: 0;
}

.navbar .ctl-btn{
  cursor:pointer;
	text-decoration: none;
	color:#FFFFFF;
	line-height:57px;
  font-size: 24px;
}  

.navbar .icon-ctl-lang{
margin: 0px 6px;
}

.navbar .icon-ctl-setting{
	width:28px;
	height:28px;
	margin-left: 5px ;
	margin-top: -1px;
}


.navbar .icon-cmp{
  padding-left: 8.366666%;
}



.ctl-left-side-bar {
	background-color: #FFFFFF;

}

.fixed-wid-grid{
  height: auto;
  background-color:#FFF; 
}


.widget-title{
  padding: 12px 20px;
  font-size: 24px;
  font-size: 20px;
}

.widget-title .widget-desc{
  font-size:14px;
}


.ctl-edit-tool img,
.ctl-font-size img,
.ctl-how-to-use img
{
  margin:0 5px;
  width: 28px;
}


.handle-bar{
z-index:999999;
}

.handle{
cursor: grab;
}


/* The sidebar menu */
.sidebar {
min-height: 100vh;
/*    height: auto;*/
/*  position: absolute;*/
position: fixed;
  margin-top: 101px;
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #FFF; /* Black*/
  width: 75px;
/*  transition:all 0.25s ease-in-out;
  -webkit-transition:all 0.25s ease-in-out;
  -moz-transition:all 0.25s ease-in-out;*/
  transition:all 0.22s ease;
  -webkit-transition: all 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  -moz-transition:all 0.22s ease;
}


.sidebar .panel-wrapper{

    padding-bottom: 180px;
}

/* The sidebar links */
.sidebar .ctl-left-sidebar{
    text-decoration: none;
    color: #818181;
    display: block;
    text-align: center;
   border-bottom: 1px solid #D8D8D8;
   height: 60px;
   width: auto ;
   padding: 20px;
}

.sidebar .icon-wxicon {
     text-decoration: none;
    transition: 0.3s;
    display: block;
    text-align: center;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


.sidebar .upper-warning-panel {
  display:inline-block;
}

.sidebar .upper-warning-panel a {
  display:inline-block;
}

.sidebar .upper-warning-panel a.active {
border-bottom: 5px solid #337ab7;
}

.content-container{
  position:relative ;
}


.cnt-bg{
/*  background:url('../img/cnt_bg.png') top left; background-attachment:fixed; 
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;*/
}

.sidebar .icon-wxicon{
padding:10px;
cursor: auto;
}



.widget-container{
    color: #000;
    width: 100%;
    position:absolute;
    padding-top: 4px;
    padding-left: 8.3333333%;
    padding-right: 11.333333%;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    background-color: #13337C;
    box-shadow: 4px 4px 11px 0px #666;
/*    padding-bottom: 600px;*/
}

.widget-container .txt-header{
position: relative;
color:#fff;
margin:10px 0px 20px 5px;
}


.widget-container .list-group-item{
    min-height:125px;
    margin-bottom: 10px;
    border-radius: unset;
}

.widget-container .list-group-item {
    cursor: auto;
}




#wid-col-left .list-group-item{
   margin-right:15px;
}



#wid-col-center .list-group-item{
    margin-right:7.5px;
    margin-left:7.5px;
}


 #wid-col-right .list-group-item{
  margin-left:15px;
}

 #wid-col-right-2 .list-group-item{
  margin-left:15px;
}

 #wid-col-right-3 .list-group-item{
  margin-left:15px;
}


.panel {
  margin:15px 25px;
  position: relative;
  border-radius:none;
}

.panel-danger {
    border-color: #D01949;
}

.panel-danger > .panel-heading {

    background-color: #D01949;
    color:#FFF;
}


.panel .last-update-time {
    position: absolute;
    bottom: 4px;
    right: 0;
    padding: 0 10px;
    color: #000;
    font-size:14px;
}

.panel .label{
  margin:5px 0;
}

#wid-tc-track{
    padding: 10px 0px 0 0px;
}




#wid-weather-report.col-lg-7 {
  width:50%;
}




#wid-tc-track .btn-widget-tc, #wid-tc-track-flexi .btn-widget-tc {
  float:right;
  color:#fff;
  background-color:#3988E7;
/*  font-size:12px;*/
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  text-align:left;
  border-radius:3px;
}

.icon-ctl-tc{
  display:inline-block;
  vertical-align: unset;
}

#wid-tc-track .tc-name,  #wid-tc-track-flexi .tc-name{
  padding: 0 15px 0 0;
  display: inline-block;
}

#wid-tc-track .tc-cnt, #wid-tc-track-flexi .tc-cnt  {
width: 100%;
text-align: center;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color:#D8EFFD;
}

#wid-tc-track .tc-cnt img, #wid-tc-track-flexi .tc-cnt img{
/*  width:100%;*/
max-width: 100%;
height:300px;
padding-bottom: 10px;
}

#wid-weather-report{
z-index: 1;
}

#wid-weather-report .widget-title{
  padding: 17px 20px 15px 20px;
}


#wid-weather-report .weather-report-content-container,  #wid-weather-report-flexi .weather-report-content-container{
 /* text-shadow: -1px -1px 4px #000, 2px 2px 4px #000, 3px 3px 9px #3C3C3C;*/
}
.weather_info .rh,
.weather_info .temp{
  text-shadow: -1px -1px 4px #000;
}

#wid-weather-report .last-update-time , #wid-weather-report-flexi .last-update-time{
/*    display: inline-block;
    float: right;*/
    font-size: 14px;
    padding-right: 15px;
}


#wid-weather-report .weather-report-content-container, #wid-weather-report-flexi .weather-report-content-container{
  background-size: auto;
}


#wid-weather-report .weather-report-content-container, #wid-weather-report-flexi .weather-report-content-container{
    z-index: 99999;
    height: 326px;
    position: relative;
    color:#FFF;
 /*   background-size: 1096px 717px;*/
    background-size: 785px 392px;
    background-position-x: -220px;
    background-position-y: -39px;
}


#wid-weather-report .weather_icon, #wid-weather-report-flexi .weather_icon {
    position: absolute;
    top: 8%;
    right: 5%;
    /* width: 72px; */
    width: 108px;
    text-align: center;
}


.weather-report-content-container .wind_direction {
 /* position:absolute;*/
  font-size :20px;
  font-weight: bold;
  padding-left: 21px;
  padding-top: 5px;
}


.weather-report-content-container .weather_info {
  font-size :20px;
/*  font-weight: bold;*/
  padding-left: 21px;
  margin-bottom: 10px;
}

.weather-report-content-container .location {
    font-size :20px;
    font-weight: bold;
    padding-left: 21px;
    padding-top: 25px;
    margin-bottom:10px;
}


.weather_info .temp{
  font-size: 60px;
    font-weight: bold;
  padding-top: 21px;
}

.weather_info .rh {
    font-size: 60px;
    font-weight: bold;
  margin-top: -21px;
  margin-bottom: 15px;
}



.weather-report-content-container .location{
  top:8%;
  left:20px;
}



.weather-report-content-container .wind_direction{
  top:16%;
  left:20px ;
}


.weather-report-content-container .weather_info{
  top:16%;
  left:20px ;
}




.weather-report-content-container .mywindDir2 {
    font-size: 26px;
    height: 70px;
    width: 70px;
    background-size: contain;
    text-align: center;
    line-height: 70px;
}

.weather-report-content-container .temp,
.weather-report-content-container .rh
{
/* font-size: 4.3333vw;*/
}



.uppper-block {
  background-color:#FFF;
  font-size:24px;
}

#wid-nine-day{
    padding-right: 0;
    z-index:10;
/*    width:100%;*/
}


#wid-nine-day .widget-title {
    padding: 20px 20px 10px 20px;
}

.mCSB_horizontal.mCSB_inside > .mCSB_container{
  margin-bottom:0px !important;
  z-index:1;
}

#wid-nine-day .widget-desc, #wid-nine-day-flexi .widget-desc {
    padding: 10px 0;
    color: #000;
    /* background-color: #13337C;*/
    /* height: 88px; */
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}


 #wid-nine-day-flexi .widget-desc {
  height: auto;
  border: none;
  color: #fff;

 }

#wid-nine-day-flexi .uppper-block{
  background-color: transparent;
}

#wid-nine-day .lower-block, #wid-nine-day-flexi .lower-block   {
   border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
 overflow-x: auto;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
}

#wid-nine-day .desc, #wid-nine-day-flexi .desc {
  white-space: normal;
}


 .lower-block .datee{
  padding:15px 0 0 0;
 }

#wid-nine-day .dayy, #wid-nine-day-flexi .dayy {
 vertical-align: top;
 display:inline-block;
 width:5.6vw;
 height: auto;
 color:#FFF;
 text-align:center;
 border-right:1px solid #B2B2B2;
 font-size:14px;
 min-height: 208px;
}

#wid-nine-day-flexi .dayy{
  border: none;
  background-color: #12337C;
}



#wid-nine-day .last-item{
  border:0;
}


#wid-nine-day .min-max-temp,
#wid-nine-day .min-max-rh{
   padding:0 ;
}



#wid-nine-day .dayy .desc{
/*  display: none;*/
  text-align:center;
  padding:0 10px;
}

#wid-nine-day-flexi .desc{
  text-align:center;
  padding:0 10px;
}



#wid-nine-day .dayy .value-wind, #wid-nine-day-flexi .dayy .value-wind {
  text-align:left;
  padding: 10px 0 5px 0;
}

#wid-nine-day .dayy .value-text, #wid-nine-day-flexi .dayy .value-text{
     text-align:left;
 
}



#wid-nine-day .icon-day-weather, #wid-nine-day-flexi .icon-day-weather{
   padding: 10px 0;
   margin:0;
}


#wid-nine-day .icon-day-weather img, #wid-nine-day-flexi .icon-day-weather img{
  width:49px;
}

.psr10 {
/*padding-top: 3px;*/
}


#wid-nine-day-vertical .psr10 {
  position:absolute;
  top:0;
  right:10px;
}


.psr10 .psrcontainer img {
    width: 28px !important;
    margin: 0;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}

.psrvalue {
    display: inline-block;
    font-weight: normal;
    padding-top: 0px;
    vertical-align: bottom;
    padding-bottom: 4px;
}

.psrvalue_style2 {
  line-height:14px;
}

.upper_psrvalue {
    width: 60%;
    padding-top: 0;
    text-align: center;
}

.list-group .list-group-item{
background: transparent linear-gradient(159deg, #FFFFFF26 0%, #FFFFFF33 100%) 0% 0% no-repeat padding-box;
border: 1px solid #FFFFFF;
opacity: 1;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
z-index:1;
}

.panel-title{
  font-size:20px;
}

.list-group .list-group-item{
color:#FFF;
/*background-color: #F6F9F2;*/
}

.list-group .list-group-item .list-group-title
{
z-index:2;
padding:15px;
font-size:20px;
}


.list-group .list-group-item .list-group-title2
{
padding:15px 15px 60px 15px;
}



.list-group .list-group-item .list-group-lower-block p{
z-index:2;
padding: 10px 15px 0 15px;
}


#wid-rhr-report .vall1{

}


.video-container { 
    position: relative;
    height: 318px ;
    overflow: hidden;
    text-align: center;
  }


#wid-news .video-container { 
    position: relative;
    padding: 5px 0;
    height: auto;
    overflow: hidden;
    text-align: center;
  }

#wid-news .video-container img{
width:100%;
}

#wid-news a, #wid-blog a,#wid-press a ,#wid-sidelight a{
  color:#fff;

}

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#wid-news {
  padding:0;
}

.cnt img{
width: 100%;
}

#wid-my-loc-weather-report .sign img{
 width: 28px; 
}


#wid-rhr-report{
  position:relative;
}

#wid-rhr-report .update-time{
  color: var(--white-ffffff);
  color: #FFFFFF;
  opacity: 0.6;
  padding: 15px;
}


#wid-rhr-report .wx-icon{
  top:8px;
  right:10px;
  margin: 0 15px;
}


.wid-dropdown:not(#wid-tc-track .wid-dropdown){
display: inline-block;
position: absolute;
top: 60px;
right:8px;
}


#dropdown-basic-flexi{
  position: absolute;
  top: 0px !important;
  right: 0px !important;
}


#wid-tc-track .wid-dropdown{
 top: unset;
 right :unset;
 float: right;
}


.btn-primary{
  background-color:#3988E7;
}

.icon-ctl-tc{
  margin-left:15px;
}

#wid-radar-img .cnt{
  position:relative;
}

#wid-radar-img .dropdown-menu{
  left: auto;
}

#wid-radar-img #radar_gallery{
  width: 100%; z-index: 0; margin:0 auto;
}

#wid-radar-img #slideImg{
  width:100%; position: absolute;z-index: 1;left:0px;right:0px;margin:0 auto;
  top: 0;
}

#wid-radar-img #ring{
width:100%; position: absolute;z-index: 2;left:0px; margin:0 auto; top:0px;
}

#wid-radar-img .list-group-lower-block{
position:relative;
}

#wid-radar-img .button{
  margin:8px;
}


.dropdown-menu{
max-height: 180px;
overflow-y: scroll;
right: 0 !important;
left:unset !important;
}

#wid-uv-index .cnt {
  position:relative; 
}

#wid-uv-index .cnt .vall_1{
 padding-top:60px;
  text-align:left;
}

#wid-uv-index .cnt .vall_2{
 padding-bottom:60px;
 font-size:31px;
/*  font-size:40px;*/
 text-align:left;
}

#wid-uv-index .icon-sun-glass{
  margin-top:50px;
  margin-left:10px;
}



.update-date{
/*display:inline-block;
float:right;*/
}


.data-row{
  margin:15px;
  border-bottom:1px solid #FFF;
  padding-bottom: 10px;
}


.icon-inner img{
  width:28px;
}

#wid-sun-moon-info .vall{
    text-align: right;
}




.data-row .vall div{
  text-align:right ;
}


.no-border{
  border:unset !important;
}

#wid-tide-info .tide-txt{
  padding:0;
  margin-top:9px;
}

#wid-tide-info .tide-txt2{
  margin-top:8px;
}

#wid-tide-info .val-sea-temp{
  text-align:right;
  margin-top:8px;
}


#wid-web-clock .list-group-lower-block div{
  padding:0 15px;
}


.detail-map{
  display: block; background-size: 100%; 
  background-position: inherit; 
  background-image: url(/images/hko_map_terrain_v2.png); 
  background-repeat: no-repeat;
}




  #clock_table 
  {
  /*font-size: 75%;*/
  }
  #clock_table a
  {
  color: #024ED5;
  text-decoration: none;
  }
  #clock_table a:hover
  {
  text-decoration: underline;
  }




  

.btn-link-expand{
  padding:0 15px;
  z-index:3;
}

.btn-link-expand a{
  color:#fff;
}

.expaned-cnt{
  background:#fff;
  color:#000;
  font-weight:600;
}

.expaned-cnt .col-item-name,
.expaned-cnt .col-item-val
{
  margin-bottom:5px;
}


#wid-metar img,
#wid-taf img,
#wid-100nm img
{ 
vertical-align: bottom;
}


#wid-metar .expanded-date,
#wid-taf .expanded-date,
#wid-100nm .expanded-date
{
  padding:0 15px;
}

#wid-metar .btn-default,
#wid-taf .btn-default,
#wid-100nm .btn-default,
#wid-my-lighting-info .btn-default
{
background-color:#F0F0F0;
margin:5px 0;
}


#wid-100nm .cnt{
  padding:0 15px;
}


#wid-100nm .expaned-cnt{
  padding:0 15px;
}

#wid-my-city-weather{
  position:relative;
}

#wid-my-loc-weather-report{
  position:relative;
}

#wid-my-city-weather .btn-choose-city,
#wid-my-loc-weather-report .btn-choose-location
{
position:absolute;
top:0;
right:0;
margin:15px;
}


#wid-my-loc-weather-report .btn-choose-location span{
  margin:0 15px 0 5px;
}


#wid-my-city-weather .wx-icon img{
  width:38px;
}


#wid-my-city-weather .a-day{
  text-align:center;
  padding: 15px 0 15px 0;
  background-color:#13337C;
  margin: 1px;
  width: 32.33333333% !important;
  font-size:14px;
}


#wid-my-city-weather .wxicon{
  width:36px;
  margin: auto;
  padding-bottom:10px;
}


#wid-my-city-weather .week-datee{
     padding-bottom:10px;
}

#wid-my-city-weather .row{
  margin: 5px 15px 10px 15px;
  position: relative;
}

#wid-my-city-weather .city-name{
  padding-top:7px;
}



#wid-my-city-weather .wx-icon{
  text-align:center;
}

#wid-my-loc-weather-report .my-loc-info-container {
    min-height: 320px;
    position: relative;
    color: #FFF;
    background-image: url(/wxinfo/aws/hko_mica/cp1/latest_CP1.jpg);
    background-size: 613px;
    /* background-position-x: 0;
    background-position-y: -22px; */
    background-repeat: no-repeat;
    background-position: center bottom;
    font-size: 14px;
  }


#wid-my-loc-weather-report .val_loc_name{
  font-size:24px;
  margin: 15px 0 5px 0;
}

#wid-my-loc-weather-report .val_temp{
  font-size:72px;
  font-weight: bold;
}



#wid-my-loc-weather-report .data_a_row{
 margin: 10px 0 0 0;
}


#wid-my-loc-weather-report .val_wind,
#wid-my-loc-weather-report .val_rainfall,
#wid-my-loc-weather-report .val_uv_index,
#wid-my-loc-weather-report  .val_rh
{
  text-align:left;
  position:relative;
}

#wid-my-loc-weather-report .sign{
  display:inline-block;
  position:absolute;
  left: 10px;
  top: 10px;
  width: 28px;
}


#wid-my-loc-weather-report .vall{
  margin-bottom:10px;
  display:inline-block;
  padding-left:50px;
  
}


#wid-my-loc-weather-report .WindDirection-wrapper {
    position: absolute;
    right: 5px;
    bottom: 5px;
}


#wid-my-loc-weather-report .WindDirection {
    display: table-cell;
    width: 80px;
    height: 80px;
    background: url(images/clam.png);
    background-size: 80px 80px;
    text-align: center;
    vertical-align: middle;
    color: #FFF;
}

#wid-nine-day-vertical .datee{
  padding: 0 0 10px 0;
}


#wid-nine-day-vertical .dayy{
  border-bottom:1px solid #fff;
  margin: 10px 0;
  padding: 5px 0;
  position:relative;
  min-height: 120px;
}

#wid-nine-day-vertical .dayy .icon-day-weather img{
  width: 52px;
}


#wid-nine-day-vertical .wx-icon-desc{
  position: absolute;
  top: 65px;
  font-size: 14px;
}


#wid-nine-day-vertical .right-section{
  padding:0 ;
}


#wid-my-lighting-info .btn-link-expand
{
padding :5px 15px;
}

#wid-my-lighting-info .btn-radar-imagery-link
{
padding :5px 15px;
}

#wid-my-lighting-info .btn-radar-imagery-link a{
color: #fff;
}

#wid-my-lighting-info .icon-expand{
padding-left :5px;
}

#wid-local-weather-report .dateTimeDesc,
#wid-my-loc-weather-report .dateTimeDesc
{
  padding-left:15px; 
  padding-bottom:2px;
  color: var(--white-ffffff);
  color: #FFFFFF;
  opacity: 0.6;
}


#wid-local-weather-report .refresh-bar{
  min-height:33px;
}

#wid-local-weather-report .btn-link-expand{
position:relative;
}

#wid-local-weather-report .icon-expand{
    float: right;
    margin-right: 15px;
    margin-top: 2px;
}

#wid-local-weather-report .cnt div,
#wid-local-weather-report .reminder
{
padding:0 15px;
}

#wid-local-weather-report .cnt .panel-body{
  padding: 0;
}

#wid-local-weather-report .list-group-lower-block{
  margin: 10px 0;
}

#wid-local-weather-report .btn-temp .pre-icon{
  margin: 0 12px 0 0;
  width: 28px;
}

#wid-local-weather-report .btn-rainfall .pre-icon{
  margin: 0 5px 0 0;
}

#wid-local-weather-report .btn-link-expand{
  margin:10px 0;
}

#wid-local-weather-report .expaned-cnt{
  background-color:unset;
  color:#fff;
  padding:0 15px;
  margin:15px 0;
  font-weight:100;
}

#wid-local-weather-report .expaned-temp .vall{
text-align: right;
}

#wid-local-weather-report .row{
  border-bottom:1px solid #52699E;
  padding:5px 0;
}

#wid-local-weather-report .btn-light{
  color:#3988E7;
}

#wid-local-weather-report .btn ,
.tc-track-switch .btn ,
.nine-day-switch .btn ,
.btn-graph-wrapper .btn
{
  border-radius:15px;
}

.btn-graph-wrapper{
  padding:15px;
}

#wid-local-weather-report .active,
#wid-tc-track .active,
#wid-nine-day .active,
#wid-tc-track-flexi .active
{
  background-color:#3988E7;
  color:#fff;
}

#wid-tc-track-flexi .tc-track-switch {
  color: #000;
}

#wid-tc-track-flexi .tc-track-switch .btn{
  margin:0 50% 10px 0;
  max-width: 100%;
}


#wid-nine-day .btn-link-expand a{
  background-color:unset ;
}

#wid-nine-day .btn-link-expand{
    border-right: 1px solid #B2B2B2;
    border-left: 1px solid #B2B2B2;
    padding: 15px;
    padding: 1px 0;
    background-color: #f7f7f7;
}

#wid-nine-day .more-section{
    background-color: #13337C;
        padding: 5px 10px;
}


#wid-local-weather-report .btn-region-wrapper
{
  padding-bottom:15px;
}

#wid-local-weather-report .btn-temp .active,
#wid-local-weather-report .btn-rainfall .active
{
background-color:unset;
}


.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

.overlay_panel_style_2{
    /* right: 1% !important; */
    top: 8px !important;
    left: 43px;
    width: 85% !important;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    display: inline-block !important;
}



#btnStop_satellite{
  display:inline-block;
  margin: 8px;
}


#wid-satellite-weather-image .list-group-lower-block{
  position:relative;
}



#multiLangPanel{
/*    top: 10% !important;*/
    left: unset !important;
    right: 11.33333% !important;

}




#tcPanel_link_gis, #tcPanel_link_gis2{
    display: inline-block;
    text-align: center;
    padding: 7px 10px;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    background-color: #e2615c;
    border-radius: 10em;
    vertical-align: top;
}




#wid-tc-track .list-group-lower-block{
  margin:5px 21px;

}



#wid-satellite-weather-image .fa,
#wid-radar-img .fa
 {
    font-size: 20px;
    top: 10px;
    position: absolute;
    left: 13px;
}



#setting-panel-center-part h5{
  margin-top: 0;
  font-size: initial;
  display: inline-block;
}



#footer{
/*    position: fixed;
    bottom: 0;*/
    background-color: #3f3f3f;
    color:#FFF;
    width: 100%;
/*    z-index: 999;*/
    min-height: 250px;
    position: absolute;
    left: 0 ;
    bottom:0px;
/*    margin-top:500px;*/
}



#footer .inner-wrapper{
padding:2% 8%;
}

#footer .inner-wrapper a {
      margin: 0 5px 2px 0;
      color: #fff;
}

.footerArea .subFooterMenu ul.menuLv1 {
    margin-top: 10px;
    padding: 15px 10px;
}


.footerArea .listStyleBlank  {
    background-color: #494949;
    list-style-type: none;
    padding:10px;
    font-size: 1em;
}

.footerArea .listStyleBlank li {
    margin: 0 0 10px 0;
}


.sidebar-d .panel-wrapper{
height: 100vh;
padding-bottom: 200px;

}

#wid-tc-track.col-lg-7{
  width:66.6%;
}


/*Medium Desktop*/
@media(max-width:1415px){


#wid-web-clock .chinese_calendar_part{
  padding:0 !important;
}


#wid-nine-day .dayy{
  width:unset !important;
  max-width:150px;
  min-width: 120px;
}

.weather-report-content-container .location, .weather-report-content-container .wind_direction, .weather-report-content-container .weather_info {
    font-size: 20px;
}

.weather_info .temp, .weather_info .rh {
    font-size: 60px;
}

}


/* Exceptional case*/
@media(max-width:990px){




#multiLangPanel{
  width:100% !important;
  top:unset !important;
  right:unset !important;
  height:100% !important;
}

.arrow-up {
display:none !important;
}

.txt-header{
    padding-top: 100px;
}

#shared-lists{
  padding-right:0 !important;
  padding-left:0 !important;
}

#wid-tc-track.col-lg-7 {
    width: 100%;
}

#wid-nine-day{
   padding-left:0 !important;
}


#wid-weather-report{
  padding-left:0 !important;
  padding-right:0 !important;
}


}

@media(max-width:1199px){
  #wid-tc-track.col-lg-7{
    width:100%;
  }

  #wid-tc-track .tc-cnt img {
    width: 100%;
    height:initial;
  }

  #wid-nine-day-flexi .dayy{ 
  /* width: auto; */
  min-width: 100px;
  width: 150px;
  }

}

/*Tablet*/
@media(max-width:1025px){

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




#wid-weather-report .weather_icon {
    width: 108px;
}


#wid-nine-day .dayy{
 width:8.6vw;
/*  width:unset !important;*/
  max-width:150px;
  min-width: 120px;

}


.widget-container{
  padding-left:10%;
/*  padding-top: 85px;*/
}



#wid-col-left .list-group-item {
margin: unset;
    margin: 10px 2px;
}

#wid-col-center .list-group-item {
margin: unset;
    margin: 10px 2px;
}

#wid-col-right .list-group-item {
margin: unset;
    margin: 10px 2px;
}

#wid-col-right-2 .list-group-item {
margin: unset;
    margin: 10px 2px;
}

#wid-col-right-3 .list-group-item {
margin: unset;
    margin: 10px 2px;
}


#wid-col-left .list-group-item{
    margin-right: 0px;
    margin-left: 0px;
}


#wid-col-center .list-group-item{
    margin-right: 0px;
    margin-left: 0px;
}

#wid-col-right .list-group-item {
    margin-right: 0px;
    margin-left: 0px;
}

#wid-col-right-2 .list-group-item {
    margin-right: 0px;
    margin-left: 0px;
}



#footer{
    /*min-height: 800px;*/
}

}










/*Mobile*/

.sidebar-m{
    position: fixed;
    margin-top: 101px;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: auto;
    min-height: unset;
    left: 0;
    background-color: #FFF;
    border: 1px solid #666;
}



.sidebar-m .inner-wrapper{
position:relative;
}


.sidebar-m .ctl-down-sidebar{
position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 12.5%;
    text-align: center;
    border-left: 1px solid #666;
}

.sidebar-m .icon-display-down-sidebar{
  padding: 2vw 0;
}

.sidebar-m .panel-wrapper{
border-top: 1px solid #666;
height: 100vh;
padding-bottom: 200px;

}


@media(max-width:769px){

#wid-weather-report .weather-report-content-container{
  height: unset !important;
}
#wid-special-news .left-block {
    padding-top: 5px;
}

#wid-special-news .right-block {
    padding: 10px 50px 0 0;
    text-align: right;
}

#notePanel{
  width:100% !important;
}


  .tc-track-switch .btn {
    margin:5px 0;
  }


body{
  font-size: 14px;
}

#wid-special-news .special-news-icon{
  width:32px;
}

#wid-nine-day .widget-desc {
  height:initial;
}



#wid-weather-report {
    padding-right: 0!important;
}


#wid-nine-day .widget-desc{
  font-size: 14pt;
}


.sidebar {
width: 100%;
}


.sidebar-m .icon-display-down-sidebar{
  padding: 25px 0;
}

.navbar .icon-cmp {
   padding-left: unset;
}

.widget-container{
  padding-left:unset;
  padding-right:unset;
}

.widget-container .txt-header{
margin-left: 10px;
}


.navbar .desktop-menu-wrapper {
  padding-right: 2.5%;
}


#widget-container{
padding-left: unset !important;
}

#settingPanel{
  width:initial !important;
}


.sidebar-d{
  display:none;
}

.sidebar-m{
 width:100% !important;
}

#wid-col-right,
#wid-col-left,
#wid-col-center,
#wid-col-right-2,
#wid-col-right-3
{
  width:100% !important;
}


#wid-col-right{
     /* margin-bottom: 200px !important;*/
}


.setting-panel-btns{
  padding:0 2% !important;
}




#footer{
    min-height: 300px;
}


}




@media (min-width: 1679px)
{
    .col-xg-2-2{
        display:block !important;
        width: 19.99999%;
        position: relative;
        min-height: 1px;
    }

     .col-xg-4-4{
        display:block !important;
        width: 39.99999%;
        position: relative;
        min-height: 1px;
    }
}




@media(max-width:385px){

  .icon-cmp img {
    max-width: 290px;
  }

  .navbar .desktop-menu-wrapper {
    padding-top: 52px;
  }

}