:root{
	
	--green-text:114,179,67;
	--lightgreen-text:196,218,171;
	--mediumgreen-text:169,203,135;
	--darkgreen-text:61,104,50;
	
	--grey-text:88,88,88;
	--lightgrey-text:209,211,212;
	--mediumgrey-text:128,130,133;
	
	--black-text:29,31,32;
	--blue-text:39,169,225;
	--purple-text:145,38,143;
	--orange-text:240,90,40;
	--yellow-text:255,221,23;
	--red-text:195,32,32;
	
	--white-text:255,255,255;
	--offwhite-text:244,244,244;
	
	--water-text:		var(--blue-text);
	--engagement-text:	var(--purple-text);
	--energy-text:		var(--yellow-text);
	--electric-text:	var(--yellow-text);
	--gas-text:			var(--red-text);
	--resources-text:	var(--orange-text);
	--waste-text:		var(--orange-text);
	--trash-text:		150, 150, 150;
	--recycling-text:	46, 159, 232;
	--paper-text:		245, 222, 11;
	--cardboard-text:	175, 83, 10;
	--organic_waste-text:	116, 179, 32;
	
	--green:rgb(var(--green-text),1);
	--lightgreen:rgb(var(--lightgreen-text),1);
	--mediumgreen:rgb(var(--mediumgreen-text),1);
	--darkgreen:rgb(var(--darkgreen-text),1);
	
	--grey:rgb(var(--grey-text),1);
	--lightgrey:rgb(var(--lightgrey-text),1);
	--mediumgrey:rgb(var(--mediumgrey-text),1);
	
	
	--black:rgb(var(--black-text),1);
	--blue:rgb(var(--blue-text),1);
	--purple:rgb(var(--purple-text),1);
	--orange:rgb(var(--orange-text),1);
	--yellow:rgb(var(--yellow-text),1);
	--red:rgb(var(--red-text),1);
	--rainbow:linear-gradient(130deg, orange , yellow, green, cyan, blue, violet);
	
	
	--white:rgb(var(--white-text),1);
	--offwhite:rgb(var(--offwhite-text),1);
	
	--water:		rgb(var(--water-text));
	--engagement:	rgb(var(--engagement-text));
	--energy:		rgb(var(--energy-text));
	--electric:		rgb(var(--electric-text));
	--gas:			rgb(var(--gas-text));
	--resources:	rgb(var(--resources-text));
	--waste:		rgb(var(--waste-text));
	--trash:		rgb(var(--trash-text));
	--recycling:	rgb(var(--recycling-text));
	--paper:		rgb(var(--paper-text));
	--cardboard:	rgb(var(--cardboard-text));
	--organic_waste:	rgb(var(--organic_waste-text));
	
	
}


@font-face {font-family:'helvetica-neue'; scr:url('fonts/HelveticaNeue.ttc') format('truetype'); font-weight:normal;}

/*Generated by Font Squirrel (https://www.fontsquirrel.com) on June 14, 2017 */
@font-face { font-family:'brandon_grotesquemedium';	src: url('fonts/brandon_med.woff') format('woff');	font-weight: normal;	font-style: normal;}
@font-face { font-family:'brandon_grotesquebold';	src: url('fonts/brandon_bld.woff') format('woff');	font-weight: normal;	font-style: normal;}


body, a, p, div, li, ul, ol, span, button, input, select, textarea{font-family:"brandon_grotesquemedium", 'Muli', sans-serif; color:inherit; font-size:16px; margin:0px; }
h1{	font-family:"brandon_grotesquebold", 'Muli', sans-serif; font-size:72px; text-transform:uppercase; font-weight:normal; margin:0px; }
h2{	font-family:"brandon_grotesquebold", 'Muli', sans-serif; font-size:50px; text-transform:uppercase; font-weight:normal; margin:0px;}
h3{	font-family:"brandon_grotesquemedium", 'Muli', sans-serif; font-size:35px; font-weight:normal; margin:0px; }
h4{ font-family:"brandon_grotesquemedium", 'Muli', sans-serif; font-size:20px; font-weight:normal; margin:0px;}
.small-font{font-family:"brandon_grotesquemedium", 'Muli', sans-serif; color:inherit; font-size:12px; margin:0px;}

select option{
	color:black;
	background:white;
	padding:5px 10px;
}

*{ position:relative;}
*{ line-height:1.25em;}
[clickable]{cursor:pointer;	}

.link{
	color:var(--green);
	
}

.link:hover{
	cursor:pointer;	
	text-decoration:underline;
}

button{
	background-color:var(--green);
	padding:5px 10px;
	margin:3px;
	/*border-radius:2em;*/
	border:2px solid var(--brightgreen);
	display:inline-block;
	min-width:100px;
	color:white;
	cursor:pointer;
	border-radius:30px;
	text-shadow:0px 0px 1px black;
	font-size:15px;
	min-width: 100px;
    padding-left: 20px;
    padding-right: 20px;
	text-transform:uppercase;
}

button[disabled]{
	background-color:var(--lightgrey);	
	pointer-events:none;
}

button:focus{
	outline:0;	
}

select:focus{
	outline:0;	
}

option:hover{
	background-color:var(--lightgreen);	
}

/* Turn off input arrow buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}


/* Start popUp styling */
.popUpContainer{
	transition:all 1s ease-in-out;
	position:fixed;
	z-index:-1;
	background:linear-gradient(180deg, rgba(0,0,0,0.8), rgba(50,50,50,0.7));
	width:99vw;
	height:100vh;
	bottom:0px;
	left:0px;
	opacity:0;
	/*padding-top:25px;*/
}
.popUpContainer:before{
	content:"";
	display:inline-block;
	width:1px;
	height:100%;
	vertical-align:middle;
}
.popUpContent{
	display:inline-block;
	vertical-align:middle;
	
	transition:all 1s ease-in-out;
	border:2px solid var(--green);
	border-radius:20px;
	background-color:var(--offwhite);
	text-align:center;
	min-height:90vh;
	width:90vw;
	margin-left:3.6vw;
	transform:scale(0);
}
.popUpContent > *{
	padding-top:50px;
	border-radius:20px;
}
.popUpContainer[open], .popUpContainer[open] .popUpContent{
	transform:scale(1);
	opacity:1;
	z-index:9999;
}
#popup_close_button{
	position:absolute;
	top:10px;
	right:20px;
}

.popUpContent[size="business"]{
	width: 80%;
    height: 400px;
    min-height: unset;
}

.popUpContent[size="terms"]{
	 width: 60%;
    height: 250px;
    min-height: unset;
}

.popUpContent[size="user"]{
	 width: 650px;
    height: 400px;
    min-height: unset;
}

.popUpContent[size="challenge"]{
	width: 90%;
    height: 600px;
    min-height: unset;
}

.popUpContent[size="DPL"]{
	width:65%;	
}

.popUpContent[size="points"]{
	text-align: left;
    padding-left: 5%;
    width: 65%;
}

.popUpContent[size="tracking_help"]{
    height: 90vh;
    overflow-y: auto;
}

.popUpContent[size="audit-exempt"]{
   width:60%;
}

.popUpContent[size="audit-exempt"] .close-button{
   display:none;
}

.popUpContent[size="checklist-copy"]{
   width:60%;
}

.popUpContent[size="help"]{
	width:70%;	
}

/* end popUp styling */


.deleteButton{
    background-color: var(--red);
    min-width: auto;
    content: "X";
    padding: 5px;
    color: white;
    width: 25px;
    height: 25px;
    border: 2px solid #a00000;
}

.deleteButton:before{
	content:"X";
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

details summary::-webkit-details-marker {
  display:none;
}
details[open]{
	padding-bottom:1.5em;
}
details[open] > summary:after {
	transform: rotate(45deg);
	margin-left:8px;
}
details > summary:after {
	border: 4px solid black;
	border-radius: 4px;
	border-left: none;
	border-top: none;
	width: 10px;
	height: 10px;
	display: inline-block;
	transform: rotate(-45deg);
	/*margin: 12pt 6px;*/
	content: '';
	/*float: left;*/
	transition: all 0.15s ease-in-out;
	background: transparent;
	/*vertical-align:text-bottom;*/
}
summary{
	cursor:pointer;
	font-size:1.1em;
	margin-bottom:5px;
}

/* Check box styling */

check,.check{
	display:inline-block;
	width:43px;
	height:43px;
	background-image:url(imgs/check_unchecked.png);
	background-repeat:no-repeat;
	background-position:top left;
	cursor:pointer;
	vertical-align:middle;
}
check[checked="true"], .check[checked="true"]{	background-image:url(imgs/check_checked.png);	}
check[disabled="true"], .check[disabled="true"]{	background-image:url(imgs/check_unchecked_disabled.png);	}
check[disabled="true"][checked="true"], .check[disabled="true"][checked="true"]{		background-image:url(imgs/check_checked_disabled.png);	}

check[checked="checked"], .check[checked="checked"]{	background-image:url(imgs/check_checked.png);	}
check[disabled="checked"], .check[disabled="checked"]{	background-image:url(imgs/check_unchecked_disabled.png);	}
check[disabled="checked"][checked="checked"], .check[disabled="checked"][checked="checked"]{		background-image:url(imgs/check_checked_disabled.png);	}	


[hidden]{
	display:none !important;
	overflow: hidden;
	max-height: 1px;
	opacity: 0;
	visibility: hidden;
	max-width: 1px;
	padding: 0px;
	margin: 0px;
	border: none;
	border-width: 0px;
}

p{
	margin-bottom:1em;
}
.template, template, [template]{
	display:none;
}


/* End checkbox styling */