@everymatrix/casino-game-thumbnail 1.37.3 → 1.37.5

package/src/CasinoGameThumbnail.svelte

@@ -1,4 +1,5 @@
 <svelte:options tag={null} />
+
 <script lang="ts">
   import moment from 'moment';
   import { onMount, tick } from "svelte";
@@ -201,7 +202,9 @@
 
   };
 
+
   const toggleFavoriteGame = (id:any):void => {
+
     if (gamefavorite) {
       window.postMessage({ type: `SetUnfavoredGame${categoryid}`, id }, window.location.href);
     } else {
@@ -230,7 +233,6 @@
   const getLiveLobbyURL = (vendorName, id):string => {
     return `${endpoint}/v1/encoder/lobby/updates/${vendorName}/${id}`;
   }
-
   const connectGameToLiveLobby = ():void => {
     if (livelobbyendpoint && EventSource && !liveLobbyConnection) {
       if (gamevendor && gameid) {
@@ -239,7 +241,6 @@
       }
     }
   }
-
   const disconnectGameFromLiveLobby = () => {
     if (liveLobbyConnection) {
       liveLobbyConnection.close();
@@ -326,7 +327,7 @@
       }
     }
   }
-  // Revert manually, commented changes are the current ones, will undo after deploy
+  //Revert manually, commented changes are the current ones, will undo after deploy
   const setLiveLobbyData = ():void => {
     let url:any = new URL(`${livelobbyendpoint.split('?')[0]}`);
     url.searchParams.append("platform", getDevice(userAgent));
@@ -389,7 +390,7 @@
     }
     if (numberofplayers) {
       rightSideContent = `
-        <svg fill="var(--emw--casino-thumbnail-animation-color, #FFFFFF);" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
+        <svg fill="var(--emfe-w-color-white, #FFFFFF);" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
         <span class="NrOfPlayers">${numberofplayers}</span>`;
     }
     if (!rightSideContent && !leftSideContent) {
@@ -454,7 +455,6 @@
       }, 2000);
     }
   }
-
   const updateComponent = () => {
     if (livegamedata) {
       isopen = livegamedata.isOpen;
@@ -508,7 +508,6 @@
       }
     }
   }
-
   const toggleConnect = ():void => {
     if (connectlive === 'disconnect') {
       disconnectGameFromLiveLobby();
@@ -516,7 +515,6 @@
       connectGameToLiveLobby();
     }
   }
-
   const toggleVisibilityConnect = ():void => {
     if (visibilityconnect === 'disconnect') {
       disconnectGameFromLiveLobby();
@@ -573,28 +571,19 @@
 
 <div class={`GameContainer ${extraclassname} ${(casinogamesgridslider == 'true') ? 'CasinoGamesGridSlider' : '' }`} class:WithGameName={showgamename} bind:this={customStylingContainer} >
   <div class="GameInnerContainer { (livegamedata && !isopen && openhours.value) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}">
-    <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${loaded ? 'Loaded' : ''}`} alt="Game thumbnail" bind:this={image} loading="lazy" />
+    <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${loaded ? 'Loaded' : ''}`} alt="" bind:this={image} loading="lazy" />
     <div class="GameInfoWrapper">
       <div class="GameInfo">
+        <p class="GameInfoName" title="{gamename}">{gamename}</p>
         {#if lang}
-          <button class="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">
-            {#if !isMobile(userAgent)}
-              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
-                <g id="Group_5260" data-name="Group 5260" transform="translate(-26 -13)">
-                  <g id="Ellipse_664_copy" data-name="Ellipse 664 copy" transform="translate(26 13)" fill="rgba(249,165,2,0)">
-                    <path d="M 14 27 C 10.52756977081299 27 7.26298999786377 25.64776039123535 4.807610034942627 23.19239044189453 C 2.352240085601807 20.73700904846191 1 17.4724292755127 1 14 C 1 10.52756977081299 2.352240085601807 7.26298999786377 4.807610034942627 4.807610034942627 C 7.26298999786377 2.352240085601807 10.52756977081299 1 14 1 C 17.4724292755127 1 20.73700904846191 2.352240085601807 23.19239044189453 4.807610034942627 C 25.64776039123535 7.26298999786377 27 10.52756977081299 27 14 C 27 17.4724292755127 25.64776039123535 20.73700904846191 23.19239044189453 23.19239044189453 C 20.73700904846191 25.64776039123535 17.4724292755127 27 14 27 Z" stroke="none"/>
-                    <path d="M 14 2 C 10.79467964172363 2 7.781219482421875 3.248220443725586 5.514720916748047 5.514720916748047 C 3.248220443725586 7.781219482421875 2 10.79467964172363 2 14 C 2 17.2053108215332 3.248220443725586 20.21878051757812 5.514720916748047 22.48527908325195 C 7.781219482421875 24.75177955627441 10.79467964172363 26 14 26 C 17.2053108215332 26 20.21878051757812 24.75177955627441 22.48527908325195 22.48527908325195 C 24.75177955627441 20.21878051757812 26 17.2053108215332 26 14 C 26 10.79467964172363 24.75177955627441 7.781219482421875 22.48527908325195 5.514720916748047 C 20.21878051757812 3.248220443725586 17.2053108215332 2 14 2 M 14 0 C 21.73197937011719 0 28 6.268009185791016 28 14 C 28 21.73197937011719 21.73197937011719 28 14 28 C 6.268009185791016 28 0 21.73197937011719 0 14 C 0 6.268009185791016 6.268009185791016 0 14 0 Z" stroke="none" fill="#fff"/>
-                  </g>
-                  <path id="Rounded_Rectangle_683" data-name="Rounded Rectangle 683" d="M1139,917.587V906.4a1.4,1.4,0,0,1,1.976,0l4.61,4.608a1.4,1.4,0,0,1,0,1.975l-4.61,4.607A1.4,1.4,0,0,1,1139,917.587Z" transform="translate(-1102 -885)" fill="#fff"/>
-                </g>
-              </svg>
-            {/if}
-            <span>{$_('playNow')}</span>
-          </button>
+          <button class="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('playNow')}</button>
         {/if}
       </div>
+      <span class="GameInfoVendor">
+        { gamevendor ? gamevendor : '-'}
+      </span>
     </div>
-    <div class="GameExtraInfoContainer">
+  <div class="GameExtraInfoContainer">
       <div class="GameExtraInfo">
         {#if gameisnew}
           <span class="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
@@ -658,27 +647,29 @@
           {/if}
         {/if}
       </div>
-      {#if !isMobile(userAgent)}
-        <div class="GameTopContainer">
-          <span class="GameInfoVendor" style="background-image: url({gamevendor})"></span>
-          {#if gamefavorite && isLoggedIn && favorites}
-            <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-              <svg xmlns="http://www.w3.org/2000/svg" class="FavoredIcon" width="34" height="34" viewBox="0 0 34 34">
-                <path id="Subtraction_4" data-name="Subtraction 4" d="M1911-7475a16.89,16.89,0,0,1-12.021-4.979A16.889,16.889,0,0,1,1894-7492a16.889,16.889,0,0,1,4.979-12.021A16.889,16.889,0,0,1,1911-7509a16.889,16.889,0,0,1,12.021,4.979A16.888,16.888,0,0,1,1928-7492a16.889,16.889,0,0,1-4.979,12.021A16.89,16.89,0,0,1,1911-7475Zm.009-9.883h0l5.7,3.008a.909.909,0,0,0,.405.087.779.779,0,0,0,.492-.173.892.892,0,0,0,.347-.811l-1.1-6.335,4.6-4.483a.8.8,0,0,0,.2-.869.768.768,0,0,0-.665-.579l-6.364-.925-2.864-5.786a.836.836,0,0,0-.752-.463.832.832,0,0,0-.752.463l-2.864,5.786-6.366.925a.887.887,0,0,0-.693.579.873.873,0,0,0,.2.869l4.63,4.483-1.1,6.335a.8.8,0,0,0,.349.811.765.765,0,0,0,.476.161.944.944,0,0,0,.419-.1l5.7-2.979Zm-5.672,1.678v0l1.072-6.306-4.572-4.483,6.336-.925,2.836-5.757,2.834,5.757,6.336.925-4.57,4.483,1.07,6.305-5.67-2.977-5.671,2.979Z" transform="translate(-1893.999 7509)" fill="#fff"/>
-              </svg>
-            </div>
-          {:else if !gamefavorite && isLoggedIn}
-            <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-              <svg xmlns="http://www.w3.org/2000/svg" class="UnfavoredIcon" width="34" height="34" viewBox="0 0 34 34">
-                <path id="Subtraction_3" data-name="Subtraction 3" d="M1911-7475a16.89,16.89,0,0,1-12.021-4.979A16.889,16.889,0,0,1,1894-7492a16.889,16.889,0,0,1,4.979-12.021A16.889,16.889,0,0,1,1911-7509a16.889,16.889,0,0,1,12.021,4.979A16.888,16.888,0,0,1,1928-7492a16.889,16.889,0,0,1-4.979,12.021A16.89,16.89,0,0,1,1911-7475Zm.009-9.883h0l5.7,3.008a.909.909,0,0,0,.405.087.779.779,0,0,0,.492-.173.892.892,0,0,0,.347-.811l-1.1-6.335,4.6-4.483a.8.8,0,0,0,.2-.869.768.768,0,0,0-.665-.579l-6.364-.925-2.864-5.786a.836.836,0,0,0-.752-.463.832.832,0,0,0-.752.463l-2.864,5.786-6.366.925a.887.887,0,0,0-.693.579.873.873,0,0,0,.2.869l4.63,4.483-1.1,6.335a.8.8,0,0,0,.349.811.765.765,0,0,0,.476.161.944.944,0,0,0,.419-.1l5.7-2.979Zm-5.672,1.678v0l1.072-6.306-4.572-4.483,6.336-.925,2.836-5.757,2.834,5.757,6.336.925-4.57,4.483,1.07,6.305-5.67-2.977-5.671,2.979Z" transform="translate(-1893.999 7509)" opacity="0.6"/>
-              </svg>
-            </div>
-          {/if}
+      {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
+        <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+          <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
+            <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
+          </svg>
         </div>
-      {:else if gamefavorite && isLoggedIn && favorites}
+      {:else if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
+          <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+            <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
+            viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
+            c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
+            c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
+            c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
+            c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
+            l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
+            l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
+            c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
+            l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
+          </div>
+      {:else if isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
         <div class="FavIconContainer">
           <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
-            <path style="fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
+            <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
           </svg>
         </div>
       {/if}
@@ -690,6 +681,9 @@
 </div>
 
 <style lang="scss">
+
+
+
   *, *::before, *::after {
     margin: 0;
     padding: 0;
@@ -702,14 +696,14 @@
     position: relative;
   }
   .GameContainer.WithGameName {
-    padding-bottom: 10px;
+    padding-bottom: 20px;
   }
   .GameInnerContainer {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    border-radius: var(--emw--border-radius-medium, 10px);
+    border-radius: 5px;
     .GameBg {
       width: 100%;
       height: 100%;
@@ -720,11 +714,6 @@
       &.GameBg-2x2 { object-fit: cover; }
     }
 
-    .GameTopContainer {
-      display: flex;
-      gap: 10px;
-    }
-
     .GameInfoWrapper {
       display: none;
       position: absolute;
@@ -734,16 +723,7 @@
       right: 0;
       bottom: 0;
       left: 0;
-      background-image: linear-gradient(
-                                        to top,
-                                        var(--emw--casino-thumbnail-color-contrast, #000000),
-                                        hsla(
-                                          var(--emw--casino-thumbnail-color-h, 120),
-                                          var(--emw--casino-thumbnail-color-s, 100%),
-                                          var(--emw--casino-thumbnail-color-l, 50%),
-                                          0.7
-                                        )
-                                      );
+      background: rgba(0, 0, 0, .65);
       z-index: 15;
       padding: 8px 25px;
 
@@ -755,9 +735,9 @@
         align-items: center;
         justify-content: space-evenly;
         &Name {
-          color: var(--emw--color-typography, #FFFFFF);
+          color: white;
           text-align: center;
-          font-size: var(--emw--font-size-small, 14px);
+          font-size: 14px;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
@@ -767,23 +747,32 @@
 
         &Btn {
           appearance: none;
-          padding: 10px;
-          background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, var(--emw--casino-thumbnail-color-contrast, #000000) 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, var(--emw--casino-thumbnail-animation-color, #FFFFFF) 30%));
-          color: var(--emw--button-typography, #FFFFFF);
-          font-size: var(--emw--font-size-small, 14px);
-          border: 2px solid var(--emw--button-border-color, #073B17);
-          border-radius: var(--emw--border-radius-large, 20px);
+          padding: 6px;
+          background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+          color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+          font-size: 16px;
+          border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+          border-radius: 5px;
           cursor: pointer;
           transition: border 150ms ease-in-out;
 
           &:hover {
-            border: 2px solid var(--emw--button-border-highlight-color, #F1BED9);
+            border: 2px solid var(--emfe-w-color-primary-100, #F1BED9);
           }
         }
       }
+
+      .GameInfoVendor {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        color: white;
+        font-size: 12px;
+        font-weight: normal;
+      }
     }
 
-    .GameExtraInfoContainer {
+    .GameExtraInfoContainer{
       position: absolute;
       top: 0;
       left: 0;
@@ -793,7 +782,7 @@
       align-items: center;
       width: 100%;
       height: auto;
-      padding: 0 4px 4px 4px;
+      padding: 4px;
     }
 
     .GameExtraInfo {
@@ -802,22 +791,22 @@
       align-items: center;
       width: 100%;
       height: 100%;
-      z-index: 15;
+      z-index: 0;
       &Label {
-        font-size: var(--emw--font-size-2x-small, 10px);
-        padding: 5px;
-        background-color: transparent;
-        color: var(--emw--button-typography, #FFFFFF);
+        font-size: 11px;
+        padding: 3px;
+        background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+        color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+        font-weight: bold;
         text-transform: uppercase;
-        border-radius: var(--emw--border-radius-medium, 10px);
-        border: 1px solid var(--emw--button-typography, #FFFFFF);
+        border-radius: 5px;
       }
     }
 
     &:hover, &:active {
       cursor: pointer;
 
-      .GameInfoWrapper {
+      .GameInfoWrapper{
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -826,41 +815,29 @@
       .GameBg {
         filter: blur(5px) grayscale(1);
       }
-    }
 
-    .GameInfoWrapper .GameInfoBtn {
-      display: flex;
-      align-items: center;
-      gap: 8px;
+      .UnfavoredIcon{
+        display: flex;
+      }
     }
   }
-  .GameInfoVendor {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    color: var(--emw--color-typography, #FFFFFF);
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-weight: var(--emw--font-weight-normal, 400);
-    width: 40px;
-    height: 40px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    z-index: 15;
-  }
 
   .GameNameBelow {
-    color: var(--emw--casino-typography, #FFFFFF);
+    color: var(--emfe-w-color-white, #FFFFFF);
     position: relative;
-    padding: 5px 0;
+    bottom: -5px;
+    text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .FavoredIcon, .UnfavoredIcon {
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
+  }
+  .UnfavoredIcon{
+    display: none;
   }
-
   .FavIconContainer {
     display: flex;
     justify-content: center;
@@ -875,15 +852,15 @@
       z-index: 4;
     }
   }
-  // Dim the game that doesn't have open seats or table is full
+  // dim the game that doesn't have open seats or table is full
   .ListGame:hover, .ListGame:active {
     .OpenSeat, .ClosedSeat, .LiveLimits, .LatestResult, .FullTable {
       opacity: .2;
     }
   }
-  // Fix for displaying live game thumbnails that don't have details without backdrop
+  // fix for displaying live game thumbnails that don't have details without backdrop
   .ListGame.GameBackdrop {
-    .GameInnerContainer {
+    .GameInnerContainer  {
       &::after {
         content: '';
         position: absolute;
@@ -891,7 +868,7 @@
         right: 0;
         bottom: 0;
         left: 0;
-        background-image: linear-gradient(to top, var(--emw--casino-thumbnail-animation-color-contrast, #000000), rgba(0, 191, 114, 0.7));
+        background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
       }
     }
   }
@@ -907,13 +884,13 @@
       z-index: 10;
     }
     &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
 
     &.GameInnerContainerUnavailable {
       &::after {
@@ -939,10 +916,10 @@
       left: 0;
       z-index: 5;
       background: rgba(0,0,0, .4);
-      color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-      fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      fill: var(--emfe-w-color-white, #FFFFFF);
       opacity: 1;
-      border-radius: var(--emw--border-radius-small, 5px);
+      border-radius: 4px;
     }
 
     .ListGame.GameContainerFullyDimmed:before {
@@ -957,10 +934,10 @@
       left: 0;
       z-index: 5;
       background: rgba(0,0,0, .8);
-      color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-      fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      fill: var(--emfe-w-color-white, #FFFFFF);
       opacity: 1;
-      border-radius: var(--emw--border-radius-small, 5px);
+      border-radius: 4px;
     }
 
     .LiveProps {
@@ -973,16 +950,16 @@
       width: 100%;
       padding: 0;
       background: linear-gradient(to top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.99) 100%);
-      color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      color: var(--emfe-w-color-white, #FFFFFF);
       opacity: 1;
-      font-size: var(--emw--font-size-small, 14px);
+      font-size: 14px;
     }
 
     .ListGame:hover .LiveProps,
     .ListGameLink:hover .LiveProps {
       opacity: 0;
     }
-    //-------------------------------------- LIVE LOBBY ANIMATIONS ------------------------------------------
+    //--------------------------------------LIVE LOBBY ANIMATIONS------------------------------------------
     // Pulsating animations
     @keyframes red-pulse {
       0% {
@@ -1133,6 +1110,17 @@
       }
     }
 
+    // .Page-LiveCasino .GamesListContainer,
+    // .Page-LiveCasino-Child .GamesListContainer,
+    // .Page-LiveCasino .OperatorSticky .GamesListContainer,
+    // .Page-LiveCasino .CasinoGames .GamesListContainer,
+    // .Page-Live-casinoSource .GamesListContainer,
+    // .Page-Live-casinoSource .GamesListContainer,
+    // .Page-Live-casinoSource .OperatorSticky .GamesListContainer,
+    // .Page-Live-casinoSource .CasinoGames .GamesListContainer {
+    //   overflow: visible;
+    // }
+
     .ListGame.PulsatingGreenShadow, .ListGame.PulsatingRedShadow {
       overflow: auto;
     }
@@ -1149,6 +1137,7 @@
       position: relative;
       display: flex;
       padding: 0 16px;
+      // flex-wrap: wrap;
       box-sizing: border-box;
       flex-direction: row;
       align-items: center;
@@ -1168,8 +1157,8 @@
       }
 
       &.Black, &.Red, &.Green {
-        color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-        border: 1px solid var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+        color: var(--emfe-w-color-white, #FFFFFF);
+        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
       }
 
       .LatestResult {
@@ -1177,11 +1166,14 @@
         padding: 2px;
         margin: 0 1px;
         margin-right: 6px;
-        font-size: var(--emw--font-size-small, 14px);
+        font-size: 14px;
         text-align: center;
         @media (min-width: 1100px) {
+          min-width: 12px;
+          font-size: 14px;
           margin: 0 2px;
           margin-right: 5px;
+          padding: 2px;
         }
 
         &.FirstElementAnimated {
@@ -1193,22 +1185,22 @@
 
         &.First {
           min-width: 24px;
-          padding: 4px;
-          @media (min-width: 1100px) {
-            padding: 4px;
-          }
           &.Black, &.Red, &.Green {
-            color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-            border: 1px solid var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+            color: var(--emfe-w-color-white, #FFFFFF);
+            border: 1px solid var(--emfe-w-color-white, #FFFFFF);
           }
           &.Black {
-            background: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
+            background: var(--emfe-w-color-black, #000000)
           }
           &.Red {
-            background: var(--emw--casino-thumbnail-animation-color-type-e, #ff0000);
+            background: red;
           }
           &.Green {
-            background: var(--emw--casino-thumbnail-animation-color-type-c, #56A80A);
+            background: #56A80A;
+          }
+          padding: 4px;
+          @media (min-width: 1100px) {
+            padding: 4px;
           }
         }
       }
@@ -1242,40 +1234,40 @@
       }
 
       .Black {
-        color: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
+        color: var(--emfe-w-color-white, #FFFFFF);
       }
 
       .Red {
-        color: var(--emw--casino-thumbnail-animation-color-type-e, #ff0000);
+        color: red;
       }
 
       .Green {
-        color: var(--emw--casino-thumbnail-animation-color-type-c, #56A80A);
+        color: #56A80A;
       }
     }
 
     .Blue {
-      color: var(--emw--casino-thumbnail-animation-color-type-f, #4d90a7);
+      color: #4d90a7;
     }
 
     .Red {
-      background-color: var(--emw--casino-thumbnail-animation-color-type-e, #ff0000);
+      background-color: red;
     }
 
     .Black {
-      background-color: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
+      background-color: var(--emfe-w-color-black, #000000);
     }
 
     .Green {
-      background-color: var(--emw--casino-thumbnail-animation-color-type-c, #56A80A);
+      background-color: #56A80A;
     }
 
     .White {
-      background-color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      background-color: var(--emfe-w-color-white, #FFFFFF);
     }
 
     .Yellow {
-      background-color: var(--emw--casino-thumbnail-animation-color-type-b, #eeca3d);
+      background-color: #eeca3d;
     }
 
     .Gold {
@@ -1291,8 +1283,8 @@
     }
 
     .Tie {
-      background-color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-      background-image: linear-gradient(135deg, var(--emw--casino-thumbnail-animation-color, #FFFFFF) 25%, transparent 25%, transparent 50%, var(--emw--casino-thumbnail-animation-color-type-a, #212121) 50%, var(--emw--casino-thumbnail-animation-color, #FFFFFF) 75%, transparent 75%, var(--emw--casino-thumbnail-animation-color, #FFFFFF));
+      background-color: var(--emfe-w-color-white, #FFFFFF);
+      background-image: linear-gradient(135deg, var(--emfe-w-color-white, #FFFFFF) 25%, transparent 25%, transparent 50%, #212121 50%, var(--emfe-w-color-white, #FFFFFF) 75%, transparent 75%, var(--emfe-w-color-white, #FFFFFF));
     }
     .OpenSeat, .ClosedSeat {
       display: inline-block;
@@ -1326,10 +1318,10 @@
   }
   .OpenSeat svg {
     fill: transparent;
-    stroke: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+    stroke: var(--emfe-w-color-white, #FFFFFF);
   }
   .ClosedSeat svg {
-    fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+    fill: var(--emfe-w-color-white, #FFFFFF);
   }
   .FullTable {
     display: flex;
@@ -1338,8 +1330,8 @@
     height: 20px;
     padding: 1px 4px 1px 0;
     align-items: center;
-    border-radius: var(--emw--border-radius-small, 5px);
-    font-size: var(--emw--font-size-x-small, 12px);
+    border-radius: 3px;
+    font-size: 12px;
     white-space: normal;
     text-transform: uppercase;
     -webkit-animation-name: silde-in-from-left;
@@ -1351,7 +1343,7 @@
     svg {
       width: 100%;
       height: 100%;
-      fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      fill: var(--emfe-w-color-white, #FFFFFF);
     }
     &.ClosedSeat {
       margin-right: -3px;
@@ -1364,7 +1356,7 @@
     align-items: center;
     padding: 2px 10px;
     background: linear-gradient(to bottom, rgba(33, 33, 33, .9) 0%, rgba(33, 33, 33, .1) 100%);
-    color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+    color: var(--emfe-w-color-white, #FFFFFF);
     @media (min-width: 1100px) {
       padding: 2px 16px;
     }
@@ -1372,8 +1364,12 @@
       width: 14px;
       height: 14px;
       margin-right: 4px;
+      //@media (min-width: 1100px) {
+      //  width: 1.7rem;
+      //  height: 1.7rem;
+      //}
       svg {
-        fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+        fill: var(--emfe-w-color-white, #FFFFFF);
         width: 100%;
         height: 100%;
       }
@@ -1383,14 +1379,14 @@
     opacity: 1;
     z-index: 10;
     padding: 8px 10px;
-    color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-    font-size: var(--emw--font-size-medium, 16px);
-    span {
-      font-size: inherit;
-    }
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 18px;
     @media (min-width: 1100px) {
       padding: 8px 16px;
     }
+    span {
+      font-size: 18px;
+    }
   }
   .LiveLimits {
     opacity: 1;
@@ -1398,15 +1394,15 @@
     flex-direction: row;
     justify-content: space-between;
     padding: 2px 20px 5px 20px;
-    background: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
-    color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
-    font-weight: var(--emw--font-weight-normal, 400);
-    font-size: var(--emw--font-size-x-small, 12px);
+    background: var(--emfe-w-color-black, #000000);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-weight: normal;
+    font-size: 12px;
     @media (min-width: 1100px) {
       padding: 2px 18px 5px 18px;
     }
     span {
-      font-size: inherit;
+      font-size: 12px;
     }
   }
   .Players {
@@ -1425,7 +1421,7 @@
   left: -8px;
   div {
     position: absolute;
-    border: 4px solid var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+    border: 4px solid #fff;
     opacity: 1;
     border-radius: 50%;
     animation: ripple-effect 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
@@ -1472,46 +1468,30 @@
     padding: 8px 10px;
   }
 
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper {
-    .GameInfoName, .GameInfoBtn {
-      font-size: var(--emw--font-size-x-small, 12px);
-    }
-    .GameInfoName {
-      margin-top: 4px;
-    }
-    .GameInfoBtn {
-      padding: 6px 8px;
-    }
-    .GameInfoVendor {
-      font-size: var(--emw--font-size-2x-small, 10px);
-    }
-    .FavoredIcon, .UnfavoredIcon {
-      width: 25px;
-      height: 25px;
-    }
+  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoName {
+    font-size: 12px;
+    margin-top: 4px;
   }
 
-  .GameInfoVendor {
-    width: 45px;
-    height: 45px;
+  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
+    font-size: 12px;
+    padding:2px;
   }
 
-  .GameInnerContainer .GameExtraInfoContainer {
-    padding-top: 5px;
+  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
+    font-size: 8px;
+  }    
+  
+  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .FavoredIcon,
+  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .UnfavoredIcon {
+      width: 14px;
+      height: 14px;
   }
 
   .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .GameExtraInfoLabel {
-    font-size: var(--emw--font-size-2x-small, 10px);
+    font-size: 8px;
   }
-}
 
-@container (max-width: 768px) {
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
-    font-size: var(--emw--font-size-x-small, 12px);
-    padding: 6px;
-  }
-  .GameInnerContainer .GameInfoWrapper {
-    padding: 8px 10px;
-  }
 }
+
 </style>