html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-size: .875rem;
}

.fullheight {
  height: 100%;
}
.navbar{
  padding: .5rem;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}
.main{
  background-color: #ffffff;
  position: relative;
  height: 100%;
}
.navbar-dark .navbar-brand {
  color: yellow;
}
/*
 * Sidebar
 */

.app-sidebar{
  width: 300px;
  padding-top: 0;
  color: #3c4b64;
  background-color: #3c4b64;
}
a.navbar-brand{
  margin-left: 0!important;
}
.app-header__logo{
  background-color: transparent;
  width: initial;
  margin-bottom: 0;
  margin-top: 8px;
}

.opener{
  line-height: 3;
  position: absolute;
  background: whitesmoke;
  width: 26px;
  height: 200px;
  top:0;
  bottom:0;
  left:0;
  margin: auto;
  z-index: 100000;
  border-radius: 0 10px 10px 0;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.opener span{
  line-height: 190px;
  text-align: center;
  display: block;
}

.sidenav-toggled .opener .fa {
  transform: rotateY(180deg);
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#map{
  position: absolute;
  top:0;
  right:0;
  left: 0;
  bottom: 0;
}

.search-bar{
  margin-left: auto;
  background-color: transparent;
}

.search-from{
  margin-left: auto;
}
.navbar-toggler{
  border: none;
  color: #ffffff!important;
}

.container{
  padding: 15px;
}

.menu-header{
  background-color: #3c4b64;
  color: #fff;
  margin-bottom: 0;
  line-height: 20px;
}
.menu-header:hover{
  background: #3c4b64;
  border-left-color: #3c4b64;
  text-decoration: none;
  color: #fff;
}

hr {
  background-color: whitesmoke;
  border: none;
  display: block;
  height: 2px;
  margin: .5rem 0 1rem 0;
}

.icon{
  margin-bottom: 4px;
}

.checkboxlist{
  list-style-type: none;
  margin-left: 0;
  padding-left: 24px;
}
.nav-link{
  padding: .3rem .8rem;
}
.nav{
  border-radius: 0px;
  background-color: whitesmoke;
}
.nav .active{
  color: #fff;
  background-color: #24408f;
  border-radius: 3px;
}

#tabContent{
  padding: 0 .5rem!important;
}


.pac-container {
  z-index: 1051 !important;
}

@media print{
  #map {
    height: 100vh;
    width: 100vw;
  }
  #map_canvas div > img {
    position: absolute;
  }
  .gm-style div > img {
    position: absolute;
  }
};





#weather-alert {
  display: flex;
  flex-wrap: wrap;
  color: black;
  margin-top: 5px;
  margin-left: -5px;
  margin-right: -5px;
}
#weather-alert > div {
  text-align: center;
  display: inline-block;
  padding: 2px 15px;
  margin: 5px 5px 5px 0;
  font-size: .7rem;
}

.weather-32,
.weather-33,
.weather-35,
.weather-36,
.weather-37,
.weather-38 {
  background-color: #6C008C;
  border: solid 1px #FFFFFF;
  color: #FFFFFF;
}

.weather-32:before{
  content: "暴風雪特別警報";
}
.weather-33:before{
  content: "大雨特別警報";
}
.weather-35:before{
  content: "暴風特別警報";
}
.weather-36:before{
  content: "大雪特別警報";
}
.weather-37:before{
  content: "波浪特別警報";
}
.weather-38:before{
  content: "高潮特別警報";
}


.weather-02,
.weather-03,
.weather-04,
.weather-05,
.weather-06,
.weather-07,
.weather-08 {
  background-color: #FF2800;
  border: solid 1px #FFFFFF;
  color: #FFFFFF;
}
.weather-02:before{
  content: "暴風雪警報";
}
.weather-03:before{
  content: "大雨警報";
}
.weather-04:before{
  content: "洪水警報";
}
.weather-05:before{
  content: "暴風警報";
}
.weather-06:before{
  content: "大雪警報";
}
.weather-07:before{
  content: "波浪警報";
}
.weather-08:before{
  content: "高潮警報";
}


/* 0埋めされているかわからないから二重定義 */
.weather-2,
.weather-3,
.weather-4,
.weather-5,
.weather-6,
.weather-7,
.weather-8 {
  background-color: #FF2800;
  border: solid 1px #FFFFFF;
  color: #FFFFFF;
}
.weather-2:before{
  content: "暴風雪警報";
}
.weather-3:before{
  content: "大雨警報";
}
.weather-4:before{
  content: "洪水警報";
}
.weather-5:before{
  content: "暴風警報";
}
.weather-6:before{
  content: "大雪警報";
}
.weather-7:before{
  content: "波浪警報";
}
.weather-8:before{
  content: "高潮警報";
}

.weather-10,
.weather-12,
.weather-13,
.weather-14,
.weather-15,
.weather-16,
.weather-17,
.weather-18,
.weather-19,
.weather-20,
.weather-21,
.weather-22,
.weather-23,
.weather-24,
.weather-25,
.weather-26,
.weather-27
{
  background-color: #FAF500;
  border: solid 1px #000000;
  color: #000000;
}
.weather-10:before{
  content: "大雨注意報";
}
.weather-12:before{
  content: "大雪注意報";
}
.weather-13:before{
  content: "風雪注意報";
}
.weather-14:before{
  content: "雷注意報";
}
.weather-15:before{
  content: "強風注意報";
}
.weather-16:before{
  content: "波浪注意報";
}
.weather-17:before{
  content: "融雪注意報";
}
.weather-18:before{
  content: "洪水注意報";
}
.weather-19:before{
  content: "高潮注意報";
}
.weather-20:before{
  content: "濃霧注意報";
}
.weather-21:before{
  content: "乾燥注意報";
}
.weather-22:before{
  content: "なだれ注意報";
}
.weather-23:before{
  content: "低温注意報";
}
.weather-24:before{
  content: "霜注意報";
}
.weather-25:before{
  content: "着氷注意報";
}
.weather-26:before{
  content: "着雪注意報";
}
.weather-27:before{
  content: "その他の注意報";
}


.weather-52{
  background-color: #6C008C;
  color: #FFFFFF;
}
.weather-52:before{
  content: "大津波警報";
}
.weather-51{
  background-color: #FF2800;
  color: #FFFFFF;
}
.weather-51:before{
  content: "津波警報";
}
.weather-62{
  background-color: #FAF500;
  color: #000000;
}
.weather-62:before{
  content: "津波注意報";
}
.weather-71{
  background-color: #FAF500;
  color: #000000;
}
.weather-71:before{
  content: "津波予報（若干の海面変動）";
}

#weather-control{
  padding: 10px 15px;
  background-color: #fff;;
}

.icon{
  width: 24px;
  margin-bottom : 0;
  margin-right: 10px;
}

.app-menu__item{
  background-color: #3c4b64!important;
}


.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
.toggle.ios .toggle-handle { border-radius: 20px; }

.custom-switch .custom-control-label::before {
  left: -2.75rem;
  width: 2.75rem;
  height: 1.5rem;
  pointer-events: all;
  top:0;
  border-radius: 0.75rem;
}
.custom-switch .custom-control-label::after {
  top: .25rem;
  left: calc(-2.75rem + 5px);
  width: 1rem;
  height: 1rem;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.25rem);
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #FFF;
  border-color: #27AE60;
  background-color: #27AE60;
}

.layer-control{
  background-color: white;
  text-align: center;
  padding: 10px;
}

.legends{
  list-style-type :none;
  padding-left: 30px;
}
.legends li{
  position: relative;
  text-align: left;
}
.legends li > div{
  width: 20px;
  height: 20px;
  top:5px;
  left: 0;
  position: absolute;
}
.legends li > label{
  margin-bottom : 0;
  margin-left: 30px;
  line-height: 30px;
}

#timesliderSlider{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.chartjs-render-monitor{
  height: 320px!important;
  width: 500px!important;
}

@media (min-width: 768px){
  .main {
    margin-left: 300px;
  }

  .sidenav-toggled .main{
    margin-left: 0px;
  }
}

@media (min-width: 768px){
  .app.sidenav-toggled .app-sidebar {
    left: -300px;
  }
}

@media (max-width: 767px){
  .app .app-sidebar {
    left: -300px;
  }
  .opener .fa {
    transform: rotateY(180deg);
  }
  .sidenav-toggled .opener {
    left : 300px;
    transition: left 0.3s ease, width 0.3s ease;
  }
  .sidenav-toggled .opener .fa {
    transform: rotateY(0deg);
  }


}

#jma-headline{
  text-align: left;
}