@import url(https://fonts.googleapis.com/css?family=Patua+One|Open+Sans);
html, body {
    overflow: hidden;
    font: 11px sans-serif;
    background-color: #ffffff;
    height: 99%;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h3 {
  color: #5d5d5d;
}
h4 {
  color: #5d5d5d;
}
@media screen and (min-width: 950px){
  tbody tr td {
    font-size:9px;
    padding:0px 20px 5px 0px;
  }
  thead th {
    font-size:9px;
    padding:0px 20px 5px 0px;
    }
  #floodVeryHigh{
    overflow: hidden;
    position: absolute;
    right: 0px;
    font-size: 9px;
  }
  #floodVeryLow{
    overflow: hidden;
    position: absolute;
    left: 0px;
    font-size: 9px;
  }
}
tbody tr td {
  font-size:11px;
  padding:0px 20px 5px 0px;
}
thead th {
  font-size:12px;
  padding:0px 20px 5px 0px;
}
.navTabs{
  overflow: hidden;
  background: #dfdfdf;
  width: 70px;
  text-align: left;
  padding: 5px;
  border-radius: 9px 0px 0px 9px;
  font-size: 12px;
  position: absolute;
  right: 0px;
  cursor: pointer;
}
#lawsTab{
  overflow: hidden;
  top:10px;
  background: #afafaf;
  color: #111;
  font-weight: 600;
}
#floodsTab{
  overflow: hidden;
  top:46px;
  color: #777;
}
.floodText{
  overflow: hidden;
  font: 9px sans-serif;
}
  #floodsLegendContainer{
    overflow: hidden;
    position: absolute;
    font: 12px sans-serif;
    font-weight: 600;
    padding-left: 0px;
    bottom: 15px;
    left: 5%;
    text-align: center;
    color: #6a6a6a;
  }
  #floodVeryHigh{
    overflow: hidden;
    position: absolute;
    top: 50px;
    right: 0px;
  }
  #floodVeryLow{
    overflow: hidden;
    position: absolute;
    top: 50px;
    left: 0px;
  }
  .lawText{
    overflow: hidden;
    font: 9px sans-serif;
  }
  #lawsLegendContainer{
    overflow: hidden;
    position: absolute;
    font: 12px sans-serif;
    font-weight: 600;
    padding-left: 0px;
    bottom: 15px;
    right: 5%;
    text-align: center;
    color: #6a6a6a;
  }
  #A{
    position: absolute;
    top: 50px;
    left: 5px;
  }
  #B{
    position: absolute;
    top: 50px;
    left: 65px;
  }
  #C{
    position: absolute;
    top: 50px;
    left: 121px;
  }
  #D{
    position: absolute;
    top: 50px;
    right: 59px;
  }
  #F{
    position: absolute;
    top: 50px;
    right: 10px;
  }
tbody tr td {
  font-size:13px;
  padding:0px 20px 10px 0px;
}
thead th {
  font-size:20px;
  padding:0px 20px 10px 0px;
  }

input[type=range], rangearea {
  outline: none;
  border: none;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}
 
input[type=range]:focus, rangearea:focus {
  outline: none;
  border: none;
}

/* Legend Position Style */
#container{
  overflow: hidden;
  height: auto;
  width: 100%;
}

.axis text {
  font: 10px sans-serif;
}

.axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.newClass{
  opacity: 0.2 !important;
}

.background{
  overflow: hidden;
  fill: none;
  pointer-events: all;
  z-index: -1;
  position: absolute;
  background-color: #fff;
}

.feature {
  fill: #ccc;
  cursor: pointer;
}

.feature.active {
  
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#system_data{
  display: none;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 104%;
  background-color: #37373f; 
  opacity: 0.85;
  overflow: hidden;
}
#system_data_x{
  display: none;
  pointer-events: auto;  
  position: absolute;
  z-index: 2;
  padding: 10px 0px 0px 11px;
  top: 30px;
  right: 50px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.9;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
}
#attribution{
  bottom: 0px;
  font-size: 8px;
  right: 0px;
  position: absolute;
  padding-right: 4px;
  padding-bottom: 0px;
  opacity: .6;
}

/*table styles*/
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

table {
  height: auto;
  width: 80%;
  border-collapse: collapse;
  background:#d9d9d9;
  @include border-radius(5px);
  margin: 0px auto;
  @include box-shadow(0px 0px 5px rgba(0,0,0,0.3));
}

thead {
  @include border-radius(5px);
}

thead th {
  font-family: 'Patua One', sans-serif, Helvetica, Arial;
  font-weight:400;
  color:#ababab;
  @include text-shadow(1px 1px 0px rgba(0,0,0,0.5));
  text-align:center;
  @include background-image(linear-gradient(#646f7f, #4a5564));
  
  &:first-child {
   @include border-top-left-radius(5px); 
  }

  &:last-child {
    @include border-top-right-radius(5px); 
  }
}

tbody tr td {
  font-family: 'Open Sans', sans-serif;
  font-weight:400;
  color:#5f6062;
  /**border-bottom:1px solid #e0e0e0;**/
  
}

tbody tr:nth-child(2n) {
  background:#47474f;
}

tbody tr:last-child td {
  border-bottom:none;
  &:first-child {
    @include border-bottom-left-radius(5px);
  }
  &:last-child {
    @include border-bottom-right-radius(5px);
  }
}

tbody:hover > tr td {
  @include opacity(0.5);
  
  /* uncomment for blur effect */
  /* color:transparent;
  @include text-shadow(0px 0px 2px rgba(0,0,0,0.8));*/
}

tbody:hover > tr:hover td {
  @include text-shadow(none);
  color:#2d2d2d;
  @include opacity(1.0);
}