body {
	font-family: Arial, sans-serif;
}

.tabs {
	display: flex;
}

.tab-button {
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	padding: 10px;
	cursor: pointer;
}

.tab-content {
	display: none;
}

.tab-content h2 {
	color: #333;
	display: block; /* Change from inline-block to block to center horizontally */
    text-align: center; /* Center text/content inside the block */
}

.tab-content p {
	color: #666;
}

/*
	The following css will be set up specifically for the artist list and favoriting system.
*/

body {
	display: flex;
	flex-direction: column;
	font-family: Arial, sans-serif;
	margin: 0;
	height: 100vh;
	overflow: hidden;
}


#sortingContainer {
	display: flex;
	flex-direction: column;
}

#sortButton {
	margin-bottom: 5px; /* Adjust the margin as needed */
}

#namesAndImagesContainer {
	display: flex;
	height: calc(100vh - 70px)
}

#namesListContainer {
	flex: 1;
	overflow-y: auto;
	padding: 10px;
	border-right: 1px solid #ccc;
	box-sizing: border-box;
	max-width: 320px; /* Set the desired width */
}

#namesList {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nameItem {
	cursor: pointer;
	padding: 3px;
	transition: background-color 0.3s;
}

.nameItem:hover {
	background-color: #f0f0f0;
}

.flashRed {
	animation: flashRed 0.5s;
}

.favorite-star {
	cursor: pointer;
	margin-right: 5px;
}

.favorite-star.favorited {
	color: gold;
}

@keyframes flashRed {
	0%, 100% {
		background-color: red;
	}
	50% {
		background-color: transparent;
	}
}

#imagesContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	overflow: hidden;
	max-width: calc(100% - 300px);
}

#filterButton {
	margin-bottom: 5px;
}

img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#output {
	margin: 20px auto; /* Center horizontally */
	padding: 10px;
	border: 1px solid #ccc;
	display: block; /* Change from inline-block to block to center horizontally */
	text-align: center; /* Center text/content inside the block */
}

#controls {
	margin: 20px auto; /* Center horizontally */
	margin-top: 20px;
	text-align: center; /* Center text/content inside the block */
}

.button {
	min-width: 130px;
	height: 20px;
	color: #fff;
	padding: 5px 10px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	outline: none;
	border-radius: 5px;
	border: none;
	box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
	background: #212529;
}
.button:hover {
	background-color: #343a40;
}
.button:active {
	top: 2px;
}

#savedCombos {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 99%;
}
.combo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	border: 1px solid #ccc;
	margin-bottom: 10px;
	width: 100%;
}
.gold {
	background-color: gold;
	color: black;
}

#tag-list {
    width: 30%;
    padding: 20px;
    border-right: 1px solid #ccc;
}
#tag-list h2 {
    margin-bottom: 10px;
}
#tag-list ul {
    list-style-type: none;
    padding: 0;
}
#tag-list li {
    margin-bottom: 5px;
}
#add-tag-btn {
    margin-top: 10px;
}
#tag-section {
    flex: 1;
    padding: 20px;
}
#tag-section h2 {
    margin-bottom: 10px;
}
#tag-section .tag {
    margin-right: 10px;
    margin-bottom: 10px;
}
#user-input {
    margin-top: 20px;
    width: 100%;
    padding: 10px;
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
}

#listContainer {
    display: flex;
    flex-direction: column;
    grid-row: 3 / 10;
    grid-column: 1;
}

#UIContainer {
    width: 100%;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / 2;
}

#toolBox {
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: auto auto auto auto auto;
    justify-content: space-between;
    grid-gap: 5px;
}

ul {
    list-style-type: none;
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 100%; /* Set a maximum height for the list */
    margin-top: 0px; /* Adjust the top margin as needed */
    padding-left: 15px; /* Adjust the left padding as needed */
}

#listContainer ul {
    list-style-type: none !important;
}

#listContainer li {
    list-style-type: none; /* Remove list symbols for list items inside #listContainer */
}

button[type="folder"] {
    background-color: #3498db; /* Blue for folders */
}

button[type="group"] {
    background-color: #27ae60; /* Green for groups */
}

button[type="remove"] {
    background-color: #e74c3c; /* Red for remove buttons */
}

button[type="open"] {
    background-color: #f39c12; /* Orange for open buttons */
}

#hoverBox {
    padding: auto;
    grid-row: 3 / 6;
    grid-column: 2 / 10;
    margin: auto;
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
}

#formSection {
    padding: auto;
    grid-row: 7 / 10;
    grid-column: 2 / 10;
    margin: auto;
    text-align: left;
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
}

/* Add any other styles for the hoverBox as needed */