/* Glyph Overview */
.glyphview canvas.item { display: block; float: left; border: solid 1px #e0e0e0; margin-right: -1px; margin-bottom: -1px; cursor: pointer; }
.glyphview canvas.item:hover { background-color: #e0e0e0; }
.glyphview .message { font-weight: bold; color: #ff0033; }
.glyphview-list-end { clear: both; height: 20px; margin-bottom: 20px; }

/* Glyph Modal */
#glyphModal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
#glyphModal .modalContent { border: solid 1px #a0a0a0; position: relative; background-color: #fefefe; margin: 100px auto 0 auto; padding: 15px 25px 25px 25px; width: 550px; }
#glyphModal .close { cursor: pointer; float: right; font-size: 36px; color: #999999; }
#glyphModal .glyph-display { display: inline-block; position: relative; }
#glyphModal .glyph { position: absolute; top: 0; left: 0; }
#glyphModal .glyph-unicode { color: #999; text-align: center; }

/* Loading Animation */
.glyphview-load { min-height: 400px; width: 100%; }
.glyphsLoaded .glyphview-load { display: none; }
.glyphview-loader { display: inline-block; position: relative; width: 64px; height: 64px; margin: 100px 50%; }
.glyphview-loader div { display: inline-block; position: absolute; left: 6px; width: 10px; background: #f5f5f5; animation: glyphview-loader 0.96s cubic-bezier(0, 0.5, 0.5, 1) infinite; }
.glyphview-loader div:nth-child(1) { left: 6px; animation-delay: -0.24s; }
.glyphview-loader div:nth-child(2) { left: 26px; animation-delay: -0.12s; }
.glyphview-loader div:nth-child(3) { left: 45px; animation-delay: 0s; }
@keyframes glyphview-loader { 0% { top: 6px; height: 51px; } 50%, 100% { top: 19px; height: 26px; } }