html {
	/* set these manually to fix background images on chrome mobile */
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	background: white no-repeat center center fixed;
	background-size: cover;

	tab-size: 4;
	-moz-tab-size: 4;
}

.card-header {
	background-color: #FEA63C;
	color: white;
	font-size: 16px;
	font-weight: 600;
	vertical-align: middle;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

.start-hidden {
	display: none;
	height: 16px; /* prvents problems with height jumping with jquery show/hide */
}

.list-group-item {
	padding-top: .4rem;
	padding-bottom: .4rem;
}

.card, .btn {
	border: 0px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.list-group {
	min-height: 31px;
}

.dragHandle, .dragGroupHandle {
	cursor: move;
}

.navbar {
	background: transparent !important;
}

pre {
	tab-size: 4;
	-moz-tab-size: 4;
	background-color: rgb(245, 245, 245);
	padding: 10px;
}

/* Move the navbar contents onto the same line as the toggler */
#navbarCollapse {
	margin-top: -2.5rem !important;
	margin-right: 50px;
}

.toggler-bg-dark {
	background: rgba(0, 0, 0, 0.24);
}

.toggler-bg-light {
	background: rgba(255, 255, 255, 0.24);
}

.clickable {
	cursor: pointer;
}

/* set the width of the main container based on element width */
@media (max-width: 34em) {
	#wrapper {
		width: 90%;
	}
}

@media (min-width: 34em) {
	#wrapper {
		width: 60%;
	}
}

/* change the number of columns in card-columns */
@media (min-width: 34em) {
	.card-columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}

@media (min-width: 48em) {
	.card-columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}

@media (min-width: 62em) {
	.card-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media (min-width: 75em) {
	.card-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}