/*  theme.css - the site colours in one place, used by every page.
    Change a colour here and it changes everywhere.
    The colours of the indices themselves (frost blue, heat orange, the legends ...) are left as they are,
    because they carry meaning on the map.                                                                 */

:root {
	--wr-green:        #75bda7;   /* top bar, footer, headers */
	--wr-green-dark:   #195d4e;   /* text on light green, hover */
	--wr-green-mid:    #5aa58e;   /* button hover */
	--wr-green-light:  #e6f3ee;   /* selected tab, form background */
	--wr-text:         #272e29;
}

/* ---------- Top bar and footer (all pages) ---------- */
.topnav, .Footer { background-color: var(--wr-green); }
.Footer .text1 { color: var(--wr-green-dark); }


/* ---------- Map page: sidebar ---------- */
.leaflet-sidebar-header {
	background-color: var(--wr-green);
	color: #fff;
}
.leaflet-sidebar-header a i { color: #fff !important; }          /* the (i) link in the header */
.leaflet-sidebar-tabs > ul > li:hover { background-color: var(--wr-green-light); }
.leaflet-sidebar-tabs > ul > li.active {
	background-color: var(--wr-green);
	color: #fff;
}
.leaflet-sidebar-tabs > ul > li.active img { filter: brightness(0) invert(1); }   /* Evapo icon white on green */


/* ---------- Login, sign-up and password pages ---------- */
.form2 { background-color: var(--wr-green-light); }
.btn button { color: var(--wr-green-dark); }
.btn button:hover { color: var(--wr-text); }
.btn button:focus { border-bottom: 2px solid var(--wr-green-dark); outline: none; }

.formGroup input { border-bottom: 1px solid var(--wr-green); color: var(--wr-text); }
.formGroup input:focus { border-bottom: 2px solid var(--wr-green-dark); color: var(--wr-text); }
::placeholder { color: #5f6f68; }

.btn2 {
	background-color: var(--wr-green-dark);   /* dark green so the white text is easy to read */
	color: #fff;
}
.btn2:hover { background-color: #0f4438; }

.formGroup a, .container_loginpage a { color: var(--wr-green-dark); }
.fa-eye { color: var(--wr-green-dark) !important; }