.layout-layout{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:1%;gap:1%;width:80vw;height:100vh;box-sizing:border-box}.button-layout{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(8vh,auto);gap:10px;flex-grow:7;justify-items:center;padding:0;width:70%;box-sizing:border-box;overflow:auto}@keyframes hourglass{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.hourglass-icon{display:inline-block;width:5vh;height:5vh;background:"app\assets\icons\loading.svg" no-repeat 50%;animation:hourglass 1.5s linear infinite;color:#212B85}.custom-input,.custom-output{font-size:clamp(14px,1px,22px);font-family:monospace;border:1px solid #ccc;width:40vw;min-width:40vw;min-height:clamp(10vh,12vh,14vh);display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:clip;direction:ltr;text-align:left;padding-right:20px;box-sizing:border-box}.icon{width:4vh;height:4vh;fill:currentColor;color:#212B85}.category-layout{grid-template-columns:repeat(2,1fr);flex-grow:2;width:20%}.category-layout,.command-layout{display:grid;grid-auto-rows:minmax(8vh,auto);gap:10px;justify-items:center;padding:0;box-sizing:border-box;overflow:auto}.command-layout{grid-template-columns:1fr;flex-grow:1;width:10%}.button-container{width:100%;height:clamp(5vh,7vh,9vh);display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#f0f0f0;box-shadow:0 2px 5px rgba(0,0,0,.1);flex-shrink:1}.button-with-image.category{background-color:#59ff00;color:white}.button-with-image.category-active{background-color:#ff9800;color:white}.button-with-image{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;padding:0}.button-with-image.arrow{background-color:#4CAF50}.button-with-image.category{background-color:#FFC107}.button-with-image.command,.keyboard-button-big.command{background-color:#2196F3;color:white}.button-with-image.quick-active{background-color:#ff9800!important;color:white!important}.button-with-image.command{background-color:#d6bfdd;color:black}.button-with-image.command:hover{background-color:#00f09a;color:white}.button-with-image.clicked{background-color:#ff5722!important;box-shadow:0 2px 5px rgba(0,0,0,.5)}.button-with-image.vowel{background-color:#ccc651}.button-with-image:hover{background-color:#00f09a}.button-with-image.shift{background-color:#f4a261}.button-with-image.clear{background-color:#f94144}.button-with-image.highlighted:first-of-type{border:3px solid #007bff;box-shadow:0 0 10px rgba(0,123,255,.5)}.button-with-image.highlighted:nth-of-type(2){border:3px solid #28a745;box-shadow:0 0 10px rgba(40,167,69,.5)}@keyframes pulse{0%{box-shadow:0 0 10px rgba(0,123,255,.5)}50%{box-shadow:0 0 15px rgba(0,123,255,.8)}to{box-shadow:0 0 10px rgba(0,123,255,.5)}}.button-with-image.highlighted:first-of-type{animation:pulse 1s infinite alternate}@keyframes pulse-green{0%{box-shadow:0 0 10px rgba(40,167,69,.5)}50%{box-shadow:0 0 15px rgba(40,167,69,.8)}to{box-shadow:0 0 10px rgba(40,167,69,.5)}}.button-with-image.highlighted:nth-of-type(2){animation:pulse-green 1s infinite alternate}.button-image{width:4vh;height:4vh;object-fit:contain;border-radius:8px}.button-message{font-size:12px;text-align:center;color:#333;max-width:8vh;white-space:nowrap;overflow:hidden;margin-top:5px;padding-left:5px;padding-right:5px}.button-message.long-text span{display:inline-block;transition:transform 5s linear;transform:translateX(0);padding-left:5px;padding-right:25px}.button-with-image:hover .button-message.long-text span{animation:scroll-back-and-forth 10s linear infinite}@keyframes scroll-back-and-forth{0%{transform:translateX(0)}50%{transform:translateX(calc(-100% + 10vh))}to{transform:translateX(0)}}.scrolling-input-container{width:90%;height:90%;overflow-x:auto;white-space:nowrap;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:5px}.input-image{width:6vh;height:6vh;object-fit:contain;flex-shrink:0}.input-content{display:flex;align-items:center;white-space:nowrap;overflow:hidden;flex-grow:1;min-width:0}.cursor,.input-text{white-space:nowrap;overflow:hidden;text-overflow:clip;display:inline-block}.input-row{gap:10px}.input-row,.popup-overlay{display:flex;align-items:center;justify-content:center;width:80%}.popup-overlay{position:fixed;top:0;left:0;height:100%;background-color:rgba(0,0,0,.5);z-index:1000;pointer-events:auto}.popup{padding:20px;border-radius:8px;width:60vh;max-width:80%;box-shadow:0 4px 8px rgba(0,0,0,.2);text-align:center;position:relative;transition:none}.popup,.popup:hover{background-color:#fff}.close-button{right:10px}.close-button:hover{transform:none}.modal-overlay{width:100%;height:100%}.modal-content{width:60vw;box-shadow:0 4px 6px rgba(0,0,0,.1)}.close-button{font-size:20px}.upload-options button{margin:10px;padding:10px}.loader-container{display:flex;flex-direction:column;align-items:center;margin-top:10px}.loading-spinner{width:4vh;height:4vh;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.freetype-wrapper-big.remove-mode{background-color:rgb(255,132,132)!important}.freetype-wrapper-big.move-mode{background-color:rgb(132,230,255)!important}.freetype-wrapper-big.hide-mode{background-color:rgb(136,255,132)!important}.hidden-button{background-color:rgba(200,200,200,.5);border:2px dashed #888;color:#666}.highlighted-hide{border:3px solid #ffeb3b!important;box-shadow:0 0 10px rgba(255,235,59,.7)}.hidden-button .button-message{color:#555}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);justify-content:center;z-index:1000}.modal-content,.modal-overlay{display:flex;align-items:center}.modal-content{background:white;padding:20px;border-radius:10px;width:clamp(300px,40vw,500px);text-align:center;box-shadow:0 4px 8px rgba(0,0,0,.2);position:relative;flex-direction:column;animation:fadeIn .3s ease-in-out}.close-button{position:absolute;top:10px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;outline:none;color:#555;transition:color .2s}.close-button:hover{color:red}.modal-content input{width:90%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:5px;margin-top:10px}.upload-options{display:flex;justify-content:center;gap:10px;margin-top:15px}.upload-options button{padding:10px 15px;font-size:14px;border:none;border-radius:5px;cursor:pointer;background:#007bff;color:white;transition:background .2s ease-in-out}.upload-options button:hover{background:#0056b3}.modal-content p{font-size:14px;color:#666;margin-top:10px}.image-preview img{max-width:100%;border-radius:10px;margin-top:10px}.submit-button{width:90%;padding:12px;margin-top:15px;font-size:16px;background:#28a745;color:white;border:none;border-radius:5px;cursor:pointer;transition:background .2s ease-in-out}.submit-button:disabled{background:#ccc;cursor:not-allowed}.submit-button:hover:not(:disabled){background:#218838}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:480px){.modal-content{width:90%;padding:15px}.upload-options{flex-direction:column;gap:8px}.upload-options button{width:100%}}.toggle-buttons{display:flex;justify-content:center;margin:15px 0}.toggle-button{flex:1;padding:10px 15px;font-size:16px;font-weight:700;border:none;background-color:#f1f1f1;cursor:pointer;transition:background-color .3s,color .3s;border-radius:5px;margin:0 5px}.toggle-button:hover{background-color:#ddd}.toggle-button.active{background-color:#007bff;color:white}