@everymatrix/casino-game-thumbnail 1.44.0 → 1.45.0

package/src/CasinoGameThumbnail.svelte

@@ -1,1492 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import moment from 'moment';
-  import { onMount, tick } from "svelte";
-  import { isMobile, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale} from './i18n';
-  import { TRANSLATIONS } from './translations';
-  import { currenciesSymbols } from './currency-symbols';
-
-  export let session:string = '';
-  export let userid:string = '';
-  export let lang:string = 'en';
-  export let clientstyling:string = ''
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-
-  export let favorites:string = '';
-  export let gamethumbnail:string = '';
-  export let gamename:string = '';
-  export let gamevendor:string = '';
-  export let gamelaunchurl:string = '';
-  export let gameid:string = '';
-  export let gameisnew:string = '';
-  export let gametag:string = '';
-  export let gamefunmode:boolean = false;
-  export let gamefavorite:boolean = false;
-  export let gamecellsize = '';
-  export let showfavoredcategory:boolean = false;
-  export let showgamename:string = '';
-  export let currency:string = '';
-  export let gamepagemodalurl:string = 'false';
-
-  export let endpoint:string = '';
-  export let categoryid:string = '';
-
-  export let livelobbyendpoint:string = '';
-  export let connectlive:string = '';
-  export let visibilityconnect:string = '';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-  export let casinogamesgridslider:string = 'false'; 
-
-  let isLoggedIn:boolean = false;
-  let sessionID:string;
-  let playerID:string;
-
-  let fav:boolean = false;
-  let loaded:boolean = false
-  let image:any;
-  let userAgent:any = window.navigator.userAgent;
-  let customStylingContainer:HTMLElement;
-
-  let livegamedata:any;
-  let liveLobbyConnection:EventSource;
-  let displaytype:string;
-  let starttime:any;
-  let timeformat = 'HH:mm';
-  let isopen:Boolean;
-  let betlimit:any = {};
-  let openhours:any;
-  let seats:any = [];
-  let currencySymbol:any='EUR';
-  let min:any;
-  let max:any;
-  let totalseats:any;
-  let currentoccupiedseats:any;
-  let currentroulettenumbers:any;
-  let currentdoubleballroulettenumbers:any;
-  let vendorcategory:any;
-  let isdouble:any;
-  let roulleteresults:any;
-  let roulettecontainerclassname:any;
-  let colorsourcearray:any;
-  let istablefull:boolean;
-  let oldistablefull:boolean;
-  let extraclassname:string='';
-  let roulletteref:any;
-  let dealername:string;
-  let numberofplayers:number;
-  const BLACKJACK = 'blackjack';
-  const ROULETTE = 'roulette';
-  const DOUBLE_ROULETTE = 'doubleballroulette';
-  const DEFAULT_BLACKJACK_TOTAL_SEATS = 7;
-  const blackjackcategory = [BLACKJACK];
-  const roulettecategory = [ROULETTE, DOUBLE_ROULETTE];
-  const DEFAULT_AMOUNT_SEPARATOR = ',';
-  const numberofdisplayedresults = 5;
-  export const MONEY_WHEEL_COLOR_MAP = {
-    '01': 'Yellow',
-    '02': 'Blue',
-    10: 'Green',
-    40: 'Red',
-    '05': 'Purple',
-    20: 'Orange',
-    X7: 'Gold',
-    X2: 'Gold',
-  };
-  export const ROULETTE_COLOR_MAP = {
-    1: 'Red',
-    3: 'Red',
-    5: 'Red',
-    7: 'Red',
-    9: 'Red',
-    12: 'Red',
-    14: 'Red',
-    16: 'Red',
-    18: 'Red',
-    19: 'Red',
-    21: 'Red',
-    23: 'Red',
-    25: 'Red',
-    27: 'Red',
-    30: 'Red',
-    32: 'Red',
-    34: 'Red',
-    36: 'Red',
-    2: 'Black',
-    4: 'Black',
-    6: 'Black',
-    8: 'Black',
-    10: 'Black',
-    11: 'Black',
-    13: 'Black',
-    15: 'Black',
-    17: 'Black',
-    20: 'Black',
-    22: 'Black',
-    24: 'Black',
-    26: 'Black',
-    28: 'Black',
-    29: 'Black',
-    31: 'Black',
-    33: 'Black',
-    35: 'Black',
-    0: 'Green',
-    '00': 'Green',
-  };
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any):void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const messageHandler = (e:any):void => {
-    if (e.data.type === `AddFavoriteThumbnail_${gameid}` && !showfavoredcategory) {
-      gamefavorite = true;
-    }
-
-    if (e.data.type === `RemoveFavoriteThumbnail_${gameid}` && !showfavoredcategory) {
-      gamefavorite = false;
-    }
-
-    if (e.data.type === 'UserSessionID') {
-      isLoggedIn = true;
-      sessionID = e.data.session;
-      playerID = e.data.userID;
-    }
-
-    if(e.data.type === 'CategoryUpdate') {
-      livegamedata = null;
-    }
-  }
-
-  const toggleGameFrame = (gameId:any):void => {
-    window.postMessage({ type: 'SearchedItemClicked', gameId }, window.location.href);
-
-    //Analytics event -- if game was searched
-    if(typeof gtag == 'function'){
-      gtag('event', 'OpenGame', {
-        'context' : 'GameThumbnail--Searched',
-        'gameId' : `${gameId}`,
-        'userId' : `${playerID ? playerID : 'Not logged in'}`
-      });
-    } 
-
-    // Case mobile
-    if (isMobile(userAgent) && integratedgameframemobile == "true") {
-      window.postMessage({ type: 'OpenGameFrame', gameId, gamefunmode, gamepagemodalurl, isMobile: isMobile(userAgent), source: 'GameThumbnail', identifier: 'Lobby', subVendor: gamevendor, launchUrl: gamelaunchurl }, window.location.href);
-    } else if(isMobile(userAgent) && integratedgameframemobile == "false") {
-      window.postMessage({ type: 'ShowGameModal', gameId, isMobile: isMobile(userAgent) }, window.location.href);
-    }
-
-    // Case desktop
-    if (!isMobile(userAgent) && integratedgameframedesktop == "true") {
-      window.postMessage({ type: 'OpenGameFrame', gameId, gamefunmode, gamepagemodalurl, isMobile: isMobile(userAgent), identifier: 'Lobby', subVendor: gamevendor, launchUrl: gamelaunchurl }, window.location.href)
-    } else if(!isMobile(userAgent) && integratedgameframedesktop == "false") {
-      window.postMessage({ type: 'ShowGameModal', gameId, isMobile: isMobile(userAgent) }, window.location.href);
-    }
-
-  };
-
-
-  const toggleFavoriteGame = (id:any):void => {
-
-    if (gamefavorite) {
-      window.postMessage({ type: `SetUnfavoredGame${categoryid}`, id }, window.location.href);
-    } else {
-      window.postMessage({ type: `SetFavoredGame${categoryid}`, id }, window.location.href);
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setSession = ():void => {
-    isLoggedIn = true;
-    sessionID = session;
-    playerID = userid;
-  }
-
-  const setOnLoad = ():void => {
-    if (image) {
-      image.onload = () => {
-        loaded = true;
-      }
-    }
-  }
-
-  const getLiveLobbyURL = (vendorName, id):string => {
-    return `${endpoint}/v1/encoder/lobby/updates/${vendorName}/${id}`;
-  }
-  const connectGameToLiveLobby = ():void => {
-    if (livelobbyendpoint && EventSource && !liveLobbyConnection) {
-      if (gamevendor && gameid) {
-        liveLobbyConnection = new EventSource(getLiveLobbyURL(gamevendor, gameid)),
-        liveLobbyConnection.addEventListener('message', liveLobbyMessageHandler);
-      }
-    }
-  }
-  const disconnectGameFromLiveLobby = () => {
-    if (liveLobbyConnection) {
-      liveLobbyConnection.close();
-      liveLobbyConnection = undefined;
-    }
-  }
-
-  const setFavorites = ():void => {
-    if (favorites == 'true') {
-      fav = true;
-    }
-  }
-
-  const liveLobbyMessageHandler = async (event) => {
-    const { type, data: rawData } = event;
-    let data;
-    switch (type) {
-      case 'message': {
-        if (rawData) {
-          try {
-            data = JSON.parse(rawData);
-          } catch (err) {
-            // eslint-disable-next-line no-console
-            console.error('MESSAGE PARSING ERROR: ', err);
-          }
-        }
-        if (data) {
-          const {
-            InternalTableId,
-            MessageType,
-            // TakenSeats,
-            Results,
-            // Roads, // for baccarat
-            Seats,
-            Open,
-          } = data;
-          if (InternalTableId) {
-            switch (MessageType) {
-              case 'SeatsUpdated': {
-                if (Seats && Array.isArray(Seats)) {
-                  currentoccupiedseats = Seats;
-                  livegamedata.currentOccupiedSeats = Seats;
-                  await tick();
-                }
-                break;
-              }
-              case 'RouletteResultsUpdated': {
-                if (Results && Array.isArray(Results)) {
-                  currentroulettenumbers = Results;
-                  livegamedata.currentRouletteNumbers = Results;
-                  await tick();
-                }
-                break;
-              }
-              case 'DoubleBallRouletteResultsUpdated': {
-                if (Results && Array.isArray(Results)) {
-                  currentdoubleballroulettenumbers = Results;
-                  livegamedata.currentDoubleBallRouletteNumbers = Results;
-                  await tick();
-                }
-                break;
-              }
-              case 'TableOpened': {
-                isopen = Open;
-                livegamedata.isOpen = Open;
-                await tick();
-                break;
-              }
-              case 'TableClosed': {
-                isopen = Open;
-                livegamedata.isOpen = Open;
-                await tick();
-                break;
-              }
-              default: {
-                // default case
-              }
-            }
-          }
-        }
-      }
-      default: {
-        // default case
-      }
-    }
-  }
-  //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));
-    url.searchParams.append('language', lang);
-    // let url:URL = new URL(`${endpoint}${livelobbyendpoint}`);
-    
-    fetch(url)
-    .then((res:any) => res.json())
-      .then((data:any) => {
-        const { details } = data[0];
-        livegamedata = details;
-      });
-    // .then(res => res.json())
-    // .then(data => {
-    //   livegamedata = data.items.find(gameDetails => gameDetails.id == gameid);
-    // });
-  }
-  const numberWithSeparators = (value, sep = DEFAULT_AMOUNT_SEPARATOR):string => {
-    if (value !== undefined && value !== null) {
-      return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
-    }
-    return '';
-  }
-  const contains = (array, value):any[] => {
-    return array.some(item => item === value);
-  }
-  const getGameComponent = (livegamedata):any => {
-    let GameComponent = null;
-    if (livegamedata) {
-      const { vendorCategory } = livegamedata;
-      if (vendorCategory) {
-        const gameTypeToLower = vendorCategory.toLowerCase();
-        if (contains(blackjackcategory, gameTypeToLower)) {
-          GameComponent = BLACKJACK;
-        } else if (contains(roulettecategory, gameTypeToLower)) {
-          GameComponent = ROULETTE;
-        }
-        // else if (contains(baccaratCategory, gameTypeToLower)) {
-        //   GameComponent = 'baccarat';
-        // } else if (contains(otherLiveGamesCategory, gameTypeToLower)) {
-        //   GameComponent = 'poker';
-        // }
-      }
-    }
-    return GameComponent;
-  };
-  const renderBetLimits = (min, max, currencySymbol):string => {
-    let rightSideContent;
-    let leftSideContent;
-    if (min !== undefined && min !== null && max !== undefined && max !== null) {
-      leftSideContent = `
-        <span>
-          ${currencySymbol}
-        </span>
-        ${
-          numberWithSeparators(min)
-        }-${
-          numberWithSeparators(max)
-        }`;
-    }
-    if (numberofplayers) {
-      rightSideContent = `
-        <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) {
-      return '';
-    }
-    return `
-      <p class="LiveLimits">
-        <span class="BetLimitLeft">
-          ${leftSideContent || ''}
-        </span>
-        <span class="BetLimitRight">
-          ${rightSideContent || ''}
-        </span>
-      </p>`;
-  }
-  const renderDealerName = (dealername) => {
-    if (!dealername) {
-      return '';
-    }
-    return `
-      <p class="LiveLimits">
-        <span class="DealerName">${$_('dealer')}: ${dealername}</span>
-      </p>
-    `;
-  }
-  const createDisplayData = (livegamedata) => {
-    totalseats = livegamedata.totalSeats || DEFAULT_BLACKJACK_TOTAL_SEATS;
-    currentoccupiedseats = livegamedata.currentOccupiedSeats || [];
-    const seats = [];
-    for (let i = 1; i <= totalseats; i++) {
-      seats.push(i);
-    }
-    return { seats };
-  }
-  const renderSpan = (selectedClass, key, value, colorClass = '') => {
-    const rouletteItemClassname = `${selectedClass} ${colorClass}`;
-    const firstMatch = key.toString().match(/first0|second0|0/g);
-    if (key === 0 || (firstMatch && firstMatch.length !== 0)) {
-      return `
-        <span
-          id=${key}
-          class="${rouletteItemClassname}"
-        >
-          ${value}
-        </span>
-      `;
-    }
-    return `
-      <span id=${key} class="${rouletteItemClassname}">
-        ${value}
-      </span>
-    `;
-  }
-
-  const attachAnimations = () => {
-    const animatedClassName = 'FirstElementAnimated';
-    const firstElem = roulletteref.getElementsByClassName('First')[0];
-    if (firstElem) {
-      firstElem.classList.add(animatedClassName);
-      setTimeout(() => {
-        firstElem.classList.remove(animatedClassName);
-      }, 2000);
-    }
-  }
-  const updateComponent = () => {
-    if (livegamedata) {
-      isopen = livegamedata.isOpen;
-      betlimit = livegamedata.betLimit || {};
-      openhours = livegamedata.openHours;
-      seats = createDisplayData(livegamedata).seats;
-      if (openhours && openhours.value) {
-        const { value: { startTime: starttimeRaw /* , timeFormat: timeFormatRaw */, originalTimeFormat } } = openhours;
-        starttime = starttimeRaw;
-        timeformat = originalTimeFormat || timeformat;
-      }
-      if (isopen) {
-        displaytype = getGameComponent(livegamedata);
-      }
-      currencySymbol = currenciesSymbols[currency];
-      min = (betlimit.min || {})[currency];
-      max = (betlimit.max || {})[currency];
-      currentroulettenumbers = livegamedata.currentRouletteNumbers;
-      currentdoubleballroulettenumbers = livegamedata.currentDoubleBallRouletteNumbers;
-      vendorcategory = livegamedata.vendorCategory;
-      isdouble = vendorcategory.toLowerCase() === DOUBLE_ROULETTE;
-      roulleteresults = (isdouble ? currentdoubleballroulettenumbers : currentroulettenumbers) || [];
-      roulettecontainerclassname = 'GameProp LiveProps RoulleteProps';
-      roulettecontainerclassname += isdouble ? ' Double' : '';
-      colorsourcearray = contains(roulettecategory, vendorcategory.toLowerCase()) ? ROULETTE_COLOR_MAP : MONEY_WHEEL_COLOR_MAP;
-      oldistablefull = istablefull;
-      istablefull = Array.isArray(currentoccupiedseats) && currentoccupiedseats.length === totalseats;
-      if (livegamedata.dealer) {
-        dealername = livegamedata.dealer.DealerName;
-      }
-      numberofplayers = livegamedata.numberOfPlayers;
-      extraclassname = 'ListGame';
-      if(livegamedata.isOpen && livegamedata.currentRouletteNumbers) {
-        extraclassname += ' GameBackdrop';
-      }
-      if (isopen && istablefull && min && max && livegamedata.currentOccupiedSeats) {
-        extraclassname += ' GameContainerDimmed';
-      } else {
-        if (isopen === false && starttime) {
-          extraclassname += ' GameContainerFullyDimmed';
-        }
-      }
-      if (customStylingContainer) {
-        if (!oldistablefull && istablefull) {
-          extraclassname += ' PulsatingRedShadow';
-          extraclassname = extraclassname.replace(' PulsatingGreenShadow', '');
-        } else if (oldistablefull && !istablefull) {
-          extraclassname += ' PulsatingGreenShadow';
-          extraclassname = extraclassname.replace(' PulsatingRedShadow', '');
-        }
-      }
-    }
-  }
-  const toggleConnect = ():void => {
-    if (connectlive === 'disconnect') {
-      disconnectGameFromLiveLobby();
-    } else if (connectlive === 'connect') {
-      connectGameToLiveLobby();
-    }
-  }
-  const toggleVisibilityConnect = ():void => {
-    if (visibilityconnect === 'disconnect') {
-      disconnectGameFromLiveLobby();
-    } else if (visibilityconnect === 'connect' && connectlive === 'connect') {
-      connectGameToLiveLobby();
-    }
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      if (liveLobbyConnection) {
-        liveLobbyConnection.removeEventListener('message', liveLobbyMessageHandler);
-      }
-    }
-  });
-
-  $: connectlive && toggleConnect();
-  $: visibilityconnect && toggleVisibilityConnect();
-  $: lang && setActiveLanguage();
-  $: session && userid && endpoint && setSession();
-  $: gamethumbnail && setOnLoad();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: favorites && setFavorites();
-  $: translationurl && setTranslationUrl();
-  $: gamecellsize && clientstylingurl && setClientStylingURL();
-  $: endpoint && livelobbyendpoint && setLiveLobbyData();
-  $: livegamedata && updateComponent();
-  $: roulletteref && roulleteresults && attachAnimations();
-</script>
-
-
-<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="" 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)}">{$_('playNow')}</button>
-        {/if}
-      </div>
-      <span class="GameInfoVendor">
-        { gamevendor ? gamevendor : '-'}
-      </span>
-    </div>
-  <div class="GameExtraInfoContainer">
-      <div class="GameExtraInfo">
-        {#if gameisnew}
-          <span class="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
-        {/if}
-        {#if gametag}
-          <span class="GameExtraInfoLabel PopularGameTag">{gametag}</span>
-        {/if}
-        {#if livegamedata}
-          {#if !isopen && starttime && timeformat}
-            <div class="GameProp LiveProps">
-              <div class="ClosedGame">
-                {$_('opens')}
-                <span>
-                  {moment.utc(starttime).local().format(timeformat)}
-                </span>
-              </div>
-              {@html renderDealerName(dealername)}
-              {@html renderBetLimits(min, max, currencySymbol)}
-            </div>
-          {/if}
-          {#if isopen && displaytype === BLACKJACK}
-            <div class="GameProp LiveProps BlackjackDisplay" part="GameProp LiveProps BlackjackDisplay">
-              <div class="LiveIcons">
-                {#if istablefull}
-                  <span class="FullTable">
-                    {$_('full')}
-                  </span>
-                {:else}
-                  {#each seats as seatData}
-                    <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
-                        <path d="M11.58 6c-1.17 0-2.13.95-2.13 2.12v.4a8.82 8.82 0 00-2.92-.4c-1.54 0-2.45.22-2.92.4v-.4A2.136 2.136 0 001.48 6a1.33 1.33 0 00-.5 2.55c.14.07.24.21.24.37l.26 1.06c0 .96.73 1.75 1.65 1.85a.65.65 0 00.28 1.23.65.65 0 00.3-1.22h5.64a.65.65 0 00.3 1.22.65.65 0 00.28-1.23c.93-.1 1.65-.9 1.65-1.85l.27-1.06c0-.16.1-.3.24-.37A1.33 1.33 0 0011.58 6z"/>
-                        <path d="M4.34 7.5c.55-.1 1.27-.17 2.2-.17.91 0 1.63.07 2.18.17.21-.96.9-1.74 1.8-2.1V4a3.99 3.99 0 00-7.97 0v1.4c.9.36 1.58 1.14 1.79 2.1z"/>
-                      </svg>
-                    </span>
-                  {/each}
-                {/if}
-              </div>
-              {@html renderDealerName(dealername)}
-              {@html renderBetLimits(min, max, currencySymbol)}
-            </div>
-          {:else if isopen && displaytype && displaytype === ROULETTE}
-            <div class="{roulettecontainerclassname}">
-              <div class="LiveIcons" bind:this={roulletteref}>
-                {#each new Array(numberofdisplayedresults) as garbage, i}
-                  {#if roulleteresults && roulleteresults[i]}
-                    {#if isdouble}
-                      <div class="Double">
-                        {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `first${i}${roulleteresults[i][0]}`, roulleteresults[i][0], colorsourcearray[roulleteresults[i][0]])}
-                        {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `second${i}${roulleteresults[i][1]}`, roulleteresults[i][1], colorsourcearray[roulleteresults[i][1]])}
-                      </div>
-                    {:else}
-                      {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, i, roulleteresults[i], colorsourcearray[roulleteresults[i]])}
-                    {/if}
-                  {/if}
-                {/each}
-              </div>
-              {@html renderDealerName(dealername)}
-              {@html renderBetLimits(min, max, currencySymbol)}
-            </div>
-          {/if}
-        {/if}
-      </div>
-      {#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 !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(--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}
-    </div>
-  </div>
-  {#if showgamename === 'true'}
-    <p class="GameNameBelow" title="{gamename}">{gamename}</p>
-  {/if}
-</div>
-
-<style lang="scss">
-
-
-
-  *, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .GameContainer {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-  .GameContainer.WithGameName {
-    padding-bottom: 20px;
-  }
-  .GameInnerContainer {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-    .GameBg {
-      width: 100%;
-      height: 100%;
-      object-fit: unset;
-      transition: all 150ms ease-in-out;
-      &.GameBg-1x2,
-      &.GameBg-2x1,
-      &.GameBg-2x2 { object-fit: cover; }
-    }
-
-    .GameInfoWrapper {
-      display: none;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: rgba(0, 0, 0, .65);
-      z-index: 15;
-      padding: 8px 25px;
-
-      .GameInfo {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-evenly;
-        &Name {
-          color: white;
-          text-align: center;
-          font-size: 14px;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        &Btn {
-          appearance: none;
-          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(--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{
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      height: auto;
-      padding: 4px;
-    }
-
-    .GameExtraInfo {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      &Label {
-        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: 5px;
-      }
-    }
-
-    &:hover, &:active {
-      cursor: pointer;
-
-      .GameInfoWrapper{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .GameBg {
-        filter: blur(5px) grayscale(1);
-      }
-
-      .UnfavoredIcon{
-        display: flex;
-      }
-    }
-  }
-
-  .GameInnerContainer:hover {
-    .GameExtraInfo {
-      opacity: 0.3;
-    }
-  }
-
-  .GameNameBelow {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    position: relative;
-    bottom: -5px;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .FavoredIcon, .UnfavoredIcon {
-    width: 20px;
-    height: 20px;
-  }
-  .UnfavoredIcon{
-    display: none;
-  }
-  .FavIconContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 15;
-  }
-
-  // LIVE LOBBY DATA STYLING
-  .GamesWrapper .ListGame:hover .GamePlayNowText {
-    @media (min-width: 1100px) {
-      z-index: 4;
-    }
-  }
-  // fix for displaying live game thumbnails that don't have details without backdrop
-  .ListGame.GameBackdrop {
-    .GameInnerContainer  {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
-      }
-    }
-  }
-
-  .ListGame .GameInnerContainer {
-    z-index: 0;
-
-    .GameBg {
-      z-index: 5;
-    }
-
-    .GameExtraInfo {
-      z-index: 10;
-    }
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-
-    &.GameInnerContainerUnavailable {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: rgba(0,0,0,0.9);
-      }
-    }
-
-    .ListGame.GameContainerDimmed:before {
-      display: block;
-      content: ' ';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 5;
-      background: rgba(0,0,0, .4);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      fill: var(--emfe-w-color-white, #FFFFFF);
-      opacity: 1;
-      border-radius: 4px;
-    }
-
-    .ListGame.GameContainerFullyDimmed:before {
-      display: block;
-      content: ' ';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 5;
-      background: rgba(0,0,0, .8);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      fill: var(--emfe-w-color-white, #FFFFFF);
-      opacity: 1;
-      border-radius: 4px;
-    }
-
-    .LiveProps {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      bottom: 0px;
-      right: 0;
-      width: 100%;
-      padding: 0;
-      background: linear-gradient(to top, var(--emfe-w-color-black, #000000), var(--emfe-w-color-black, #000000), transparent);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      opacity: 1;
-      font-size: 14px;
-    }
-
-    .ListGame:hover .LiveProps,
-    .ListGameLink:hover .LiveProps {
-      opacity: 0;
-    }
-    //--------------------------------------LIVE LOBBY ANIMATIONS------------------------------------------
-    // Pulsating animations
-    @keyframes red-pulse {
-      0% {
-        box-shadow: 0 0 2px 0 rgba(red, 0.75);
-      }
-
-      15% {
-        box-shadow: 0 0 10px 2px rgba(red, 0.75);
-      }
-
-      30% {
-        box-shadow: 0 0 2px 0 rgba(red, 0.75);
-      }
-
-      50% {
-        box-shadow: 0 0 10px 2px rgba(red, 0.75);
-      }
-
-      65% {
-        box-shadow: 0 0 2px 0 rgba(red, 0.75);
-      }
-
-      80% {
-        box-shadow: 0 0 10px 2px rgba(red, 0.75);
-      }
-
-      100% {
-        box-shadow: 0 0 0 0 rgba(red, 0.75);
-      }
-    }
-
-    @keyframes green-pulse {
-      0% {
-        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
-      }
-
-      15% {
-        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
-      }
-
-      30% {
-        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
-      }
-
-      50% {
-        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
-      }
-
-      65% {
-        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
-      }
-
-      80% {
-        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
-      }
-
-      100% {
-        box-shadow: 0 0 0 0 rgba(#56A80A, 0.75);
-      }
-    }
-    // Flip animation
-    @keyframes flip-open {
-      0% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-        opacity: 0;
-      }
-      40% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-      }
-      60% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        opacity: 1;
-      }
-      80% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-      }
-      100% {
-        -webkit-transform: perspective(400px);
-        transform: perspective(400px);
-      }
-    }
-
-    .silde-in-from-left {
-      -webkit-animation-name: silde-in-from-left;
-      animation-name: silde-in-from-left;
-      -webkit-animation-duration: 1s;
-      animation-duration: 1s;
-      -webkit-animation-fill-mode: both;
-      animation-fill-mode: both;
-    }
-    @-webkit-keyframes silde-in-from-left {
-      0% {
-        -webkit-transform: translateX(-100%);
-        transform: translateX(-100%);
-        visibility: visible;
-      }
-      100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-      }
-    }
-    @keyframes silde-in-from-left {
-      0% {
-        -webkit-transform: translateX(-100%);
-        transform: translateX(-100%);
-        visibility: visible;
-      }
-      100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-      }
-    }
-
-    @keyframes flip-closed-seat {
-      0% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-        opacity: 0;
-      }
-      40% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-      }
-      60% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        opacity: 1;
-      }
-      80% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-      }
-      100% {
-        -webkit-transform: perspective(400px);
-        transform: perspective(400px);
-      }
-    }
-
-    // .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;
-    }
-
-    .ListGame.PulsatingGreenShadow {
-      animation: green-pulse 2s linear;
-    }
-
-    .ListGame.PulsatingRedShadow {
-      animation: red-pulse 2s linear;
-    }
-
-    .LiveIcons {
-      position: relative;
-      display: flex;
-      padding: 0 16px;
-      // flex-wrap: wrap;
-      box-sizing: border-box;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      min-height: auto;
-      margin-bottom: 5px;
-      @media (min-width: 1100px) {
-        min-height: auto;
-      }
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &.Black, &.Red, &.Green {
-        color: var(--emfe-w-color-white, #FFFFFF);
-        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-      }
-
-      .LatestResult {
-        min-width: 12px;
-        padding: 2px;
-        margin: 0 1px;
-        margin-right: 6px;
-        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 {
-          animation: flip-open 2s both;
-          -webkit-animation: flip-open 2s both;
-          -webkit-backface-visibility: visible;
-          backface-visibility: visible;
-        }
-
-        &.First {
-          min-width: 24px;
-          &.Black, &.Red, &.Green {
-            color: var(--emfe-w-color-white, #FFFFFF);
-            border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-          }
-          &.Black {
-            background: var(--emfe-w-color-black, #000000)
-          }
-          &.Red {
-            background: red;
-          }
-          &.Green {
-            background: #56A80A;
-          }
-          padding: 4px;
-          @media (min-width: 1100px) {
-            padding: 4px;
-          }
-        }
-      }
-
-      .Double {
-        display: flex;
-        flex-direction: column;
-
-        .LatestResult {
-          &:first-child {
-            margin-bottom: 10px;
-          }
-        }
-
-        &:first-child {
-          .LatestResult {
-            margin-left: 0;
-            margin-bottom: 0;
-          }
-        }
-
-        &:last-child {
-          .LatestResult {
-            margin-right: 0;
-          }
-        }
-      }
-
-      .Black, .Red, .Green {
-        background-color: transparent;
-      }
-
-      .Black {
-        color: var(--emfe-w-color-white, #FFFFFF);
-      }
-
-      .Red {
-        color: red;
-      }
-
-      .Green {
-        color: #56A80A;
-      }
-    }
-
-    .Blue {
-      color: #4d90a7;
-    }
-
-    .Red {
-      background-color: red;
-    }
-
-    .Black {
-      background-color: var(--emfe-w-color-black, #000000);
-    }
-
-    .Green {
-      background-color: #56A80A;
-    }
-
-    .White {
-      background-color: var(--emfe-w-color-white, #FFFFFF);
-    }
-
-    .Yellow {
-      background-color: #eeca3d;
-    }
-
-    .Gold {
-      background-color: darken(#eeca3d, 30%);
-    }
-
-    .Orange {
-      background-color: darken(#eeca3d, 40%);
-    }
-
-    .Purple {
-      background-color: darken(#f0f, 40%);
-    }
-
-    .Tie {
-      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;
-      width: 16px;
-      height: 16px;
-      margin-right: 4px;
-      @media (min-width: 768px) {
-        width: 16px;
-        height: 16px;
-      }
-      @media (min-width: 1100px) {
-        width: 16px;
-        height: 16px;
-      }
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  .OpenSeat {
-    animation: flip-closed-seat 2s both;
-    -webkit-animation: flip-closed-seat 2s both;
-    -webkit-backface-visibility: visible;
-    backface-visibility: visible;
-  }
-  .ClosedSeat {
-    animation: flip-open 2s both;
-    -webkit-animation: flip-open 2s both;
-    -webkit-backface-visibility: visible;
-    backface-visibility: visible;
-  }
-  .OpenSeat svg {
-    fill: transparent;
-    stroke: var(--emfe-w-color-white, #FFFFFF);
-  }
-  .ClosedSeat svg {
-    fill: var(--emfe-w-color-white, #FFFFFF);
-  }
-  .FullTable {
-    display: flex;
-    position: relative;
-    z-index: 10;
-    height: 20px;
-    padding: 1px 4px 1px 0;
-    align-items: center;
-    border-radius: 3px;
-    font-size: 12px;
-    white-space: normal;
-    text-transform: uppercase;
-    -webkit-animation-name: silde-in-from-left;
-    animation-name: silde-in-from-left;
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--emfe-w-color-white, #FFFFFF);
-    }
-    &.ClosedSeat {
-      margin-right: -3px;
-    }
-  }
-  .PlayersDisplay {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    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(--emfe-w-color-white, #FFFFFF);
-    @media (min-width: 1100px) {
-      padding: 2px 16px;
-    }
-    .PlayersIcon {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      //@media (min-width: 1100px) {
-      //  width: 1.7rem;
-      //  height: 1.7rem;
-      //}
-      svg {
-        fill: var(--emfe-w-color-white, #FFFFFF);
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  .ClosedGame {
-    opacity: 1;
-    z-index: 10;
-    padding: 8px 10px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 18px;
-    @media (min-width: 1100px) {
-      padding: 8px 16px;
-    }
-    span {
-      font-size: 18px;
-    }
-  }
-  .LiveLimits {
-    opacity: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 2px 20px 5px 20px;
-    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: 12px;
-    }
-  }
-  .Players {
-    display: inline-block;
-    width: 19px;
-    height: 19px;
-  }
-}
-
-// Loader for favorites
-.LoaderRipple {
-  width: 80px;
-  height: 80px;
-  position: absolute;
-  top: 40px;
-  left: -8px;
-  div {
-    position: absolute;
-    border: 4px solid #fff;
-    opacity: 1;
-    border-radius: 50%;
-    animation: ripple-effect 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-    &:nth-child(2) {
-      animation-delay: -0.5s;
-    }
-  }
-}
-
-@keyframes ripple-effect {
-  0% {
-    top: 36px;
-    left: 36px;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-  4.9% {
-    top: 36px;
-    left: 36px;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-  5% {
-    top: 36px;
-    left: 36px;
-    width: 0;
-    height: 0;
-    opacity: 1;
-  }
-  100% {
-    top: 0px;
-    left: 0px;
-    width: 72px;
-    height: 72px;
-    opacity: 0;
-  }
-}
-
-@container (max-width: 480px) {
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper{
-    gap: 0px;
-    padding: 8px 10px;
-  }
-
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoName {
-    font-size: 12px;
-    margin-top: 4px;
-  }
-
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
-    font-size: 12px;
-    padding:2px;
-  }
-
-  .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: 8px;
-  }
-
-}
-
-</style>