/* The class that holds the container that holds all of the individual column labels */
.header{
	position:fixed;
	width: 100%;
	top:45px;
	left: 0px;
	z-index:3;
	box-shadow: 0px 2px 10px 4px rgba(0,0,0,.25);
	background-color: transparent;
	padding-top: 2px;
}

.bottom + .header{
	top: 0px;
	padding-top: 3px;
}

/* The container for the columns */
.columns{
  color: transparent;
  height:26px;
  font-size:95%;
  width:70%;
	margin-left:15%;
	top: 10px;
  font-family: "Lato-Medium","Segoe UI Semi-Light","Calibri";
	box-sizing: border-box;

	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	-o-user-select: none;
	user-select: none;
}

.column{
	display: inline-block;
	overflow:hidden;
	height:100%;
	box-sizing: border-box;

}

.columnCell:hover{
	transform: scale(1.15, 1.15);
	cursor: pointer;
	display: inline-block;
}

.removeColumn{
	color: #C30;
	font-size: 15px;
	display: inline-block;
}

.removeColumn:hover{
	color: transparent;
	background-color: #C30;
	border-radius:10px;
}

.columnCell{
	width: auto;
	padding-left:2px;
	padding-right:2px;
	box-sizing: border-box;
	border-radius:5px;
	color : #FFF;
  padding-top : 0px;
	font-size:70%;
	color: #FFF !important; /*TODO: Convert to theme color */;
	transition: all ease-in-out .1s;
}