body
{
	box-sizing: border-box;
}

.pinlist
{
	display: block;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	min-height: 20px;
	background-color: #222222;
	border-top: 1px solid white;
	box-sizing: border-box;
	z-index: 99999;
}

.pinlist .pin
{
	display: block;
	margin: 4px;
	width: 99%;
	background-color: silver;
	border: 1px solid black;
	padding: 5px;
	box-sizing: border-box;
	max-height: 4em;
}

.pinlist .tab
{
	background-color: #222222;
	color: white;
	position: absolute;
	top: -2em;
	height: 2em;
	right: 0em;
	width: 150px;
	padding: 2px;
	text-align: center;
}

.pinlist .col-md-4
{
	padding-left: 5px !important;
	padding-right: 5px;
}

.pinlist .col-md-6
{
	padding-left: 5px !important;
	padding-right: 5px;
}

.pinlist .col-md-12
{
	padding-left: 5px !important;
	padding-right: 5px;
}

.pin .trash
{
	display: block;
	position: absolute;
	right: 45px;
	top: 12px;
	width: 2em;
	height: 2em;
	color: black;
}

.col-md-12 .pin .trash 
{
	right: 50px;
}

.pinlist .row
{
	padding-left: 1em;
	padding-right: 1.2em;
}

.pin .unknown
{
	color: #888888;
}

.pin .value
{	
	font-weight: bold;
	display: block;
	font-size: larger;
	color: black;
}

.pin .name
{
	display: block;
	font-size: small;
}

.pin .colourbox
{
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 15px;
	top: 15%;
	border: 1px solid black;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.col-md-12 .pin .colourbox 
{
	right: 20px;
}

.pin .colourbox .barchart
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;

	position: absolute;
	bottom: 0px;	
	left: 0px;
	right: 0px;
}

.pinlist .tab a
{
	font-size: small;
	color: white;
}

.pin .name a
{
	color: black;
}