lido-player 0.0.2-beta-25-dev → 0.0.2-beta-26-dev

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: '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' })));
+        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' })));
     }
     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').\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
+                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\r\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').\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').\r\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.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\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.\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.\r\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.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "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."
                 },
                 "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.\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'`"
+                    "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'`"
                 },
                 "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.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\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.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\r\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.\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
+                    "text": "CSS align-items property to control the alignment of flex items.\r\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.\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\r\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.\nAccepts values like 'row', 'column', etc."
+                    "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."
                 },
                 "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; */
+}

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

@@ -78,7 +78,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'b2ecb19a78feed7275d9e996255db4144d5e0153', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, 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 }, h("slot", { key: '2d285d2c1557647e05abb470490da6c7c735a39d' })));
+        return (h(Host, { key: '334206d6054442fec787cfb479a68ae164404730', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, 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 }, h("slot", { key: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {
@@ -467,7 +467,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -486,7 +486,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -505,7 +505,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -562,7 +562,7 @@ export class LidoCol {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Applies a CSS box-shadow to the component.\nAccepts any valid CSS box-shadow value.\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
+                    "text": "Applies a CSS box-shadow to the component.\r\nAccepts any valid CSS box-shadow value.\r\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
                 },
                 "getter": false,
                 "setter": false,
@@ -621,7 +621,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,34 +1,34 @@
-.lido-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: var(--bgColor, transparent);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Reuse the Flash Card attention treatment for generated Write Card arrows. */
-lido-container[template-id="writeCard"] #arrow {
-  box-sizing: border-box;
-  border: 10px solid transparent;
-  box-shadow: 0px 8px 0px 0px #8b310f;
-  animation: flash-card-next-attention 1.4s ease-in-out infinite;
-}
-
-lido-container[template-id="writeCard"] #arrow.fading {
-  opacity: 1 !important;
-}
-
-@keyframes flash-card-next-attention {
-  0%,
-  100% {
-    border-color: #ffc34d;
-    filter: drop-shadow(0 0 0 rgba(255, 195, 77, 0));
-  }
-  50% {
-    border-color: #fff1a8;
-    filter: drop-shadow(0 0 10px rgba(255, 195, 77, 0.95));
-  }
-}
+.lido-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bgColor, transparent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Reuse the Flash Card attention treatment for generated Write Card arrows. */
+lido-container[template-id="writeCard"] #arrow {
+  box-sizing: border-box;
+  border: 10px solid transparent;
+  box-shadow: 0px 8px 0px 0px #8b310f;
+  animation: flash-card-next-attention 1.4s ease-in-out infinite;
+}
+
+lido-container[template-id="writeCard"] #arrow.fading {
+  opacity: 1 !important;
+}
+
+@keyframes flash-card-next-attention {
+  0%,
+  100% {
+    border-color: #ffc34d;
+    filter: drop-shadow(0 0 0 rgba(255, 195, 77, 0));
+  }
+  50% {
+    border-color: #fff1a8;
+    filter: drop-shadow(0 0 10px rgba(255, 195, 77, 0.95));
+  }
+}

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

@@ -495,7 +495,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: 'c4063b11ee7b13e43701fa1573129c043f20bce3', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: 'de5f9d8a8711ddc533dd105640e64152035dee9f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'ec46b584fa6d4982e69d8b8b2e72e8991bdc2458' })));
+        return (h(Host, { key: '1ec8ce95f69ad27bc534b5cb5b3ccc19e8e1880d', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '4124095c478efa28590e9dc40a7e87831bf719fb', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c078309c288e41c03828c3768d6033d2fae981cd' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -622,7 +622,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom CSS styles to be applied to the container.\nAllows for dynamic styling through inline styles or class names."
+                    "text": "Custom CSS styles to be applied to the container.\r\nAllows for dynamic styling through inline styles or class names."
                 },
                 "getter": false,
                 "setter": false,
@@ -1062,7 +1062,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the activity should proceed automatically only after a correct response.\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
+                    "text": "Determines if the activity should proceed automatically only after a correct response.\r\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -1102,7 +1102,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1122,7 +1122,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1141,7 +1141,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1160,7 +1160,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1179,7 +1179,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/flashCard/lido-flash-card.css

@@ -1,72 +1,72 @@
-
-
-.card {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  transition: transform 0.6s ease;
-  cursor: pointer;
-}
-
-.card.flipped {
-  transform: rotateY(180deg);
-}
-
-.card-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card-back {
-  transform: rotateY(180deg);
-}
-
-/* Flash Card's local next button is positioned against the 1600x900 Lido
-   canvas, rather than against the viewport or the global navigation bar. */
-lido-container[template-id="flashcardtemplate"] #arrow {
-  position: absolute !important;
-  left: auto !important;
-  top: 50% !important;
-  right: 13.3% !important;
-  transform: translateY(-50%);
-  z-index: 4 !important;
-  overflow: visible;
-  box-sizing: border-box;
-  border: 10px solid transparent;
-  box-shadow: 0px 8px 0px 0px #8b310f !important;
-}
-
-lido-container[template-id="flashcardtemplate"] #arrow.flash-card-next-glowing {
-  animation: flash-card-next-attention 1.4s ease-in-out infinite;
-}
-
-@keyframes flash-card-next-attention {
-  0%,
-  100% {
-    border-color: #ffc34d;
-    filter: drop-shadow(0 0 0 rgba(255, 195, 77, 0));
-  }
-  50% {
-    border-color: #fff1a8;
-    filter: drop-shadow(0 0 10px rgba(255, 195, 77, 0.95));
-  }
-}
-
-/* Match the shared top Next arrow's raised press behavior without changing
-   the Flash Card arrow's existing size or right-side positioning. */
-lido-container[template-id="flashcardtemplate"] #arrow:active {
-  transform: translateY(calc(-50% + 8px)) !important;
-  box-shadow: 0px 0px 0px 0px !important;
-}
-
-@media (orientation: portrait) {
-  lido-container[template-id="flashcardtemplate"] #arrow {
-    right: -4.3% !important;
-  }
-}
+
+
+.card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.6s ease;
+  cursor: pointer;
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+}
+
+.card-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}
+
+/* Flash Card's local next button is positioned against the 1600x900 Lido
+   canvas, rather than against the viewport or the global navigation bar. */
+lido-container[template-id="flashcardtemplate"] #arrow {
+  position: absolute !important;
+  left: auto !important;
+  top: 50% !important;
+  right: 13.3% !important;
+  transform: translateY(-50%);
+  z-index: 4 !important;
+  overflow: visible;
+  box-sizing: border-box;
+  border: 10px solid transparent;
+  box-shadow: 0px 8px 0px 0px #8b310f !important;
+}
+
+lido-container[template-id="flashcardtemplate"] #arrow.flash-card-next-glowing {
+  animation: flash-card-next-attention 1.4s ease-in-out infinite;
+}
+
+@keyframes flash-card-next-attention {
+  0%,
+  100% {
+    border-color: #ffc34d;
+    filter: drop-shadow(0 0 0 rgba(255, 195, 77, 0));
+  }
+  50% {
+    border-color: #fff1a8;
+    filter: drop-shadow(0 0 10px rgba(255, 195, 77, 0.95));
+  }
+}
+
+/* Match the shared top Next arrow's raised press behavior without changing
+   the Flash Card arrow's existing size or right-side positioning. */
+lido-container[template-id="flashcardtemplate"] #arrow:active {
+  transform: translateY(calc(-50% + 8px)) !important;
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+@media (orientation: portrait) {
+  lido-container[template-id="flashcardtemplate"] #arrow {
+    right: -4.3% !important;
+  }
+}