Template:Note/styles.css

.note {
	background-position: left 7px top 50%;
	padding: 0.5em;
	margin: 0.5em 0;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 25px;
	border: 1px solid #ddd;
	min-height: 28px;
	display: inline-block;
	vertical-align: middle;
}

.note div {
	display: flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
}

.note div div {
	display: block !important;
	overflow: auto;
}

.back-palegreen {
	background-color: #f2f9f8;
	border-color: #a7d7f9;
}
.back-yellow {
	background-color: #fff9ea;
	border-color: #fc3;
}

.back-yellow-teal-boarder {
	background-color: #fff9ea;
	border-color: #008080;
}

.back-brown {
	background-color: #f6efe5;
	border-color: #ac6600;
}

.back-red {
	background-color: #fee7e6;
	border-color: #c33;
}

.back-pink {
	background-color: #FFFAFE;
	border-color: #c33;
}

.back-orange {
	background-color: #ffe7bf;
	border-color: darkorange;
}

.back-clear-blue {
	border-color: #a7d7f9;
}

.back-lightgrey {
	background-color: #F2F3F4;
	border-color: darkgrey;
}

.back-clear-black {
	border-color: black;
}


.back-yellow-purple-boarder {
	background-color: #E6E6FA;
	border-color: #663399;
}

.back-lavender-purple-boarder {
	background-color: #E6E6FA;
	border-color: #663399;
}

.back-cyan-sky-boarder {
	background-color: #E0FFFF;
	border-color: #00BFFF;
}

.back-green-darkgreen-boarder {
	background-color: #CCFD7F;
	border-color: #556B2F;
}