react-font-style/lib/ui/IconButton.css

React font style editor

.root {
  padding-left: 3px;
  padding-right: 3px;
}

.icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px;
}

.isActive {
  background: none #d8d8d8;
}

.icon-undo {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcuODU2IDI0YzIuNjY1LTQuODMgMy4xMTUtMTIuMTk1LTcuMzU2LTExLjk1VjE4bC05LTkgOS05djUuODJDMjMuMDM4IDUuNDk1IDI0LjQzNSAxNi44OSAxNy44NTYgMjR6Ii8+PC9zdmc+");
  background-size: 14px;
}
.icon-redo {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMuNSA1LjgyVjBsOSA5LTkgOXYtNS45NUMzLjAzIDExLjgwNiAzLjQ3OCAxOS4xNyA2LjE0NCAyNC0uNDM2IDE2Ljg5Ljk2MiA1LjQ5NCAxMy41IDUuODJ6Ii8+PC9zdmc+");
  background-size: 14px;
}

.icon-unordered-list-item {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNNC42NTYgMy4zNDRIMTR2MS4zMTNINC42NTZWMy4zNDR6bTAgNS4zMTJWNy4zNDNIMTR2MS4zMTNINC42NTZ6bTAgNHYtMS4zMTNIMTR2MS4zMTNINC42NTZ6bS0yLTEuNTNxLjM3NSAwIC42NC4yNXQuMjY3LjYyNC0uMjY2LjYyNS0uNjQuMjUtLjYyNi0uMjVUMS43OCAxMnQuMjUtLjYyNS42MjYtLjI1em0wLTguMTI2cS40MDYgMCAuNzAzLjI4dC4yOTYuNzItLjI5Ny43Mi0uNzA0LjI4LS43MDMtLjI4VDEuNjU2IDR0LjI5Ny0uNzIuNzAzLS4yOHptMCA0cS40MDYgMCAuNzAzLjI4dC4yOTYuNzItLjI5Ny43Mi0uNzA0LjI4LS43MDMtLjI4VDEuNjU2IDh0LjI5Ny0uNzIuNzAzLS4yOHoiLz48L3N2Zz4=");
}
.icon-ordered-list-item {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNNC42NTYgOC42NTZWNy4zNDNIMTR2MS4zMTNINC42NTZ6bTAgNHYtMS4zMTNIMTR2MS4zMTNINC42NTZ6bTAtOS4zMTJIMTR2MS4zMTNINC42NTZWMy4zNDR6bS0zLjMxMiA0di0uNjg4aDJ2LjYyNWwtMS4yMiAxLjM3NmgxLjIydi42ODhoLTJWOC43MmwxLjE4OC0xLjM3NkgxLjM0NHptLjY1Ni0ydi0yaC0uNjU2di0uNjg4aDEuMzEzdjIuNjg4SDJ6bS0uNjU2IDZ2LS42ODhoMnYyLjY4OGgtMnYtLjY4OGgxLjMxM3YtLjMxM0gydi0uNjg4aC42NTd2LS4zMTNIMS4zNDR6Ii8+PC9zdmc+");
}
.icon-blockquote {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNOS4zNDQgMTEuMzQ0bDEuMzEzLTIuNjg4aC0ydi00aDR2NGwtMS4zMTMgMi42ODhoLTJ6bS01LjM0NCAwbDEuMzQ0LTIuNjg4aC0ydi00aDR2NEw2IDExLjM0NEg0eiIvPjwvc3ZnPg==");
}

.icon-bold {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNOSAxMC4zNDRxLjQzOCAwIC43Mi0uMjk3dC4yOC0uNzAzLS4yOC0uNzAzVDkgOC4zNDVINi42NTZ2Mkg5em0tMi4zNDQtNnYyaDJxLjQwNiAwIC43MDMtLjI5N3QuMjk2LS43MDMtLjI5Ny0uNzAzLS43MDQtLjI5NmgtMnptMy43NSAyLjg0NHExLjQzOC42NTYgMS40MzggMi4yOCAwIDEuMDY0LS43MDMgMS43OThUOS4zNzYgMTJoLTQuNzJWMi42NTZoNC4xOXExLjEyNCAwIDEuODkuNzh0Ljc2NiAxLjkwNy0xLjA5MyAxLjg0NHoiLz48L3N2Zz4=");
}
.icon-italic {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNNi42NTYgMi42NTZIMTJ2MmgtMS44NzVMNy44NzUgMTBoMS40N3YySDR2LTJoMS44NzVsMi4yNS01LjM0NGgtMS40N3YtMnoiLz48L3N2Zz4=");
}
.icon-underline {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMy4zNDQgMTIuNjU2aDkuMzEzVjE0SDMuMzQ0di0xLjM0NHpNOCAxMS4zNDRxLTEuNjU2IDAtMi44MjgtMS4xNzJUNCA3LjM0NFYyaDEuNjU2djUuMzQ0cTAgLjk3LjY4OCAxLjY0VDggOS42NTh0MS42NTYtLjY3Mi42ODgtMS42NFYySDEydjUuMzQ0UTEyIDkgMTAuODI4IDEwLjE3MlQ4IDExLjM0NHoiLz48L3N2Zz4=");
}
.icon-strikethrough {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuNTcgMTJxLjE5IDAgLjMxLjEydC4xMi4zMXYuODU2cTAgLjE4OC0uMTIuMzA4dC0uMzEuMTJILjQzcS0uMTg4IDAtLjMwOC0uMTJUMCAxMy4yODZ2LS44NTdxMC0uMTkuMTItLjMxVC40MjggMTJIMjMuNTd6bS0xNy4xLS44NTdxLS4zNzYtLjQ3LS42ODQtMS4wNy0uNjQzLTEuMy0uNjQzLTIuNTIgMC0yLjQyMyAxLjc5NS00LjEzNyAxLjc4LTEuNyA1LjI2My0xLjcuNjcgMCAyLjIzOC4yNTMuODg0LjE2IDIuMzcuNjQyLjEzNS41MS4yODIgMS41OC4xODggMS42NDcuMTg4IDIuNDUgMCAuMjQyLS4wNjcuNjA0bC0uMTYuMDQtMS4xMjUtLjA4LS4xODgtLjAyN3EtLjY3LTEuOTk3LTEuMzgtMi43NDctMS4xNzgtMS4yMi0yLjgxMi0xLjIyLTEuNTI3IDAtMi40MzguNzktLjg5Ny43NzgtLjg5NyAxLjk1NiAwIC45NzcuODg0IDEuODc0dDMuNzM3IDEuNzI4cS45MjUuMjY4IDIuMzE4Ljg4NC43NzcuMzc1IDEuMjcyLjY5Nkg2LjQ3em02Ljc5IDMuNDI4aDUuNTAzcS4wOTQuNTIzLjA5NCAxLjIzMyAwIDEuNDg3LS41NSAyLjg0LS4zMDcuNzM2LS45NSAxLjM5Mi0uNDk2LjQ3LTEuNDYgMS4wODUtMS4wNy42NDMtMi4wNS44ODQtMS4wNy4yOC0yLjcxOC4yOC0xLjUyOCAwLTIuNjEzLS4zMDdsLTEuODc1LS41MzZxLS43NjMtLjIxMy0uOTY0LS4zNzQtLjEwNy0uMTA3LS4xMDctLjI5NXYtLjE3M3EwLTEuNDQ2LS4wMjYtMi4wOS0uMDEzLS40IDAtLjkxbC4wMjctLjQ5NnYtLjU4OGwxLjM2Ny0uMDI3cS4yLjQ1NS40MDIuOTV0LjMuNzUuMTY3LjM2M3EuNDcuNzYzIDEuMDcgMS4yNi41NzcuNDggMS40MDcuNzYyLjc5LjI5NSAxLjc2OC4yOTUuODU3IDAgMS44NjItLjM2MiAxLjAzLS4zNDggMS42MzQtMS4xNTIuNjMtLjgxNi42My0xLjcyNyAwLTEuMTI1LTEuMDg2LTIuMTAzLS40NTUtLjM4OC0xLjgzNS0uOTV6Ii8+PC9zdmc+");
  background-size: 14px;
}
.icon-code {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTE2IDExNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0Ij48ZyBmaWxsLXJ1bGU9Im5vbnplcm8iPjxwYXRoIGQ9Ik0yMi40NjQgMjguNDhjMCAyLjg5NS4zNDQgNS45MDUuODA2IDkuMDIuMzQyIDMuMDEuNjkgNi4wMi42OSA4LjkxNyAwIDMuNTYyLS45MTcgNy43OS04Ljk1NSA3LjkxMnY3LjIzNmM4LjAzNi4xMTUgOC45NTYgNC42NzIgOC45NTYgNy45MTIgMCAyLjg4Ni0uMzQ4IDUuNzgzLS42OSA4Ljc4Ny0uNDYyIDMuMDEzLS44MDYgNi4xMzQtLjgwNiA4LjkyIDAgMTEuMjM4IDcuMTA2IDE1LjI1MiAxNy4wODcgMTUuMjUyaDMuMzJ2LTcuOTEyaC0yLjA2MmMtNS43MjYgMC04LjAyNS0zLjIzMy04LjAyNS04Ljc5NiAwLTIuMjM2LjM0NC00LjU3LjgwNi03LjAyMy4yMjctMi40MzguNjg0LTUuMTIuNjg0LTguMTIuMTE1LTcuNzkyLTMuMzItMTEuMjUzLTkuMTc0LTEyLjU4NnYtLjIyNWM1Ljg1NC0xLjMzMiA5LjI5My00LjY3NiA5LjE3LTEyLjQ3IDAtMi44OTUtLjQ1Ny01LjU2NS0uNjg0LTguMDI0LS40NjItMi40NC0uODA3LTQuNzc3LS44MDctNy4wMTIgMC01LjQ1IDIuMDU4LTguNjg4IDguMDI0LTguNjg4aDIuMDY2di04LjAxNGgtMy4zMmMtMTAuMjA1LS4wMDMtMTcuMDg2IDQuNDQ0LTE3LjA4NiAxNC45MTV6TTkyLjA2IDQ2LjQxN2MwLTIuODkzLjQ1My01LjkwMy44MDMtOC45MTguMzQzLTMuMTE0Ljc5Ny02LjEyLjc5Ny05LjAyIDAtMTAuNDctNi44NzUtMTQuOTE3LTE3LjA4LTE0LjkxN2gtMy4zMjd2OC4wMTdoMi4wNmM1Ljg1Mi4xMTQgNy45MSAzLjIzMyA3LjkxIDguNjg4IDAgMi4yMy0uMzQyIDQuNTY1LS42ODUgNy4wMTItLjM1IDIuNDU1LS42OTIgNS4xMjYtLjY5MiA4LjAyNC0uMTA1IDcuNzk3IDMuMzI3IDExLjEzNiA5LjA1NiAxMi40N3YuMjIyYy01LjcyIDEuMzMzLTkuMTYgNC43OTYtOS4wNTYgMTIuNTg3IDAgMyAuMzQyIDUuNjg2LjY5MiA4LjEyLjM0MyAyLjQ1NS42ODYgNC43OS42ODYgNy4wMjUgMCA1LjU1NC0yLjE4IDguNjgtNy45MTIgOC43ODhoLTIuMDZ2Ny45MTJoMy4zMjVjOS45NzUgMCAxNy4wNzYtNC4wMSAxNy4wNzYtMTUuMjUgMC0yLjc4My0uNDU0LTUuOS0uNzk2LTguOTE0LS4zNDctMy4wMS0uODA1LTUuOS0uODA1LTguNzk1IDAtMy4yMzMgMS4wMzUtNy43OSA4Ljk0My03LjkxM1Y1NC4zMmMtNy45MDQtLjExMi04LjkzNS00LjM0LTguOTM1LTcuOTAzeiIvPjwvZz48L3N2Zz4=");
}

.icon-link {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDIyIDI0Ij48cGF0aCBkPSJNMTkuNSAxNi4yODZxMC0uNTM2LS4zNzUtLjkxbC0yLjc4Ni0yLjc4N3EtLjM3Ni0uMzc2LS45MTItLjM3Ni0uNTYzIDAtLjk2NC40M2wuMjU0LjI0N3EuMjE0LjIwOC4yODguMjl0LjIuMjUzLjE3NS4zNDIuMDQ4LjM2OHEwIC41MzYtLjM3NS45MXQtLjkxLjM3NnEtLjIwMiAwLS4zNy0uMDQ4dC0uMzQtLjE3NC0uMjU1LS4yLS4yODgtLjI5LS4yNDgtLjI1M3EtLjQ0Mi40MTUtLjQ0Mi45NzggMCAuNTM2LjM3NS45MWwyLjc2IDIuNzczcS4zNi4zNjIuOTEuMzYyLjUzNiAwIC45MS0uMzQ4bDEuOTctMS45NTVxLjM3NS0uMzc1LjM3NS0uODk3em0tOS40MTUtOS40NDJxMC0uNTM2LS4zNzUtLjkxTDYuOTUgMy4xNnEtLjM3NC0uMzc0LS45MS0uMzc0LS41MjIgMC0uOTEuMzYyTDMuMTYgNS4xMDNxLS4zNzUuMzc1LS4zNzUuODk3IDAgLjUzNi4zNzUuOTFsMi43ODYgMi43ODdxLjM2Mi4zNjIuOTEuMzYyLjU2NCAwIC45NjUtLjQxNmwtLjI1My0uMjQ4cS0uMjEzLS4yMDgtLjI4OC0uMjg4dC0uMjAyLS4yNTQtLjE3NC0uMzQyLS4wNDctLjM2OHEwLS41MzYuMzc1LS45MXQuOTEtLjM3NnEuMjAyIDAgLjM3LjA0N3QuMzQuMTc0LjI1NS4yLjI4OC4yODguMjQ4LjI1NHEuNDQyLS40MTUuNDQyLS45Nzh6bTExLjk4NiA5LjQ0MnEwIDEuNjA3LTEuMTM3IDIuNzJsLTEuOTcgMS45NTRxLTEuMTEgMS4xMTItMi43MTggMS4xMTItMS42MiAwLTIuNzMyLTEuMTM4bC0yLjc2LTIuNzcycS0xLjExLTEuMTEyLTEuMTEtMi43MiAwLTEuNjQ2IDEuMTc4LTIuNzk4bC0xLjE3OC0xLjE4cS0xLjE1MiAxLjE4LTIuNzg2IDEuMTgtMS42MDcgMC0yLjczMi0xLjEyNUwxLjMzOCA4LjczMlEuMjEzIDcuNjA4LjIxMyA2VDEuMzUgMy4yODNsMS45Ny0xLjk1NVE0LjQzMi4yMTUgNi4wNC4yMTVxMS42MiAwIDIuNzMgMS4xMzhsMi43NiAyLjc3MnExLjExMiAxLjExMiAxLjExMiAyLjcyIDAgMS42NDYtMS4xOCAyLjc5OGwxLjE4IDEuMThxMS4xNTItMS4xOCAyLjc4Ni0xLjE4IDEuNjA3IDAgMi43MzIgMS4xMjVsMi43ODYgMi43ODZxMS4xMjUgMS4xMjUgMS4xMjUgMi43MzJ6Ii8+PC9zdmc+");
  background-size: 14px;
}

.icon-remove-link {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDIyIDI0Ij48cGF0aCBkPSJNNS44OCAxNy4wMjJsLTMuNDMgMy40M3EtLjEzNC4xMi0uMzA4LjEyLS4xNiAwLS4zMDgtLjEyLS4xMi0uMTM1LS4xMi0uMzF0LjEyLS4zMDdsMy40My0zLjQzcS4xMzMtLjEyLjMwNy0uMTJ0LjMxLjEycS4xMi4xMzUuMTIuMzF0LS4xMi4zMDd6bTIuMjYzLjU1djQuMjg1cTAgLjE4OC0uMTIuMzA4dC0uMzEuMTItLjMwNy0uMTItLjEyLS4zMDhWMTcuNTdxMC0uMTg3LjEyLS4zMDd0LjMwOC0uMTIuMzA4LjEyLjEyLjMwOHptLTMtM3EwIC4xODctLjEyLjMwN3QtLjMxLjEySC40M3EtLjE4OCAwLS4zMDgtLjEyVDAgMTQuNTd0LjEyLS4zMDcuMzA4LS4xMmg0LjI4NnEuMTg4IDAgLjMwOC4xMnQuMTIuMzA4em0xNi45MjggMS43MTRxMCAxLjYwNy0xLjEzNyAyLjcybC0xLjk3IDEuOTU0cS0xLjExIDEuMTEyLTIuNzE4IDEuMTEyLTEuNjIgMC0yLjczMi0xLjEzOEw5LjA0IDE2LjQ0N3EtLjI4LS4yOC0uNTYzLS43NWwzLjItLjI0IDMuNjU3IDMuNjdxLjM2Mi4zNi45MS4zNjd0LjkxMi0uMzU1bDEuOTctMS45NTZxLjM3NC0uMzc1LjM3NC0uODk3IDAtLjUzNi0uMzc1LS45MWwtMy42Ny0zLjY4NC4yNC0zLjJxLjQ3LjI4Ljc1LjU2Mmw0LjUgNC41cTEuMTI2IDEuMTUyIDEuMTI2IDIuNzMyek0xMy44MSA2LjU5bC0zLjIuMjRMNi45NSAzLjE2cS0uMzc0LS4zNzUtLjkxLS4zNzUtLjUyMiAwLS45MS4zNjJMMy4xNiA1LjEwMnEtLjM3NS4zNzUtLjM3NS44OTcgMCAuNTM1LjM3NS45MWwzLjY3IDMuNjctLjI0IDMuMjE0cS0uNDctLjI4LS43NS0uNTYzbC00LjUtNC41US4yMTMgNy41OC4yMTMgNnEwLTEuNjA4IDEuMTM4LTIuNzJsMS45Ny0xLjk1NVE0LjQzLjIxMyA2LjA0LjIxM3ExLjYyIDAgMi43MzIgMS4xMzhsNC40NzMgNC40ODhxLjI4LjI4LjU2My43NXptOC40NzggMS4xMjRxMCAuMTg4LS4xMi4zMDh0LS4zMS4xMmgtNC4yODVxLS4xODcgMC0uMzA3LS4xMnQtLjEyLS4zMDguMTItLjMwOC4zMDgtLjEyaDQuMjg3cS4xODggMCAuMzA4LjEydC4xMi4zMDh6TTE1IC40M3Y0LjI4NXEwIC4xODgtLjEyLjMwOHQtLjMxLjEyLS4zMDctLjEyLS4xMi0uMzA4Vi40M3EwLS4xOS4xMi0uMzFUMTQuNTcgMHQuMzEuMTIuMTIuMzF6bTUuNDUgMi4wMmwtMy40MjggMy40M3EtLjE0Ny4xMi0uMzA4LjEydC0uMzA4LS4xMnEtLjEyLS4xMzQtLjEyLS4zMDh0LjEyLS4zMDhsMy40My0zLjQzcS4xMzMtLjEyLjMwNy0uMTJ0LjMwOC4xMnEuMTIyLjEzNS4xMjIuMzF0LS4xMi4zMDd6Ii8+PC9zdmc+");
  background-size: 14px;
}

.icon-image {
  composes: icon;  
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTMzLjMzMyA1MzMuMzM0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MzMuMzMzIDUzMy4zMzQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNDY2LjY2NywxMDBoLTQwMHYzMzMuMzMzaDQwMFYxMDB6IE01MzMuMzMzLDMzLjMzM0w1MzMuMzMzLDMzLjMzM1Y1MDBIMFYzMy4zMzNINTMzLjMzM3ogTTQzMy4zMzMsNDAwSDEwMHYtNjYuNjY3ICAgbDEwMC0xNjYuNjY3bDEzNi45NzksMTY2LjY2N2w5Ni4zNTQtNjYuNjY2VjMwMFY0MDB6IE0zMzMuMzMzLDE4My4zMzNjMCwyNy42MTQsMjIuMzg2LDUwLDUwLDUwczUwLTIyLjM4Niw1MC01MHMtMjIuMzg2LTUwLTUwLTUwICAgUzMzMy4zMzMsMTU1LjcxOSwzMzMuMzMzLDE4My4zMzN6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==");
  background-size: 14px;
}

.icon-cancel {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuNzggMTkuMjhMMTYuNSAxMmw3LjI4LTcuMjhhLjc0OC43NDggMCAwIDAgMC0xLjA2TDIwLjM0LjIxOGEuNzUuNzUgMCAwIDAtMS4wNi0uMDAyTDEyIDcuNDk4IDQuNzE3LjIyYS43NDguNzQ4IDAgMCAwLTEuMDYgMEwuMjE3IDMuNjZhLjc1Ljc1IDAgMCAwIDAgMS4wNkw3LjQ5NyAxMmwtNy4yOCA3LjI4YS43NDguNzQ4IDAgMCAwIDAgMS4wNmwzLjQ0IDMuNDRhLjc1Ljc1IDAgMCAwIDEuMDYuMDAybDcuMjgtNy4yOCA3LjI4MiA3LjI4Yy4wNzguMDc4LjE3LjEzNS4yNjguMTcuMjY3LjEuNTguMDQ0Ljc5My0uMTdsMy40NC0zLjQ0YS43NS43NSAwIDAgMCAwLTEuMDZ6Ii8+PC9zdmc+");
  background-size: 13px;
}

.icon-accept {
  composes: icon;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuMjUgM0w5IDE0LjI1IDMuNzUgOSAwIDEyLjc1bDkgOSAxNS0xNXoiLz48L3N2Zz4=");
  background-size: 13px;
}

.icon-color {
  composes: icon;  
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQzMS45ODUgNDMxLjk4NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDMxLjk4NSA0MzEuOTg1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQyMy4yNTcsNTEuODI5Yy0wLjgwOC0yLjA0NS0yLjY3LTMuNDg0LTQuODUzLTMuNzUxYy0yLjE3Ny0wLjI2Ni00LjMzNSwwLjY4Mi01LjYxMiwyLjQ3MiAgIGMtNy41ODEsMTAuNjI5LTE3LjUyOSwxNC4xNzItMjkuMDUzLDE4LjI3NWMtOS4yOTIsMy4zMS0xOC45MDEsNi43My0yOS4yODYsMTQuMTg2Yy0xNC42ODcsMTAuNTQ0LTIxLjQwNSwyNC45MTctMTguMDU1LDM4LjU0ICAgbC0wLjM1OCwwLjQ1OWMtNi4xMzMtOC44OTctMTIuODA2LTE3LjEyNi0xOS44NDgtMjQuNDc0Yy0zMi45NDctMzQuMzc4LTc4Ljk4NC01NS4wNDYtMTI2LjMxMS01Ni43MDMgICBjLTIuMDg1LTAuMDczLTQuMjA0LTAuMTEtNi4yOTgtMC4xMWMtNTIuODQ2LDAtMTAzLjQyOCwyMy42MjQtMTM4Ljc3NSw2NC44MTNDOS42NDYsMTQ2LjUxMi01LjkzOSwxOTkuODUzLDIuMDUxLDI1MS44ODIgICBjMC42NjgsNC4zNDksMS41MDQsOC43NDMsMi40ODcsMTMuMDYzYzEyLjk5Niw1Ny4yMDIsNDYuMTg5LDEwMC43MTcsOTEuMDY5LDExOS4zODNjMTEuMDYzLDQuNjAyLDIyLjIyMiw2LjkzNCwzMy4xNjMsNi45MzQgICBjMjcuMTgzLDAsNTAuOTI2LTE0LjUzOSw2NS4xNDMtMzkuODg5YzUuNDA0LTkuNjQ2LDguODkxLTE5LjYyMSwxMC4zNi0yOS42NTFjMC44NjYtNS45MiwwLjI3NC0xMS44MzUtMC4zLTE3LjU2NyAgIGMtMC41OTEtNS45LTEuMTQ5LTExLjQ3Ni0wLjI1Ni0xNy4wOWMyLjA0Ny0xMi44NjksMTEuMDM2LTIwLjU1MywyNC4wNDctMjAuNTUzYzMuNzAxLDAsNy40ODMsMC42MDksMTEuMjYsMS44MTIgICBjLTQuNDIyLDguMTEtOC40MzgsMTUuODU0LTExLjk0NywyMy4wMzJjLTcuNDM3LDE1LjIxMi0xMi41NjcsMjcuODEtMTUuMjUyLDM3LjQ0Yy0xLjY1NSw1LjkzOS02LjA1MiwyMS43MjIsNC42NywyOS4xNjQgICBjMy40MDUsMi4zNjMsNy43MjIsMy4xOTcsMTIuMjE1LDIuMzYxYzQuMDQ5LTAuNzUyLDE2LjM2OS0zLjA0MSw1MS4zNzgtNDIuODk2YzkuMzk2LTEwLjY5NSwxOS41MjEtMjMuMDcyLDMwLjEwNC0zNi43OTQgICBjMjcuMTY4LTkuMTUsNDguMzEtMzEuOTIxLDUzLjkwMy01OC4wODdjMS40LTYuNTQxLDEuOTg0LTEzLjU0MSwxLjczNS0yMC44MTJjMTAuMTcyLTE1LjcyLDE5LjA5NC0zMC4zODgsMjguMDcyLTQ2LjE1NiAgIGMwLjE3Mi0wLjMwNCwwLjM0Mi0wLjYyOCwwLjUxLTAuOTZjMTMuMDMxLTMuNTY5LDI0LjI1NC0xMy43MSwzMC44NDItMjcuODkxQzQzNC44NzIsMTA2LjAyOCw0MzQuMTYzLDc5LjQyOCw0MjMuMjU3LDUxLjgyOXogICAgTTI3Ni4zODUsMTQ5LjgzNGMtNC43MTMsNy40ODUtMTIuODE0LDExLjk1NC0yMS42NzMsMTEuOTU0Yy00LjgxLDAtOS41MTUtMS4zNjEtMTMuNjA1LTMuOTM3ICAgYy01Ljc4Mi0zLjY0Mi05LjgwMy05LjMxNy0xMS4zMTYtMTUuOThzLTAuMzQ1LTEzLjUxOCwzLjI5OC0xOS4zMDFjNC43MTQtNy40ODUsMTIuODE2LTExLjk1NCwyMS42NzUtMTEuOTU0ICAgYzQuODExLDAsOS41MTUsMS4zNjEsMTMuNjA0LDMuOTM4YzUuNzgyLDMuNjQsOS44MDIsOS4zMTUsMTEuMzE2LDE1Ljk3OUMyODEuMTk3LDEzNy4xOTcsMjgwLjAyNiwxNDQuMDUxLDI3Ni4zODUsMTQ5LjgzNHogICAgTTMwOS41OTIsMTk2LjE4N2MxMi45MzQtMTkuMDU3LDI2LjYxMi0zOCwzOS42MDQtNTQuODVjMi4xMDYsMS45MDIsNC40NjEsMy43Niw3LjAxMiw1LjUzYzQuMjI3LDIuOTMzLDguNjQ4LDUuMjAxLDEzLjE2NCw2Ljc1NCAgIGMtMTAuOTY5LDE4Ljc1OC0yMi43NjMsMzcuMzQyLTM3LjA0Myw1OC4zNzVjLTIzLjQ2MywzNC41NzEtNDcuODU5LDY2LjY4NC02OC42OTUsOTAuNDI0ICAgYy0xMS42MzgsMTMuMjYtMjEuODIzLDIzLjQ5OC0yOS42NzEsMjkuODM5YzMuMDI5LTkuNjksOC44MTgtMjIuOTg5LDE2Ljg3NS0zOC43NDYgICBDMjY1LjI0NSwyNjUuMzM2LDI4Ni4xMTEsMjMwLjc3MiwzMDkuNTkyLDE5Ni4xODd6IE04Mi41MDYsMTk2LjAyM2MtNC44MTEsMC05LjUxNi0xLjM2MS0xMy42MDctMy45MzggICBjLTUuNzgyLTMuNjQxLTkuODAxLTkuMzE0LTExLjMxNS0xNS45NzljLTEuNTE0LTYuNjY0LTAuMzQyLTEzLjUxOSwzLjMwMS0xOS4zMDJjNC43MTEtNy40ODQsMTIuODEzLTExLjk1MywyMS42NzEtMTEuOTUzICAgYzQuODEyLDAsOS41MTcsMS4zNjEsMTMuNjA3LDMuOTM4YzExLjkzNiw3LjUxOCwxNS41MzIsMjMuMzQ1LDguMDE5LDM1LjI3OUM5OS40NjYsMTkxLjU1NCw5MS4zNjMsMTk2LjAyMyw4Mi41MDYsMTk2LjAyM3ogICAgTTU1LjY4OCwyNTIuMzU4YzQuNzEzLTcuNDg2LDEyLjgxNC0xMS45NTUsMjEuNjczLTExLjk1NWM0LjgxLDAsOS41MTQsMS4zNjIsMTMuNjA2LDMuOTM4YzUuNzgyLDMuNjQxLDkuODAxLDkuMzE1LDExLjMxNSwxNS45NzkgICBjMS41MTUsNi42NjIsMC4zNDMsMTMuNTE2LTMuMzAxLDE5LjMwMWMtNC43MTEsNy40ODMtMTIuODEzLDExLjk1My0yMS42NzEsMTEuOTUzYy00LjgxMSwwLTkuNTE3LTEuMzYxLTEzLjYwOS0zLjkzOCAgIGMtNS43ODItMy42NDItOS44LTkuMzE1LTExLjMxMy0xNS45NzlDNTAuODc2LDI2NC45OTUsNTIuMDQ5LDI1OC4xNCw1NS42ODgsMjUyLjM1OHogTTEzNy42MiwxMDAuNDE0ICAgYzQuNzEzLTcuNDg1LDEyLjgxNS0xMS45NTQsMjEuNjczLTExLjk1NGM0LjgwOSwwLDkuNTE0LDEuMzYxLDEzLjYwNCwzLjkzN2MxMS45MzcsNy41MTYsMTUuNTMzLDIzLjM0NCw4LjAxOSwzNS4yOCAgIGMtNC43MTUsNy40ODYtMTIuODE3LDExLjk1NS0yMS42NzUsMTEuOTU1Yy00LjgxLDAtOS41MTUtMS4zNjEtMTMuNjA1LTMuOTM4Yy01Ljc4MS0zLjY0LTkuNzk5LTkuMzE0LTExLjMxMy0xNS45NzkgICBDMTMyLjgwNywxMTMuMDUyLDEzMy45NzksMTA2LjE5OCwxMzcuNjIsMTAwLjQxNHoiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
  background-size: 13px;
}

.icon-mark {
  composes: icon;  
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5MCA0OTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MCA0OTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTQ3OC4wMjgsODMuNDU3bC02Ny4zMzEtNzAuNTEyYy0xOS43NDMtMTkuODctNDUuNTM1LTE0LjQzNy01OS4wNDEsMEwzMzkuNTIsMjUuNjUyICBjLTExLjU4NS03LjE1My0yNy41ODMtNS42NDUtMzcuMzA3LDQuNTM4TDExMC44MzIsMjMwLjYyTDc3LjA5LDM0Ny4zMjZMMCw0MjguMDU1TDEwMi45OTksNDkwbDU1LjY0Ny01OC4yODFsMTEwLjk1Ny0zNC44MiAgbDE5MS45NDktMjAxLjAyN2MxMC4wMTYtMTAuNDgxLDExLjMyNS0yNi42NzIsMy45NDEtMzguNjUybDEyLjUzNS0xMy4xMjhDNDkzLjk5MSwxMjcuMzc0LDQ5My45OTEsMTAwLjE3Niw0NzguMDI4LDgzLjQ1N3ogICBNOTkuNDk5LDQ2My43NDhsLTY2LjcwOC00MC4xMTZsNTMuNDctNTUuOTk1bDUyLjUwOCw1NC45OUw5OS40OTksNDYzLjc0OHogTTE1NS45MDUsNDEwLjY1OGwtNTcuOTY0LTYwLjcwM2wzMS43MDktOTkuNjI2ICBsMTIxLjM4NSwxMjcuMTI1TDE1NS45MDUsNDEwLjY1OHogTTQ0Ni43MDUsMTgxLjUxMkwyNjkuNjAyLDM2Ni45ODRMMTM5LjM5LDIzMC42MThMMzE3LjA2LDQ0LjU1YzMuNTgtMy43NDUsOS42NTgtMy43NDUsMTMuMjI4LDAgIEw0NDYuNzEsMTY2LjQ3M0M0NTAuNjAyLDE3MC41NTIsNDUwLjYwMiwxNzcuNDM0LDQ0Ni43MDUsMTgxLjUxMnogTTQ2My4xNzYsMTI5LjczMmwtMTEuNDkzLDEyLjAzOEwzNTQuNDQ2LDM5LjkzNmwxMi4wNjItMTIuNjMgIGM3Ljg3My04LjI1OCwyMS40NDMtOC4yNjksMjkuMzM3LDBsNjcuMzMxLDcwLjUxMkM0NzEuNTgzLDEwNi42MTgsNDcxLjU4MywxMjAuOTMzLDQ2My4xNzYsMTI5LjczMnoiIGZpbGw9IiMwMDAwMDAiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==");
  background-size: 13px;
}

.icon-paint {
  composes: icon;
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik03LjEgMS43bC0xLjIgMS4xLTIuMy0yLjRjLTAuNi0wLjUtMS42LTAuNS0yLjIgMC0wLjIgMC4zLTAuNCAwLjctMC40IDEuMXMwLjIgMC44IDAuNCAxLjFsMi40IDIuNC0zLjggMy43IDYuNCA2LjQgNy03LjEtNi4zLTYuM3pNMi4xIDEuOWMwLTAuMS0wLjEtMC4zLTAuMS0wLjRzMC4xLTAuMyAwLjEtMC40YzAuMi0wLjEgMC42LTAuMSAwLjggMGwyLjQgMi40LTAuOCAwLjctMi40LTIuM3pNMi4xIDhsMy44LTMuOCAxLjIgMS4yYzAuMSAwLjEgMC4yIDAuMSAwLjQgMC4xczAuMyAwIDAuNC0wLjFjMC4xLTAuMiAwLjEtMC41LTAuMS0wLjdsLTEuMi0xLjIgMC40LTAuNCA1IDQuOWgtOS45eiIvPgo8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTMuNSA5YzAgMC0xLjUgNC43LTEuNSA1LjVzMC43IDEuNSAxLjUgMS41IDEuNS0wLjcgMS41LTEuNS0xLjUtNS41LTEuNS01LjV6Ii8+Cjwvc3ZnPgo=");
  background-size: 13px;  
}