html{font-family:Segoe UI,Frutiger,sans-serif;width:100%;height:100%}body{margin:0px;overflow-x:hidden}:root{--menu-width:120px;--sidebar-width:250px}#app{margin-top:10px}.warehouse{border:1px solid black}.row{display:flex;flex-direction:row}.place{width:20px;height:20px;margin:1px;border:1px solid black}.floor{border:1px solid white;background-color:white}#wrapper{width:90%;overflow:hidden;width:calc(100% - 50px);height:calc(100vh - 80px);margin:auto;float:left}#demowrapper{overflow:hidden;width:60%;height:80vh;margin:auto}#sideView{float:left}.topnav{background-color:#7D0137;overflow:hidden;display:flex}.topnav .icon{display:none}.topnav img{float:none;height:24px;margin:24px 24px;padding:0px}.topnav a{float:left;color:#fff;text-align:center;padding:26px 20px;text-decoration:none;font-size:17px}.topnav .expand{float:left;margin-left:auto;margin-right:auto}.topnav .end{float:left;margin-right:10px}.topnav a:hover{color:#ca5082}.topnav a.active{background-color:#04AA6D;color:white}.short-video{margin-top:4rem;height:auto;background-repeat:no-repeat;background-image:linear-gradient(white,white),linear-gradient(#eee,#eee);margin-bottom:1rem;background-size:100% 5rem,100%;display:flex;flex-flow:column}.short-video .video{margin:auto;flex:1 1 auto;max-width:80vh;width:80vw}.short-video .video video{-webkit-box-shadow:0 0 10px #aaa;box-shadow:0 0 10px #aaa}.short-video .fill{background:#eee;margin-bottom:auto;flex:3 0 auto}.short-video .footer{background:#eee;margin-bottom:auto;flex:1 1 5rem}.sidenav{height:100%;padding:10px 0px 10px 0px;width:var(--sidebar-width);position:fixed;z-index:5;background-color:rgb(196,196,196);overflow-x:hidden;display:flex;flex-direction:column;top:0;left:0}.sidenav a{padding:6px 8px 6px 0px;text-decoration:none;font-size:30px;color:#111;display:block}.sidenav a:hover{background-color:rgb(150,150,150)}.menuitem.grower{margin-bottom:auto}.grid-element{border:3px solid rgb(196 196 196);border-radius:10%;padding:0.5rem;text-decoration:none;color:#888}.grid-element:hover{border:3px solid #000;border-radius:10%;padding:0.5rem;color:#000}.grid-content{margin:0.5rem}.grid-content img{width:100%;height:auto}.grid-content .text{text-align:center}.flash{margin-left:var(--menu-width);color:red;text-align:center}.main{margin-left:var(--sidebar-width);padding:10px 10px}.index-main{width:100%;padding:10px 10px;text-align:center;position:absolute;top:50%;transform:translateY(-50%);margin:0}.index-main img{height:22vh}.grid-main{padding:10px 10px;padding:2rem 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));grid-template-rows:masonry;align-items:center;grid-gap:50px}@media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}.menuitem{margin:5px 0px 5px 0px;display:flex}.menuitem.hidden{margin:none;display:none}.menuitem .icon{padding:2px 10px 0px 0px;float:left;width:3rem}.menuitem .name{float:left}.menuitem .highlight{margin:-6px 10px 0px 0px;height:calc(100% + 12px);width:10px;background-color:rgb(196,196,196);float:left}.menuitem .highlight-on{margin:-6px 10px 0px 0px;height:calc(100% + 12px);width:10px;background-color:#8b125d;float:left}.warehouseCanvas{margin:auto;height:100%;width:100%}#loadingOverlay{position:fixed;width:100%;height:100%;background-color:white;z-index:9999;display:none}.loadCenter{margin:auto;width:calc(90vw - 260px);margin-top:30vh;display:block;z-index:5;position:absolute}.loadText{text-align:center;padding-bottom:20px;font-size:2rem;color:#666666}.loader{border:8px solid #f3f3f3;border-top:8px solid #8b125d;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.overlay.card{position:absolute;display:none;width:min-content;left:calc(50% + var(--menu-width));top:50%;background-color:rgba(0,0,0,0.5);z-index:3;cursor:pointer}.overlay.image{position:absolute;display:none;width:0rem;height:0rem;top:50%;transform:translate(0,-50%);z-index:4}.overlay.image img{max-width:80vw;max-height:90vh;transform:translate(50%,-50%)}.overlay.click{position:absolute;display:none;height:100%;top:0;left:var(--sidebar-width);right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2;cursor:pointer}.settings-tab{margin:2rem 1rem 0.5rem 2rem;font-weight:bolder;font-size:1.5rem;color:rgb(95 95 95)}#card{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);height:90vh;width:calc(80vw - var(--sidebar-width));max-width:70vh;cursor:default}.blob{padding:25px;display:flex}.blob .logo{margin:7px 10px 0px 0px;font-size:1.5rem;color:#666666}.rcorners1{border-radius:25px;background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);z-index:4}.content{height:75vh;overflow-y:auto}.image-container{border-radius:25px 25px 0px 0px;text-align:center;background:rgba(196,196,196,0.4);position:relative}.image-container .header{border-top-left-radius:25px;border-top-right-radius:25px;font-size:22px;font-weight:bold;text-align:center;color:white;background-color:rgba(139,18,93,0.5);width:100%;padding:10px 0;box-sizing:border-box}.add-image-button{position:absolute;top:50%;right:20px;padding:10px 20px;background-color:rgb(115,115,115);color:white;border-radius:5px;border:10px;cursor:pointer;font-size:x-large}.close-card-btn{position:absolute;top:10px;right:15px;background:transparent;border:none;font-size:1.8rem;color:#ffffff;cursor:pointer}.close-card-btn:hover{color:#aaa}.cardimage{margin-top:2rem;height:calc(80vw - var(--sidebar-width) - 4rem);width:auto;margin-left:auto;margin-right:auto;max-width:calc(70vh - 4rem);max-height:20vh;cursor:pointer}.description{display:flex;flex-direction:column}.description .field{font-size:1.5rem;color:rgb(83,83,83);display:flex;margin:0px 10px 20px 10px}.description .field .name{color:rgb(95,95,95);padding:5px 5px 5px 5px;width:9.5rem}textarea.data{font-size:1.4rem}.description .field .data{margin-left:5px;padding:5px 5px 5px 5px;color:rgb(95,95,95);background-color:rgb(218,218,218);border-radius:5px;line-break:loose;overflow-y:auto;max-width:25rem;max-height:12vh}.description .field .close-button{margin-left:5px;margin-top:0.5rem;padding:0px 5px 0px 5px;border-radius:5px}#close-button,#edit-button{display:none;cursor:pointer}.buttoncase{position:fixed;width:calc(100% - 20px);bottom:1vh;margin:0px 10px 0px 10px;display:flex;max-height:fit-content}.button{font-size:1.5rem;flex-grow:1;color:black;width:auto;height:3rem;line-height:3rem;margin-left:0.5rem;margin-right:0.5rem;text-align:center;display:inline-block;background-color:rgb(196,196,196);cursor:pointer;overflow:hidden}.button:hover{color:rgb(100,100,100);background-color:white;border-color:rgb(100,100,100)}.shelf-details{border-radius:15px;display:flex;flex-direction:column;margin-right:20px;margin-left:20px;background-color:white}.shelf-details-span{margin-left:20px;margin-right:20px;margin-top:10px;margin-bottom:3px;font-weight:bold;font-size:14px;color:gray}.shelf-details-input{margin-left:20px;margin-right:20px;margin-bottom:5px;padding:7px;box-sizing:border-box;border:1px solid #ccc;border-radius:5px;font-size:14px;color:#000}.shelf-details .form-group{margin-left:20px;margin-right:20px}.shelf-details .form-group label{display:block;font-weight:bold;font-size:14px;color:gray}.shelf-details .form-group input,.shelf-details .form-group textarea,.shelf-details .form-group select{width:100%;padding:10px;box-sizing:border-box;border:1px solid #ccc;border-radius:5px;font-size:14px}.shelf-details .form-group span{width:100%;padding:10px;box-sizing:border-box;font-size:14px;color:#000}.shelf-details .save-button{margin-right:20px;margin-bottom:10px;width:30%;padding:10px;background-color:rgba(139,18,93,0.5);color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;text-align:center;align-self:flex-end}.shelf-details .save-button:hover{background-color:rgb(139,18,93)}*{box-sizing:border-box}.user{text-align:center;margin:auto;width:60%;min-width:18rem}.user .field{padding:10px;font-size:28px;border:3px solid #6f0c36;width:60%;background:#f1f1f1;max-width:30rem}.user .send{text-align:center;margin:20px auto;display:flex;flex-wrap:wrap;max-width:30rem}.user .list{padding:10px;margin:10px;font-size:28px;border:3px solid #6f0c36;width:60%;height:8rem;background:#f1f1f1}.user input{margin:10px 10px}.user label{margin:10px 10px}.user .send .remember{text-align:center;text-decoration:none;font-size:16px;cursor:pointer;padding:3px 3px;margin:auto}.user .send .submit{background-color:#6f0c36;border:3px solid #6f0c36;color:white;text-align:center;text-decoration:none;font-size:16px;cursor:pointer;margin:auto;width:fit-content}.search{text-align:center;margin:0 auto;margin-top:5%;width:70%}.search .field{padding:10px;font-size:34px;border:1px solid black;float:left;width:80%;background:#f1f1f1}.submit{float:left;padding:10px;background:#2196F3;color:white;font-size:34px;border:1px solid black;cursor:pointer}.submit:hover{background:#0b7dda}.search::after{content:"";clear:both;display:table}.search-results{text-align:center}.search-result{margin:auto;background-color:white;border-style:solid;border-width:2px;border-radius:5px;margin-top:2rem;align-items:center;justify-content:center;display:inline-block;flex-direction:row;width:70%}.search-result .position{display:inline-block;margin:1rem;float:left}.search-result .barcode{display:inline-block;margin:1rem}.dropbtn{background-color:rgb(139,18,93);color:white;padding:16px;font-size:16px;border:none}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}.dropdown-content a{color:black;padding:12px 16px;text-decoration:none;display:block}h1{margin:3rem;text-align:center;font-size:38px;color:#6f0c36;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}p{text-align:center;line-height:30px;font-size:1.2rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.api{margin:auto;padding:1rem}.api .token{width:70%;overflow-x:scroll;float:left;padding:0.3rem;display:inline-block}.api .stats{text-align:center}.api .stats .data{padding:0.3rem;display:inline-block;color:grey}.api .token::-webkit-scrollbar{width:16px}.api .token::-webkit-scrollbar-track{background-color:#e4e4e4;border-radius:100px}.api .token::-webkit-scrollbar-thumb{background-color:#6f0c36;border-radius:100px}.api .delete{margin:0.5rem;display:inline-block;background-color:#b30928;padding:0.5rem;color:white;cursor:pointer;text-decoration:none;border-radius:0.1rem;user-select:none}.api.request{margin:1rem}.splash{text-align:center}.splash .button{background-color:#6f0c36;border:3px solid #6f0c36;color:white;padding:15px 32px;text-align:center;text-decoration:none;font-size:16px;cursor:pointer;margin:2rem;display:inline-table}.splash .button.white{background-color:#fff;color:#6f0c36}.dropdown-content a:hover{background-color:#ddd}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:rgb(119,0,73)}@media (max-width:1000px){:root{--menu-width:37px;--sidebar-width:4.8rem}.overlay.click{left:var(--sidebar-width);width:calc(100% - var(--sidebar-width))}#card{width:calc(90vw - var(--sidebar-width));left:30%;max-width:none}.menuitem .name{display:none}.sidenav{width:var(--sidebar-width)}.main{margin-left:var(--sidebar-width)}.loadCenter{width:calc(100vw - 95px)}.search .field{font-size:20px}.search .submit{font-size:20px}.user .field{font-size:20px}.user .submit{font-size:20px}.user .description{font-size:20px}}@media screen and (max-width:600px){.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block}.topnav.responsive{position:relative;display:block}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}.cardimage{height:6rem;margin-top:1rem}}@media (max-width:600px){.sidenav{display:none}.overlay.click{left:0px;width:calc(100%)}.overlay.card{left:calc(50%)}#card{width:calc(90vw);left:30%;max-width:none}.menuitem .name{display:none}.main{margin-left:0px}.loadCenter{width:calc(100vw - 15px)}.user .field{font-size:10px}.user .submit{font-size:10px}.user .description{font-size:10px}.image{height:auto;max-width:calc(90vw - 2rem)}.description .field{font-size:1rem;margin:0px 5px 5px 0px}.description .field .name{width:6rem}.button{font-size:1rem;height:2rem;line-height:2rem}}