card-collection-view {
	display: block;
	min-height: 200px;
	background-color: var(--background-color);
	overflow-y: scroll;
	position: relative;
}

card-collection-view .filter-bar {
	position: sticky;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 49px;
	background-color: var(--foreground-color);
	border-bottom: 1px solid #AAAAAA;
	line-height: 24px;
	padding: 8px;
	box-sizing: border-box;
}

card-collection-view .filter-bar label {
	margin-right: 8px;
}

card-collection-view .filter-bar .add-category-button {
	margin: 3px 0;
	float: right;
}

card-category-view {
	display: block;
	border-bottom: 1px solid var(--border-color);
}

card-category-view .expand-bar {
	padding: 6px;
	background-color: var(--foreground-color);
	font-size: 14px;
	position: relative;
}

card-category-view.dragging-over .expand-bar {
	background-color: var(--active-color);
}

card-category-view:not(.no-results) .expand-bar.expanded {
	box-shadow: var(--card-shadow);
}

card-category-view .expand-bar * {
	vertical-align: middle;
}

card-category-view .expand-bar .expand-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	position: relative;
	margin-right: 0.5em;
}

card-category-view .expand-bar .expand-icon:after {
	content: '▶︎';
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	transition: transform 0.15s;
	transform: rotate(0deg);
	line-height: 22px;
	text-align: center;
}

card-category-view .expand-bar button.options {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -13px;
}

card-category-view:not(.no-results) .expand-bar.expanded .expand-icon:after {
	transform: rotate(90deg);
}

card-category-view.no-results .expand-bar .expand-icon, card-category-view.no-results .expand-bar.expanded .expand-icon:after {
	display: none;
}

card-category-view:not(.no-results) .expand-bar .no-results-label {
	display: none;
}

card-category-view.no-results .expand-bar .no-results-label {
	display: initial;
	font-style: italic;
	opacity: 0.5;
}

card-category-view .expand-bar .icon-label {
	font-size: 1.4rem;
	margin-right: 8px;
	width: 2.3em;
	text-align: right;
}

card-category-view .expand-bar .title-label {
	font-size: 1rem;
	width: 20em;
}

card-category-view .expand-bar input[readonly]:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
	border: none;
	-webkit-appearance: none;
	background: transparent;
	box-shadow: none;
}

card-category-view .cards-container {
	display: none;
	padding: 4px;
}

card-category-view:not(.no-results) .expand-bar.expanded + .cards-container {
	display: block;
}

card-view, .add-card-button, .dummy-card-view {
	width: 140px;
	height: 200px;
	display: inline-block;
	padding: 8px;
	margin: 4px;
	box-sizing: border-box;
	vertical-align: top;
	border-radius: 4px;
}

card-view {
	background-color: var(--foreground-color);
	box-shadow: var(--card-shadow);
	position: relative;
}

card-view.appeared {
	animation-name: card-appear;
	animation-duration: 0.3s;
}

card-view.counting {
	background-color: #88FF99;
}

card-view.hidden-by-filter {
	display: none;
}

/*Fade-in animation for cards*/
@keyframes card-appear {
	from {
		transform: scale(0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

card-view .title-label {
	font-weight: bold;
	font-size: 15px;
}

card-view .description-label {
	font-size: 12px;
	color: #666666;
}

card-view .bottom-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--foreground-color);
	background-clip: padding-box;
	border: 30px solid;
	border-image: linear-gradient(to top, var(--foreground-color), rgba(255, 255, 255, 0)) 100% 30 round;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 0 0 8px 8px;
	padding: 8px;
}

card-view .bottom-container .project-label {
	font-size: 12px;
	width: 100%;
	padding-bottom: 6px;
	border-bottom: 1px solid #666666;
	margin-bottom: 8px;
	display: block;
	line-height: 1;
}

card-view .bottom-container .dotcode-canvas {
	width: 100%;
	display: block;
}

.add-card-button {
	padding: 48px;
}

.add-card-button img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	vertical-align: middle;
	object-fit: contain;
	opacity: 0.15;
	pointer-events: none;
}

.add-card-button:active img {
	opacity: 0.3;
}

card-view.disabled {
	opacity: 0.5;
}

.dummy-card-view {
	display: none;
	border: 1px solid #666666;
}

.dummy-card-view.target {
	border-style: dashed;
}

.dummy-card-view.target, .dummy-card-view.source {
	display: inline-block;
}

popover#add-category-popover .category-icon-field {
	font-size: 24px;
	vertical-align: middle;
	width: 2.5em;
	margin-left: 0.2em;
	margin-right: 0.2em;
	text-align: center;
	box-sizing: border-box;
}

popover#add-category-popover .category-name-field {
	vertical-align: middle;
}