/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
  padding: 0 15px;
}

.icon-block .material-icons {
	font-size: inherit;
}
nav {
  color: #000;
}

nav .brand-logo {
  color: #000;

}

nav a {
  color: #000;
}

nav ul a {
  color: #000;
}

html {
  font-family: Roboto, sans-serif; 
  font-weight: 300; 
}
nav .brand-logo {
  position: absolute;
  color: #000;
  display: inline-block;
  font-size: 1.8rem;
  padding: 0;
}

nav .brand-logo.center {
  padding: 0;
  -webkit-transform: none;
          transform: none;
}

@media only screen and (max-width: 992px) {
  nav .brand-logo.left, nav .brand-logo.right {
    padding: 0;
    -webkit-transform: none;
            transform: none;
  }
  nav .brand-logo.left, nav .brand-logo.right {
    left: 0.5rem;
  }
}

/* */
.time {
    opacity: 1;
}
.date {
    font-size: 2vw;
}
.timeActive {
    opacity: 1;
    transition: opacity 1s linear;
}
.data {
    opacity: 1;
}
.dataActive {
    opacity: 1;
    transition: opacity .5s linear;
}
.visibleDIV {
  opacity: 1;
  transition: opacity .5s linear;
}
.hiddenDIV {
  opacity: 0;
  transition: opacity .5s linear;
}
.Detailtime {
    opacity: 1;
}
.Detaildate {
    font-size: 1.4vw;
}
.DetailtimeActive {
    opacity: 1;
    transition: opacity 1s linear;
}
.Detaildata {
    opacity: 1;
}
.DetaildataActive {
    opacity: 1;
    transition: opacity 1s linear;
}

.riverGradient {
    background-color: #e3e3e3;
}

table {
    border-collapse: collapse;
}

td {
    border: solid 1px black;;
    border-collapse: collapse;
}

.tdText {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 1.4vw;
}
.feature.map {
    height:100%;
    iframe {
        height:100%;
        width:100%;
        border:0;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
        -webkit-backface-visibility: hidden;  /* Fix for transition flickering */
      }
  }
.riverName {
    font-family: Roboto, sans-serif; 
    font-weight: 400; 
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: 0.80vw; 
    color: #333; 
    text-align: center;
    position: absolute; 
    width: 100%; 
    top: 39%; 
    left: 0; 
    z-index: 104;
    opacity: 1;
    Xtransition: opacity 0.5s linear;
}

.riverName2 {
    font-family: Roboto, sans-serif; 
    font-weight: 500; 
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: 1.7vw; 
    color: #666; 
    text-align: center;
    position: absolute; 
    width: 100%; 
    top: 39%; 
    left: 0; 
    z-index: 104;
    opacity: 1;
    Xtransition: opacity 0.5s linear;
}

.riverNameWhite {
    font-family: Roboto, sans-serif; 
    font-weight: 300; 
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: 0.65vw; 
    color: #ffffff; 
    text-align: center;
    position: absolute; 
    width: 100%; 
    top: 39%; 
    left: 0; 
    z-index: 104;
    opacity: 1;
    Xtransition: opacity 0.5s linear;
}

.riverNameWhiteM {
    font-family: Roboto, sans-serif; 
    font-weight: 300; 
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: 1.5vw; 
    color: #ffffff; 
    text-align: center;
    position: absolute; 
    width: 100%; 
    top: 39%; 
    left: 0; 
    z-index: 104;
    opacity: 1;
    Xtransition: opacity 0.5s linear;
}
.riverNameActive {
    opacity: 1;
    Xtransition: opacity 0.5s linear;
}
  .riverGradient {
  background-color: #e3e3e3;
}
.tdText {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 1.3vw;
}
.clock {
    position: relative; 
    width: 100%; 
    cursor: pointer; 
    overflow: hidden; 
}
.clockDial {
    position: absolute; 
    width: 100%; 
    top: 0px; 
    left: 0; 
}
table {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}
td.c {
    margin: 0;
    padding: 0;
    border: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: 1vw;
    border-collapse: collapse;
}
td.d {
    margin: 0;
    padding: 0;
    border: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    border-collapse: collapse;
}
td.b {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}
td.a {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 2vw;
    border-collapse: collapse;
}
td.bM {
    margin: 0;
    padding: 0;
    padding-left: 6vw;
    padding-right: 6vw;
    border: 0;
    border-collapse: collapse;
}
td.cM {
    margin: 0;
    padding: 0;
    padding-left: 6vw;
    padding-right: 6vw;
    border: 0;
    border-collapse: collapse;
}td.dM {
    margin: 0;
    padding: 0;
    padding-left: 6vw;
    padding-right: 6vw;
    border: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    border-collapse: collapse;
}
td.dayDateM {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 3.9vw;
    line-height: 10vw;
    border-collapse: collapse;
    font-family: Roboto, sans-serif; 
    font-weight: 100; 
    font-style: normal; 
    letter-spacing: 0.1em;
    padding-top: 0.5vw;
    color: black;
} 
.clockM {
    position: relative; 
    width: 100%; 
    cursor: pointer; 
    overflow: hidden; 
    border: 0;
}
td.dayDate {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 2vw;
    line-height: 1vw;
    border-collapse: collapse;
    font-family: Roboto, sans-serif; 
    font-weight: 100; 
    font-style: normal; 
    letter-spacing: 0.1em;
} 
.mega {
    min-width: 160px !important;
} 

.dropdown-content li {
    clear: both;
    color: #000;
    cursor: pointer;
    min-height: 50px;
    line-height: 1.5rem;
    font-weight: 400;
    width: 100%;
    text-align: left;
  }
  .dropdown-content li > a, .dropdown-content li > span {
    font-size: 16px;
    color: #000;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
  }
  