@everymatrix/casino-search 0.0.367 → 0.0.368

package/src/CasinoSearch.svelte

@@ -1,415 +1,415 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { Translations } from './translations.js';
-  import { getDevice } from 'rvhelper';
-  import { onMount } from 'svelte';
-  
-  import '@everymatrix/casino-game-thumbnail';  
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let lang:string = 'en';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  let userAgent:any = window.navigator.userAgent;
-  let searchArray:Array<any> = [];
-  let searchedValues:any = [];
-  let gamesCache:Object = {};
-
-  let searchValue:string = '';
-  let searchElement:HTMLElement;
-  let searchCancelled:boolean = true;
-  let searchActive:boolean = false;
-  
-  let isLoading:boolean = false; 
-  let customStylingContainer:HTMLElement;
-
-  Object.keys(Translations).forEach((item:any):void => {
-    addNewMessages(item, Translations[item]);
-  });
-
-  const messageHandler = (e:any):void => {
-    if (e.data && e.data.type == 'OpenGameFrame') {
-      addSearchedItem(e.data.gameId);
-    }
-  }
-
-  const onFocus = ():void => {
-    searchCancelled = false;
-    searchActive = true;
-   
-    if (endpoint && datasource && lang) {
-      if (searchValue.length < 2) {
-        let recentSearchedGames = getCookieValue(`searchedGamesWds_casino`);
-        let recentSearchedGamesArray:Array<any> = [];
-
-        if (recentSearchedGames) {
-          recentSearchedGamesArray = recentSearchedGames.split(',');
-        }
-  
-        let promises:Array<Promise<any>> = [];
-        let index = 0;
-        let length = recentSearchedGamesArray.length;
-
-        if (length > 0) {
-          for (index = 0; index < length; index++) {
-            let url:any = new URL(`${endpoint}/casino/games/${recentSearchedGamesArray[index]}`);
-
-            url.searchParams.append('language', lang);
-            url.searchParams.append('datasource', datasource);
-            url.searchParams.append('platform', getDevice(userAgent));
-
-            promises.push(getGame(url, recentSearchedGamesArray[index]));
-          }
-
-          Promise.all(promises).then((res:any):void => {
-            searchArray = res;
-          });
-        } 
-      }
-    }
-    sendSearchStatus(searchActive);
-  }
-
-  const getGames = (url:URL):Promise<any> => {
-    return new Promise((resolve, reject):void => {
-      isLoading = true;
-      
-      fetch(url.href)
-        .then((res:any) => res.json())
-        .then((games:any) => {
-          isLoading = false;
-
-          resolve(games);
-        }).catch((err:any) => {
-          isLoading = false;
-          
-          console.error(err);
-          
-          reject(err);
-        });
-    });
-  }
-
-  const getGame = (url:any, gameId?:string):Promise<any> => {
-    return new Promise((resolve, reject) => {
-      isLoading = true;
-
-      if (gameId && Object.keys(gamesCache).indexOf(gameId) >= 0) {
-        isLoading = false;
-
-        resolve(gamesCache[gameId]);
-      } else {
-        fetch(url)
-          .then(fetchRes => fetchRes.json())
-          .then(gameData => {
-            isLoading = false;
-
-            gamesCache[gameData[0].gameId] = gameData[0];
-
-            resolve(gameData[0]);
-          }).catch((err:any) => {
-            isLoading = false;
-
-            console.error(err);
-
-            reject(err);
-          });
-      }
-    });
-  }
-  
-  const addSearchedItem = (gameID:any):void => {
-    searchedValues = getCookieValue(`searchedGamesWds_casino`);
-
-    if (searchedValues) {
-      searchedValues = searchedValues.split(',');
-    } else {
-      searchedValues = [];
-    }
-
-    if (searchedValues.indexOf(gameID) === -1) {
-      let value;
-
-      searchedValues.push(gameID);
-      value = searchedValues.join(',');
-      document.cookie = `searchedGamesWds_casino=` + value;
-    }
-  }
-
-  const getCookieValue = (name:string):string => {
-    let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
-  
-    if (match) {
-      return match[2];
-    }
-  }
-
-  const cancelSearch = ():void => {
-    searchValue = '';
-    searchCancelled = true;
-    isLoading = false;
-    searchArray = [];
-    searchActive = false;
-
-    sendSearchStatus(searchActive);
-  }
-
-  const clearSearch = ():void => {
-    searchValue = '';
-    searchElement.focus();
-  }
-
-  // --- Communication with other widgets
-
-  const sendSearchStatus = (searchStatus):void => {
-      window.postMessage({ type: searchStatus === true ? 'searchActive' : 'searchCancelled', searchStatus});
-  };
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  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
-
-        if (customStylingContainer) {
-          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-        }
-      });
-  }
-
-  $: if (searchValue.length >= 2) {
-    const searchUrl:URL = new URL(`${endpoint}/casino/games`);
-    
-    searchUrl.searchParams.append("datasource", datasource);
-    searchUrl.searchParams.append("expand", "vendor");
-    searchUrl.searchParams.append("platform", getDevice(userAgent));
-    searchUrl.searchParams.append("language", lang);
-    searchUrl.searchParams.append("pagination", "offset=0,limit=30");
-    searchUrl.searchParams.append("filter", `name=${searchValue}`);
-    
-    getGames(searchUrl).then((searchData:any) => {
-      searchArray = searchData.items.map((item) => item);
-    });
-  } else {
-    if (!searchCancelled) {
-      onFocus();
-    }
-  }
-
-  onMount(()=> {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: lang && setActiveLanguage();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-      
-</script>
-
-<div bind:this={customStylingContainer}>
-  <div class="CasinoSearch">
-    <div class="Search">
-      <div class="SearchIcon">
-        <svg width="14" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m10.48 10.985 2.21 2.373"/>
-          <circle cx="6.5" cy="6.5" r="5.75" stroke="#212121" stroke-width="1.5"/>
-        </svg>
-      </div>
-      <div class="SearchContainer">
-        <input class="SearchInput" type="search" placeholder="Search for Games" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement}>
-        <span on:click={() => clearSearch()} class="SearchClearButton { searchValue.length != 0 ? '' : 'NotVisible'}">
-          <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="m1.45 1.5 8.1 8M1.45 9.5l8.1-8" stroke="#717171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </span>
-      </div>
-      <small on:click={() => cancelSearch()} class="SearchCancelButton {searchCancelled ? 'NotVisible' : ''}">
-        {$_('Translations.cancel')}
-      </small>
-    </div>
-    {#if isLoading}
-      <p>{$_('Translations.loading')}</p>
-    {:else}
-      {#if searchActive == true && searchValue.length < 2}
-        <p class="SearchMessage">{$_('Translations.recentSearch')}</p>
-          {#if searchArray.length == 0}
-          <div class="ResultsContainerError">
-            <p class="SearchMessage">{$_('Translations.noRecentSearches')}</p>
-          </div>
-          {/if}
-      {:else if searchArray.length != 0} 
-        <p class="SearchMessage">{$_('Translations.searchResult')}</p>
-      {/if} 
-      <div class="SearchResultsContainer {searchActive == true ? '': 'NotVisible'}">
-        {#if searchCancelled === false}
-          {#each searchArray as game}
-            <casino-game-thumbnail
-              lang={lang}
-              gamethumbnail={game.thumbnail}
-              gamename={game.name}
-              gamevendor={game.vendor.name}
-              gameisnew={game.isNew}
-              gamepopularity={game.popularity}
-              gamecellsize={game.cellSize}
-              gameid={game.id}
-              gamefunmode={game.hasFunMode}
-              gamefavorite={game.isFavorite}
-              livelobbyendpoint={game.details ? game.launchUrl : ''}
-              endpoint={endpoint}
-            ></casino-game-thumbnail>
-          {/each}
-        {/if}
-        {#if searchValue.length >= 2 && searchArray.length == 0}
-          <div class="ResultsContainerError">
-            <p class="SearchMessage">{$_('Translations.notFound')}</p>
-            <p>{$_('Translations.notFoundText')}</p>
-          </div>
-        {/if} 
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  $color-grey: #717171;
-  $color-light-grey: #cacaca;
-  $color-black: #212121;
-
-  $grid-gap: 8px;
-  $grid-cell-size: 167px;
-  $grid-cell-size-small: 110px;
-  $grid-cell-size-medium: 122px;
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .CasinoSearch {
-    margin: 16px;
-  }
-
-  .Search {
-    display: flex;
-    align-items: center;
-    position: relative;
-    justify-content: space-between;
-    margin-bottom: 20px;
-
-    &Icon{
-      position: absolute;
-      left: 5%;
-      z-index: 1;
-
-      svg {
-        height: 14px;
-        width: 13px;
-      }
-    }
-    &Container { 
-      width: 100%;
-      position: relative;
-    }
-
-    &Input {
-      border-radius: 4px;
-      border: 1px solid $color-light-grey;
-      color: $color-grey;
-      display: block;
-      font-size: 16px;
-      font-weight: 300;
-      padding: 14px 5px 14px 46px;
-      width:100%;
-    
-      &::placeholder {
-        color: $color-grey;
-        font-size: 16px;
-        font-weight: 300;
-      }
-
-      &:focus {
-       outline: 1px solid  #d9d7d7;
-      }
-
-      &::-webkit-search-decoration,
-        &::-webkit-search-cancel-button,
-        &::-webkit-search-results-button,
-        &::-webkit-search-results-decoration {
-          -webkit-appearance:none;
-        }
-    }
-
-    &ClearButton{
-      position: absolute;
-      top: 30%;
-      right: 15px;
-    }
-
-    &CancelButton {
-      color: $color-grey;
-      font-weight: 300;
-      margin-left: 8px;
-    }
-
-    &Message {
-      font-size: 18px;
-      font-weight: 600;
-      margin: 24px 0;
-      color: $color-black;
-    }
-
-    &ResultsContainer {
-      display: grid;
-      gap: $grid-gap;
-      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size, 46%), 1fr));
-      grid-template-rows: repeat(auto-fill, $grid-cell-size);
-      grid-auto-rows: $grid-cell-size;
-      grid-auto-columns: $grid-cell-size;
-      grid-auto-flow: row dense;
-    }
-  }
-
-  .ResultsContainerError {
-    text-align: center;
-    width: 300px;
-    color: $color-grey;
-    font-weight: 300;
-    position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-  }
-
-  .NotVisible {
-    display: none;
-  }
-
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { Translations } from './translations.js';
+  import { getDevice } from 'rvhelper';
+  import { onMount } from 'svelte';
+  
+  import '@everymatrix/casino-game-thumbnail';  
+
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = 'en';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+
+  let userAgent:any = window.navigator.userAgent;
+  let searchArray:Array<any> = [];
+  let searchedValues:any = [];
+  let gamesCache:Object = {};
+
+  let searchValue:string = '';
+  let searchElement:HTMLElement;
+  let searchCancelled:boolean = true;
+  let searchActive:boolean = false;
+  
+  let isLoading:boolean = false; 
+  let customStylingContainer:HTMLElement;
+
+  Object.keys(Translations).forEach((item:any):void => {
+    addNewMessages(item, Translations[item]);
+  });
+
+  const messageHandler = (e:any):void => {
+    if (e.data && e.data.type == 'OpenGameFrame') {
+      addSearchedItem(e.data.gameId);
+    }
+  }
+
+  const onFocus = ():void => {
+    searchCancelled = false;
+    searchActive = true;
+   
+    if (endpoint && datasource && lang) {
+      if (searchValue.length < 2) {
+        let recentSearchedGames = getCookieValue(`searchedGamesWds_casino`);
+        let recentSearchedGamesArray:Array<any> = [];
+
+        if (recentSearchedGames) {
+          recentSearchedGamesArray = recentSearchedGames.split(',');
+        }
+  
+        let promises:Array<Promise<any>> = [];
+        let index = 0;
+        let length = recentSearchedGamesArray.length;
+
+        if (length > 0) {
+          for (index = 0; index < length; index++) {
+            let url:any = new URL(`${endpoint}/casino/games/${recentSearchedGamesArray[index]}`);
+
+            url.searchParams.append('language', lang);
+            url.searchParams.append('datasource', datasource);
+            url.searchParams.append('platform', getDevice(userAgent));
+
+            promises.push(getGame(url, recentSearchedGamesArray[index]));
+          }
+
+          Promise.all(promises).then((res:any):void => {
+            searchArray = res;
+          });
+        } 
+      }
+    }
+    sendSearchStatus(searchActive);
+  }
+
+  const getGames = (url:URL):Promise<any> => {
+    return new Promise((resolve, reject):void => {
+      isLoading = true;
+      
+      fetch(url.href)
+        .then((res:any) => res.json())
+        .then((games:any) => {
+          isLoading = false;
+
+          resolve(games);
+        }).catch((err:any) => {
+          isLoading = false;
+          
+          console.error(err);
+          
+          reject(err);
+        });
+    });
+  }
+
+  const getGame = (url:any, gameId?:string):Promise<any> => {
+    return new Promise((resolve, reject) => {
+      isLoading = true;
+
+      if (gameId && Object.keys(gamesCache).indexOf(gameId) >= 0) {
+        isLoading = false;
+
+        resolve(gamesCache[gameId]);
+      } else {
+        fetch(url)
+          .then(fetchRes => fetchRes.json())
+          .then(gameData => {
+            isLoading = false;
+
+            gamesCache[gameData[0].gameId] = gameData[0];
+
+            resolve(gameData[0]);
+          }).catch((err:any) => {
+            isLoading = false;
+
+            console.error(err);
+
+            reject(err);
+          });
+      }
+    });
+  }
+  
+  const addSearchedItem = (gameID:any):void => {
+    searchedValues = getCookieValue(`searchedGamesWds_casino`);
+
+    if (searchedValues) {
+      searchedValues = searchedValues.split(',');
+    } else {
+      searchedValues = [];
+    }
+
+    if (searchedValues.indexOf(gameID) === -1) {
+      let value;
+
+      searchedValues.push(gameID);
+      value = searchedValues.join(',');
+      document.cookie = `searchedGamesWds_casino=` + value;
+    }
+  }
+
+  const getCookieValue = (name:string):string => {
+    let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+  
+    if (match) {
+      return match[2];
+    }
+  }
+
+  const cancelSearch = ():void => {
+    searchValue = '';
+    searchCancelled = true;
+    isLoading = false;
+    searchArray = [];
+    searchActive = false;
+
+    sendSearchStatus(searchActive);
+  }
+
+  const clearSearch = ():void => {
+    searchValue = '';
+    searchElement.focus();
+  }
+
+  // --- Communication with other widgets
+
+  const sendSearchStatus = (searchStatus):void => {
+      window.postMessage({ type: searchStatus === true ? 'searchActive' : 'searchCancelled', searchStatus});
+  };
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  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
+
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+        }
+      });
+  }
+
+  $: if (searchValue.length >= 2) {
+    const searchUrl:URL = new URL(`${endpoint}/casino/games`);
+    
+    searchUrl.searchParams.append("datasource", datasource);
+    searchUrl.searchParams.append("expand", "vendor");
+    searchUrl.searchParams.append("platform", getDevice(userAgent));
+    searchUrl.searchParams.append("language", lang);
+    searchUrl.searchParams.append("pagination", "offset=0,limit=30");
+    searchUrl.searchParams.append("filter", `name=${searchValue}`);
+    
+    getGames(searchUrl).then((searchData:any) => {
+      searchArray = searchData.items.map((item) => item);
+    });
+  } else {
+    if (!searchCancelled) {
+      onFocus();
+    }
+  }
+
+  onMount(()=> {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+      
+</script>
+
+<div bind:this={customStylingContainer}>
+  <div class="CasinoSearch">
+    <div class="Search">
+      <div class="SearchIcon">
+        <svg width="14" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m10.48 10.985 2.21 2.373"/>
+          <circle cx="6.5" cy="6.5" r="5.75" stroke="#212121" stroke-width="1.5"/>
+        </svg>
+      </div>
+      <div class="SearchContainer">
+        <input class="SearchInput" type="search" placeholder="Search for Games" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement}>
+        <span on:click={() => clearSearch()} class="SearchClearButton { searchValue.length != 0 ? '' : 'NotVisible'}">
+          <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="m1.45 1.5 8.1 8M1.45 9.5l8.1-8" stroke="#717171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
+      </div>
+      <small on:click={() => cancelSearch()} class="SearchCancelButton {searchCancelled ? 'NotVisible' : ''}">
+        {$_('Translations.cancel')}
+      </small>
+    </div>
+    {#if isLoading}
+      <p>{$_('Translations.loading')}</p>
+    {:else}
+      {#if searchActive == true && searchValue.length < 2}
+        <p class="SearchMessage">{$_('Translations.recentSearch')}</p>
+          {#if searchArray.length == 0}
+          <div class="ResultsContainerError">
+            <p class="SearchMessage">{$_('Translations.noRecentSearches')}</p>
+          </div>
+          {/if}
+      {:else if searchArray.length != 0} 
+        <p class="SearchMessage">{$_('Translations.searchResult')}</p>
+      {/if} 
+      <div class="SearchResultsContainer {searchActive == true ? '': 'NotVisible'}">
+        {#if searchCancelled === false}
+          {#each searchArray as game}
+            <casino-game-thumbnail
+              lang={lang}
+              gamethumbnail={game.thumbnail}
+              gamename={game.name}
+              gamevendor={game.vendor.name}
+              gameisnew={game.isNew}
+              gamepopularity={game.popularity}
+              gamecellsize={game.cellSize}
+              gameid={game.id}
+              gamefunmode={game.hasFunMode}
+              gamefavorite={game.isFavorite}
+              livelobbyendpoint={game.details ? game.launchUrl : ''}
+              endpoint={endpoint}
+            ></casino-game-thumbnail>
+          {/each}
+        {/if}
+        {#if searchValue.length >= 2 && searchArray.length == 0}
+          <div class="ResultsContainerError">
+            <p class="SearchMessage">{$_('Translations.notFound')}</p>
+            <p>{$_('Translations.notFoundText')}</p>
+          </div>
+        {/if} 
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  $color-grey: #717171;
+  $color-light-grey: #cacaca;
+  $color-black: #212121;
+
+  $grid-gap: 8px;
+  $grid-cell-size: 167px;
+  $grid-cell-size-small: 110px;
+  $grid-cell-size-medium: 122px;
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .CasinoSearch {
+    margin: 16px;
+  }
+
+  .Search {
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    &Icon{
+      position: absolute;
+      left: 5%;
+      z-index: 1;
+
+      svg {
+        height: 14px;
+        width: 13px;
+      }
+    }
+    &Container { 
+      width: 100%;
+      position: relative;
+    }
+
+    &Input {
+      border-radius: 4px;
+      border: 1px solid $color-light-grey;
+      color: $color-grey;
+      display: block;
+      font-size: 16px;
+      font-weight: 300;
+      padding: 14px 5px 14px 46px;
+      width:100%;
+    
+      &::placeholder {
+        color: $color-grey;
+        font-size: 16px;
+        font-weight: 300;
+      }
+
+      &:focus {
+       outline: 1px solid  #d9d7d7;
+      }
+
+      &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+          -webkit-appearance:none;
+        }
+    }
+
+    &ClearButton{
+      position: absolute;
+      top: 30%;
+      right: 15px;
+    }
+
+    &CancelButton {
+      color: $color-grey;
+      font-weight: 300;
+      margin-left: 8px;
+    }
+
+    &Message {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 24px 0;
+      color: $color-black;
+    }
+
+    &ResultsContainer {
+      display: grid;
+      gap: $grid-gap;
+      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size, 46%), 1fr));
+      grid-template-rows: repeat(auto-fill, $grid-cell-size);
+      grid-auto-rows: $grid-cell-size;
+      grid-auto-columns: $grid-cell-size;
+      grid-auto-flow: row dense;
+    }
+  }
+
+  .ResultsContainerError {
+    text-align: center;
+    width: 300px;
+    color: $color-grey;
+    font-weight: 300;
+    position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+  }
+
+  .NotVisible {
+    display: none;
+  }
+
+</style>