lido-player 0.0.2-beta-18-dev → 0.0.2-beta-19-dev

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

@@ -1,89 +1,89 @@
-#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{
-  --btn-bg-color: #014D4D !important;
-  background-color:#014D4D !important;
-  --btn-shadow-color: #0a2f2f !important;
-}
-
-.lido-calculator-btn-default {
-  --btn-bg-color: #029A9A !important;
-  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: 100px !important;                  
-  height: 88px !important;                 
-  font-size: 80px !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{
+  --btn-bg-color: #014D4D !important;
+  background-color:#014D4D !important;
+  --btn-shadow-color: #0a2f2f !important;
+}
+
+.lido-calculator-btn-default {
+  --btn-bg-color: #029A9A !important;
+  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: 100px !important;                  
+  height: 88px !important;                 
+  font-size: 80px !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);
+}
+

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

@@ -182,7 +182,7 @@ export class LidoCalculator {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: 'e8249dda090212d327b68b47d42a123de6a890c9', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '54d093a3dd6a6e5850c881d224290bd6cf9c3690', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: '7145c80b2477493a8a87f6d098164293732861bf', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '7242feedd5172b555df683c747bbef778a9cdcd7', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '6145a4f89da352c3576e6d51a1e260e335778fbb', class: "lido-calculator-displayParent" }, h("div", { key: '04e07b724d912d43b08c7a1e15c605d0fd30c7be', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '19839d02863ca1e27fddb4093f191171e237f143', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: 'ae833326069dd4cf9588701995962b0d1b3b0091', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '135b08be24862393217a0a93d4afd3ec8647547c', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'e6fb20b06bef347d68e427748669bb176c30b7a3', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '2b6077ffad1046fdedb816402fdcb906539afa5c', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '96dfabdab176f66e16d6b03efb2e8ecad74c9d45', class: "lido-calculator-displayParent" }, h("div", { key: '9c711dd53ada73ca9ddac1c37b0719c5c746a591', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '5d595bf410fc1a75fa57c485fd08a8e97064016a', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -232,7 +232,7 @@ export class LidoCalculator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls component visibility.\r\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
+                    "text": "Controls component visibility.\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,33 +1,33 @@
-:host {
-  box-sizing: border-box;
-}
-
-.lido-canvas {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-#lido-exit-button {
-  padding: 6px 14px;
-  border: none;
-  background:transparent;
-  color: #fff;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 15;
-}
-
-canvas {
-  /* flex: 1; */
-  touch-action: none;
-  display: block;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-}
+:host {
+  box-sizing: border-box;
+}
+
+.lido-canvas {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+#lido-exit-button {
+  padding: 6px 14px;
+  border: none;
+  background:transparent;
+  color: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 15;
+}
+
+canvas {
+  /* flex: 1; */
+  touch-action: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+}

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

@@ -102,7 +102,7 @@ export class LidoCanvas {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        return (h(Host, { key: '6bb47f06656ce667d23236e9f3c3a8f383885a43', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'fd0d1217bda63071fbf6496c2538c2a944b14181', id: "lido-exit-button", onClick: () => this.clearCanvas() }), h("canvas", { key: 'ed0333972bb7ce0fc4e14c81bb466ea895ce65e0', id: "lido-canvas" })));
+        return (h(Host, { key: 'ca88c99317fe079d25b16410d78cbd63e13d712c', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: '3e1085ff4be21ca281483367a41b51ba4ff49736', id: "lido-exit-button", onClick: () => this.clearCanvas() }), h("canvas", { key: '9c1f485a2a84b2da9468e8b83f1962cce7852efc', id: "lido-canvas" })));
     }
     static get is() { return "lido-canvas"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,100 +1,100 @@
-.lido-col {
-  /* position: absolute; */
-  top: var(--y, 0);
-  left: var(--x, 0);
-  height: var(--height, 100%);
-  width: var(--width, 100%);
-  background-color: var(--bgColor, #eeeeee);
-  /* position: relative; */
-  padding: 15px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-  
-}
-
-.lido-col > * {
-  /* position: relative; */
-}
-
-.lido-row {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  /* position: absolute; */
-}
-
-.lido-row > * {
-  /* position: relative; */
-}
-
-.lido-wrap {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
-}
-
-.lido-wrap > * {
-  padding: 10px;
-  /* background-color: var(--child-bg-color, #f0f0f0); */
-  box-sizing: border-box;
-}
-
-.lido-flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 10px;
-}
-
-.lido-pos {
-  top: var(--y, 0);
-  left: var(--x, 0);
-  height: var(--height, 100%);
-  width: var(--width, 100%);
-  background-color: var(--bgColor, #eeeeee);
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  position: fixed;
-}
-
-.lido-pos > * {
-  position: absolute;
-}
-
-.lido-random {
-  position: relative; /* Ensures children position within this box */
-  width: 100%;
-  height: 100%;
-}
-
-.lido-random > * {
-  position: absolute;
-}
-
-/*Scrollbar Width */
-.lido-col::-webkit-scrollbar,
-.lido-wrap::-webkit-scrollbar,
-.lido-flex::-webkit-scrollbar {
-  width: var(--scrollbar-width);
-  height: var(--scrollbar-width); 
-}
-
-.lido-col::-webkit-scrollbar-thumb,
-.lido-wrap::-webkit-scrollbar-thumb,
-.lido-flex::-webkit-scrollbar-thumb {
-  background-color: #888;
-  border-radius: 10px;
-  border: 3px solid transparent;
-  background-clip: content-box;
-}
-
-.lido-col::-webkit-scrollbar-track,
-.lido-wrap::-webkit-scrollbar-track,
-.lido-flex::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-
+.lido-col {
+  /* position: absolute; */
+  top: var(--y, 0);
+  left: var(--x, 0);
+  height: var(--height, 100%);
+  width: var(--width, 100%);
+  background-color: var(--bgColor, #eeeeee);
+  /* position: relative; */
+  padding: 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  
+}
+
+.lido-col > * {
+  /* position: relative; */
+}
+
+.lido-row {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  /* position: absolute; */
+}
+
+.lido-row > * {
+  /* position: relative; */
+}
+
+.lido-wrap {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
+}
+
+.lido-wrap > * {
+  padding: 10px;
+  /* background-color: var(--child-bg-color, #f0f0f0); */
+  box-sizing: border-box;
+}
+
+.lido-flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 10px;
+}
+
+.lido-pos {
+  top: var(--y, 0);
+  left: var(--x, 0);
+  height: var(--height, 100%);
+  width: var(--width, 100%);
+  background-color: var(--bgColor, #eeeeee);
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  position: fixed;
+}
+
+.lido-pos > * {
+  position: absolute;
+}
+
+.lido-random {
+  position: relative; /* Ensures children position within this box */
+  width: 100%;
+  height: 100%;
+}
+
+.lido-random > * {
+  position: absolute;
+}
+
+/*Scrollbar Width */
+.lido-col::-webkit-scrollbar,
+.lido-wrap::-webkit-scrollbar,
+.lido-flex::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width); 
+}
+
+.lido-col::-webkit-scrollbar-thumb,
+.lido-wrap::-webkit-scrollbar-thumb,
+.lido-flex::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 10px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+
+.lido-col::-webkit-scrollbar-track,
+.lido-wrap::-webkit-scrollbar-track,
+.lido-flex::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+

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

@@ -257,7 +257,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: '73bdf9dd33fdd8322c35465de011697da112193a', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '6e9d4507b36716f04853d39ef66015441782aa88' })));
+        return (h(Host, { key: '53d510e92a72d1f855e6d0cb0c0564c2f4351b64', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '1af7a1f78e12bb1babcd91266eaf209b9d7530dc' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {
@@ -304,7 +304,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\r\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
+                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
                 },
                 "getter": false,
                 "setter": false,
@@ -504,7 +504,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The gap between child elements inside the column (CSS value, e.g., '10px', '5px 10px').\r\nThis is applicable when the layout is set to `wrap` or `flex`."
+                    "text": "The gap between child elements inside the column (CSS value, e.g., '10px', '5px 10px').\nThis is applicable when the layout is set to `wrap` or `flex`."
                 },
                 "getter": false,
                 "setter": false,
@@ -704,7 +704,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -724,7 +724,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "getter": false,
                 "setter": false,
@@ -744,7 +744,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "getter": false,
                 "setter": false,
@@ -764,7 +764,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the layout behavior of the component's children.\r\n\r\n- `wrap`: Applies a grid layout to the children, allowing them to wrap automatically in a grid format.\r\n- `flex`: Applies a flex layout with wrapping behavior (`flex-wrap`).\r\n- `col`: Arranges children in a single column using a vertical flex direction.\r\n- `row`: Arranges children in a single row using a horizontal flex direction.\r\n- `pos`: Applies absolute positioning to children, allowing manual placement using `x` and `y` values.\r\n- `random`: Positions child elements randomly within the container using absolute positioning.\r\n\r\nDefault: `'wrap'`"
+                    "text": "Determines the layout behavior of the component's children.\n\n- `wrap`: Applies a grid layout to the children, allowing them to wrap automatically in a grid format.\n- `flex`: Applies a flex layout with wrapping behavior (`flex-wrap`).\n- `col`: Arranges children in a single column using a vertical flex direction.\n- `row`: Arranges children in a single row using a horizontal flex direction.\n- `pos`: Applies absolute positioning to children, allowing manual placement using `x` and `y` values.\n- `random`: Positions child elements randomly within the container using absolute positioning.\n\nDefault: `'wrap'`"
                 },
                 "getter": false,
                 "setter": false,
@@ -824,7 +824,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -844,7 +844,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -864,7 +864,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS align-items property to control the alignment of flex items.\r\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
+                    "text": "CSS align-items property to control the alignment of flex items.\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
                 },
                 "getter": false,
                 "setter": false,
@@ -884,7 +884,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
                 },
                 "getter": false,
                 "setter": false,
@@ -904,7 +904,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS flex direction for the component, which can be used to control the layout of child elements.\r\nAccepts values like 'row', 'column', etc."
+                    "text": "CSS flex direction for the component, which can be used to control the layout of child elements.\nAccepts values like 'row', 'column', etc."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/column/lido-col.css

@@ -1,19 +1,19 @@
-.lido-col {
-  /* position: absolute; */
-  top: var(--y, 0);
-  left: var(--x, 0);
-  height: var(--height, 100%);
-  width: var(--width, 100%);
-  background-color: var(--bgColor, #eeeeee);
-  /* position: relative; */
-  padding: 15px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-}
-
-.lido-col > * {
-  /* position: relative; */
-}
+.lido-col {
+  /* position: absolute; */
+  top: var(--y, 0);
+  left: var(--x, 0);
+  height: var(--height, 100%);
+  width: var(--width, 100%);
+  background-color: var(--bgColor, #eeeeee);
+  /* position: relative; */
+  padding: 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lido-col > * {
+  /* position: relative; */
+}