body {
	/*background: #ddd;*/
	/*text-align: center;*/
	/*overflow: hidden;*/
	/*overflow-y: scroll;*/
	/*padding: 10px;*/
}

.noteswrap {
	text-align: center;
}
.noteswrap h1 {
	padding: 30px 0 10px 0;
}
.notes {
	margin: 15px auto;
	max-width: 500px;
}

.listwrapper {
	background: rgba(0,0,0,0.05);
	display: inline-block;
	width: 100%;
	/*padding: 5px 15px;*/
	padding: 15px;
}
.listwrapper .settitle {
	text-align: left;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

.setwrapper {
}
.setwrapper .settitle {
	clear: both;
	position: relative;
	float: left;
	padding: 2px 2px 2px 25px;
}
.setwrapper .settitle::before {
	content: '';
	position: absolute;
	background: #ccc;
	top: 4px;
	left: 0px;
	width: 19px;
	height: 19px;
}


.wrapper {
	clear: both;
	margin-bottom: 20px;
	/*display: none;*/
}
.wrap {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
	/*grid-template-columns: repeat( auto-fill, auto );*/
	/*justify-items: center;*/
	/*justify-content: space-evenly;*/
}
.item {
	/*max-width: 110px;*/
	background: #fff;
	text-align: center;
	padding: 5px 0;
	/*max-width: 110px;*/
	font-size: 13px;
}
.item .code {
	max-width: 100px;
}
.item .imgwrp {
	text-align: center;
	height: 90px;
}
.item .imgwrp img {
	border: 1px solid transparent;
}
.item .imgwrp.showborder img {
	border: 1px solid #f1f1f1;
}