/* 1200px or wider */
html {
	font-size: 20px;
}

.smaller {
	font-size: 18px;
}

.smallest {
	font-size: 14px;
}

.larger {
	font-size: 24px;
}

body {
	margin: 0px;
	padding: 0px;
	background: #d0d0d0 url(https://brickarchitect.com/wp-content/uploads/2020/04/studless-background-1.png) repeat center top;
    background-attachment: fixed;
	font-family: 'freight-text-pro', 'Times New Roman', serif;
}

.main, .footer, .inlineresults, footer {
	max-width: 1120px;
	margin: auto;
	margin-bottom: 0px;
	padding: 40px 40px;
	background-color: #fff;
}

.footer, footer {
	margin-top: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
}


.main.fullwidth {
	max-width: 100%;
}

.results {
	padding: 40px 40px;
	background-color: #fff;
    border-bottom: 4px solid #000;
    border-top: 12px solid #ffcd03;
    /* border-top: 10px solid #ffcd03; */
	-webkit-box-shadow: 0px 0px 10px 4px #ccc;
    -moz-box-shadow: 0px 0px 10px 4px #ccc;
}

.resultsheader {
	margin: -40px -40px 0px;
	padding: 10px 40px; 
	background-color: #f4f4f4;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 10px 0px;
}

.resultsheadercount {
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .7rem;
	padding: 5px 0px;
	min-width: 160px;
}

 #pageheader {
	background-color: #ffcd03;
	margin: 0px;
	padding: 0px;
}

#pageheader img {
	/* width: 820px; 
	max-width: 100%; */
	max-width: 1200px;
	width: 100%;
}


@media only screen and (max-width : 455px) {
	.resultsheader {
		flex-direction: column-reverse;
	}
}

/* Under 1200px wide */
@media only screen and (max-width : 1199px) {
	body {
		background: #fff;
	}
	.main, .footer, footer, .inlineresults {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.results {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
	}
}


/* Tablets, small laptops or small browser window - Between 1199px and 660px. */
@media only screen and (max-width : 1199px) and (min-width : 660px){
	#pageheader {
		padding: 0px 30px;
	}
	html {
		font-size: 19px;
	}
	.smaller {
		font-size: 17px;
	}
	.smallest {
		font-size: 13px;
	}
	.larger {
		font-size: 22px;
	}
	.main, .footer, footer, .inlineresults {
		padding: 40px 30px;
	}
	.results {
		padding: 40px 30px;
	}
 }

/* Most Phones - Between 659 and 480px. */
@media only screen and (max-width: 659px) and (min-width : 480px) {
	#pageheader {
		padding: 0px 20px;
	}
	html {
		font-size: 18px;
	}
	.smaller {
		font-size: 16px;
	}
	.smallest {
		font-size: 12px;
	}
	.larger {
		font-size: 21px;
	}
	.main, .footer, footer, .inlineresults {
		padding: 40px 20px;
	}
	.results {
		padding: 40px 20px;
	}
	h1 { font-size: 1.8rem; }
	ul { padding-left: 20px; }
 }

 /* Extremely small screens - Under 480px wide. ex: 2018 iPhone SE */
 @media only screen and (max-width: 479px) {
	#pageheader {
		padding: 0px 10px;
	}
	html {
		font-size: 16px;
	}
	.smaller {
		font-size: 14px;
	}
	.smallest {
		font-size: 11px;
	}
	.larger {
		font-size: 18px;
	}
	.main, .footer, footer, .inlineresults {
		padding: 40px 10px;
	}
	.results {
		padding: 40px 10px;
	}
	h1 { font-size: 1.7rem; }
	ul { padding-left: 20px; }
 }




h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}


.navbar {
	display: flex; 
	flex-direction: row; 
	align-items: center;
}





@media only screen and (min-width : 901px) {
	.navbar .search {
		margin-left: auto;
	}
}

.navbar .chapternav {
	display: inline-block;
}

.navbar .search {
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 20px;
	min-width: 300px;
	
}

@media only screen and (max-width : 1000px) {
	.navbar {
		flex-direction: column;
		align-items: flex-start; 
	}
	.navbar .search {
		margin-left: 0%;
		margin-right: auto;
		margin-top: 0px;
	}
}

.search form {
	border: 1px solid #ccc;
	border-radius: 50px;
	margin-bottom: 0px;
}
.search form:hover {
	border: 1px solid #aaa;
	-webkit-box-shadow: 2px 2px 5px 0px #ccc;
    -moz-box-shadow: 2px 2px 5px 0px #ccc;
    box-shadow: 2px 2px 5px 0px #ccc;
}


.search form .q {
	padding: 7px 12px 5px;
	border: none;
	background: transparent;
	font-size: 0.8rem;
	width: 265px;
}
.search form .q:focus {
	outline: none;
}

.search form .submitbutton {
	border: none;
	background: none;
	font-size: 1.2rem;
	padding: 0px 8px;
	color: #888;
}

/* Larger and centered on results page, on large screens */
.search.resultspage {
	display:inline-block;
	min-width: 230px;
}

@media only screen and (min-width : 660px) {
	.search.resultspage {
		display:inline-block;
		margin: 40px 0px;
	}

	.search.resultspage form .q {
		padding: 7px 18px 8px;
		font-size: 1.2rem;
	}

	.search.resultspage form .submitbutton {
		font-size: 1.8rem;
		padding: 0px 16px;
	}
}


.centerbox {
	width: 100%;
	max-width: 1200px;
	margin: auto
}

.highlight {
	background-color: #ffff88;
	padding: 5px 5px;
}

.chapternav {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 5px 0px;
	margin: 20px 0px;
	line-height: 1.4rem;
}

.chapternav a {
	font-weight: bold;
	text-wrap: nowrap;
}







/*
 * Styling for part results on Category pages
 */

 .parts_results div.indicator {
	width: 13px;
	height: 13px;
	margin: 0px 0px 0px 4px;
	padding: 1px 0.5px 0px;
	color: #fff;
	border-radius: 8px;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	font-size: 8pt;
	vertical-align: top;
 }

.parts_results.scalestyle div.indicator {
	margin-top: 1px;
 }
 
 .parts_results div.indicator.retired {
	background-color: #441A91; /* 268 Medium Lilac because Purple has a historical association with royalty, befitting a retired status */
	-webkit-print-color-adjust: exact; color-adjust: exact;
 }

 .parts_results div.indicator.new {
	color: #000;
	background-color: #ffcd03; /* yellow, based on 1980's catalogues. */
	-webkit-print-color-adjust: exact; color-adjust: exact;
 }
 
 .parts_results div.indicator.hidden {
	background-color: #FD5F84; /* 353 Vibrant is just very bright and stands out. */
	-webkit-print-color-adjust: exact; color-adjust: exact;
 }

div.part_category {
	margin: 40px 0px 20px;
}

h2.partcategoryname, h3.partcategoryname {
	margin: 20px 0px 0px;
}

h2.partcategoryname a, h3.partcategoryname a {
	text-decoration: none;
	color: #000;
}

h2.partcategoryname a:hover, h3.partcategoryname a:hover {
	text-decoration: none;
	background-color: #ffcd03;
}


div.labelstyle a, div.scalestyle a {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
}

div.labelstyle a:hover, div.scalestyle a:hover {
	/* background-color: #ffff88; */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-webkit-box-shadow: 2px 2px 5px 0px #ccc;
    -moz-box-shadow: 2px 2px 5px 0px #ccc;
    box-shadow: 2px 2px 5px 0px #ccc;
}

/* LABEL STYLE */
div.labelstyle {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	gap: 12px 10px;
	padding: 20px 0px 20px;
	/*border-bottom: 1px solid #000;*/
}

div.labelstyle.mostcommon {
	row-gap: 20px;
}

div.partcontainer {
	break-inside: avoid;
}

div.labelstyle div.partcontainer {
	height: 46px;
	display: flex; 
	align-items: center;
}

div.labelstyle div.partcontainer table {
	border-spacing: 0;
}


div.labelstyle a {
	margin: -7px;
	padding: 9px;
	border: 0px;
}
div.labelstyle a:hover {
	padding: 7px;
	border: 2px solid #000;
	
}


div.labelstyle.border {
	padding-top: 0px;
	padding-bottom: 0px;
}
div.labelstyle.border a {
	margin: 0px;
	padding: 6px;
	border: 1px solid #000;
}
div.labelstyle.border a:hover {
	margin: 0px;
	padding: 5px;
	border: 2px solid #000;
}


div.labelstyle .partname {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.65rem;
	font-weight: bold;
}

div.labelstyle .partnum {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.65rem;
}

div.labelstyle td {
	padding: 0px;
	line-height: 85%;
}


/* SCALE STYLE */
div.scalestyle {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap; 
	align-items: flex-end;
	gap: 6px 12px;
	margin-top: 20px;
	padding: 0px 0px 20px; 
	border-bottom: 1px solid #000;
 }
 
div.scalestyle a div.partcontainer {
	border: 2px solid transparent;
}



div.scalestyle a:hover div.partcontainer {
	border: 2px solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-webkit-box-shadow: 2px 2px 5px 0px #ccc;
    -moz-box-shadow: 2px 2px 5px 0px #ccc;
    box-shadow: 2px 2px 5px 0px #ccc;
	border: 2px solid #000;
	border-radius: 10px;
	margin: -8px;
	padding: 8px;
	background-color: #fff;
}

div.scalestyle .partname {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

div.scalestyle .partnum {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}


/* TABLE STYLE */
div.tablestyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
	margin-top: 0px;
	display: inline-block;
}

div.tablestyle a {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	color: #000;
}


div.tablestyle .thead .tr .td {
font-size: 0.7rem;
font-weight: bold;
vertical-align: bottom;
border-bottom: #000 2px solid;
margin-bottom: 8px;
padding-bottom: -8px;
}

div.tablestyle .thead.partspage .tr .td {
	border-bottom: none;
	margin-bottom: 4px;
	padding-bottom: 0px;
}

div.tablestyle .tbody {
	margin-bottom: 10px;
}

div.tablestyle .tbody .tr {
	margin: -4px 0px;
	padding: 0px;
	vertical-align: middle;
	display: flex;
	flex-direction: row;
	gap: 0px 0px;
	break-inside: avoid;
}

div.tablestyle .tr.warning {
	border-radius: 50px; 
	background-clip: padding-box;
	padding-left: 20px; padding-right: 15px;
	margin-left: -20px; margin-right: -15px;
}

div.tablestyle .td {
	display: inline-flex;
	height: 32px;
	align-items: center;
	justify-content: flex-start;
	padding: 4px 0px;
}

div.tablestyle .thead .tr .td {
	align-items: flex-start;
}


div.tablestyle .partname, div.tablestyle .largetext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7rem;
	font-weight: bold;
	display: block;
}

div.tablestyle .partnum, div.tablestyle .smalltext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.6rem;
	font-weight: normal;
	display: block;
}


div.tablestyle .td.part_image { width: 96px; justify-content: flex-end; vertical-align: middle; padding-right: 10px; }
div.tablestyle .td.part_num { width: 90px; font-weight: bold; justify-content: flex-end; text-align: center; padding-right: 15px;}
div.tablestyle .td.part_name { width: 350px; font-weight: bold; }
div.tablestyle .td.part_name.showindex { width: 300px; }
div.tablestyle .td.shortname { width: 250px; font-weight: bold; }
div.tablestyle .td.retired, div.tablestyle .td.hidden { width: 100px; justify-content: center; }
div.tablestyle .td.bricklabel_version { width: 60px; }
div.tablestyle .td.sortorder { width: 60px; }
div.tablestyle .td.rank { width: 60px; }
div.tablestyle .td.date_added { width: 80px; font-size: 0.6rem; justify-content: center; text-align: center}

div.tablestyle .td.index { width: 50px; justify-content: flex-end; text-align: center; color:#888; font-weight:normal; font-size:12px; }
div.tablestyle .td.num_pieces, div.tablestyle .td.num_sets, div.tablestyle .td.num_colors, div.tablestyle .td.num_years { width: 80px; justify-content: center; text-align: center; }
div.tablestyle .td.weighted_rank { width: 80px; justify-content: center; text-align: center; font-weight: bold;}
div.tablestyle .td.years_produced { width: 80px; text-align: center; justify-content: center;}
div.tablestyle .td.status { width: 20px; text-align: left; justify-content: flex-start; padding-left: 10px; min-height:1px;}

@media only screen and (min-width: 1200px) {
	div.tablestyle .td.part_name { width: 580px; }
	div.tablestyle .td.part_name.showindex { width: 530px; }
}

/*
@media only screen and (max-width: 999px) {
	
	div.tablestyle .td.index, div.tablestyle .td.status { 
		display: none;
	} 
}
*/

@media only screen and (max-width: 939px) {
	div.tablestyle .td.unselected { display: none; }
	div.tablestyle .td.weighted_rank, div.tablestyle .td.num_pieces, div.tablestyle .td.num_sets, div.tablestyle .td.num_colors { 
		order: 1;
		width: 70px;
	}
	div.tablestyle .td.part_image { order: 2; }
	div.tablestyle .td.part_name { 
		order: 3;
		width: 300px;
	}
	div.tablestyle .td.status { order: 4; }
	
}

div.tablestyle .td.selected { 
	background-color: #ffcd0344;
} 

div.tablestyle .thead .td.selected { 
	background-color: #ffcd03;
} 

div.tablestyle .tr {
border: 2px solid transparent;
}

div.tablestyle a .tr:hover {
	/* background-color: #ffff88; */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-webkit-box-shadow: 2px 2px 5px 0px #ccc;
    -moz-box-shadow: 2px 2px 5px 0px #ccc;
    box-shadow: 2px 2px 5px 0px #ccc;
	border: 2px solid #000;
	border-radius: 50px;
	/*background-color: #ffcd03;*/
	padding-left: 13px; padding-right: 13px;
	margin-left: -13px; margin-right: -13px;
}


/* PART RANKING */

div.partrank {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;  /* 18/20/24px is normal type ramp.  using hardcoded to control lockup */
	margin-top: 0px;
	margin-bottom: 20px;
	display: block;
	break-inside: avoid;
}

div.partrank a {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	color: #000;
}

div.partrank .tbody div.container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2px;

}

div.partrank div.container .largetext  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

div.partrank div.container .largenumber  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	display: block;
	height: 28px;
}

div.partrank div.container .largenumber svg {
	padding-bottom: 2px;
}


div.partrank .td.weighted_rank div.container .largenumber  {
	font-weight: bold;
}

div.partrank .tr .td.doubledata {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

div.partrank .td.weighted_rank div.container.left .largenumber  {
	display: flex; 
	justify-content: center; 
	align-items: center;
}

div.partrank .tr .td.doubledata div.container.left .smalltext {
	text-align: center;
}

div.partrank div.container .smalltext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	display: block;
}

div.partrank .thead .tr .td {
	font-weight: bold;
	vertical-align: middle;
	padding: 5px 10px;
}

div.partrank .tbody .tr .td {
	align-items: center;
	display: flex;
	padding: 5px 10px;
}

div.partrank .tr {
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0px 0px;
	border-bottom: 1px solid #00000088;
}


div.partrank .td.num_pieces, div.partrank .td.num_sets, div.partrank .td.num_colors, div.partrank .td.weighted_rank { 
	min-width: 90px; 
	height: 50px;
	justify-content: right;
	align-items: right;
	text-align: right; 
	display: flex;
}

div.partrank .tbody .tr .td.rowlabel, div.partrank .thead .tr .td.rowlabel  { 
	width: 70px; 
	font-size: 12px;
	justify-content: right;
	text-align: right;
	padding-left: 0;

}

div.partrank .td.columnlabel { 
	min-width: 90px; 
	font-size: 12px;
	justify-content: center;
	text-align: center;
}


div.partrank .td.highlighted {
	background-color: #ffcd03;
}
div.partrank .td.selected {
	background-color: #ffcd0344;
}

div.partrank .td.unselected.weighted_rank {
	background-color: #eeeeee;
}
div.partrank .td.unselected {
	background-color: #eeeeee44;
}

/* PARTS PAGE */

div.part_years {
	font-size: 28px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 1em; 
}

div.part_years abbr.part_retired, div.part_years abbr.part_new , div.part_years abbr.part_current, div.part_years abbr.part_hidden  {
	border-radius: 30px;
	height: 24px;
	font-size: 16px;
	font-weight: bold;
	margin-left: 8px;
	margin-top: 2px;
	padding: 5px 10px 4px;
	vertical-align: top;
	line-height: 32px;
	
	/* Removes dotted underline from abbr */
	border-bottom: none !important;
	cursor: inherit !important;
	text-decoration: none !important;
}

div.part_years .part_retired {
	background-color: #441A91;
	color: #fff;
	padding-right: 9px; /* override smaller padding because the last letter of RETIRED has a curved right side */
}

div.part_years .part_new {
	background-color: #ffcd03;
}


div.part_years .part_current {
	background-color: #ddd;
	padding-left: 9px; /* override smaller padding because the first letter of CURRNET has a curved left side */
}

div.part_years .part_hidden {
	background-color: #FD5F84;
	color: #fff;
}

/*
 * Styling for additional administrative actions when 'Editor' is enabled
 */

div.labelstyle a.editpartlink, div.scalestyle a.editpartlink {
	text-decoration: none; 
	margin: -10px 0px; 
	padding: 0px; 
	border: 0;
}

.editor_edit {
	text-decoration: none;
	background-color: #901F76;
	color: #fff !important;
	font-size: 0.7rem; 
	padding: 2px 3px;
	border-radius: 100px;
	vertical-align: 3px;
}

a:has(.editor_edit) {
	text-decoration: none;
}

.editor_edit:before {
	content: "✎";
}

h1 .editor_add {
	margin-top: 1px;
	margin-bottom: -1px;
}

.editor_add {
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	text-decoration: none !important; 
	background-color: #901F76; 
	color: #fff !important; 
	padding: 2px 10px 2px; 
	margin-left: 0px; 
	border-radius: 30px; 
	font-size: 0.7rem; 
	display: inline-block; 
	vertical-align: middle
 }

 h1 .editor_add, h2 .editor_add, h3 .editor_add {
	margin-left: 6px;
 }


/*
 * Displays list of categories on homepage
 */
.categorylist {
	font-size: 1.3rem;
	/* max-width: 820px; */
	display:flex;
	flex-wrap: wrap;
	gap: 20px 20px;
}

.categorylistitem {
	margin-bottom: 1.0rem;
	line-height: normal;
	width: 265px;
	margin: 0px;
	padding: 0px;
	-webkit-box-shadow: 2px 2px 5px 0px #ccc;
    -moz-box-shadow: 2px 2px 5px 0px #ccc;
    box-shadow: 2px 2px 5px 0px #ccc;
    background-color: #fff;
    border-bottom: 2px solid #000;
    border-top: 10px solid #ffcd03;
}

.categorylistitem.double {
	width: 550px;
}

@media only screen and (max-width: 699px) {
	.categorylistitem {
		width: 100%;
	}
 }


.categorylistitem a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
}


.categorylistitem_name {
	padding: 10px 20px;
}


.categorylistitem_summary {
	font-size: 1.0rem;
	padding: 0px 20px 20px;
}



/*
 * Displays Information about the current Category
 */
.category_summary {
	font-size: 1.3rem; /* 26px @ 100% */
	border-top: 3px solid #000;
	margin: 0px;
	padding: 30px 0px;
	border-bottom: 1px solid #000;
}

.category_summary p {
	max-width: 820px;
	margin: 0px 0px;
}

.byline {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 10px 0px 50px;
}

.category_details {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 0px;
	padding-top: 40px;
}



.category_description { 
	font-size: 1rem; 
	margin-top: 0px;
	margin-bottom: 0px;
	max-width: 620px;
 }

.category_description p {
	margin: 0rem 0rem 0.5rem;
} 
 
.category_subcategories { 
	font-size: 1rem; 
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #f4f4f4;
	border-top: #000 solid 3px;
	padding: 15px 20px;
 }

 .category_subcategories a {
	font-family: Arial, Helvetica, sans-serif;	
 }

 .category_subcategories h2 { 
	margin-top: 0px;
	font-size: 0.8rem;
	font-weight: bold;
 }

 .category_subcategories ul { 
	display:flex;
	flex-wrap: wrap;
	gap: 0px 20px;
	list-style:none;
	margin: 0px;
	padding: 0px;

 }

 .category_subcategories li { 
	padding-bottom: 5px;
	padding-left: 0px;
	font-size: 0.8rem;
	/* font-size: 1rem; */
	font-weight: normal;
 }

 @media only screen and  (min-width: 1200px) {
	.category_subcategories { 
		/* width: calc(100vw - 900px); */
		width: 300px;
	}

	.category_subcategories li {
		width: 100%;
	}
	
	.category_details {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.category_details div {
		display:inline-block;
	}
}
 
 




/*
 * Page Settings UX
 * Each group contains one or more settings.
 * Each setting contains an optional label and two or more options.
 */

/* Group of Page Settings */
div.settingsgroup {
	/* border-top: #ffcd03 solid 4px; */

	font-family: Arial, Helvetica, sans-serif;
	font-size: .7rem;
	display: inline-flex; 
	flex-direction: row; 
	flex-wrap: wrap; 
	gap: 10px 20px;
	min-width: 250px;

	/* padding-bottom: 20px;
	border-bottom: #000 solid 1px; */
}

/* A single setting containing multiple options */
div.setting {
	display: inline-flex; 
	padding: 5px 0px;
	flex-direction: row;
	align-items: center;
}

span.settinglabel {
	padding-right: 7px;
}

/* An option within the setting */
span.settingoptions {
	padding: 0px;
	border-radius: 12px;
	border: 0px solid black;
	background-color: #fff;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}


@media only screen and (max-width : 600px) {
	span.settingoptions {
		flex-direction: column;
		align-items: flex-start;
	}
	span.settingoption {
		flex-grow: 1;
	}
}

span.settingoptions.plated {
	border: 0px solid #00000044;
	background-color: #f4f4f4;
}

/* An option within the setting */
span.settingoption {
	padding: 4px 10px;
	font-weight: bold;
	text-decoration: none !important;
	color: #000;
	display: inline-block;
}
span.settingoptions a {
	text-decoration: none;
}

span.settingoption.selected {
	border-radius: 12px;
	background-color: #ffcd03;
	font-weight: bold;
	text-decoration: none !important;
	color: #000;
}


span.settingoption.selected.editorcolor {
	background-color: #901F76;
	color: #fff;
}

span.settingoption.selected.quiet {
	background-color: #ccc;
}

span.settingoption.selected.retired {
	background-color: #441A91;
	color: #fff;
}

div.resultsnote {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ece2ff;
	color: #441A91;
	margin: 0px -40px;
	padding: 10px 40px;
}



/*
 * Part Page UX
 * Show results on the part page as a nice table of information. This includes styling for edit capabilities as well.
 * TODO: If I move edit experience out of mainline codebase, I should remove some of this.
 */

 .partinfo {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 40px 40px;
	justify-content: space-between;
 }

 
@media only screen and (max-width : 1000px) {
	.partinfo {
		flex-direction: column;
	}
}

.partoverview {
	max-width: 768px;
	display: block;
}

.partoverview img {
	zoom: 100%;
	max-width: 768px;
	max-height: 768px;
	/* padding-bottom: 40px; */
	margin-bottom: -5px;
}

 
@media only screen and (max-width : 1000px) {

	.partoverview img {
		zoom:initial;
		max-width: 100%;
		max-height: 384px;
	}
	
}
 
 .partfacts {
	width: 300px;
	display: block;
 }

.part_description p {
	margin-top: 0px;
}

.part_details {
	display: block;
	margin: 0px 0px 10px;
	border-spacing: 0px 5px;
	border-top: 1px solid #00000044;
}

div.part_detail, form.part_detail {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #00000044;

}


@media only screen and (max-width: 699px) {

	div.part_detail, form.part_detail {
		flex-direction: column;
	}
	div.part_detail .part_detail_label {
		justify-content: left;
	}

}


.part_detail_label {
	display: flex;
	padding-right: 10px;
	justify-content: right;
	width: 130px;

	/*
	font-weight: bold;
	vertical-align: top;
	font-size: 1.0rem;
	*/
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 12px;
	text-transform: uppercase;
	vertical-align: top;
	padding-top: 6px;
}

.rowstyle .part_detail_label {
	text-align: left;
	width: 210px;
	justify-content: left;
}


.rowstyle .part_detail_value {
	display: flex;
	text-align: left;
	padding-right: 20px;
}

.part_detail_value input, .part_detail_value textarea {
	border: 0.5px #ccc solid;
}

.rowstyle form.part_detail {
	margin-block-end: 2px;
	border-bottom: 0px;
}

div.part_detail_value {
	display: flex;
	vertical-align: top;
}



div.part_detail_value .hiddenstatus {
	background-color: #FD5F84;
	color: #fff;
	padding: 0px 5px;
}

div.part_detail_value .retiredstatus {
	background-color: #441A91;
	color: #fff;
	padding: 0px 5px;
}

input.part_detail_value, select.part_detail_value, textarea.part_detail_value {
	font-size: 0.8rem;
}

textarea.oneline {
	width: 400px;
	height: 24px;
}

textarea.smallparagraph {
	width: 400px;
	height: 30px;
}

textarea.paragraph {
	width: 500px;
	height: 50px;
}

input.large, select.large {
	width: 500px;
}

input.medium, select.small {
	width: 400px;
}

input.small, select.small {
	width: 200px;
}


h2.partdetails {
	margin: 2.5rem 0rem .5rem; 
	font-size: 1.2rem;
}

.part_detail_value p {
	margin: 0px 0px;
}

.part_detail_value a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
}


.part_detail_value.submitbutton {
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

div.resultcolumns {
	display: flex;
	flex-wrap: wrap;
	gap: 0px 40px;
}

div.resultcolumns .resultcolumn {
	display: inline-block;
}

.part_detail_value.externalparts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px 0px;
	
}

.part_detail_value.externalparts div.part_detail_externalpart {
	display: inline-block;
}

div.part_detail_externalpart {
	font-size: 16px;
}

div.part_detail_externalpart a {
	padding-right: 3px;
}

div.part_detail_externalpart .part_num {
	font-weight: bold;
}

/* Pretty sure this is no longer used. */
div.part_detail_externalpart .part_note, div.part_detail_externalpart .part_ba_description {
	font-style: italic;
	font-size: 16px;
}

div.part_detail_externalpart .part_error {
	font-style: italic;
	font-weight: bold;
	background-color: #800;
	color: #fff;
	margin: -2px -4px -2px 4px;
	padding: 2px 4px;
}


/* Yellow warning colors: background-color: #ffe682; color: #4b3c00; */

/* DEBUG STYLING */

.debugtext, .criticalerror, .postuseraction, .dbselectquery, .dbchangequery, .dbqueryresult { 
	font-family: monospace; 
	font-size: 1.0rem;
}
.debugtext { color: #666; background-color: #ddd;  }
.criticalerror { color: #f00; background-color: #fdd; }
.postuseraction { color: #00f; background-color: #ddf; }
.dbselectquery { color: #666; background-color: #ddd; }
.dbchangequery { color: #00f; background-color: #ddf; }
.dbqueryresult { color: #0b0; background-color: #dfd; }

.honeybucket {
	display: none;
}

table.admintablestatus tr td, table.admintablestatus thead tr th {
	vertical-align: top;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Old versions of Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}


.drop-hint { align-self: stretch; border: 2px solid #f00; padding: 0px; margin: 0px -7px; /* Negative margin to eliminate shifting of existing on-screen elements */ }

.scalestyle .drop-hint { margin: 0px -10px; }

@media print {
	h1 {
		font-size: 20pt;
	}

	.category_summary {
		font-size: 16pt;
	}

	body, .category_description {
		font-size: 16px;
	}

	div.resultsheader, div.category_subcategories, .noprint {
		display: none !important;
	}

	.partcategoryname {
		page-break-after: avoid;
		font-size: 24px;
	}

	div.inlineresults div.part_category, h2.partcategoryname.printpagebreak {
		margin-top: -5px !important;
	}
	
	h3.partcategoryname  {
		font-size: 18px;
	}

	div.partcategorysummary, div.partcategorydescription {
		display: none;
	}


	div.main, div.inlineresults, div.footer, footer, div.category_summary p {
		max-width: none;
		border: 0;
		padding: 0;
	}

	
	div.category_description {
		max-width: 90%;
	}


	.printpagebreak {
		page-break-before: always;
		page-break-after: always;
	}


	/* SCALE STYLE */
	div.scalestyle {
		gap: 5px 16px;
		border-bottom: 0px solid #000;
		margin-top: 5px;
	}
	
	div.scalestyle .partname {
		/* font-size: 12px; */
		font-size: 8pt;
		font-family: 'Helvetica Now Text', Arial, sans-serif;
	}

	div.scalestyle .partnum {
		/* font-size: 12px; */
		font-size: 8pt;
		font-family: 'Helvetica Now Text', Arial, sans-serif;
	}

	div.partcontainer {
		border: 0px !important;
	}

	div.partcontainer img {
		/* zoom: 33% !important; max-width: 768px !important; max-height: 768px !important; */
	}

	.parts_results {
		-webkit-print-color-adjust: exact !important; color-adjust: exact !important;
	}

	.parts_results div.indicator {
		width: 10px;
		height: 10px;
		margin: 1px 0px -1px 4px;
		padding: 2px 0.5px 0px 0.5px;
		border-radius: 6px;
		font-size: 6pt;
		background-color: #888;
	}



	.byline {
		page-break-after: always;
	}

}

@page {
	margin-top: 2cm;
	margin-bottom: 2cm;
	margin-left: 1cm;
	margin-right: 1cm;
}

@page { @top-left { content: "THE LEGO PARTS GUIDE"; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000;  } }
@page { @top-right { content: "brickarchitect.com/parts"; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000;  } }
@page { @bottom-center { content: counter(page) " of " counter(pages); font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000; } }