@font-face {
  font-family: 'myFont';
  src: url('../fonts/yasashisa.woff');
  //src: url('../fonts/yasashisa.eot');
  //src: url('../fonts/yasashisa.ttf');
  //src: url('../fonts/yasashisa.svg');
}

body {
  padding-top: 50px;
  height:100%;
  font-family: 'myFont';
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

html,body{
    height:100%;
    background-color: #e1e1e1;

    background-image: url('../img/COLOURlovers.com-patternp56.png');
    background-attachment: fixed;

}

body{
    padding-top:50px; /*padding for navbar*/
}

.navbar-custom .icon-bar {
  background-color:#fff;
}

.navbar-custom {
  background-color: #78c0e7;
  color:#fff;
  border-bottom: 2px solid #1e93c1;
}

.navbar-custom li>a:hover,.navbar-custom li>a:focus {
  background-color:#49bfff;
}

.navbar-custom a{
    color:#fefefe;
}

.navbar-custom .form-control:focus {
  border-color: #78c0e7;
  outline: 0;
  -webkit-box-shadow: inset 0 0 0;
  box-shadow: inset 0 0 0;
}

#main, .row {
  height: 100%;
  background: url('../img/back_padding.gif');
  background-repeat: repeat-x;
  background-position: 0px 50px;
}

.row {
  background-color: #ffffff;
  overflow: hidden;

  min-height: 100%;
  height: auto;
  margin-top: 0px;
  
  //font-size: 9px;
}

#left {
  height:100%;
}


#map {
  position:relative;
  right: 0px;
  bottom:0px;
  overflow:hidden;
  padding: 5px;
  margin-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border: 5px solid #2d75a8;
  z-index: 0;
}

.areamap {
  position: absolute;
  left: -5px;
  top: -5px;
  border: 5px solid #2d75a8;
  z-index: 1000;
  display: visible;
}

.areamap_hidden {
  display: none;
}

.imageLine,  #film_roll {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 50%;
}

.graphLine {
  overflow-x: auto;
  overflow-y: hidden;

  height: 50%;
 
}


table {
  table-layout: fixed;
  word-wrap: normal;
  //white-space: nowrap;
}

.title {
  border-top: solid 2px #fcf8f0;
  border-left: solid 2px #fcf8f0;
  border-right: solid 2px #e98d3f;
  border-bottom: solid 4px #e98d3f;

  text-align: center;
  background-color: #faf9ce;
  margin: 0px;
  position: relative;

}

.pagetop {
  position: fixed;
  right: 5px;
  bottom: 5px;
}

.areaTitleLine {
  border-bottom: solid 4px #0099CC;
  position: relative;
  top: 0px;
  width: 100%;
  margin-bottom: 5px;
  margin-top: -5px;
}

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

.graphItem {
  height: 100%;
  min-height: 100%;
  overflow-y: hidden;
}

.infoWin {
  font-family: 'myFont';
}
.area_view_chg_btn {
  position: absolute;
  left: -2px;
  top: -2px;
  border: 2px solid #2d75a8;
  width: 96px;
  height: 32px;
  background-color: #CCFFFF;
  z-index: 1001;
  font-family: 'myFont';
  color : #000000;
  font-size: 10px;
  -webkit-appearance: none;
}

.areabtn {
  background-color: #00BFFF;
  font-family: 'myFont';
  text-align: center;
  font-size: 12px;
  width: 80px;
  height: 24px;
  color : #FFFFFF;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px;
}

.areabtnActive {
  //border-color: #FFFF00;
  background-color: #0080FF;
  top: 3px;
}


.areabtnleft {
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 769px) {
  .nav-tabs > li > a,
  .nav-tabs > li > a:hover,
  .nav-tabs > li > a:focus {
    cursor: pointer;
    background-color: #BDBDBD;
    width: 120px;
    text-align: center;
    font-size: 14px;
  }
  .mainteTitle {
    font-size: 32px;
  }
  .mainteInfo {
    font-size: 16px;
  }
  .area_view_chg_btn {
    display: none;
  }
  .areabtn {
    font-size: 12px;
    width: 80px;
    height: 24px;
  }
  .pagetop {
    display: none;
  }
}

@media screen and (min-width: 321px) and (max-width: 768px){
  .nav-tabs > li > a,
  .nav-tabs > li > a:hover,
  .nav-tabs > li > a:focus {
    cursor: pointer;
    background-color: #BDBDBD;
    width: 80px;
    text-align: center;
    font-size: 9px;
  }
  .infoWin {
    font-size: 10px;
  }
  .graphTitle {
    font-size: 12px;
  }
  .recentDate {
    font-size: 14px;
  }
  .resultInfo {
    font-size: 10px;
  }
  .row {
    font-size: 10px;
  }
  .mainteTitle {
    font-size: 24px;
  }
  .mainteInfo {
    font-size: 12px;
  }
  .area_view_chg_btn {
    display: visible;
  }
  .areabtn {
    font-size: 10px;
    width: 64px;
    height: 24px;
  }
  .pagetop {
    display: visible;
  }
}

@media screen and (max-width: 320px) {
  .nav-tabs > li > a,
  .nav-tabs > li > a:hover,
  .nav-tabs > li > a:focus {
    cursor: pointer;
    background-color: #BDBDBD;
    width: 72px;
    text-align: center;
    font-size: 7px;
  }
  .infoWin {
    font-size: 8px;
  }
  .graphTitle {
    font-size: 11px;
  }
  .recentDate {
    font-size: 12px;
  }
  .resultInfo {
    font-size: 7px;
  }
  .row {
    font-size: 7px;
  }
  .mainteTitle {
    font-size: 16px;
  }
  .mainteInfo {
    font-size: 8px;
  }
  .area_view_chg_btn {
    display: visible;
  }
  .areabtn {
    font-size: 7px;
    width: 50px;
    height: 24px;
  }
  .pagetop {
    display: visible;
  }
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  cursor: pointer;
  background-color: #ffffff;
  text-align: center;
}



.panel-heading {
  background-color: #faf9ce;
}

.panel {
  border: 2px solid #2d75a8;
}



.table_wrapper
{
  margin: 10px;
}



thead tr
{
  background-color: #faf9ce;
}


.example {
  background-color: white;
  border: 1px solid #BDBDBD;
}


.gm-style-iw{
    white-space: nowrap;
}

#recentInfo {
  height: 100%;
  margin-top: 35px;
  margin-right: 15px;

}

#jqPlot {
  width: 100%;
  margin-left: 15px;
  height: 100%;
}

.jqplot-table-legend-label {
  font-family: 'myFont';
}

.jqplot-title {
  font-family: 'myFont';
}

.jqplot-axis {
  font-family: 'myFont';
}

.thumbnail_img {
  margin-bottom: 0px;
}

.thumbnail_date {
  margin-top: 2px;
  margin-bottom: 0px;
  text-align: left;
}