lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-51-dev

package/dist/cjs/{utils-079a5e7d.js → utils-dc02d753.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index$1 = require('./index-6a69c33a.js');
+const index$1 = require('./index-baff5c15.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -116,34 +116,34 @@ function highlightSpeakingElement(element) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -215,8 +215,8 @@ function balanceResult(container, objectiveString) {
         return false;
     const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
     const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal) && leftVal !== 0;
-    const hasRight = !isNaN(rightVal) && rightVal !== 0;
+    const hasLeft = !isNaN(leftVal);
+    const hasRight = !isNaN(rightVal);
     if (!hasLeft || !hasRight) {
         return false;
     }
@@ -266,6 +266,7 @@ function enableOptionArea(element) {
 }
 let isDraggingDisabled = false;
 const setDraggingDisabled = (disabled) => {
+    console.log("Setting dragging disabled to:", disabled);
     isDraggingDisabled = disabled;
 };
 function enableDraggingWithScaling(element) {
@@ -748,6 +749,9 @@ async function onElementDropComplete(dragElement, dropElement) {
         if (!isCorrect) {
             dragElement.style.transition = 'transform 0.5s ease';
             animateDragToTarget(dragElement, dropElement, container);
+            const onInCorrect = dropElement.getAttribute('onInCorrect');
+            console.log("onincorrectttt", onInCorrect);
+            await executeActions(onInCorrect, dropElement, dragElement);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
                 // const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
@@ -1016,14 +1020,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1065,7 +1069,11 @@ async function onClickDropOrDragElement(element, type) {
 }
 const dragToDropMap = new Map();
 async function onClickDragElement(element) {
-    AudioPlayer.getI().stop();
+    const audioAttr = element.getAttribute('audio');
+    const hasValidAudio = audioAttr && audioAttr.trim().length > 0;
+    if (hasValidAudio) {
+        AudioPlayer.getI().stop();
+    }
     const dropElements = buildDropHasDragFromDOM();
     const dragEl = element;
     if (!dragEl) {
@@ -1140,6 +1148,7 @@ class AudioPlayer {
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
+        this.registerGlobalStopEvents();
     }
     static getI() {
         if (!AudioPlayer.instance) {
@@ -1165,13 +1174,23 @@ class AudioPlayer {
         }
     }
     async play(targetElement) {
+        // Stop any currently playing audio first if target element has audio given
+        try {
+            await AudioPlayer.getI().stop();
+        }
+        catch (e) {
+            console.error('Error stopping audio before speak action:', e);
+        }
+        // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
+        // If no direct audio attribute, check childrens for audio
         if (!audioUrl) {
             const childElements = targetElement.children;
             for (let i = 0; i < childElements.length; i++) {
                 const childAudioUrl = childElements[i].getAttribute('audio');
                 if (childAudioUrl) {
                     audioUrl = childAudioUrl;
+                    break;
                 }
             }
         }
@@ -1181,18 +1200,21 @@ class AudioPlayer {
             console.log('🚀 Playing audio:', this.audioElement.src);
             try {
                 setDraggingDisabled(true);
-                await this.audioElement.play();
                 highlightSpeakingElement(targetElement);
+                await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
-                        stopHighlightForSpeakingElement(targetElement);
                         resolve();
-                        setDraggingDisabled(false);
                     };
                 });
             }
             catch (error) {
-                console.log('🚀 Audio play error:', error);
+                console.log('🎧 Audio play error:', error);
+            }
+            finally {
+                this.audioElement.onended = null; // cleanup
+                setDraggingDisabled(false);
+                stopHighlightForSpeakingElement(targetElement);
             }
         }
         // If no audio, use text-to-speech
@@ -1202,13 +1224,35 @@ class AudioPlayer {
                 await speakText(targetElement.textContent, targetElement);
                 const highlightedElements = document.querySelectorAll('.speaking-highlight');
                 highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
-                setDraggingDisabled(false);
             }
             catch (error) {
-                console.log('🚀 TTS Error:', error);
+                console.log('🎧 TTS Error:', error);
+            }
+            finally {
+                setDraggingDisabled(false);
             }
         }
     }
+    // GLOBAL STOP EVENTS (container change, activity change…)
+    registerGlobalStopEvents() {
+        const stopEvents = [
+            NextContainerKey, PrevContainerKey, LessonEndKey, ActivityChangeKey,
+            ActivityEndKey, GameCompletedKey, GameExitKey
+        ];
+        stopEvents.forEach(key => {
+            window.addEventListener(key, () => this.stop());
+        });
+    }
+    // DESTROY (for hot-reload)
+    destroy() {
+        console.log("AudioPlayer destroyed (hot-reload safe)");
+        this.stop();
+        // Remove DOM element
+        if (this.audioElement.parentNode) {
+            this.audioElement.parentNode.removeChild(this.audioElement);
+        }
+        AudioPlayer.instance = undefined;
+    }
 }
 
 let preOverlap;
@@ -1367,11 +1411,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -1581,11 +1625,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -3142,7 +3186,11 @@ function addClickListenerForClickType(element) {
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;
         }
-        AudioPlayer.getI().stop();
+        const audioAttr = element.getAttribute('audio');
+        const hasValidAudio = audioAttr && audioAttr.trim().length > 0;
+        if (hasValidAudio) {
+            AudioPlayer.getI().stop();
+        }
         const container = document.getElementById(LidoContainer);
         const objective = container['objective'].split(',');
         const checkButton = document.querySelector('#lido-checkButton');
@@ -68055,15 +68103,15 @@ function calculateFill(input, currentFill = 0) {
 // Helper to animate and remove the active equation cell
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, allCalculateTypes) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-          ${activeCell.innerHTML = ""}
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
+        const keyframes = `
+      @keyframes widthDecrease {
+        0% { 
+          background-color: ${activeCell.style.backgroundColor};
+          height: ${activeCell.style.height};
+          margin: ${activeCell.style.margin};
+          ${activeCell.innerHTML = ""}
+        }
+        100% { background-color: transparent; height: 0px; margin: 0px; }
       }`;
         const styleSheet = document.styleSheets[0];
         styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -68596,7 +68644,15 @@ const executeActions = async (actionsString, thisElement, element) => {
                     break;
                 }
                 case 'speak': {
-                    await AudioPlayer.getI().play(targetElement);
+                    const val = (action.value || '').toString().trim().toLowerCase();
+                    if (val === 'true' || val === '1' || val === 'yes') {
+                        try {
+                            await AudioPlayer.getI().play(targetElement);
+                        }
+                        catch (err) {
+                            console.error('Error playing audio for speak action:', err);
+                        }
+                    }
                     break;
                 }
                 case 'fill-slide': {
@@ -68718,6 +68774,10 @@ const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
+                case 'updatedAnswer': {
+                    updatedAnswer();
+                    break;
+                }
                 default: {
                     targetElement.style[action.action] = action.value;
                     break;
@@ -68748,11 +68808,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -68915,10 +68975,6 @@ async function onActivityComplete(dragElement, dropElement) {
                 await executeActions(onCorrect, dropElement, dragElement);
             }
         }
-        else {
-            const onInCorrect = dropElement.getAttribute('onInCorrect');
-            await executeActions(onInCorrect, dropElement, dragElement);
-        }
     }
     let dragScore = buildDragSelectedMapFromDOM();
     const sortedValues = getSortedValuesArrayFromMap(dragScore);
@@ -68930,21 +68986,6 @@ async function onActivityComplete(dragElement, dropElement) {
         drag[index] = [];
     }
     drag[index].push(dragElement.id);
-    // localStorage.setItem(DragMapKey, JSON.stringify(drag));
-    Object.keys(dragScore).sort((a, b) => parseInt(a) - parseInt(b));
-    if (dragElement && dropElement) {
-        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
-        if (isCorrect) {
-            const onCorrect = dropElement.getAttribute('onCorrect');
-            if (onCorrect) {
-                await executeActions(onCorrect, dropElement, dragElement);
-            }
-        }
-        else {
-            const onInCorrect = dropElement.getAttribute('onInCorrect');
-            await executeActions(onInCorrect, dropElement, dragElement);
-        }
-    }
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
         var _a;
@@ -69034,6 +69075,7 @@ const validateObjectiveStatus = async () => {
         return;
     const objectiveString = container['objective'];
     const additionalCheck = container.getAttribute('equationCheck');
+    container.getAttribute('isAllowOnlyCorrect') === 'true' || '';
     console.log('🚀 ~ validateObjectiveStatus ~ additionalCheck:', additionalCheck);
     let equationGiven = false;
     if (objectiveString == null || objectiveString.length === 0) {
@@ -69085,13 +69127,15 @@ const validateObjectiveStatus = async () => {
         await calculateScore();
     }
     else {
-        const onInCorrect = container.getAttribute('onInCorrect');
-        await executeActions(onInCorrect, container);
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         if (!isContinueOnCorrect) {
             triggerNextContainer();
             await calculateScore();
         }
+        else {
+            const onInCorrect = container.getAttribute('onInCorrect');
+            await executeActions(onInCorrect, container);
+        }
     }
 };
 const triggerNextContainer = () => {
@@ -69655,14 +69699,14 @@ const SumTogetherAnimation = async (element, value) => {
     const sign = ((signElement && ((signElement.getAttribute('string') || signElement.textContent) || '')).toString().trim() === '+') ? '+' : '-';
     if (sign === '-') {
         // '-' flow: reveal one by one then change bgColor of last B to red
-        for (let i = 0; i < topRowChildren.length; i++) {
+        for (let i = 0; i < Math.min(number1, topRowChildren.length); i++) {
             await new Promise(resolve => setTimeout(resolve, 75));
             showElement(topRowChildren[i]);
         }
         elementAppearance(true);
         await new Promise(r => setTimeout(r, 500));
         for (let k = 0; k < Math.min(number2, topRowChildren.length); k++) {
-            const idx = topRowChildren.length - 1 - k;
+            const idx = Math.min(number1, topRowChildren.length) - 1 - k;
             setImageBackground(topRowChildren[idx], 'red');
             await new Promise(r => setTimeout(r, 200));
         }
@@ -69687,6 +69731,17 @@ const SumTogetherAnimation = async (element, value) => {
         elementAppearance(false);
     }
 };
+const updatedAnswer = () => {
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    const answerText = container.querySelector('#answer');
+    if (!answerText)
+        return;
+    const equationAttr = container.getAttribute('equationCheck') || '';
+    const calculatedValue = equationCheck(equationAttr);
+    answerText.setAttribute('string', String(calculatedValue));
+};
 
 exports.ActivityScoreKey = ActivityScoreKey;
 exports.AudioPlayer = AudioPlayer;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/avatar/lido-avatar.js",
     "components/calculator/lido-calculator.js",
+    "components/canvas/lido-canvas.js",
     "components/cell/lido-cell.js",
     "components/column/lido-col.js",
     "components/container/lido-container.js",

package/dist/collection/components/avatar/lido-avatar.css

@@ -1,4 +1,4 @@
-.lido-canvas {
-  height: 100%;
-  width: 100%;
-}
+.lido-canvas {
+  height: 100%;
+  width: 100%;
+}

package/dist/collection/components/avatar/lido-avatar.js

@@ -78,7 +78,7 @@ export class LidoAvatar {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: '0889129b1e69b8966dec70f6364c602cadce10ef', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '975318180c4454f81d307accd823e2eaaeddf6cc', class: "lido-canvas" })));
+        return (h(Host, { key: 'dc25762d0edf77a71e93ca1cc3ea160a1778858e', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '70c803f3b58d3cd4a4f94f66eab40a7af656ef36', class: "lido-canvas" })));
     }
     static get is() { return "lido-avatar"; }
     static get originalStyleUrls() {

package/dist/collection/components/calculator/lido-calculator.css

@@ -1,87 +1,87 @@
-#lidoCalculator {
-  border-radius: 19px;
-  border: 5px solid #029A9A;
-  position: relative;  
-  display: flex;
-  flex-direction: column;
-  padding: 2%;
-  box-sizing: border-box;         
-}
-.lido-calculator-btn-special{
-  background-color:#014D4D !important;
-  --btn-shadow-color: #0a2f2f !important;
-}
-
-.lido-calculator-btn-default {
-  background-color: #029A9A !important;
-  color: #000;
-  --btn-shadow-color: #0f4242 !important ; 
-}
-
-#lido-calculator-penIcon {
-  --btn-bg-color: #FB7038 !important;   
-  --btn-shadow-px: 0 8px 0 !important;  
-  --btn-shadow-color: #D74B12 !important; 
-  border-radius: 5px !important;
-}
-
-.lido-calculator-displayParent{
-  width: 89%;
-  height: 107px;
-  background-color: rgb(68, 186, 186);;
-  border-radius: 5px;
-  margin: 14px auto 17px auto; 
-  overflow: hidden;
-  display: flex;
-  align-items: end;
-}
-
-.lido-calculator-display {
-  width: 97%;
-  height: 94px;
-  background: #029A9A;
-  color: #fff;
-  text-align: right;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-size: 72px;
-  font-weight: 700;
-  font-family: 'Baloo Bhai 2', serif;
-  border-radius: 5px 0px 0px 5px;
-  box-sizing: border-box;
-  margin: 0 0px -6px auto;
-}
-
-.lido-calculator-buttons {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 1fr;  
-  gap: 0%;
-  width: 100%;
-  justify-items: center; 
-  align-items: center; 
-  position: relative;
-  top: -1%;   
-}
-.lido-calculator-buttons lido-text {
-  display: flex !important;                
-  justify-content: center;     
-  align-items: center;          
-  width: 96px !important;                  
-  height: 80px !important;                 
-  font-size: 72px !important;             
-  font-weight: 700 !important;
-  color: #fff;
-  border-radius: 5px !important;
-  cursor: pointer;
-  text-align: center;
-  line-height: 1;
-  box-sizing: border-box;
-  transition: transform 0.1s;
-}
-.lido-calculator-buttons lido-text:active {
-  transform: scale(0.95);
-}
-
+#lidoCalculator {
+  border-radius: 19px;
+  border: 5px solid #029A9A;
+  position: relative;  
+  display: flex;
+  flex-direction: column;
+  padding: 2%;
+  box-sizing: border-box;         
+}
+.lido-calculator-btn-special{
+  background-color:#014D4D !important;
+  --btn-shadow-color: #0a2f2f !important;
+}
+
+.lido-calculator-btn-default {
+  background-color: #029A9A !important;
+  color: #000;
+  --btn-shadow-color: #0f4242 !important ; 
+}
+
+#lido-calculator-penIcon {
+  --btn-bg-color: #FB7038 !important;   
+  --btn-shadow-px: 0 8px 0 !important;  
+  --btn-shadow-color: #D74B12 !important; 
+  border-radius: 5px !important;
+}
+
+.lido-calculator-displayParent{
+  width: 89%;
+  height: 107px;
+  background-color: rgb(68, 186, 186);;
+  border-radius: 5px;
+  margin: 14px auto 17px auto; 
+  overflow: hidden;
+  display: flex;
+  align-items: end;
+}
+
+.lido-calculator-display {
+  width: 97%;
+  height: 94px;
+  background: #029A9A;
+  color: #fff;
+  text-align: right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 72px;
+  font-weight: 700;
+  font-family: 'Baloo Bhai 2', serif;
+  border-radius: 5px 0px 0px 5px;
+  box-sizing: border-box;
+  margin: 0 0px -6px auto;
+}
+
+.lido-calculator-buttons {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;  
+  gap: 0%;
+  width: 100%;
+  justify-items: center; 
+  align-items: center; 
+  position: relative;
+  top: -1%;   
+}
+.lido-calculator-buttons lido-text {
+  display: flex !important;                
+  justify-content: center;     
+  align-items: center;          
+  width: 96px !important;                  
+  height: 80px !important;                 
+  font-size: 72px !important;             
+  font-weight: 700 !important;
+  color: #fff;
+  border-radius: 5px !important;
+  cursor: pointer;
+  text-align: center;
+  line-height: 1;
+  box-sizing: border-box;
+  transition: transform 0.1s;
+}
+.lido-calculator-buttons lido-text:active {
+  transform: scale(0.95);
+}
+