body .hidden{display:none}body #canvasHidden{display:none;min-width:500px}body #outerContainer{display:grid;grid-template-columns:1fr 1fr;padding:1rem;grid-auto-rows:1fr;align-items:stretch}body #outerContainer h2.smaller{font-size:100%}body #outerContainer p.smaller{font-size:80%}@media (max-width:481px){body #outerContainer{display:block;padding:0}}body #outerContainer #captureArea{margin:auto;padding:1rem}body #outerContainer #captureArea #captureButton{display:none}body #outerContainer #captureArea .yellow-btn{font-size:70%;padding:0.2rem 0.4rem;line-height:initial}body #outerContainer #captureArea .yellow-btn.button{position:absolute;top:1rem;left:0.5rem}body #outerContainer #captureArea .yellow-btn.leftButton{position:absolute;bottom:1rem;left:0.5rem;right:auto}body #outerContainer #captureArea #videoContainer{max-width:320px;position:relative;height:auto;line-height:0;border:5px solid #966d4f;box-sizing:content-box}body #outerContainer #captureArea #videoContainer:after{position:absolute;content:"\f111";font-family:"FontAwesome";color:#e56262;top:1.2rem;right:1rem;animation:fadeInFromNone 1.5s linear;animation-iteration-count:infinite}body #outerContainer #captureArea #videoContainer #videoSrc{width:100%}body #outerContainer #captureArea #canvasContainer{max-width:320px;position:relative;height:auto;line-height:0;border:5px solid #0095a3;box-sizing:content-box}body #outerContainer #captureArea #canvasContainer #canvasCapture{filter:grayscale(0.6) contrast(1.5)}body #outerContainer #responseContainer{margin:auto;background:white;border:2px solid #0095a3;border-radius:10px;padding:1.5rem;position:relative}body #outerContainer #responseContainer #waitingContainer{text-align:center;font-size:80%}body #outerContainer #responseContainer #waitingContainer img{width:80px}body #outerContainer #responseContainer #prodIngredientsDiv{font-size:80%}body #outerContainer #responseContainer #prodIngredientsDiv #prodAllergens{margin-left:1rem}body #outerContainer #responseContainer #prodIngredientsDiv #prodAllergens li{list-style-type:disc}body #informationContainer{font-size:80%}body #informationContainer ol{margin-left:1rem;list-style-type:alpha}body #informationContainer ol li{line-height:2}body #libraryContainer{margin-top:1rem;font-size:80%;background:#0d2f38;color:#fff;border-radius:10px}body #libraryContainer #libraryInner{padding:1rem}body #libraryContainer #libraryInner h2{margin:0}body #libraryContainer #libraryInner #libGrid{display:block}@media (min-width:768px){body #libraryContainer #libraryInner #libGrid{display:grid;grid-template-columns:3fr 1fr;grid-column-gap:1rem}}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap{width:100%;overflow-x:scroll}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap #libraryUL{display:flex;width:max-content;margin:0.2rem}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap #libraryUL li{display:inline-block;border:3px solid transparent}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap #libraryUL li div.uploadDiv span.uploadName{display:block;margin:0.2rem;font-size:80%}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap #libraryUL li div.uploadDiv span.uploadName a.removeAnchor{color:#fff;margin-left:0.2rem;cursor:pointer}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap #libraryUL li div.uploadDiv img{width:50px;cursor:pointer}body #libraryContainer #libraryInner #libGrid #libraryScrollWrap #libraryUL li.selected{border:3px solid #0095a3}body #libraryContainer #libraryInner #libGrid #libraryCurrent{display:grid;grid-template-columns:1fr 1fr;margin-top:0.25rem}body #selectorContainer{display:grid;grid-template-columns:1fr 1fr;padding:2rem;grid-column-gap:1rem;justify-items:center;align-items:center;grid-auto-rows:1fr;align-items:stretch}@media (max-width:481px){body #selectorContainer{display:block;padding:1rem 0}}body #selectorContainer .selector{background:white;border:2px solid #0095a3;border-radius:10px}@media (max-width:481px){body #selectorContainer .selector{margin:1rem 0}}body #selectorContainer .selector .selectorInner{margin:auto;padding:1.5rem;position:relative;text-align:center;cursor:pointer;height:100%}@media (max-width:481px){body #selectorContainer .selector .selectorInner h2{font-size:1.2rem}body #selectorContainer .selector .selectorInner p{font-size:80%}}body #selectorContainer .selector .selectorInner:hover{background:#0095a3;color:white}body #selectorContainer .selector .selectorInner i,body #selectorContainer .selector .selectorInner svg{font-size:2rem;width:10%;height:auto}@keyframes fadeInFromNone{0%{opacity:0}30%{opacity:1}70%{opacity:1}to{opacity:0}}