img.svg32 {
	width:32px;
	height:32px;
	border: 1px solid #444;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 0.2em;
}

img.svg16 {
	width:16px;
	height:16px;
	border: 1px solid #444;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
i.svg-divider32 {
	width:4px;
	height:32px;
	margin: 0.2em;
}

svg-icon svg{
	width:32px;
	height:32px;
	border: 1px solid #444;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.icon32 {
	margin: -2px;
	width: 32px;
	height:32px;
	display:inline-block;
	float:right;
}

.icon24 {
	margin: -2px;
	width: 24px;
	height:24px;
	display:inline-block;
	float:right;
}

.icon-gear32 {
	background:transparent url('gear-grey32.png') center top no-repeat;
}

.icon-gear32:hover {
	background-image: url('gear-cyan32.png');
}

.icon-gear24 {
	background:transparent url('gear-grey24.png') center top no-repeat;
}

.icon-gear24:hover {
	background-image: url('gear-cyan24.png');
}

.icon-fold32 {
	background:transparent url('fold-grey32.png') center top no-repeat;
}

.icon-fold32:hover {
	background-image: url('fold-cyan32.png');
}

.icon-fold24 {
	background:transparent url('fold-grey24.png') center top no-repeat;
}

.icon-fold24:hover {
	background-image: url('fold-cyan24.png');
}

.icon-unfold32 {
	background:transparent url('unfold-grey32.png') center top no-repeat;
}

.icon-unfold32:hover {
	background-image: url('unfold-cyan32.png');
}

.icon-unfold24 {
	background:transparent url('unfold-grey24.png') center top no-repeat;
}

.icon-unfold24:hover {
	background-image: url('unfold-cyan24.png');
}

.icon-plus32 {
	background:transparent url('plus-grey32.png') center top no-repeat;
}

.icon-plus32:hover {
	background-image: url('plus-cyan32.png');
}

.i-arrow-down24 {
	background:transparent url('si-glyph-arrow-down.png') center top no-repeat;
}

/* https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/ */
/* https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images */

.glyph32 {
	margin: 0;
	width: 30px;
	height:30px;
	display:inline-block;
	paddig:1px;
	vertical-align:middle;
}
.glyph32:hover {
	filter: sepia(1) hue-rotate(140deg) saturate(6) brightness(1.5);
}
.glyph24 {
	margin: 0;
	width: 22px;
	height:22px;
	display:inline-block;
	paddig:1px;
	vertical-align:middle;
}
.glyph24:hover {
	filter: sepia(1) hue-rotate(140deg) saturate(6) brightness(1.5);
}
.glyph16 {
	margin: 0;
	width: 14px;
	height:14px;
	display:inline-block;
	paddig:1px;
	vertical-align:middle;
}
.glyph16:hover {
	filter: sepia(1) hue-rotate(140deg) saturate(6) brightness(1.5);
}
.colorize-blue {
  filter: brightness(0.7) sepia(1) hue-rotate(140deg) saturate(3);
}
.colorize-green {
  filter: brightness(0.7) sepia(1) hue-rotate(50deg) saturate(3);
}
.glyph16.colorize-red:hover {
  filter: brightness(1) sepia(1) hue-rotate(-50deg) saturate(6);
}
.glyph24.colorize-red:hover {
  filter: brightness(1) sepia(1) hue-rotate(-50deg) saturate(6);
}

.glyph-arrow-down {
	background:white url('smarticons/svg/si-glyph-arrow-down.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-arrow-down.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-arrow-down.svg') no-repeat;
}
.glyph-arrow-down {
	background:white url('smarticons/svg/si-glyph-arrow-down.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-arrow-down.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-arrow-down.svg') no-repeat;
}
.glyph-triangle-down {
	background:white url('smarticons/svg/si-glyph-triangle-down.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-triangle-down.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-triangle-down.svg') no-repeat;
}
.glyph-triangle-up {
	background:white url('smarticons/svg/si-glyph-triangle-up.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-triangle-up.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-triangle-up.svg') no-repeat;
}
.glyph-circle-remove {
	background:white url('smarticons/svg/si-glyph-circle-remove.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-circle-remove.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-circle-remove.svg') no-repeat;
}
.glyph-delete {
	background:white url('smarticons/svg/si-glyph-delete.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-delete.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-delete.svg') no-repeat;
}
.glyph-plus {
	background:white url('smarticons/svg/si-glyph-plus.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-plus.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-plus.svg') no-repeat;
}
.glyph-gear {
	background:white url('smarticons/svg/si-glyph-gear.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-gear.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-gear.svg') no-repeat;
}
.glyph-edit {
	background:white url('smarticons/svg/si-glyph-edit.svg') center top no-repeat;
    -webkit-mask:  url('smarticons/svg/si-glyph-edit.svg') no-repeat;
    mask: url('smarticons/svg/si-glyph-edit.svg') no-repeat;
}