/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

img[data-action=lumos] {
  cursor: zoom-in; }

div#lumos-container {
  transition: all 250ms ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: scale(0);
  opacity: 0;
  cursor: zoom-out; }
  div#lumos-container.visible {
    animation-name: animate-in;
    animation-duration: 250ms;
    animation-fill-mode: forwards; }
  div#lumos-container.hidden {
    animation: animate-out;
    animation-duration: 250ms;
    animation-fill-mode: forwards; }

img#lumos-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; }
  @media (min-width: 768px) {
    img#lumos-image {
      max-width: 95%;
      max-height: 95%; } }

@keyframes animate-in {
  0% {
    transform: scale(0);
    opacity: 0; }
  1% {
    transform: scale(0.9);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes animate-out {
  0% {
    transform: scale(1);
    opacity: 1; }
  99% {
    transform: scale(0.9);
    opacity: 0; }
  100% {
    transform: scale(0);
    opacity: 0; } }

body+.moveable-control-box{opacity:1;transition:opacity 0.25s ease-in}body.hide-moveable+.moveable-control-box{opacity:0;transition:opacity 0.1s ease-in}.moveable-line,.moveable-control-box .moveable-area{pointer-events:none}.moveable-line.moveable-rotation-line{pointer-events:initial}body{font-family:'Roboto', sans-serif;background-color:#d2d6d9;color:#6b6767;margin-left:0}h1{font-size:large;margin:0.25rem 1rem 0.25rem 1.2rem}.banner-container{flex:0 0 auto;display:flex;flex-direction:column}#banner-output{background-color:#d2d6d9;box-shadow:0px 0px 10px #d2d6d9;padding-bottom:1em}#banner{border-radius:10px;border:1rem solid #6b6767;display:inline-block}#banner .render{display:block;width:700px;height:550px;position:relative;overflow:hidden}#banner .suggested{border:3px dotted rgba(0,0,0,0.5);box-sizing:border-box;box-shadow:0px 0px 3px #fff}@-webkit-keyframes pulse-load{from{transform:scale(1)}to{transform:scale(1.07)}}@keyframes pulse-load{from{transform:scale(1)}to{transform:scale(1.07)}}.output,.banner-container .howto{margin-left:1rem;margin-top:.25rem;width:700px}.howto h2{margin-top:0}.slideshow{width:100%;padding-top:80%;position:relative}.slideshow>*{position:absolute;top:0;right:0;width:100%;height:100%}.important{font-weight:bold;color:#b43232}.output{height:3em;display:flex;flex-direction:row;align-items:stretch}.output input{box-sizing:border-box;flex:1 0 auto;margin-left:-1px;margin-right:-1px}.output button{margin:0;flex:0 1 auto;display:inline-flex;align-items:center}.output button .iconify{width:2.5em;height:2.5em}#copy-code{-webkit-animation-name:pulse-load;animation-name:pulse-load;-webkit-animation-duration:0.25s;animation-duration:0.25s;-webkit-animation-iteration-count:6;animation-iteration-count:6;-webkit-animation-direction:alternate;animation-direction:alternate}.editor-container{display:flex}.layers-container{flex:0 10 auto}.layers-container .howto,.layers-container .layercount{margin-left:1em}.layers-container .howto p,.layers-container .layercount p{margin:0}.layers-container .layercount{color:#9e9a9a;font-size:small}.layers-container .layercount .count{font-size:medium;color:#6b6767;display:inline-block;min-width:3ch;text-align:right;background-color:#eeeff0;padding:0.15em;border-radius:5px}.layers{margin:0rem 0rem 0.25rem 0;display:inline-flex;flex-direction:column;height:calc(550px + 2rem);border:1px solid #6b6767;border-left-color:transparent;border-bottom-right-radius:3px;border-top-right-radius:3px;direction:rtl;overflow-y:scroll}.layers button{color:#6b6767;direction:ltr;margin:0;padding:0;margin-right:1.75rem;width:53px;height:51px}.layers button[disabled]{opacity:0.3}.layers button .iconify{width:45px;height:45px}.icon-list,.background-holder{margin:0;padding:0;flex:0 1 auto;display:flex;flex-direction:column;transition:all .15s}.icon-list li,.background-holder li{display:flex;align-items:center;position:relative;margin-right:1.75rem;list-style-type:none;padding:0;cursor:pointer}.icon-list li .icon,.background-holder li .icon{border:1px solid #6b6767;border-bottom:none}.icon-list li .icon,.background-holder li .icon{padding:3px;width:45px;height:45px;display:inline-block;margin:0;transition:background .5s;background-color:#eee;background-size:12px 12px;background-position:0 0,6px 6px;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)}.icon-list li .icon canvas,.background-holder li .icon canvas{width:45px;height:45px}.icon-list li .remove,.background-holder li .remove{display:flex;justify-content:center;align-items:center;float:left;width:1.5em;height:1.5em;border-radius:.75em;transition:all .15s ease-in;background-color:#aaa;color:rgba(255,255,255,0.7)}.icon-list li .remove:hover,.background-holder li .remove:hover{background-color:red;color:white}.icon-list li.danger .remove,.background-holder li.danger .remove{background-color:red;color:white}.icon-list li.selected,.background-holder li.selected{border-right:none;padding-right:1.75rem;margin-right:0;background-color:#d7e6fd}.icon-list li.selected .icon,.background-holder li.selected .icon{background-color:#d7e6fd;background-size:12px 12px;background-position:0 0,6px 6px;background-image:linear-gradient(45deg, #92aade 25%, transparent 25%, transparent 75%, #92aade 75%, #92aade),linear-gradient(45deg, #92aade 25%, transparent 25%, transparent 75%, #92aade 75%, #92aade)}.icon-list li.swap .icon,.background-holder li.swap .icon{background-color:#fff8dc;background-size:12px 12px;background-position:0 0,6px 6px;background-image:linear-gradient(45deg, #e6d698 25%, transparent 25%, transparent 75%, #e6d698 75%, #e6d698),linear-gradient(45deg, #e6d698 25%, transparent 25%, transparent 75%, #e6d698 75%, #e6d698)}.icon-list li.swapping,.background-holder li.swapping{opacity:.7}.icon-list li.swapping .icon,.background-holder li.swapping .icon{background-color:#fff8dc;background-size:12px 12px;background-position:0 0,6px 6px;background-image:linear-gradient(45deg, #e6d698 25%, transparent 25%, transparent 75%, #e6d698 75%, #e6d698),linear-gradient(45deg, #e6d698 25%, transparent 25%, transparent 75%, #e6d698 75%, #e6d698)}.icon-list.background-holder .icon,.background-holder.background-holder .icon{border-top-left-radius:3px;border-top-right-radius:3px;border-bottom:1px solid #6b6767;border-bottom-width:2px}.icon-list.icon-list li:last-of-type .icon,.background-holder.icon-list li:last-of-type .icon{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:1px solid #6b6767}.icon-list li.selected+li .icon,.background-holder li.selected+li .icon{border-top:none}.icon-list li.selected,.background-holder li.selected{border-top:1px solid #6b6767;border-bottom:1px solid #6b6767}.icon-list li.selected .icon,.background-holder li.selected .icon{border-top:none;border-right-color:transparent}.icon-list li.selected+li.selected,.background-holder li.selected+li.selected{border-top:none}.icon-list img,.background-holder img{width:45px;height:45px}.controls{flex:1 1 auto;margin-right:0.5rem;border:1px solid #6b6767;border-radius:3px;max-width:110px;display:flex;flex-direction:column;padding-bottom:.5em}.controls *{box-sizing:border-box}.controls .control{display:flex;align-items:center}.controls .control button{font-size:small;display:inline-flex;align-items:center}.controls .control button .iconify{flex:0 0 2em;width:2em;height:2em}.controls .control input{flex:2 0 3em;width:100%;display:block;min-width:0}.controls .control input[type="number"]{text-align:right}.controls .control label{flex:1 0 1.25em;display:inline-block;text-align:right;margin-right:0.2em;font-family:'Ubuntu Mono', monospace}.controls .color-button,.controls .icon-button{cursor:pointer;width:100%;padding-top:75%;border:3px solid #6b6767;transition:all .25s ease-in;transition:opacity 0s ease-in}.controls .color-button.disabled,.controls .icon-button.disabled{opacity:0.2}.controls .icon-button{padding-top:100%}.controls .icon-button{background-color:#eee;background-size:22px 22px;background-position:0 0,11px 11px;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);padding-top:0}.controls .icon-button>*{width:100%}.controls .icon-button.empty{width:100%;padding-top:100%}.controls .undo-redo{display:flex;align-items:stretch}.controls .undo-redo button{flex:1 0 auto}.controls hr{border:1px solid rgba(182,189,194,0.5);margin:.5em 0em}.controls button[disabled]{opacity:0.3}.icon-editor{display:flex;margin:0.25rem 0.25rem 0.25rem 0;flex:1 1 auto}.icon-editor .icon .remove-button{display:flex;justify-content:center;align-items:center;position:absolute;left:1em;top:1em;width:2em;height:2em;border-radius:1em;transition:all .15s ease-in;background-color:#fc9292;color:rgba(255,255,255,0.7)}.icon-editor .icon .remove-button:hover{background-color:red;color:white}.offscreen{background-color:#eee;background-size:64px 64px;background-position:0 0,32px 32px;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)}.icon-picker,.color-picker{position:absolute;z-index:9999;visibility:hidden;display:inline-block;height:auto;width:auto;opacity:0;transition:opacity 0.1s ease-in}.icon-picker .container,.color-picker .container{max-height:90vh;max-width:80vw;border-radius:1rem;border:1rem solid #373535;background-color:#373535;overflow:auto;box-shadow:1px 1px 3px}.icon-picker .group,.color-picker .group{margin-top:1em}.icon-picker .group:first-of-type,.color-picker .group:first-of-type{margin-top:0}.icon-picker h2,.color-picker h2{margin:0;border-bottom:2px solid #6b6767;border-radius:2px;color:#9e9a9a}.icon-picker .icons,.icon-picker .colors,.color-picker .icons,.color-picker .colors{display:flex;flex-wrap:wrap;justify-content:space-around}.icon-picker .icons .icon,.icon-picker .icons .color,.icon-picker .colors .icon,.icon-picker .colors .color,.color-picker .icons .icon,.color-picker .icons .color,.color-picker .colors .icon,.color-picker .colors .color{cursor:pointer;padding:0.2em;box-shadow:inset 1px 1px 3px #6b6767;margin:0.05em;border:3px solid #030303}.icon-picker .icons .icon.selected,.icon-picker .icons .color.selected,.icon-picker .colors .icon.selected,.icon-picker .colors .color.selected,.color-picker .icons .icon.selected,.color-picker .icons .color.selected,.color-picker .colors .icon.selected,.color-picker .colors .color.selected{border:3px solid #ff0;box-shadow:inset 1px 1px 3px #6b6767,inset -1px -1px 6px rgba(255,255,0,0.15),inset 1px -1px 6px rgba(255,255,0,0.15),inset -1px 1px 6px rgba(255,255,0,0.15),inset 1px 1px 6px rgba(255,255,0,0.15),-1px -1px 6px rgba(255,255,0,0.15),1px -1px 6px rgba(255,255,0,0.15),-1px 1px 6px rgba(255,255,0,0.15),1px 1px 6px rgba(255,255,0,0.15)}.icon-picker .icons .icon,.icon-picker .colors .icon,.color-picker .icons .icon,.color-picker .colors .icon{background-color:#eee;background-size:22px 22px;background-position:0 0,11px 11px;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);width:96px;height:96px}.icon-picker .icons .color,.icon-picker .colors .color,.color-picker .icons .color,.color-picker .colors .color{width:40px;height:40px}#icon-picker .icon img{width:96px;height:96px;filter:url("#editorfilter")}.footer{font-size:small;display:block;text-align:right;margin:1rem 1rem 3rem 1rem}.footer a,.footer a:visited{color:#76635d}


/*# sourceMappingURL=app.css.map*/