html, body {height:100%;}
.container{
	width:100%;
	height: 100%;	/*TODO: this should be 100 - height of the nav;*/
	padding: 0px;
    /*overflow: hidden;*/
    /*background-image: url("/static/images/backgroundBlue.9a8ddbe84de7.jpg");*/
}


#leftSection {
    width: 70%;
    float: left;
}

#rightSection {
    width: 30%;
    height: 100%;
    float: right;
    background-image: url("/static/images/backgroundBlue.9a8ddbe84de7.jpg");
    background-size: cover;
}


.topSection {
	height: 33vh;
	position:relative;
}

.googleMap{
	height: 33vh;
	width: 100%;
	display: inline-block;
	background-color: rgb(190, 190, 190);
}


.riverDetails {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: auto;
	z-index: 1;
  	bottom:0;
    pointer-events: none;
}

#leftRiverDetails{
    height: auto;
    float: left;
    overflow: hidden;
}
#rightRiverDetails {
    float: left;
}

#riverNameBackground{
    background-color: rgb(42, 107, 131);
	float: left;
	margin-top: 0px;
	margin-bottom: 0px;
	/*margin-left: 0px;*/
	margin-right: 30px;
    margin-left: 20px;
	padding-right: 12px;
	padding-left: 12px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#riverName{
	color: white;
    margin-top: 5px;
    margin-bottom: 70px;
	pointer-events: all; /*	initial isnt supported on ie 11*/
    pointer-events: initial;
	font-size: 2.4em;
}

#sectionName{
    color: #C3C3C3;
}

.no-entries-message {
	text-align: center;
	font-size:1.3em;
	margin-top: 15px;
}

.riverDetailsItem{
	margin-right: 10px;
	margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    z-index: 1;
}

.clearFloat{
    clear: both;
}

.action-button{
	overflow: hidden;
	width: auto;
	height: auto;
	font-size: large;
	pointer-events: all; /*	initial isnt supported on ie 11*/
    pointer-events: initial;
	min-width: 11em;
}

#add-text{
	width: 100%;
	display: block;
}

#gaugesSelect{
	font-size: medium;
    color: black;
	pointer-events: all; /*	initial isnt supported on ie 11*/
    pointer-events: initial;
}

.reports {
	z-index: 1;
    opacity: 0.9;
    background-color: white;
	height:33vh;
	overflow: hidden;
    overflow-y: scroll;
}

.glyphicon-triangle-right,
.glyphicon-triangle-bottom{
    float: left;
    font-size: smaller;
}

.rating {
	width: 100%;
	margin-left: 34px;
	display: flex;
}

.report-link {
	float: left;
	margin-left: 15px;
	margin-right: 10px;
}

.ui-state-active,
.ui-state-hover,
.ui-state-focus{
    color: rgb(34, 72, 82);
    text-decoration: underline;
}

.citation{
	border-top-style: inset;
}

.citation-link {
    color: #337ab7 !important;
}

.updatedDate {
    margin-left: 12px;
    width: 4em;
	float: left;
	min-height: 1px;
}


.reportsInnerLabel {
	text-align: center;
	color: black;
}

.list-group-item,
.list-group-item:link,
.list-group-item:visited,
.list-group-item:hover,
.list-group-item:first-child
{
    border-style: none;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border: 0px;
    background: transparent;
    margin-bottom: 0;
    text-align: center;
    overflow: hidden;
    font-size: large !important;
}

#submitReportLink {
	margin-bottom: 10px;
	margin-top: 10px;
}

.header{
	border-bottom-style: solid;
    border-bottom: rgb(0,0,0,.80);
    border-bottom-width: 1px;
    overflow: hidden;
    text-align: center;
    display: inline;
}

.bottomSection {
	background-image: url("/static/images/backgroundBlue.9a8ddbe84de7.jpg");
	background-size: 100% 100%;
    padding-bottom: 25px;
	width: 100%;
	height: initial;
	min-height: 100vh;
	display: inline-block;
}

.flies-left-list{
	float: left;
	margin-right: 15%;
}

.waterStats{
  	/*float:left;*/
	height:100%;
	padding-right: 30px;
	padding-left: 30px;
	opacity: 1;
}



.dataSectionLabel {
	/*color: rgb(140, 220, 230);*/
	color: white;
	padding-bottom: 4px;
	border-bottom: 1px;
	border-bottom-color: rgb(140, 220, 230);
	border-bottom-style: solid;
	font-size: 2em;
}

.reportsHeader {
	text-align: center;
	color: black;
}

#reportsHeaderRegular {
	display: block;
}

#reportsHeaderMobile {
	display: none;
}

.dataSection{		
	overflow-x: scroll;
    padding: 15px;
    padding-top: 12px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.78);
}

.sectionName{
	float:right;
}

.locationName{
	float:right;
}

.dataLabel {
	float: left;
	width: 33%;
	text-align: center;
	margin-bottom: 10px;
}

.dataValue {
	margin-top: 0px;
	font-size: 2.2em;
	font-weight: 500;
}

.dataHeader{
	font-size:1.35em;
}

.warning-label-wrapper{
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.inactive-link{
	pointer-events: none;
    cursor: default;
}

#js-flow-graph{
    display: block;
    margin-left: auto;
    margin-right: auto;
	width: 90%;
}

.svg-container{	/*added by the plotly library*/
	display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#flowGraph{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

#usgs-disclaimer{
	position: absolute;
	bottom: 0;
	right: 3px;
	font-size: xx-small;
}

.infoGraph{
	display: block;
	margin-left: auto;
    margin-right: auto;
    min-width: 50%;
    max-width: 100vw;
}

.radioButtons{
	display:block;
	text-align:center;
	font-size: 20px;
	margin-right: 50px;
}

input[type="radio"]{
  margin: 0 0 0 5%;
  width: auto;
  display: inline;
}

.radioWrapper{
    display: initial;
}

.ui-accordion .ui-accordion-content {
    height: auto !important;
    overflow-y: scroll;
}

.flyShops{
	/*background-color: rgba(125, 140, 206, 0.5);*/
	height:66%; /* fallback */
    height: calc(100% - 33vh);
	opacity: 0.6;
    background-color: white;
	overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 25px;
}

.flyShopsHeader {
	text-align: center;
	color: black;
}

#flyShopsHeaderRegular {
	display: block;
    margin-bottom: 0px;

}

#flyShopsHeaderMobile {
	display: none;
}

.accordion-toggle{
	background-color: #f5f5f5;
	width: 100%;
	border-style: solid;
    border: rgb(0,0,0,.80);
    border-width: 1px;
    float: left;
    padding-left: 10px;
    padding: 5px;
    padding-left: 10px;
}

.accordion-heading{
    font-size: medium;
}

.accordion-inner{
    margin-left: 20px;
    font-size: medium;
}

.telephone-link {
	color: #337ab7 !important;
}

.loading-icon{
	font-size: 1.8em;
	margin-top: 40px;
}

/*animated loading icon*/
.glyphicon-refresh-animate {
    -animation: spin .9s infinite linear;
    -ms-animation: spin .9s infinite linear;
    -webkit-animation: spinw .9s infinite linear;
    -moz-animation: spinm .9s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

@-webkit-keyframes spinw {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes spinm {
    from { -moz-transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg);}
}

/* mobile phone */
@media all and (max-width: 768px) {
	.googleMap {
		height: 0px;
		width: 0px;
		display: none;
	}

	#rightSection {
		display: none;
	}

	#leftSection {
		width: 100%;
	}

	.topSection {
		overflow: hidden;
		height: auto;
	}

	.riverDetails {
		width: 100%;
		left: inherit;
		position: inherit;
		z-index: inherit;
		background-color: rgb(42, 107, 131);
	}

	#leftRiverDetails,
	#rightRiverDetails {
		width: 100%;
	}

	.dataSectionLabel {
		padding-left: 10px;
	}

	#riverNameBackground {
		float: none;
		text-align: center;
	}

	.action-button {
		width: 90%;
		display: block;
		margin: 0 auto;
		margin-bottom: 8px;
	}

	.riverDetailsItem {
		width: 90%;
		pointer-events: all; /*	initial isnt supported on ie 11*/
		pointer-events: initial;
		display: block;
		margin: 0 auto;
		margin-bottom: 8px;
	}

	#riverName {
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 2.2em;
	}

	.dataSection {
		padding-left: 5px; 
		padding-right: 5px;
	}

	.reportsHeader {
		color: white;
		text-align: left;
	}

	#reportsHeaderRegular {
		display: none;
	}

	#reportsHeaderMobile {
		display: block;
	}

	.reports
	{
		position: inherit;
		overflow: hidden;
    	opacity: 0.7;
	    width:100%;
	    max-height: 33vh;
		overflow-y: scroll;
	}

	.waterStats {
		width: 100vw;
		/*height: auto;*/
		float: inherit;
		padding: 0px;
	}

    #flowGraph {
        width: 95%;
    }

	.radioWrapper{
		width: 100vw;
		display: block;
	}

	.iframeContainer
	{
		max-width: 100vw;
	    overflow-y: hidden;
	    overflow-x: scroll;
	}

	.flyShops {
    	margin-top: 10px;
		position: inherit;
		overflow: hidden;
    	opacity: 0.7;
	    width:100%;
	    max-height: 33vh;
		overflow-y: scroll;
		margin-bottom: 20px;
	}

	.flyShopsHeader {
		color: white;
		text-align: left;
	}

	#flyShopsHeaderRegular {
		display: none;
	}

	#flyShopsHeaderMobile {
		display: block;
	}
}