/* variables */
:root{
	--amsBrandBlue:#017ac9;
	--amsBrandBlack:#222;

	--amsColorGreen:#009b45;
	--amsColorYellow:#FFC000;
	--amsColorOrange:#FF801A;
	--amsColorRed:#FF1A27;

	--amsGlobalPadding:10px;
	--amsGlobalRadius:4px;
}

/* data-theme="default" */
div#amsDataFeed[data-theme="default"]{
	background-color:#fff;
	padding:calc(var(--amsGlobalPadding) * 2);
	border-radius:calc(var(--amsGlobalRadius) * 4);
	box-shadow:0 1px 0 rgba(0, 0, 0, 0.025), 0 10px 40px rgba(0, 0, 0, 0.125);
}
div#amsDataFeed[data-theme="default"] select#locationFilter{
	background-color:var(--amsBrandBlue);
	color:#fff;
	width:100%;
	padding:calc(var(--amsGlobalPadding) / 2);
	border:0;
	border-radius:var(--amsGlobalRadius);
}
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul li.data.data-city{
	font-weight:700;
	color:var(--amsBrandBlue);
}
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul li.data.data-timestamp{
	font-size:0.9rem;
	font-style:italic;
}
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul li.data.data-concentration{
	font-size:2rem;
	text-align:center;
}
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul li.data.data-element{
	font-weight:700;
	text-align:center;
}

/* data-theme="default" */
div#amsDataFeed select#locationFilter{
	margin:0 0 var(--amsGlobalPadding) 0;
}

/* .city */
div#amsDataFeed div.region div.city{
	position:relative;
}
div#amsDataFeed div.region div.city.city-benicia{
	display:block;
}
div#amsDataFeed div.region div.city.city-hide{
	display:none;
}
div#amsDataFeed div.region div.city.city-show{
	display:block;
}

/* .reading */
div#amsDataFeed div.region div.city div.reading ul{
	list-style:none;
	padding:0;
	margin:0;
}
div#amsDataFeed div.region div.city div.reading ul li.data label{
	font-weight:700;
	margin:0 calc(var(--amsGlobalPadding) / 2) 0 0;
	display:inline-block;
}
div#amsDataFeed div.region div.city div.reading ul li.data.data-timestamp label{
	margin-right:0;
}

/* .data[data-levelTheme=""] */
div#amsDataFeed div.region div.city div.reading ul[data-data="multi"] li.data[data-level="great"]{
	color:var(--amsColorGreen);
}
div#amsDataFeed div.region div.city div.reading ul[data-data="multi"] li.data[data-level="good"]{
	color:var(--amsColorYellow);
}
div#amsDataFeed div.region div.city div.reading ul[data-data="multi"] li.data[data-level="bad"]{
	color:var(--amsColorOrange);
}
div#amsDataFeed div.region div.city div.reading ul[data-data="multi"] li.data[data-level="dangerous"]{
	color:var(--amsColorRed);
}
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="blue"] li[data-level="great"],
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="blue"] li[data-level="good"],
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="blue"] li[data-level="bad"],
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="blue"] li[data-level="dangerous"]{
	color:var(--amsBrandBlue);
}
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="none"] li[data-level="great"],
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="none"] li[data-level="good"],
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="none"] li[data-level="bad"],
div#amsDataFeed[data-theme="default"] div.region div.city div.reading ul[data-data="none"] li[data-level="dangerous"]{
	color:var(--amsBrandBlack);
}