@charset "UTF-8";
/** display: flex | inline-flex; (Applies to: parent flex container element)  This defines a flex container; inline or block depending on the given value. Thus, it enables a flex context for all its direct children. NOTE: - CSS columns have no effect on a flex container - float, clear and vertical-align have no effect on a flex item */
/** flex-flow: <‘flex-direction’> || <‘flex-wrap’>  This is a shorthand `flex-direction` and `flex-wrap` properties, which together define the flex container's main and cross axes. Default is "row nowrap"; */
/** flex-direction: row (default) | row-reverse | column | column-reverse  This establishes the main-axis, thus defining the direction flex items are placed in the flex container.  - row (default): left to right in ltr; right to left in rtl - row-reverse: right to left in ltr; left to right in rtl - column: same as row but top to bottom - column-reverse: same as row-reverse but top to bottom */
/** flex-wrap: nowrap (default) | wrap | wrap-reverse  This defines whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.  - nowrap (default): single-line / left to right in ltr; right to left in rtl - wrap: multi-line / left to right in ltr; right to left in rtl - wrap-reverse: multi-line / right to left in ltr; left to right in rtl */
/** align-items: flex-start | flex-end | center | baseline | stretch  This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).  - flex-start: cross-start margin edge of the items is placed on the cross-start line - flex-end: cross-end margin edge of the items is placed on the cross-end line - center: items are centered in the cross-axis - baseline: items are aligned such as their baselines align - stretch (default): stretch to fill the container (still respect min-width/max-width) */
/** justify-content: flex-start | flex-end | center | space-between | space-around  This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.  - flex-start (default): items are packed toward the start line - flex-end: items are packed toward to end line - center: items are centered along the line - space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line - space-around: items are evenly distributed in the line with equal space around them */
/** flex (Applies to: child element / flex item)  This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink, flex-basis) are optional. Default is "0 1 auto" */
.sprite-list .item { padding: 10px; margin: 0 0 5px 0; background-color: #2a2d3a; }
.sprite-list .item:hover { background-color: #15161d; }
.sprite-list .item.selected { background-color: #404358; }

html, body, #viewport { overflow: hidden; height: 100%; }

body { background: #353849; color: #F0F1F2; overflow: hidden; font-family: "Bangers"; font-size: 14px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none; }

.dlg { background: rgba(10, 12, 13, 0.8); }
.dlg .dlg-content { background: #505273; }

*[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

button, .button { position: relative; text-decoration: none; padding: 0; margin: 0; border-radius: 0; padding: 0 15px; font-family: "Bangers"; font-size: 15px; min-width: 50px; height: 50px; border: 1px solid #15161d; color: #F0F1F2; background: #2a2d3a; cursor: pointer; line-height: 46px; text-align: center; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; }
button:hover, .button:hover { background: #15161d; box-shadow: inset 0 0 10px white; border-color: white; }
button:active, .button:active { background: black; }
button[disabled]:hover, button[disabled]:active, .button[disabled]:hover, .button[disabled]:active { background: #2a2d3a; text-shadow: none; }
button .icon, .button .icon { position: absolute; top: 7px; left: 8px; width: 32px; height: 32px; }

button .icon, .button .icon, .item .icon { opacity: 0.7; }
button:active .icon, button:hover .icon, .button:active .icon, .button:hover .icon, .item:active .icon, .item:hover .icon { opacity: 1; }

img, canvas { background: transparent url("../img/editor-background.png"); }

fieldset { border: 1px solid #555a75; padding: 10px; }
fieldset + fieldset { margin-top: 10px; }

legend { padding: 0 10px; }

label { display: inline-block; min-width: 75px; text-align: right; }

input { border: none; background-color: #F0F1F2; color: #353849; padding: 5px; line-height: 20px; vertical-align: middle; text-align: right; }

.dlg-content .dlg-close { border-radius: 25px; background-color: #505273; }
.dlg-content h1 { font-size: 18px; }
.dlg-content fieldset { text-align: left; }
.dlg-content fieldset label { margin: 5px 0; }
.dlg-content .button-bar { padding: 5px 0; text-align: right; }
.dlg-content .button-bar button { margin: 5px 0 0 5px; }

#editorPane { box-shadow: inset black 0 0 15px; }