.options-button {
	display: flex;
	align-items: center;

	margin-left: auto;
	padding: 2px 5px;

	background: none;
	border: 0px;
	border-radius: 5px;
}

.options-button:hover {
	background-color: #fff6;
}

.options-button:active {
	background-color: #fffa;
}

.list-row:hover > .options-button > .options-icon,
.list-row-selected > .options-button > .options-icon {
	opacity: 1;
}

.options-icon {
	opacity: 0;
	height: 1rem;
}

#list-container {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;

	border-radius: 10px;
	border: 5px var(--dark-main) solid;
	background-color: var(--light-main);

	margin: 15px 0px;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;

	overflow-x: auto;
}

.name-list {
	padding: 0px;
	margin: 10px;
}

.list-row, .list-row-selected {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
    padding-left: 10px;
	border-radius: 5px;
}

.list-row:hover {
	background-color: var(--dark-main-transparent);
}

.list-row-selected {
	background-color: var(--dark-main);
}

.list-row.highligthed {
	background-color: var(--highlight-yellow-transparent);
}
.list-row-selected.highligthed {
	background-color: var(--highlight-yellow);
}

.empty-list-element {
	opacity: 0.5;
}

.list-text {
    margin-left: 15px;
    margin-right: 15px;
	white-space: nowrap;
}

.list-row.passed > .list-text,
.list-row-selected.passed > .list-text,
.list-row.passed > .list-number,
.list-row-selected.passed > .list-number {
	opacity: .5;
}

.list-number {
    width: 25px;
}