/*/////////////////////////////////////////////////////////
	ANNUAL REPORT SIDEBAR NAVIGATION MENU
////////////////////////////////////////////////////////*/

#annual-report-nav-wrapper {
    margin: 0;
    padding: 0;
    border-right: 1px solid #656565;
    background-color: #263238;
    box-shadow: 1px -1px 4px -1px rgba(0, 0, 0, 0.2);
}

.region-annual-report-menu ul.menu li {
    background-color: #263238;
    border-bottom: 1px solid #656565;
}

.region-annual-report-menu ul.menu li.active {
    background-color: #2196f3;
}

.region-annual-report-menu ul.menu li.active a.active {
    color: #fff;
    /* background-color: #49c2f1; */
}

.region-annual-report-menu ul.menu li.open a.active,
.region-annual-report-menu ul.menu li.open a:hover,
.region-annual-report-menu ul.menu li.open a:focus {
    color: #fff;
    background-color: #49c2f1;
}

.region-annual-report-menu ul.menu li a:after {
    font-family: "Material Icons";
    content: "chevron_right";
    -webkit-font-feature-settings: "liga";
    position: absolute;
    font-size: 1.35rem;
    right: 5px;
}

.region-annual-report-menu ul.menu li a {
    color: #fff;
    font-size: 1.35rem;
    padding: 15px;
}

.region-annual-report-menu ul.menu li a:hover,
.nav li a:hover,
.region-annual-report-menu ul.menu li a:hover,
.nav li a:focus,
.region-annual-report-menu ul.menu li a:hover,
.nav li a:active {
    background-color: #49c2f1;
    color: #fff;
}

.region-annual-report-menu ul.menu ul.dropdown-menu {
    position: static;
    float: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    padding-left: 30px;
    background-color: #263238;
}

.region-annual-report-menu ul.menu ul.dropdown-menu li,
.region-annual-report-menu ul.menu ul.dropdown-menu li a:hover,
.region-annual-report-menu ul.menu ul.dropdown-menu li a:active,
.region-annual-report-menu ul.menu ul.dropdown-menu li a:focus {
    background: none;
    border: none;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT CONTENT BASE STYLES
////////////////////////////////////////////////////////*/

body {
    background-color: #fff !important;
    color: #263238;
    font-size: 10px;
}

body > div.main-container.container-fluid > div > section {
    padding: 0;
}

body
> div.main-container.container-fluid
> div
> section
> ul.menu.tabs--primary.nav.nav-tabs,
ul.menu.action-links {
    /* display: none; */
}

.page-header {
    margin-top: 25px;
    display: none;
}

.navbar {
    padding: 5px;
}

.navbar-brand {
    font-size: 1.4rem;
}

#navbar-collapse > nav > ul.menu > li > a {
    font-size: 1.2rem;
}

.region-content {
    margin-top: 0;
}

h1 {
    color: #175b7d;
    font-size: 2.8rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 30px;
}

h2 {
    font-size: 2.2rem;
    font-weight: 300;
    margin-top: 30px;
    color: #263238;
}

h3 {
    color: #2196f3;
    font-size: 2rem;
    font-weight: 300;
}

h4 {
    color: #2196f3;
    font-size: 1.6rem;
}

.annual-report-content p,
.annual-report-content div,
.annual-report-content ul,
.annual-report-content ol {
    font-size: 1.4rem;
    line-height: 1.6;
}

.annual-report-content address {
    font-size: 1.2rem;
}

.layout-margin--large {
    margin: 30px;
}

.layout-padding--large {
    padding: 30px;
}

.margin-top--large {
    margin-top: 30px;
}
.margin-left--large {
    margin-left: 30px;
}
.margin-bottom--large {
    margin-bottom: 30px;
}
.margin-right--large {
    margin-right: 30px;
}

.padding-top--large {
    padding-top: 30px;
}
.padding-left--large {
    padding-left: 30px;
}
.padding-bottom--large {
    padding-bottom: 30px;
}
.padding-right--large {
    padding-right: 30px;
}

.margin-top--extra-large {
    margin-top: 60px;
}
.margin-left--extra-large {
    margin-left: 60px;
}
.margin-bottom--extra-large {
    margin-bottom: 60px;
}
.margin-right--extra-large {
    margin-right: 60px;
}

.padding-top--extra-large {
    padding-top: 60px;
}
.padding-left--extra-large {
    padding-left: 60px;
}
.padding-bottom--extra-large {
    padding-bottom: 60px;
}
.padding-right--extra-large {
    padding-right: 60px;
}

.report-year-bar {
    border-bottom: 1px solid #ddd;
}

.report-year-chip {
    background-color: #ddd;
    padding: 8px 12px;
    border-radius: 12px;
    display: inline-block;
}

.report-year-chip-text {
    font-size: 1.2rem;
}

.report-year-bar-text {
    padding-bottom: 5px;
    font-size: 1.4rem;
}

.annual-report-section-fixed {
    height: 100%;
}

.annual-report-fixed-gutter {
    margin-left: -15px;
    padding-left: 15px;
}

.annual-report-sub-navigation a {
    border-radius: 0;
    background-color: #175b7d;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.annual-report-sub-navigation a:hover,
.annual-report-sub-navigation a:focus,
.annual-report-sub-navigation a:target {
    color: #fff;
    opacity: 0.85;
}

.checkbox-list {
    list-style: none;
    padding-left: 15px;
}

.checkbox-list li {
    color: #175b7d;
    font-size: 1.4rem;
    padding: 10px 0;
}

.checkbox-list li i {
    vertical-align: middle;
    margin-right: 10px;
}

.header-logo {
    display: inline-block;
    max-width: 85px;
    margin-right: 15px;
}

.annual-report-content {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
}

.annual-report-content:after {
    display: table;
    content: "";
    clear: both;
}

.annual-report-main-content {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.annual-report-sidebar {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.annual-report-sidebar + .annual-report-sidebar {
    margin-top: 15px;
}

.annual-report-section-header h1 {
    color: #0d47a1;
    font-weight: 300;
}

.annual-report-section-header h4 {
    color: #fff;
}

.annual-report-sidebar-logo {
    padding: 15px;
//border-bottom: 1px solid #DDD;
}

.annual-report-sidebar-text {
    padding: 15px;
}

.useful.menu-links-header {
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 15px;
    margin-top: 0;
    border-bottom: 1px solid #ddd;
}

.useful.menu-links {
    list-style: none;
    padding-left: 0;
}

.useful.menu-links li {
    border-bottom: 1px solid #ddd;
    padding: 8px 15px;
}

.useful.menu-links li:first-child {
    padding-top: 0;
}

.useful.menu-links li:last-child {
    border-bottom: none;
}

.footer {
    margin-top: 0;
}

.annual-report-filters-wrapper {
    background-color: #f1f1f1;
}

.data-nav-section {
    display: none;
}

.help-text {
    color: #888;
}

.annual-report-data-explanation {
    color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.annual-report-data-explanation p {
    font-size: 1.6rem;
    color: #fff;
}

.annual-report-data-explanation h5 {
//text-decoration: underline;
    text-transform: uppercase;
    font-size: 1.6rem;
//font-weight: 300;
}

.first-letter:first-letter {
    float: left;
    font-size: 2.2rem;
    background-color: #fff;
    padding: 5px 10px;
    margin: 0 10px 0 0;
    border-radius: 5px;
}

.first-letter-white:first-letter {
    color: #fff;
}
.first-letter-cyan:first-letter {
    color: #4ac9bc;
}
.first-letter-green:first-letter {
    color: #23b578;
}
.first-letter-purple:first-letter {
    color: #5c6bc0;
}
.first-letter-orange:first-letter {
    color: #fb8c00;
}
.first-letter-slate:first-letter {
    color: #607d8b;
}
.first-letter-red:first-letter {
    color: #f44336;
}
.first-letter-slate:first-letter {
    color: #607d8b;
}
.first-letter-blue:first-letter {
    color: #2196f3;
}
.first-letter-pink:first-letter {
    color: #f06292;
}

.bg-white {
    background-color: #fff;
}
.bg-light-gray {
    background-color: #f5f5f5;
}
.bg-light-black {
    background-color: #555;
}
.bg-black {
    background-color: #222;
}
.bg-cyan {
    background-color: #4ac9bc;
}
.bg-green {
    background-color: #23b578;
}
.bg-purple {
    background-color: #5c6bc0;
}
.bg-orange {
    background-color: #fb8c00;
}
.bg-slate {
    background-color: #607d8b;
}
.bg-blue {
    background-color: #2196f3;
}
.bg-pink {
    background-color: #f06292;
}

button.bg-cyan,
a.bg-cyan {
    border: 1px solid #4ac9bc;
}
button.bg-green,
a.bg-green {
    border: 1px solid #23b578;
}
button.bg-purple,
a.bg-purple {
    border: 1px solid #5c6bc0;
}
button.bg-orange,
a.bg-orange {
    border: 1px solid #fb8c00;
}
button.bg-slate,
a.bg-slate {
    border: 1px solid #607d8b;
}
button.bg-blue,
a.bg-blue {
    border: 1px solid #2196f3;
}
button.bg-pink,
a.bg-pink {
    border: 1px solid #f06292;
}

a.bg-cyan:hover,
a.bg-cyan:active,
a.bg-cyan:focus,
button.bg-cyan:hover,
button.bg-cyan:active,
button.bg-cyan:focus {
    background-color: #43a299;
}

a.bg-green:hover,
a.bg-green:active,
a.bg-green:focus,
button.bg-green:hover,
button.bg-green:active,
button.bg-green:focus {
    background-color: #3ecc90;
    color: #fff;
}

a.bg-purple:hover,
a.bg-purple:active,
a.bg-purple:focus,
button.bg-purple:hover,
button.bg-purple:active,
button.bg-purple:focus {
    background-color: #5c6bc0;
}

a.bg-orange:hover,
a.bg-orange:active,
a.bg-orange:focus,
button.bg-orange:hover,
button.bg-orange:active,
button.bg-orange:focus {
    background-color: #fb8c00;
}

a.bg-slate:hover,
a.bg-slate:active,
a.bg-slate:focus,
button.bg-slate:hover,
button.bg-slate:active,
button.bg-slate:focus {
    background-color: #78909c;
}

a.bg-blue:hover,
a.bg-blue:active,
a.bg-blue:focus,
button.bg-blue:hover,
button.bg-blue:active,
button.bg-blue:focus {
    background-color: #2196f3;
}

a.bg-pink:hover,
a.bg-pink:active,
a.bg-pink:focus,
button.bg-pink:hover,
button.bg-pink:active,
button.bg-pink:focus {
    background-color: #f06292;
}

.text-white {
    color: #fff;
}
.text-cyan {
    color: #4ac9bc;
}
.text-green {
    color: #23b578;
}
.text-purple {
    color: #5c6bc0;
}
.text-orange {
    color: #fb8c00;
}
.text-slate {
    color: #607d8b;
}
.text-blue {
    color: #2196f3;
}
.text-pink {
    color: #f06292;
}
.text-red {
    color: #f44336;
}
.text-yellow {
    color: #ffff00;
}

.graph-title {
    font-size: 2rem;
}

.legend-text {
    margin-right: 8px;
}

.legend-circle {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #222;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 5px;
}

.legend-circle-hollow {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #222;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 5px;
}

.date-filters-submit-btn {
    margin-top: 20px;
    color: #fff;
    border-radius: 5px;
    padding: 8px;
}

.axis-dark line {
    stroke: #fff;
}

.axis-dark path {
    stroke: #fff;
}

.axis-dark text {
    fill: #fff;
}

.storyline-tabber {
    list-style: none;
    padding-left: 0;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.storyline-tab:first-of-type {
    -webkit-border-top-left-radius: 8px;
    -moz-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.storyline-tab {
    display: inline-block;
    padding: 15px;
    margin-right: -5px;
    background-color: #f5f5f5;
    color: #0d47a1;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top-color: transparent;
    cursor: pointer;
}

.storyline-tab:not(:first-of-type):hover,
.storyline-tab:not(:first-of-type):active,
.storyline-tab:not(:first-of-type):focus {
    background-color: #e9e9e9;
}

.storyline-tab-active {
    background-color: #fff;
    border-top-color: transparent;
    color: #0d47a1;
    font-weight: 600;
}

.disclaimer {
    color: #fff;
    position: absolute;
    bottom: 15px;
    padding: 15px;
}

.disclaimer a {
    color: #49c2f1;
}

.disclaimer a:hover,
.disclaimer a:active,
.disclaimer a:focus {
    color: #95d8f2;
}

.footer {
    display: none;
}

.useful-links-list {
    list-style: none;
    padding-left: 15px;
}

.useful-links-list li a i {
    vertical-align: middle;
    margin-right: 5px;
}

.column {
    float: left;
    width: 50%;
    padding: 5px;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT MONITORING REPORT CONTENTS STYLES
////////////////////////////////////////////////////////*/

.annual-report-monitoring-content {
    background-color: #fafafa;
}

.annual-report-monitoring-left-section {
    background-color: #fff;
    border-right: 1px solid #ddd;
    box-shadow: 0 2px 4px -2px rgba(55, 55, 55, 0.2),
    0 4px 5px 0 rgba(55, 55, 55, 0.14), 0 1px 10px 0 rgba(55, 55, 55, 0.12);
    /* height: 100vh; */
}

.annual-report-monitoring-right-section {
    /* background-color: #FAFAFA; */
}

.annual-report-monitoring-sub-section {
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
}

.annual-report-card-title {
    font-size: 1.8rem;
}

.annual-report-card-img {
    margin-left: auto;
    margin-right: auto;
}

.annual-report-card-secondary-title {
    font-size: 1.4rem;
    color: #656565;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT TABLE OF CONTENTS STYLES
////////////////////////////////////////////////////////*/

.ccbwqa-members-list {
    padding-left: 20px;
    font-size: 1.4rem;
}

.ccbwqa-members-list li {
    margin-top: 5px;
}

.toc-list {
    padding-left: 15px;
    margin-left: 15px;
    border-left: 1.5px solid #ddd;
}

.toc-list li {
    margin-bottom: 10px;
}

.toc-list li a {
    color: #848484;
    font-size: 1.4rem;
}

.annual-report-text-highlight {
    background-color: #eefcff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #c2e3ea;
    margin-bottom: 30px;
}

.annual-report-text-highlight-title {
    margin-top: 0;
    font-size: 1.8rem;
    font-weight: 400;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT INTRODUCTION STYLES
////////////////////////////////////////////////////////*/

.annual-report-intro-container h4 {
    color: #0d47a1;
}

.annual-report-intro-container p {
    font-size: 1.6rem;
    line-height: 1.5;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT FUNDING STYLES
////////////////////////////////////////////////////////*/

.funding-legend {
    text-align: center;
}

.funding-legend-item {
    display: inline-block;
    margin: 8px;
}

.funding-legend-rect {
    margin-left: auto;
    margin-right: auto;
}

.funding-legend-text {
    font-size: 1.2rem;
    margin-top: 10px;
    text-transform: capitalize;
}

.timeline-step-shapes {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 10%;
}

.timeline-step-content {
    display: inline-block;
    vertical-align: middle;
    width: 89%;
    max-width: 400px;
}

.timeline-step-content img {
    max-width: 300px;
}

.timeline-step-dot {
    border: 4px solid cornflowerblue;
    height: 45px;
    width: 45px;
    display: inline-block;
    line-height: 35px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    border-radius: 100% !important;
    -webkit-border-radius: 100% !important;
    -moz-border-radius: 100% !important;
    margin-top: -2px;
    text-align: center;
}

.timeline-step-line {
    width: 10px;
    height: 375px;
    background: cornflowerblue;
    margin-left: auto;
    margin-right: auto;
    margin-top: -5px;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT D3 STYLES
////////////////////////////////////////////////////////*/

.d3-line {
    fill: none;
}

.d3-tooltip-card {
    opacity: 0;
    background-color: rgba(20, 20, 20, 0.9);
    color: #fff;
    border-radius: 4px;
    border: 1px solid #444;
    position: absolute;
    margin: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.d3-tooltip-title {
    font-size: 1.45rem;
    margin-bottom: 5px;
}

.d3-tooltip-value {
    font-size: 1.45rem;
    margin-bottom: 5px;
}

.d3-tooltip-legend,
.d3-tooltip-value {
    display: inline-block;
}

.d3-tooltip-legend {
    vertical-align: middle;
    width: 25px;
    height: 4px;
    margin-right: 5px;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT POPULATION STYLES
////////////////////////////////////////////////////////*/

.pop-map-img {
    max-height: 400px;
}

.pop-map-figure-title {
    color: #175b7d;
    font-size: 2rem;
}

.pop-map-legend {
    list-style: none;
    padding-left: 0;
}

.legend-box {
    width: 40px;
    height: 20px;
    vertical-align: middle;
    margin-right: 0.8rem;
    border: 1px solid #858585;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT USGS FLOW GRAPH STYLES
////////////////////////////////////////////////////////*/

.usgs-gages-chips {
    font-size: 1.3rem;
}

.data-nav {
    list-style: none;
    padding-left: 0;
}

.data-nav li {
    color: #aaa;
    padding: 4px;
}

.data-nav li.active {
    color: #43a299;
    font-weight: bold;
}

.data-nav li:hover {
    cursor: pointer;
    color: #43a299;
}

.data-nav-inline li {
    display: inline-block;
}

/* .iframe-wrapper iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
} */

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT Chlorophyll A STYLES
////////////////////////////////////////////////////////*/

.graph-tooltip-section i {
    font-size: 24px;
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: middle;
}

.graph-tooltip-value {
    font-size: 2rem;
    font-weight: 700;
}

.graph-tooltip-date {
    font-size: 1.9rem;
    font-weight: 300;
    color: #555;
    padding-right: 8px;
    border-right: 1px solid #ddd;
}

.grid line {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.graphic-placeholder {
    background-color: #dee3ec;
    width: 100%;
    height: 350px;
}

body
> div.main-container.container-fluid
> div
> section
> ul.menu.tabs--primary.nav.nav-tabs {
    /* display: none; */
}

.action-links {
    /* display: none; */
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT CCR INFLOW GRAPH STYLES
////////////////////////////////////////////////////////*/

.ccr-inflow-graph-tooltip-section i {
    font-size: 24px;
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: middle;
}

.ccr-inflow-graph-tooltip-section .graph-tooltip-value {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
}

.ccr-inflow-graph-tooltip-section .graph-tooltip-date {
    font-size: 1.6rem;
    font-weight: 300;
    color: #555;
    padding-right: 8px;
    border-right: none;
    border-bottom: 1px solid #ddd;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT POPULATION SECTION STYLES
////////////////////////////////////////////////////////*/

.graph-map-legend .legend-group {
    padding: 8px;
}

.graph-map-legend .legend-group .legend-box {
    border: 1px solid #858585;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 20px;
}

.color-class-1 {
    background-color: #ffffd1;
}
.color-class-2 {
    background-color: #fff0ab;
}
.color-class-3 {
    background-color: #ffde81;
}
.color-class-4 {
    background-color: #fd9852;
}
.color-class-5 {
    background-color: #fc5f40;
}
.color-class-6 {
    background-color: #c41b3c;
}
.color-class-7 {
    background-color: #8c183b;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT BOARD STYLES
////////////////////////////////////////////////////////*/
.board-table {
    font-size: 1.3rem;
}

.board-table th {
    background-color: #175b7d;
    color: #fff;
}

.board-table th:nth-child(1),
.board-table td:nth-child(1) {
    width: 10% !important;
}

.board-table th:nth-child(2),
.board-table th:nth-child(3),
.board-table td:nth-child(2),
.board-table td:nth-child(3) {
    width: 45% !important;
}

.board-table .subheader {
    background-color: #444;
    color: #fff;
    font-weight: bold;
}

.board-table .county-seats {
    background-color: #f0f4ff;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
}

.board-table .municipal-seats {
    background-color: #defaff;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
}

.board-table .other-seats {
    background-color: #eaeaea;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT MODEL RESERVOIR STYLES
////////////////////////////////////////////////////////*/
.model-bg-1 {
    width: 100%;
    height: 125px;
    background-color: #08aeea;
    background-image: -webkit-linear-gradient(45deg, #08aeea 0%, #2af598 100%);
    background-image: -moz-linear-gradient(45deg, #08aeea 0%, #2af598 100%);
    background-image: -o-linear-gradient(45deg, #08aeea 0%, #2af598 100%);
    background-image: linear-gradient(45deg, #08aeea 0%, #2af598 100%);
}

.model-bg-2 {
    width: 100%;
    height: 125px;
    background-color: #21d4fd;
    background-image: -webkit-linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
    background-image: -moz-linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
    background-image: -o-linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
    background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
}

.model-bg-3 {
    width: 100%;
    height: 125px;
    background-color: #8ec5fc;
    background-image: -webkit-linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
    background-image: -moz-linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
    background-image: -o-linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
    background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
}

.model-bg-4 {
    width: 100%;
    height: 125px;
    background-color: #fee140;
    background-image: -webkit-linear-gradient(153deg, #fee140 0%, #fa709a 100%);
    background-image: -moz-linear-gradient(153deg, #fee140 0%, #fa709a 100%);
    background-image: -o-linear-gradient(153deg, #fee140 0%, #fa709a 100%);
    background-image: linear-gradient(153deg, #fee140 0%, #fa709a 100%);
}

.model-bg-5 {
    width: 100%;
    height: 125px;
    background-color: #a18cd1;
    background-image: -webkit-linear-gradient(0deg, #a18cd1 0%, #fbc2eb 100%);
    background-image: -moz-linear-gradient(0deg, #a18cd1 0%, #fbc2eb 100%);
    background-image: -o-linear-gradient(0deg, #a18cd1 0%, #fbc2eb 100%);
    background-image: linear-gradient(0deg, #a18cd1 0%, #fbc2eb 100%);
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT INTERACTIVE NOTIFICATIONS STYLES
////////////////////////////////////////////////////////*/

.ar-interactive-notification {
    width: 300px;
    background-color: #263238;
    color: #fff;
    box-shadow: 0 2px 4px -2px rgba(55, 55, 55, 0.2),
    0 4px 5px 0 rgba(55, 55, 55, 0.14), 0 1px 10px 0 rgba(55, 55, 55, 0.12);
    border-radius: 4px;
    position: fixed;
    z-index: 1200;
    right: 45px;
    bottom: 25px;
}

.ar-interactive-notification h3 {
    color: #fff;
    font-weight: 500;
}

.ar-interactive-notification ul {
    padding-left: 15px;
}

.ar-interactive-notification p,
.ar-interactive-notification li {
    font-size: 1.6rem;
    color: #fff;
}

.ar-interactive-notification button {
    color: #252525;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT KEY TAKEAWAYS STYLES
////////////////////////////////////////////////////////*/

.ar-key-takeaways-list {
    list-style: none;
    margin-top: 3rem;
    text-align: right;
    margin-right: 1.5rem;
}

.ar-key-takeaways-list li {
    margin-top: 1rem;
}

.ar-key-takeaways-list li a {
    color: #848484;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 1rem 1rem;
}

.ar-key-takeaways-list li a:hover {
    background-color: #f5f5f6;
    border-radius: 0.4rem;
}

.ar-key-takeaways-list li a.active {
    color: #2196f3;
}

.ar-key-takeaways-text-wrapper h3 {
    font-weight: 400;
}

.ar-key-takeaways-link-title {
    font-size: 1.8rem !important;
    font-weight: 400;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/*/////////////////////////////////////////////////////////
	PRF Activities STYLES
////////////////////////////////////////////////////////*/

.prf-list {
    list-style: none;
    padding-left: 15px;
    margin-top: 15px;
}

.prf-controls {
    display: flex;
    align-items: center;
}

#prf-activities-map {
    height: 600px;
}

#monitoring-program-map {
    width: 100%;
    height: 80vh;
}

.prf-construction-year-controls {
    display: flex;
    align-items: center;
}

#prf-construction-year {
    margin-left: 8px;
    margin-right: 8px;
}

#prf-construction-year {
    display: inline !important;
    -webkit-appearance: none;
    width: 60% !important;
    height: 7.5px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#prf-construction-year::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #5d86ff;
    cursor: pointer;
}

#prf-construction-year::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2196f3;
    cursor: pointer;
}

.prf-map-legend {
    list-style: none;
    padding: 15px;
    margin-bottom: 0;
    background-color: #464646;
    color: #fff;
}

.prf-map-legend span {
    display: inline-block;
}

.prf-map-legend li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.prf-map-legend-point {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0cb03e;
    margin-right: 10px;
}

.prf-map-legend-line {
    width: 20px;
    height: 5px;
    background-color: #17967f;
    margin-right: 10px;
}

.prf-map-legend-polygon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #17967f;
    margin-right: 10px;
}

.prf-map-legend-destrat {
    width: 20px;
    height: 5px;
    background-color: #f2f85e;
    margin-right: 10px;
}

/*/////////////////////////////////////////////////////////
	ANNUAL REPORT PRECIPITATION PAGE STYLES
////////////////////////////////////////////////////////*/

.precip-legend {
    margin: 25px 0 0 0;
    display: block;
    text-align: center;
}

.precip-legend-item {
    display: inline-block;
    margin: 10px;
}

.precip-legend-item-rect {
    display: block;
    margin: 5px auto 5px auto;
    width: 30px;
    height: 15px;
}

.tooltip-card {
    opacity: 0;
    background-color: rgba(20, 20, 20, 0.9);
    color: #fff;
    border-radius: 4px;
    border: 1px solid #444;
    position: absolute;
    margin: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.ts-tooltip-title {
    font-size: 1.45rem;
    margin-bottom: 5px;
}

.ts-tooltip-value {
    font-size: 1.45rem;
    margin-bottom: 5px;
}

.ts-tooltip-legend,
.ts-tooltip-value {
    display: inline-block;
}

.ts-tooltip-legend {
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 5px;
}