.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  z-index: 100;
  padding: 40px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  z-index: 99;
}

div.card-links{
  padding: 4px;
  margin-right: 0;
  text-align: right;
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5.5rem;
    padding: 0;
  }
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

@media (min-width: 767.98px) {
  .navbar {
    top: 0;
    position: sticky;
    z-index: 999;
  }
}

.sidebar .nav-link {
  color: #333;
}

.sidebar .nav-link.active {
  color: #0d6efd;
}

.vspacer {
  height:10px;
}

img.titleimg{
  width: 280px;
  height: 40px;
  margin: 0;
}

.warning_block{
  display: inline-block;
  font-size: 1.25rem;
  padding: 2px;
  margin: 2px;
  white-space: nowrap;
}
.caution {
  background-color: rgba(242, 231, 0, .9);
}
.warning {
  background-color: rgba(255, 40, 0, .9);
}
.special {
  background-color: rgba(12, 0, 12, .9);
  color: #fff;
}

div.datestr{font-size: 0.825rem;}
img.wicon_h{width: 2.0rem;}
img.wicon_d{width: 3.0rem;}
img.wdiricon{width: 1.0rem;}
img.wdir00{display: none;}
img.wdir01{transform: rotate(-157.5deg); }
img.wdir02{transform: rotate(-135deg); }
img.wdir03{transform: rotate(-112.5deg); }
img.wdir04{transform: rotate(-90deg); }
img.wdir05{transform: rotate(-67.5deg); }
img.wdir06{transform: rotate(-45deg); }
img.wdir07{transform: rotate(-22.5deg); }
img.wdir08{transform: rotate(0deg); }
img.wdir09{transform: rotate(22.5deg); }
img.wdir10{transform: rotate(45deg); }
img.wdir11{transform: rotate(67.5deg); }
img.wdir12{transform: rotate(90deg); }
img.wdir13{transform: rotate(112.5deg); }
img.wdir14{transform: rotate(135deg); }
img.wdir15{transform: rotate(157.5deg); }
img.wdir16{transform: rotate(180deg); }
img.wdir0{display: none;}
img.wdir1{transform: rotate(-157.5deg); }
img.wdir2{transform: rotate(-135deg); }
img.wdir3{transform: rotate(-112.5deg); }
img.wdir4{transform: rotate(-90deg); }
img.wdir5{transform: rotate(-67.5deg); }
img.wdir6{transform: rotate(-45deg); }
img.wdir7{transform: rotate(-22.5deg); }
img.wdir8{transform: rotate(0deg); }
img.wdir9{transform: rotate(22.5deg); }



th.forecast_title{
  position: sticky;
}
tr.forecast_datetime td, tr.forecast_datetime th{
  vertical-align: bottom;
}
tr.forecast_weather td, tr.forecast_winddir td{
  text-align: center;
}
div.forecast_weather_caption, div.forecast_winddir_caption{
  font-size: 0.85rem;
}
tr.nowtime th, tr.nowtime td{
  background-color: #eef;
}
th.nowtime, td.nowtime{
  background-color: #eef;
}
td.maxtmp{
  color: red;
}
td.mintmp{
  color: blue;
}

/*** current weather ***/
div.current_weather_time{
  font-size: 1.1rem;
}
div.current_weather_info{
  width: 35%;
  float: left;
}
div.current_weather_weather{
  width: 20%;
  display: inline-block;
  float: left;
}
div.current_weather_weather img{
  width: 80%;
}
div.current_camera_image{
  width: 45%;
  display: inline-block;
}
div.current_camera_image img{
  width: 100%;
}

/*** radar ***/
div.radar-index{
  position: relative;
  padding: 0;
  height: 200px;
}
div.radar-index img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#radar-shumb-map {
  z-index: 0;
}
#radar-shumb {
  z-index: 1;
}
#radar-shumb-line {
  z-index: 2;
}

@media (width < 520px) {
  div.radar-index{
    height: 320px;
  }
  div#forecast_hourly td, div#forecast_hourly th{
    font-size: 0.775rem;
  }
  div#forecast_hourly div.datestr{
    font-size: 0.725rem;
  }
  div#forecast_hourly img.wicon_h{
    width: 2.0rem;
  }
}

@media (520px <= width < 768px) {
  div.radar-index{
    height: 520px;
  }
}

#river-chart .ct-series-a .ct-area{
  fill: blue;
}
#river-chart .ct-series-a .ct-line{
  stroke: blue;
}
#river-chart .ct-series-a .ct-point{
  stroke: blue;
}


/* admin */
.table-admin input.ip-edit{
  width:3rem;
}

.table-admin input.ip-headline{
  width:30rem;
}
@media (width < 520px) {
  .table-admin input.ip-headline{
    width:12rem;
  }
}

.table-admin input.ip-limit{
  width:3rem;
}

div.gorilla-dropdown img.image{
  width: 36px;
  height: 24px;
}

div.gorilla-dropdown div.container{
  width: 150px;
}