header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

body {
	font-family: 'Roboto', sans-serif;
	padding: 10vh;
	background-color: #f9f9f9;
	color: #333;
	line-height: 1.6;
}

h2 {
	font-size: 1.5em;
	color: #444;
}

img {
	max-width: 200px;
	max-height: 200px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button {
	color: whitesmoke;
	background-color: #007bff;
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.9em;
	margin: 5px;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: gray;
}

button.active {
	background-color: #28a745;
}

#reset {
	background-color: #dc3545;
	font-weight: bold;
	border: 0.125em solid #b71c1c;
	box-shadow: 0 0 0.625em 0.125em #dc354580;
	letter-spacing: 0.0625em;
	text-transform: uppercase;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

#reset:hover {
	background-color: #b71c1c;
	box-shadow: 0 0 16px 4px #b71c1c80;
}

.product {
	border: 1px solid #ddd;
	padding: 40px;
	margin-bottom: 30px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
}

.product-name a:link,
.product-name a:visited {
    color: black;
    text-decoration: none;
}

.product-name a:hover,
.product-name a:active {
    color: gray;
    text-decoration: underline;
}

.searchBar {
	width: 100%;
	max-width: 400px;
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1em;
}

.includes {
	border: 2px solid green;
}

.excludes {
	border: 2px solid red;
}

.images {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.meta {
	color: #666;
	font-size: 0.9em;
	margin-top: 10px;
}

.selected-count {
	font-weight: bold;
	margin-top: 20px;
	font-size: 1.5em;
}

.product.modified {
	background-color: rgba(255, 193, 7, 0.2);
}

.product.good {
	background-color: rgba(40, 167, 69, 0.2);
}

.good-tag-button {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #28a745;
}

.update-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #ffc107;
	color: black;
}

.tag-all-good-button {
	background-color: #28a745;
}

.untag-all-good-button {
	background-color: #dc3545;
}

.good-visibility-button {
	background-color: #007bff;
}

.update-all-button {
	float: right;
	background-color: #ffc107;
	color: black;
}

.filter-item {
	color: green;
	cursor: pointer;
	font-weight: bold;
}

.filter-item:hover {
	text-decoration: underline;
}

.filter-invert {
	color: red;
}

.product-item {
	cursor: pointer;
}

.product-item:hover {
	text-decoration: underline;
}

.product-item.default-category {
	font-weight: bold;
	text-decoration: underline;
	color: #28a745;
}

.remove {
	cursor: pointer;
	color: red;
	margin-left: 5px;
	text-decoration: none;
	font-weight: bold;
}

.remove:hover {
	text-decoration: underline;
}

#loadingScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.loader {
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;
	display: inline-block;
	border-top: 4px solid #000000b0;
	border-right: 4px solid transparent;
	box-sizing: border-box;
	animation: rotation 1.5s linear infinite;
}

.loader::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;
	border-left: 4px solid #ff3c00b0;
	border-bottom: 4px solid transparent;
	animation: rotation 0.75s linear infinite reverse;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#loadingIndicator {
	text-align: center;
	margin: 20px;
}

.ellipsis-anim::after {
	content: '\00A0\00A0\00A0';
	animation: ellipsis-dot 1.5s steps(4) infinite;
}

@keyframes ellipsis-dot {
	0% {
		content: '\00A0\00A0\00A0';
	}

	25% {
		content: '.\00A0\00A0';
	}

	50% {
		content: '..\00A0';
	}

	75% {
		content: '...';
	}

	100% {
		content: '\00A0\00A0\00A0';
	}
}

#pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.product img {
	margin-bottom: 10px;
}


#configButton {
background-color: #6c757d;
font-weight: bold;
}

#configButton:hover {
background-color: #545b62;
}

#addFeatureAll, #removeFeatureAll {
	margin: 10px 0;
}