.canvas{background:#eee;grid-area:display;display:flex;justify-content:center;align-items:center;position:relative}.canvas-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;flex-direction:column;padding:2rem}.canvas-overlay__choose-img{flex:1 1}.canvas-overlay__without-img{border-top:1px dashed #fff;padding:2rem 0 1rem}.image-overview-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,6rem));grid-template-rows:repeat(auto-fill,minmax(4rem,6rem));overflow-y:auto;grid-gap:.5rem;gap:.5rem}.image-overview-selector__input{display:none}.image-overview-selector__item{display:flex;background:#eee;cursor:pointer;position:relative;justify-content:center;align-items:center}.image-overview-selector__item:after{position:absolute;content:"use template";color:#fff;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);opacity:0;display:flex;justify-content:center;align-items:center;text-align:center}.image-overview-selector__item:hover:after{opacity:1}.image-overview-selector__item img{max-width:100%;max-height:100%}.image-overview-selector__label{padding:.2rem;display:flex;justify-content:center;align-items:center;text-align:center}.image-overview-selector__label:after{content:"Select custom image"!important}.image-upload{display:block;height:300px;background:#000;border:1px solid #000;margin:0 auto;max-width:300px;position:relative;cursor:pointer;display:flex}.image-upload,.image-upload:before{width:100%;justify-content:center;align-items:center}.image-upload:before{content:"load image";display:flex;color:#fff;position:absolute;top:0;left:0;height:100%}.image-upload__input{display:none}.image-upload__img{z-index:5;max-width:100%;max-height:100%}.face-extractor{margin:1rem 0}.face-extractor__btn{width:100%;display:block;margin:.5rem 0;padding:1rem 0;cursor:pointer}.face-extractor__display{background:#eee;position:relative;margin-top:1rem}.face-extractor__list{min-height:8rem;padding:.5rem;grid-gap:.5rem;gap:.5rem;background:#eee;display:grid;grid-template-columns:repeat(auto-fit,min(50%,8rem));grid-template-rows:repeat(auto-fit,minmax(7rem,8rem));max-height:30rem;overflow-y:auto}.face-extractor__canvas{display:none}.face-image{display:flex;flex-direction:column;background:#888;border:1px solid #777;border-radius:5px;position:relative;box-shadow:0 .1rem .3rem rgba(0,0,0,.8);transition:all .3s}.face-image__img{max-width:100%;max-height:100%}.face-image__img-container{height:7rem;flex:1 1;width:100%}.face-image:after,.face-image__img-container{display:flex;justify-content:center;align-items:center}.face-image:after{position:absolute;content:"to Canvas";top:0;left:0;right:0;bottom:0;color:#fff;background:rgba(0,0,0,.6);border-radius:5px;opacity:0;transition:all .3s}.face-image:hover:after{opacity:1;box-shadow:0 .2rem .4rem rgba(0,0,0,.8)}.face-image:hover{cursor:pointer}.loading-overlay{position:absolute;z-index:10;background-color:rgba(0,0,0,.8);display:none;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0}.loading-overlay--active{display:flex}.loading-overlay--spinner{width:80px;height:80px}.loading-overlay--spinner div{box-sizing:border-box;display:block;position:absolute;width:64px;height:64px;margin:8px;border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border:8px solid transparent;border-top-color:#fff}.loading-overlay--spinner div:first-child{animation-delay:-.45s}.loading-overlay--spinner div:nth-child(2){animation-delay:-.3s}.loading-overlay--spinner div:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.object-label{width:100%;background:#333;border-radius:3px;color:#fff;padding:.5rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;box-shadow:0 .2rem .3rem rgba(0,0,0,.8)}.object-label--active{background:green}.object-label__type{font-size:.8rem}.object-label__info{display:flex;align-items:center}.object-label__content{font-size:1.3rem;margin-left:1rem}.object-label__delete{background:red;color:#fff;font-size:1.2rem;padding:.2rem .5rem;border-radius:5px;cursor:pointer;border:none}.object-label__delete:hover{-webkit-filter:saturate(.8);filter:saturate(.8)}.object-labels{padding:.5rem}.create-selector{display:flex}.create-selector__btn{display:block;height:4rem;flex:1 1;cursor:pointer;background:#333;color:#eee}.create-selector__btn--active{-webkit-filter:opacity(.8);filter:opacity(.8)}.base-image-display{padding:2rem;background:#333;color:#fff}.base-image-display__img-container{width:100%;height:8rem;background:#fff;display:flex;justify-content:center;align-items:center}.base-image-display__img{max-width:100%;max-height:100%}.base-image-display__info{font-size:.8rem;display:flex;justify-content:space-between}.base-image-display__info-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}#root,.App,body,html{height:100%;width:100%}.App{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:2fr 1fr;grid-template-areas:"left display right" "left bottom right"}.overview-ui{background:#ddd;grid-area:left}.create-ui{background:#aaa;grid-area:right}.selected-ui{background:#ccc;grid-area:bottom;display:flex;justify-content:center;align-items:center}.ui-component{background:#333;margin:1rem;padding:1rem;border-radius:.5rem;color:#fff}.mt--1{margin-top:1rem}.mt--2{margin-top:2rem}.button{cursor:pointer;border:1px solid #fff;display:block;padding:.3rem 1rem;font-size:1.2rem}.button--ui{width:100%;background:#333;color:#eee;border:1px solid #aaa;padding:1rem 0;transition:all .3}.button--ui--active{background:#555}.button--ui:hover{background:#444}.button--download{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.button--download:hover{animation:slidebg 5s linear infinite;background-image:linear-gradient(90deg,#e7484f,#e7484f 16.65%,#f68b1d 0,#f68b1d 33.3%,#fced00 0,#fced00 49.95%,#009e4f 0,#009e4f 66.6%,#00aac3 0,#00aac3 83.25%,#732982 0,#732982 100%,#e7484f 0)}.button--download:active{-webkit-filter:saturate(.5);filter:saturate(.5)}.button--download:disabled{-webkit-filter:saturate(.3);filter:saturate(.3);cursor:not-allowed}.button--main{border-radius:5px;background:green;color:#fff;border:1px solid #fff;margin:0 auto;box-shadow:0 .2rem .4rem rgba(0,0,0,.6);transition:all .3s}.button--main:active{box-shadow:0 .2rem .2rem rgba(0,0,0,.6);transform:translateY(2px)}.button--main:hover{background-image:linear-gradient(90deg,#e7484f,#e7484f 16.65%,#f68b1d 0,#f68b1d 33.3%,#fced00 0,#fced00 49.95%,#009e4f 0,#009e4f 66.6%,#00aac3 0,#00aac3 83.25%,#732982 0,#732982 100%,#e7484f 0);animation:slidebg 5s linear infinite}.button--main:disabled{-webkit-filter:saturate(.3);filter:saturate(.3);cursor:not-allowed}@keyframes slidebg{to{background-position:20vw}}.text-creator__input-container{background:red;margin:.5rem 0 2rem}.text-creator__input{width:100%;padding:.3rem;font-size:1.1rem}.text-editor{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:.5rem;gap:.5rem}.text-editor__label-text{grid-column:1/1}.text-editor__input-text{grid-column:2/7}.text-editor__label-x{grid-column:1/1}.text-editor__input-x{grid-column:2/4}.text-editor__label-y{grid-column:4/4}.text-editor__input-y{grid-column:5/7}.text-editor__label-rotation{grid-column:1/1;grid-row:3/3}.text-editor__input-rotation{grid-column:2/4;grid-row:3/3}.text-editor__label-font-size{grid-column:1/3}.text-editor__input-font-size{grid-column:3/5}.text-editor__label-font-size{grid-column:1/1}.text-editor__input-font-size{grid-column:2/4;grid-row:4/4}.text-editor__label-color{grid-column:4/4}.text-editor__input-color{grid-column:5/7;grid-row:4/4}.text-editor__label-stroke{grid-column:4/4}.text-editor__input-stroke{grid-column:5/7;grid-row:5/5}.text-editor__label-stroke-width{grid-column:1/1}.text-editor__input-stroke-width{grid-column:2/4;grid-row:5/5}.text-editor input{width:100%;padding:.2rem;font-size:.9rem}.image-editor{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:.5rem;gap:.5rem}.image-editor__label-x{grid-column:1/1}.image-editor__input-x{grid-column:2/4}.image-editor__label-y{grid-column:4/4}.image-editor__input-y{grid-column:5/7}.image-editor__label-rotation{grid-column:1/1;grid-row:2/2}.image-editor__input-rotation{grid-column:2/4;grid-row:2/2}.image-editor__label-width{grid-column:1/1;grid-row:3/3}.image-editor__input-width{grid-column:2/4;grid-row:3/3}.image-editor__label-height{grid-column:4/4;grid-row:3/3}.image-editor__input-height{grid-column:5/7;grid-row:3/3}.image-editor input{width:100%;padding:.2rem;font-size:.9rem}
/*# sourceMappingURL=main.a621f2c2.chunk.css.map */