* {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

html, body {
	margin: 0px;
	height: 100%;
}

.hidden {
	display: none;
}

header {
	background: #C91A09;
	height: 34px;
	margin: 5px 10px;
	padding: 10px;
	border-radius: 5px;
	display: grid;
	grid-template-columns: 20% 60% 20%;
}

header div, header span {
	font-size: 16px;
	color: white;
}

#title {
	margin: 9px 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#search_container input::placeholder {
	font-size: 12px;
}

#search {
	z-index: 10;
	margin: 6px 0px;
}

#search_container {
	text-align: center;
}

#search_container label {
	font-size: 16px;
}

#search_words {
	width: 355px;
	height: 18px;
	padding: 2px 5px;
	margin: 0px;
	font-size: 14px;
	background: white;
	border-width: thin 0px thin thin;
	border-style: solid;
	border-color: black;
	border-radius: 5px 0px 0px 5px;
}

#search_words:focus {
	outline: none;
}

#search_filter {
    height: 22px;
    width: 32px;
    background: white;
    color: black;
    margin: 0px 0px 1px 0px;
	border-width: thin 0px thin 0px;
	border-style: solid;
	border-color: black;
}

#search_icon {
    height: 22px;
    width: 32px;
    background: white;
    color: black;
    margin: 0px 0px 1px 0px;
	border-width: thin thin thin 0px;
	border-style: solid;
	border-color: black;
    border-radius: 0px 5px 5px 0px;
}

#search_filter:hover, #search_icon {
	cursor: pointer;
}

search_results {
    display: none;
    position: relative;
	margin: 3px;
	padding: 5px;
    width: 500px;
    height: 650px;
    border: 1px solid black;
	border-radius: 5px;
    background: aqua;
	color: black;
}

search_results div {
	width: 490px;
	height: 55px;
	color: black;
	text-align: left;
	padding: 5px;
}

search_results div:hover {
	background: lightblue;
	border-radius: 5px;
}

.search_result_pic {
	width: 50px;
	height: 50px;
	float: left;
	border: 1px solid black;
	border-radius: 5px;
	padding: 3px;
	margin: 0px 10px 0px 0px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search_result_pic:hover {
	background: white;
}

.search_result_pic img {
	max-width: 50px;
	max-height: 50px;
}

.search_result_number, .search_result_name, .search_result_info {
	display: inline-block;
	width: 420px;
	margin: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0px;
}

.search_result_number {
	height: 13px;
	font-size: 11px;
	text-transform: capitalize;
}

.search_result_name {
	height: 16px;
	font-size: 14px;
}

.search_result_info {
	height: 13px;
	font-size: 11px;
	text-transform: capitalize;
}

.menu {
	float: right;
}

.menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

.menu li {
	float: left;
}

.menu li a {
	text-decoration: none;
}

.menu li div {
	display: block;
	color: white;
	text-align: center;
	padding: 0px 16px 2px 16px;
}

.menu li div:hover {
	border-bottom: 2px solid black;
	xcursor: pointer;
}

.menu .active {
	border-bottom: 2px solid black;
}

.container {
	z-index:1;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: opacity 0.3s linear;
}

#sidePanel {
	width: 355px;
	height: 100%;
	background-color: #f9fafa;
	display: none;
	border: 1px solid black;
	border-radius: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: 5px;
}

#sidePanelContainer {
	display: inline-block;
	width: 335px;
	padding: 10px;
}

#openSidePanel:hover, #closeSidePanel:hover {
	cursor: pointer;
}

main {
	flex: 1;
	overflow: hidden;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
}

section {
	height: 100%;
	margin: 0px;
	overflow-y: scroll;
	overflow-x: hidden;
}

sets, parts, spareParts, importParts, minifigs, prints {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

sets.list-view {
	display: grid;
}

group, minifig_header {
	height: 18px;
	width: 100%;
	margin: 20px 0px 0px 5px;
	font-size: 16px;
	font-weight: bold;
}

group span, minifig_header span {
	color: gray;
	font-size: 75%;
}

group.list-view {
	margin: 20px 0px 5px 5px;
}

set {
	width: 214px;
	margin: 5px 5px;
	border-style: solid;
	border-width: thin;
	border-color: LightGray;
	border-radius: 5px;
	text-align: center;
	padding: 5px;
}

set.list-view {
	display: grid;
	grid-template-columns: 400px 100px 400px 60px 60px 375px 50px;
	column-gap: 10px;
	width: auto;
	border-style: none;
	margin: 0px 10px;
	padding: 0px 10px;
	align-items: center;
}

set.list-view:hover {
	background: LightGray;
	cursor: pointer;
}

set.list-view .set_img, .set_part_colors {
	display: none;
}

set.list-view .set_name {
	order: 1;
	width: 400px;
	padding-bottom: 0px;
}

set.list-view .set_name a {
	font-size: 12px;
	font-weight: normal;
}

set.list-view .set_label {
	order: 2;
	width: 100px;
	text-align: center;
	padding-bottom: 0px;
}

set.list-view .set_label .set_quantity {
	display: none;
}

set.list-view .set_path {
	order: 3;
	width: 400px;
	padding-bottom: 0px;
}

set.list-view .set_parts {
	order: 4;
	width: 60px;
	padding-bottom: 0px;
}

set.list-view .set_year {
	order: 5;
	width: 60px;
	padding-bottom: 0px;
}

set.list-view .set_stats {
	order: 6;
	display: inline;
	width: 350px;
	margin: auto;
	padding-bottom: 0px;
}

set.list-view .set_stats div {
	display: inline-block;
	width: 50px;
	text-align: center;
}

set.list-view .action_icons {
	order: 7;
	display: flex;
	margin: auto;
	padding-bottom: 0px;
}

set.list-view .action_icons .set_error {
	display: none;
}

part, sparePart, importPart, minifig, minifigpart {
	width: 126px;
	margin: 4px 4px;
	border-style: solid;
	border-width: thin;
	border-color: LightGray;
	border-radius: 5px;
	text-align: center;
	padding: 4px;
}

set:hover, part:hover, sparePart:hover, importPart:hover, minifig:hover, minifigpart:hover {
	border-color: black;
	border-width: 1px;
}

set img {
	max-width: 180px;
	max-height: 180px;
	margin: 5px 0px;
	padding: 0px 15px;
}

part img, sparePart img, importPart img, minifig img, minifigpart img {
	max-width: 85px;
	max-height: 85px;
	margin: 5px 0px;
	padding: 0px 20px;
}

minifig_seperator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: auto;
}

minifig_seperator div {
	font-size: 30px;
	font-weight: bold;
	color: #C91A09;
}

.grid_label {
	display: inline;
}

.action_icons {
	height: 18px;
}

.plus_sign, .info {
	float: left;
	width: 18px;
	height: 18px;
	padding: 0px 1px;
}

.edit_set, .set_error {
	float: right;
	width: 18px;
	height: 18px;
	padding: 0px 1px;
}

select:hover, input[type=button]:hover, .plus_sign:hover, .info:hover, .edit_set:hover, .set_error:hover, #add_button:hover, #import_button:hover, .set_part_colors div:hover {
	cursor: pointer;
}

#set_size, #part_size {
	float: right;
	height: 16px;
	padding: 0px 2px;
	white-space: nowrap;
}

.set_part_colors {
	display: none;
	position: relative;
	height: 18px;
	text-align: left;
	z-index: 3;
}

.set_part_colors div {
	display: inline-grid;
	min-width: 14px;
	min-height: 14px;
	margin: 1px;
	padding: 1px;
	border: 1px solid black;
	border-radius: 10px;
	font-size: 10px;
	justify-items: center;
	align-items: center;
}

.set_img {
	width: 214px;
	height: 190px;
}

.set_name {
	width: 100%;
	text-align: left;
	white-space: nowrap;
	padding-bottom: 5px;
}

.set_name a {
    font-size: 14px;
	font-weight: bold;
    color: black;
    text-decoration: none;
    display: inline-block;
    width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.set_label {
	float: inline-start;
	width: 60%;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 5px;
}

.set_quantity {
    background: cyan;
    padding: 0px 10px;
    font-weight: bold;
	border-radius: 5px;
}

.set_parts {
	width: 40%;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 5px;
}

.set_path {
	float: inline-start;
	width: 85%;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.set_year {
	width: 15%;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

set .set_stats {
	display: none;
}

.part_color_img {
	width: 126px;
	height: 98px;
}

.part_label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.part_label .part_quantity, .part_label .parts_available, .part_label .parts_to_order, .part_label .minifig_quantity {
    padding: 0px 10px;
    font-weight: bold;
	border-radius: 5px;
}

.part_label .part_quantity {
    background: cyan;
}

.part_label .parts_available {
    background: lime;
}

.part_label .parts_to_order {
    background: red;
}

.part_quantity {
	display: inline-block;
}

.parts_available {
	display: none;
}

.parts_to_order {
	display: none;
}

.part_label .minifig_quantity {
    background: DodgerBlue;
}

footer {
	padding: 4px;
	height: 14px;
	background: lightblue;
}

.disabled {
	pointer-events: none;
	opacity: 0.2;
}

.material-symbols-rounded.ms-18 {
	font-size: 18px;
	height: 18px;
	width: 18px;
    vertical-align: middle;
}

.material-symbols-rounded.ms-24 {
	font-size: 24px;
	height: 24px;
	width: 24px;
    vertical-align: middle;
}

.material-symbols-rounded.ms-36 {
	font-size: 36px;
	height: 36px;
	width: 36px;
    vertical-align: middle;
}

.material-symbols-rounded.ms-48 {
	font-size: 48px;
	height: 48px;
	width: 48px;
    vertical-align: middle;
}

.material-symbols-rounded.ms-dark {
	color: rgba(255, 255, 255, 1);
	font-variation-settings: 'GRAD' -25;
}

.material-symbols-rounded.ms-fill {
	font-variation-settings: 'FILL' 1;
}

.material-symbols-rounded.ms-bold {
	font-weight: 700;
}

.material-symbols-rounded.ms-red {
	color: red;
}

/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 9px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: lightGrey;
	background-clip: content-box;
	border: 2px solid transparent;
	border-radius: 9px;
}

::-webkit-scrollbar-thumb:hover {
	background: darkGrey;
	border: 2px solid #f1f1f1;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
	opacity: 1;
	margin-left: 3px;
}