html, body{
    overflow-x: hidden;
}

#navigation-bar {
    background-color: #00529b; 
    padding-bottom: 8px;
    padding-top: 8px;
}

.navbar-brand img{
    width: 500px;
    margin-top: -20px;
}

.navbar{
    margin-bottom: 0px;
}

.space-5{
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #a9a9a9;
}

#icon{
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 20px;
}
#fdacsPopupContent a, #fawnPopupContent a, #weatherSTEMPopupContent a{
    text-decoration: none;
    color: #000000;
}
#fdacsPopupContent .navbar-default, #fawnPopupContent .navbar-default, #weatherSTEMPopupContent .navbar-default{
    background-color: #fafafa;
}

.forecast-icon{
    margin-left: 20px;
    width: 38px;
    height: 38px;
}
.current-icon{
    /*display: inline-block;*/
    margin-left: 0px !important;
    margin-right: 10px !important;
    width: 50px;
    height: 50px;
    float: left;
}

.text-center{
    text-align: center;
}
.new-window{
    font-size: 13px; 
    margin-left: 3px; 
    vertical-align:top;
}
.datepicker {
            z-index: 1600 !important; /* has to be larger than 1050 */
}

.report-type-item, .date-range-item, .measurements-item{
    /*float: left;*/
    text-align: center;
    margin-top: 2px;
    margin-right: 2px;
    cursor: pointer;
}
li.disabled {
    pointer-events: none;
}
li.disabled a:after{
    content: "*";
    color: #0099CC;
}
.asterisk:before{
    content: "*";
    color: #0099CC;
}
ul#current-observation{
    padding-left: 20px;
}
.help-block{
    color: #ec5840 !important;
}
i.form-control-feedback.glyphicon.glyphicon-remove{
    color: #ec5840 !important;
}
i.form-control-feedback.glyphicon.glyphicon-ok{
    color: #3adb76;
}
li.current-observation{
    list-style-type: none; 
    width: 32%;
    padding: 8px 10px 8px 10px;
    margin: 10px 8px 20px 0;
    float: left;
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; 
    line-height: 1.5em;
    font-size: .8em;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
span.current-observation-icon{

    padding-right:5px; 
    font-size:1.14286rem; 
    float:left;
    display: inline-block; 
    align-items:center;
}

img.current-observation-icon{
    
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width:30px; 
    height:30px;
}

.footer{

    padding-bottom: 2rem;
    padding-top:  2rem;
    background-color: #00529b;
    
}
.footer a{
    font-weight: 500;
    color: #fafafa;

}
.footer a:hover{
    color: #a9a9a9;
    cursor: pointer;

}
.footer p{
    margin-bottom: 0;
}
.footer-links{
    padding-left: 0px;
    margin-bottom: 1rem;
}
.footer-links li{
    display: inline-block;

    padding-right: 0.8rem;
    padding-left: 0.8rem;
    border-right:  1px solid #a9a9a9;
    color: #fafafa;
}

.footer-links li:last-child{
    border-right: 0px !important;
}

.row-offcanvas{
    padding-top: 1px;
    height: 1000px;
}

#mapOptions{
    margin-bottom: 0px;
}
#map{
    padding:  0;
    margin: 0;
    height: 1000px;
}

/*List Group Item Blue*/
.list-group-item-blue {
    color:#fff;
    background-color: #0021a5;
    border-color: #428BCA;
}

a.list-group-item-blue {
    color: #fff;
}

a.list-group-item-blue .list-group-item-heading {
    color: inherit;
}

a.list-group-item-blue:hover,
a.list-group-item-blue:focus {
    color: #fff;
    background-color: #001d93;
    border-right: 1px solid #001d93;
    border-top:2px solid #001d93;
}

a.list-group-item-blue.active,
a.list-group-item-blue.active:hover,
a.list-group-item-blue.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #001d93;
    border-color: #001d93;
}

a.list-group-item-blue.active:hover,
a.list-group-item-blue.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #001d93;
    border-right: 1px solid #001d93;
    border-top:2px solid #001d93;
}

/*List Group Item Orange*/
.list-group-item-orange {
    color: #fff;
    background-color: #f56f02;
    border-color: #ff6600;
}

a.list-group-item-orange {
    color: #fff;
}

a.list-group-item-orange .list-group-item-heading{
    color: inherit;
}

a.list-group-item-orange:hover,
a.list-group-item-orange:focus {
    color: #fff;
    background-color: #E65C00;
    border-right:1px solid #E65C00;
    border-top:2px solid #E65C00;
}

a.list-group-item-orange.active,
a.list-group-item-orange.active:hover,
a.list-group-item-orange.active:focus{
    color: #fff;
    text-decoration: none;
    background-color: #E65C00;
    border-color:#E65C00;
}

a.list-group-item-orange.active:hover,
a.list-group-item-orange.active:focus{
    color: #fff;
    text-decoration: none;
    background-color: #E65C00;
    border-right:1px solid #E65C00;
    border-top:2px solid #E65C00;
}

/*List Group Item Green*/
.list-group-item-green {
    color:#fff;
    background-color: #008000;
    border-color: #228b22;
}

a.list-group-item-green {
    color: #fff;
}

a.list-group-item-green .list-group-item-heading {
    color: inherit;
}

a.list-group-item-green:hover,
a.list-group-item-green:focus {
    color: #fff;
    background-color: #006400;
    border-right: 1px solid #006400;
    border-top:2px solid #006400;
}

a.list-group-item-green.active,
a.list-group-item-green.active:hover,
a.list-group-item-green.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #006400;
    border-color: #006400;
}

a.list-group-item-green.active:hover,
a.list-group-item-green.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #006400;
    border-right: 1px solid #006400;
    border-top:2px solid #006400;
}

/*List Group Item Black*/
.list-group-item-black {
    color:#fff;
    background-color: #808080;
    border-color: #a9a9a9;
}

a.list-group-item-black {
    color: #fff;
}

a.list-group-item-black .list-group-item-heading {
    color: inherit;
}

a.list-group-item-black:hover,
a.list-group-item-black:focus {
    color: #fff;
    background-color: #696969;
    border-right: 1px solid #696969;
    border-top:2px solid #696969;
}

a.list-group-item-black.active,
a.list-group-item-black.active:hover,
a.list-group-item-black.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #696969;
    border-color: #696969;
}

a.list-group-item-black.active:hover,
a.list-group-item-black.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #696969;
    border-right: 1px solid #696969;
    border-top:2px solid #696969;
}

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  left: 0%;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  border-radius: 50%;

  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  background-color: #00529b;
  font-size: 20px;
  border: white 1px solid;
}
.icon-bar a i{
    display: block;
}

/*List Group Item Red*/
.list-group-item-pink {
    color:#fff;
    background-color: #b22222;
    border-color: #dc143c;
}

a.list-group-item-pink {
    color: #fff;
}

a.list-group-item-pink .list-group-item-heading {
    color: inherit;
}

a.list-group-item-pink:hover,
a.list-group-item-pink:focus {
    color: #fff;
    background-color: #a52a2a;
    border-right: 1px solid #a52a2a;
    border-top:2px solid #a52a2a;
}

a.list-group-item-pink.active,
a.list-group-item-pink.active:hover,
a.list-group-item-pink.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #a52a2a;
    border-color: #a52a2a;
}

a.list-group-item-pink.active:hover,
a.list-group-item-pink.active:focus {
    color: #fff;
    text-decoration: none;
    background-color: #a52a2a;
    border-right: 1px solid #a52a2a;
    border-top:2px solid #a52a2a;
}

@media screen and (max-width: 425px){

    .navbar-brand img{
        width: 110% !important; 
        margin-top: 0px !important;
        margin-left: -30px !important;
    }

}

@media screen and (max-width: 532px){

    .footer{
        font-size: 10%;
    }

    .navbar-brand img{
        width: 100%;
        margin-top: -10px;
        margin-left: -30px;
    }
}

@media screen and (max-width: 1024px){

    li.current-observation{
        width: 30%;
    }

}
@media screen and (max-width: 768px){

    #current-observation{
        padding-left: 10px;
        font-size: 0.7999999em;
    }
}
@media screen and (max-width: 425px){
    #current-observation{
        font-size: 0.7em;

    }
    li.current-observation{
        width: 29% !important;
    }
}

@media screen and (max-width: 767px){

    .footer{
        font-size: 75%;
    }
    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
    }

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right
    .sidebar-offcanvas {
        right: -60%; /* 6 columns */
    }

    .row-offcanvas-left
    .sidebar-offcanvas {
        left: -60%; /* 6 columns */
    }

    .row-offcanvas-right.active {
        right: 60%; /* 6 columns */
    }

    .row-offcanvas-left.active {
        left: 60%; /* 6 columns */
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 60%; /* 6 columns */
    }
    
}

.temp-legend .legend-title,
.rain-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
}
.temp-legend .legend-scale ul, 
.rain-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
}
.temp-legend .legend-scale ul li,
.rain-legend .legend-scale ul li {
    font-size: 80%;
    list-style: none;
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 2px;
}
.temp-legend ul.legend-labels li span,
.rain-legend ul.legend-labels li span {
    display: block;
    float: left;
    height: 16px;
    width: 30px;
    margin-right: 5px;
    margin-left: 0;
    border: 1px solid #999;
}
.rain-legend .legend-end {
    font-weight: bold;
    font-size: 90%;
    float: left;
    
}
/*IE Only*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .rain-legend .legend-end{
        clear: both;
   }
}