@charset "UTF-8";
html.image-edit,
html.image-edit body,
html.image-edit #app                                        { width: 100%; height: 100%; }

#image-editor                                              { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

#imageeditheader                                           { position: absolute; top: 0; right: 0; left: 0; height: 80px; margin: 0; padding: 0; background-color: #ffffff; }
#imageeditheader .icon                                     { position: absolute; top: 0; width: 80px; height: 80px; text-align: center; cursor: pointer; }
#imageeditheader .icon.select                              { color: #ff0000; }
#imageeditheader .icon i                                   { font-size: 35px; line-height: 52px; }
#imageeditheader .icon img                                 { margin: 0; border: none; padding: 10px 0; height: 52px; fill: #000000; }
#imageeditheader .icon span                                { display: block; text-align: center; font-size: 12px; line-height: 1.5; }
#imageeditheader .text                                     { left:   10px; }
#imageeditheader .free                                     { left:  100px; }
#imageeditheader .undo                                     { right: 100px; }
#imageeditheader .redo                                     { right:  10px; }

#imagecanvasframe                                          { position: absolute; top: 80px; right: 0; bottom: 60px; left: 0; margin: 0; border: none; padding: 0; background-color: #ffffff; }
#imagecanvasframe .canvas-container                        { position: absolute !important; transform-origin: 0 0; margin: 0; border: none; padding: 0; background: none; }

#imagecanvasframe div.text-menu                            { position: absolute; border: none; padding: 0; }
#imagecanvasframe div.path-menu                            { position: absolute; border: none; padding: 0; }
#imagecanvasframe div table                                { margin: 0; border: none; border-collapse: separate; border-spacing: 1px; color: #ffffff; }
#imagecanvasframe div table td                             { min-width: 80px; border: 1px solid rgba(52, 73, 94, 0.7); padding: 5px 0; text-align: center; background-color: rgba(52, 73, 94, 0.7); font-size: 12px; cursor: pointer; empty-cells: hide; }
#imagecanvasframe div table td:hover                       { border: 1px solid rgba(255, 255, 255, 0.7); background-color: rgba(52, 73, 94, 1); }
#imagecanvasframe div table td img                         { display: block; margin: 0 auto; border: none; padding: 10px 0; height: 50px; }
#imagecanvasframe div table td img                         { filter: invert(100%) sepia(0%) saturate(7448%) hue-rotate(252deg) brightness(121%) contrast(86%); }
#imagecanvasframe div table td img.delete                  { filter: invert(37%) sepia(8%) saturate(4157%) hue-rotate(314deg) brightness(94%) contrast(90%); }

#imagecanvasframe div.font-size-slider                     { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80px; margin: auto; border: none; padding: 0; background-color: rgba(52, 73, 94, 0.7); }
#imagecanvasframe div.font-size-slider                     { border-radius: 5px; }
#imagecanvasframe div.font-size-slider .title              { display: block; margin: 0 auto; font-size: 20px; color: #ffffff; line-height: 35px; text-align: center; }
#imagecanvasframe div.font-size-slider input               { display: block; margin: 0 auto; width: 80%; }

#imagecanvasframe div.font-color-selector                  { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80px; margin: auto; border: none; padding: 0; background-color: rgba(52, 73, 94, 0.7); text-align: center; }
#imagecanvasframe div.font-color-selector                  { border-radius: 5px; }
#imagecanvasframe div.font-color-selector .title           { display: block; margin: 0 auto; font-size: 20px; color: #ffffff; line-height: 35px; }
#imagecanvasframe div.font-color-selector .selector        { display: inline-block; margin: 0 25px; width: 35px; height: 35px; }
#imagecanvasframe div.font-color-selector .selector        { border-radius: 20px; }
#imagecanvasframe div.font-color-selector .black           { border: 1px solid white; background-color: black; }
#imagecanvasframe div.font-color-selector .white           { border: 1px solid black; background-color: white; }
#imagecanvasframe div.font-color-selector .red             { border: 1px solid cyan;  background-color: red;   }

#imagecanvasframe div.path-size-slider                     { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80px; margin: auto; border: none; padding: 0; background-color: rgba(52, 73, 94, 0.7); }
#imagecanvasframe div.path-size-slider                     { border-radius: 5px; }
#imagecanvasframe div.path-size-slider .title              { display: block; margin: 0 auto; font-size: 20px; color: #ffffff; line-height: 35px; text-align: center; }
#imagecanvasframe div.path-size-slider input               { display: block; margin: 0 auto; width: 80%; }

#imagecanvasframe div.path-color-selector                  { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80px; margin: auto; border: none; padding: 0; background-color: rgba(52, 73, 94, 0.7); text-align: center; }
#imagecanvasframe div.path-color-selector                  { border-radius: 5px; }
#imagecanvasframe div.path-color-selector .title           { display: block; margin: 0 auto; font-size: 20px; color: #ffffff; line-height: 35px; }
#imagecanvasframe div.path-color-selector .selector        { display: inline-block; margin: 0 25px; width: 35px; height: 35px; }
#imagecanvasframe div.path-color-selector .selector        { border-radius: 20px; }
#imagecanvasframe div.path-color-selector .black           { border: 1px solid white; background-color: black; }
#imagecanvasframe div.path-color-selector .white           { border: 1px solid black; background-color: white; }
#imagecanvasframe div.path-color-selector .red             { border: 1px solid cyan;  background-color: red;   }


#imageeditfooter                                           { position: absolute; bottom: 0; right: 0; left: 0; height: 80px; margin: 0; border: none; padding: 0 0 20px 0; text-align: center; vertical-align: middle; background-color: #ffffff; }

#imageeditfooter button                                    { display: inline-block; width: 35%; margin: 15px 5%; border: none; vertical-align: middle; }
#imageeditfooter button                                    { border-radius: 5px; }
#imageeditfooter button                                    { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); }
#imageeditfooter button.cancel                             { background-color: #e2b13c; }
#imageeditfooter button.cancel                             { background: -moz-linear-gradient(top,#fbd478 0%,#e2b13c); background: -webkit-gradient(linear, left top, left bottom, from(#fbd478), to(#e2b13c)); }
#imageeditfooter button.submit                             { background-color: #043f6e; }
#imageeditfooter button.submit                             { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); }
#imageeditfooter button span                               { color: #ffffff; font-size: 16px; line-height: 2; }