
.noColumns() {
	column-count         : auto;
	column-fill          : auto;
	column-gap           : normal;
	column-width         : auto;
	-webkit-column-count : auto;
	-moz-column-count    : auto;
	-webkit-column-width : auto;
	-moz-column-width    : auto;
	-webkit-column-gap   : normal;
	-moz-column-gap      : normal;
	height               : auto;
	min-height           : 279.4mm;
	margin               : 20px auto;
	contain              : unset;
}
.listPage {
	.content {
		z-index : 1;
		.page {
			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
			&::after { display : none; }
			.noBrews {
				margin     : 10px 0px;
				font-size  : 1.3em;
				font-style : italic;
			}
			.brewCollection {
				h1:hover { cursor : pointer; }
				.active::before, .inactive::before {
					padding-right : 0.5em;
					font-family   : 'Font Awesome 6 Free';
					font-size     : 0.6cm;
					font-weight   : 900;
				}
				.active { color : var(--HB_Color_HeaderText); }
				.active::before { content : '\f107'; }
				.inactive { color : #707070; }
				.inactive::before { content : '\f105'; }
			}
		}
	}
	.sort-container {
		position              : sticky;
		top                   : 0;
		left                  : 0;
		z-index               : 1;
		display               : flex;
		flex-wrap             : wrap;
		row-gap               : 5px;
		column-gap            : 15px;
		align-items           : baseline;
		justify-content       : center;
		width                 : 100%;
		height                : 30px;
		font-family           : 'Open Sans', sans-serif;
		color                 : white;
		text-align            : center;
		background-color      : #555555;
		border-top            : 1px solid #666666;
		border-bottom         : 1px solid #666666;
		h6 {
			font-family    : 'Open Sans', sans-serif;
			font-size      : 11px;
			font-weight    : bold;
			text-transform : uppercase;
		}
		.sort-option {
			display     : flex;
			align-items : center;
			height      : 100%;
			padding     : 0 8px;
			color       : #CCCCCC;

			&:hover { background-color : #444444; }

			&.active {
				font-weight      : bold;
				color            : #DDDDDD;
				background-color : #333333;

				button {
					height      : 100%;
					font-weight : 800;
					color       : white;
					& + .sortDir { padding-left : 5px; }
				}
			}

		}
		.filter-option {
			margin-left      : 20px;
			font-size        : 11px;
			background-color : transparent !important;
			i { padding-right : 5px; }
		}
		button {
			padding          : 0;
			font-family      : 'Open Sans', sans-serif;
			font-size        : 11px;
			font-weight      : normal;
			color            : #CCCCCC;
			text-transform   : uppercase;
			background-color : transparent;
		}


	}
	.tags-container {
		display            : flex;
		flex-wrap          : wrap;
		row-gap            : 5px;
		column-gap         : 15px;
		align-items        : center;
		justify-content    : center;
		height             : 30px;
		color              : white;
		background-color   : #555555;
		border-top         : 1px solid #666666;
		border-bottom      : 1px solid #666666;
		span {
			padding        : 3px;
			font-family    : 'Open Sans', sans-serif;
			font-size      : 11px;
			font-weight    : bold;
			color          : #DFDFDF;
			cursor         : pointer;
			border         : 1px solid;
			border-radius  : 3px;
			&::before {
				margin-right : 3px;
				font-family  : 'Font Awesome 6 Free';
				font-size    : 12px;
			}
			&::after {
				margin-left : 3px;
				font-family : 'Font Awesome 6 Free';
				font-size   : 12px;
				content     : '\f00d';
			}
			&.type {
				background-color : #008000;
				border-color     : #00A000;
				&::before { content : '\f0ad'; }
			}
			&.group {
				background-color : #505050;
				border-color     : #000000;
				&::before { content : '\f500'; }
			}
			&.meta {
				background-color : #000080;
				border-color     : #0000A0;
				&::before { content : '\f05a'; }
			}
			&.system {
				background-color : #800000;
				border-color     : #A00000;
				&::before { content : '\f518'; }
			}
		}
	}
}
