body {
  color: blue; }

#OriginalCanvas {
  display: none; }

#ImageDisplayer,
#CropCanvas {
  position: absolute;
  top: 0;
  left: 0; }

#CropCanvas {
  z-index: 99; }

#ImageDisplayer {
  z-index: 98; }

.canvas-container {
  position: relative;
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAARAAAATgAAAAAAAABgAAAAAQAAAGAAAAABcGFpbnQubmV0IDQuMC4xNwAA/9sAQwACAQECAQECAgICAgICAgMFAwMDAwMGBAQDBQcGBwcHBgcHCAkLCQgICggHBwoNCgoLDAwMDAcJDg8NDA4LDAwM/9sAQwECAgIDAwMGAwMGDAgHCAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAEAAQAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/QANceezbpvtOc8F/MZ95BYnPGBgADmvuxRCsHlqImt8YxwVVcAgD1B680KIVg8tRE1vjGOCqrgEAeoPXmvhMNceezbpvtOc8F/MZ95BYnPGBgADmgD/2Q==");
  border: 1px solid #ccc; }

/**
* controls
*/
.active-tool {
  color: #d62da7; }

/**
LOADER Start --->
*/
.hide-loader {
  display: none; }

.loader-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: white; }

.scanner {
  width: 100%;
  max-width: 300px;
  height: 100px;
  position: relative;
  padding: 10px 5px;
  margin: 0 auto;
  box-shadow: inset 0 0 10px white;
  top: calc(50% - 100px); }

.invoice {
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg width="152px" height="41px" viewBox="0 0 152 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>invoice square@2x</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="invoice-square" transform="translate(76.000000, 20.500000) rotate(-270.000000) translate(-76.000000, -20.500000) translate(55.500000, -55.500000)"><g id="Group-3"><polygon id="Fill-1" fill="%23CECECE" points="2.07276507 151.999593 34.3395759 151.999593 38.4876008 152 40.0561331 152 40.0561331 2.42940769 40.0561331 0 0.505197505 0 0.505197505 6.01443028 0.505197505 151.999593"></polygon><polygon id="Path" fill="%23FFFFFF" points="39.1268191 -2.6147541e-13 39.1268191 2.05568978 39.1268191 151.975743 30.9315716 151.975743 20.8565124 152 10.706342 152 1.57118868 151.975743 1.57118868 -2.6147541e-13"></polygon></g><polygon id="Fill-12" fill="%23CECECE" points="8 5.89442113 28.2577963 5.89442113 28.2577963 5 8 5"></polygon><polygon id="Fill-13" fill="%23CECECE" points="8 8.89442113 28.2577963 8.89442113 28.2577963 8 8 8"></polygon><polygon id="Fill-14" fill="%23CECECE" points="8 12.8944211 28.2577963 12.8944211 28.2577963 12 8 12"></polygon><polygon id="Fill-16" fill="%23CECECE" points="29 5.89442113 32.8586279 5.89442113 32.8586279 5 29 5"></polygon><polygon id="Fill-17" fill="%23CECECE" points="29 8.89442113 32.8586279 8.89442113 32.8586279 8 29 8"></polygon><polygon id="Fill-18" fill="%23CECECE" points="29 12.8944211 32.8586279 12.8944211 32.8586279 12 29 12"></polygon><g id="Group-2" transform="translate(21.000000, 80.000000) scale(1, -1) translate(-21.000000, -80.000000) translate(8.000000, 24.000000)" fill="%23CECECE"><polygon id="Fill-4" points="12 38.8944211 25.5051975 38.8944211 25.5051975 38 12 38"></polygon><polygon id="Fill-4" points="12 81.8944211 25.5051975 81.8944211 25.5051975 81 12 81"></polygon><polygon id="Fill-5" points="12 35.8944211 25.5051975 35.8944211 25.5051975 35 12 35"></polygon><polygon id="Fill-5" points="12 78.8944211 25.5051975 78.8944211 25.5051975 78 12 78"></polygon><polygon id="Fill-6" points="0 0.894421133 20.2577963 0.894421133 20.2577963 0 0 0"></polygon><polygon id="Fill-6" points="0 45.8944211 20.2577963 45.8944211 20.2577963 45 0 45"></polygon><polygon id="Fill-6" points="0 88.8944211 20.2577963 88.8944211 20.2577963 88 0 88"></polygon><polygon id="Fill-7" points="0 4.89442113 20.2577963 4.89442113 20.2577963 4 0 4"></polygon><polygon id="Fill-8" points="4 8.89442113 15.5758836 8.89442113 15.5758836 8 4 8"></polygon><polygon id="Fill-8" points="4 53.8944211 15.5758836 53.8944211 15.5758836 53 4 53"></polygon><polygon id="Fill-8" points="4 96.8944211 15.5758836 96.8944211 15.5758836 96 4 96"></polygon><polygon id="Fill-9" points="21 8.89442113 24.8586279 8.89442113 24.8586279 8 21 8"></polygon><polygon id="Fill-9" points="21 53.8944211 24.8586279 53.8944211 24.8586279 53 21 53"></polygon><polygon id="Fill-9" points="21 96.8944211 24.8586279 96.8944211 24.8586279 96 21 96"></polygon><polygon id="Fill-10" points="21 0.894421133 24.8586279 0.894421133 24.8586279 0 21 0"></polygon><polygon id="Fill-10" points="21 45.8944211 24.8586279 45.8944211 24.8586279 45 21 45"></polygon><polygon id="Fill-10" points="21 88.8944211 24.8586279 88.8944211 24.8586279 88 21 88"></polygon><polygon id="Fill-11" points="21 4.89442113 24.8586279 4.89442113 24.8586279 4 21 4"></polygon><polygon id="Fill-12" points="0 15.8944211 20.2577963 15.8944211 20.2577963 15 0 15"></polygon><polygon id="Fill-12" points="0 61.8944211 20.2577963 61.8944211 20.2577963 61 0 61"></polygon><polygon id="Fill-12" points="0 104.894421 20.2577963 104.894421 20.2577963 104 0 104"></polygon><polygon id="Fill-13" points="0 19.8944211 20.2577963 19.8944211 20.2577963 19 0 19"></polygon><polygon id="Fill-13" points="0 64.8944211 20.2577963 64.8944211 20.2577963 64 0 64"></polygon><polygon id="Fill-13" points="0 107.894421 20.2577963 107.894421 20.2577963 107 0 107"></polygon><polygon id="Fill-14" points="0 23.8944211 20.2577963 23.8944211 20.2577963 23 0 23"></polygon><polygon id="Fill-14" points="0 68.8944211 20.2577963 68.8944211 20.2577963 68 0 68"></polygon><polygon id="Fill-14" points="0 111.894421 20.2577963 111.894421 20.2577963 111 0 111"></polygon><polygon id="Fill-15" points="6 27.8944211 14.6819127 27.8944211 14.6819127 27 6 27"></polygon><polygon id="Fill-16" points="21 15.8944211 24.8586279 15.8944211 24.8586279 15 21 15"></polygon><polygon id="Fill-16" points="21 61.8944211 24.8586279 61.8944211 24.8586279 61 21 61"></polygon><polygon id="Fill-16" points="21 104.894421 24.8586279 104.894421 24.8586279 104 21 104"></polygon><polygon id="Fill-17" points="21 19.8944211 24.8586279 19.8944211 24.8586279 19 21 19"></polygon><polygon id="Fill-17" points="21 64.8944211 24.8586279 64.8944211 24.8586279 64 21 64"></polygon><polygon id="Fill-17" points="21 107.894421 24.8586279 107.894421 24.8586279 107 21 107"></polygon><polygon id="Fill-18" points="21 23.8944211 24.8586279 23.8944211 24.8586279 23 21 23"></polygon><polygon id="Fill-18" points="21 68.8944211 24.8586279 68.8944211 24.8586279 68 21 68"></polygon><polygon id="Fill-18" points="21 111.894421 24.8586279 111.894421 24.8586279 111 21 111"></polygon></g><g id="Group-2" transform="translate(20.500000, 143.000000) scale(1, -1) translate(-20.500000, -143.000000) translate(8.000000, 139.000000)" fill="%23CECECE"><polygon id="Fill-12" points="0 0.894421133 20.2577963 0.894421133 20.2577963 0 0 0"></polygon><polygon id="Fill-13" points="0 3.89442113 20.2577963 3.89442113 20.2577963 3 0 3"></polygon><polygon id="Fill-14" points="0 7.89442113 20.2577963 7.89442113 20.2577963 7 0 7"></polygon><polygon id="Fill-16" points="21 0.894421133 24.8586279 0.894421133 24.8586279 0 21 0"></polygon><polygon id="Fill-17" points="21 3.89442113 24.8586279 3.89442113 24.8586279 3 21 3"></polygon><polygon id="Fill-18" points="21 7.89442113 24.8586279 7.89442113 24.8586279 7 21 7"></polygon></g></g></g></svg>');
  background-size: cover;
  overflow: hidden;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }

.scanner-bar {
  position: absolute;
  width: 100%;
  height: 5px;
  top: 100%;
  left: 0;
  background: #d62da7;
  border-radius: 5px;
  padding-left: -5px;
  padding-right: -5px;
  box-shadow: 0 0 10px #d62da7;
  animation-name: move-bar;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }

.text {
  top: calc(60%);
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 80px; }

.text p {
  position: absolute;
  bottom: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  left: 50%; }

.desc_1 {
  animation-name: move-desc-1;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }

.desc_2 {
  animation-name: move-desc-1;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 6s; }

@keyframes move {
  0% {
    background-position-x: 230px; }
  45% {
    background-position-x: 82px; }
  50% {
    background-position-x: 82px; }
  95% {
    background-position-x: -66px; }
  100% {
    background-position-x: -66px; } }

@keyframes move-bar {
  0% {
    top: 100%; }
  45% {
    top: 0; }
  50% {
    top: 0; }
  95% {
    top: 100%; }
  100% {
    top: 100%; } }

@keyframes move-desc-1 {
  0% {
    opacity: 0;
    bottom: 0; }
  15% {
    opacity: 1;
    bottom: 100%; }
  50% {
    opacity: 1;
    bottom: 100%; }
  65% {
    opacity: 0;
    bottom: 0; }
  100% {
    opacity: 0;
    bottom: 0; } }


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