@everymatrix/casino-header-controller-nd 1.37.4

package/src/CasinoHeaderControllerNd.svelte

@@ -0,0 +1,1823 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { isMobile, getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  import '@everymatrix/casino-slider';
+  import '@everymatrix/casino-hamburger-menu';
+  import '@everymatrix/player-account-balance-modal';
+  import '@everymatrix/player-deposit';
+
+  import * as countryFlags from 'country-flag-icons/string/3x2';
+
+  // @ts-ignore
+  import everymatrixLogo from './images/everymatrix-logo-white.png';
+
+  export let session: string = '';
+  export let userid: string = '';
+  export let endpoint: string = '';
+  export let cmsendpoint: string = '';
+  export let cmsenv: string = 'stage';
+  export let lang: string = 'en';
+  export let languageslist: string = 'en, ro';
+  export let activecategory: string = '';
+  export let translationurl: string = '';
+  export let customlocaleidentifier: string = '';
+  export let gmversion: string = '';
+  export let countryflagheader: string = 'false';
+  export let displaybalanceoption: string = 'All';
+  export let countryflaghamburger: string = 'false';
+  export let hasdefaultamount: string = '';
+  export let playercurrency: string ='';
+
+  //short cashier
+  export let shortcashierenabled: string = '';
+  export let producttype: string = '';
+  export let successurl: string = '';
+  export let failurl: string = '';
+  export let cancelurl: string = '';
+  export let sportsurl: string = '';
+  export let casinourl: string = '';
+  export let contacturl: string = '';
+  export let homeurl: string = '';
+  export let depositurl: string = '';
+
+  export let actionevent: string = '';
+
+  export let userroles: string = '';
+  export let showsubgroups: string = 'false';
+  export let clientstyling: string = '';
+  export let clientstylingurl: string = '';
+
+  export let currencyseparator: string = '';
+  export let currencydecimal: string = '';
+  export let currencyprecision: string = '';
+
+  let activeIndex: number;
+  let customStylingContainer: HTMLElement;
+  let balanceContainer: HTMLElement;
+  let depositContainer: HTMLElement;
+  let backgroundContainer: HTMLElement;
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  const setTranslationUrl = (): void => {
+    fetch(translationurl)
+      .then((res: any): void => res.json())
+      .then((res: any): void => {
+        Object.keys(res).forEach((item:any): void => {
+          addNewMessages(item, res[item]);
+        });
+      }).catch((err: any): void => {
+        console.log(err);
+      });
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item: string): void => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  let mainMenuArray: Array<string> = [];
+  let secondaryMenuArray: Array<string> = [];
+  let selectedLanguage: string = '';
+  let hamburgerURL: URL;
+  let headerURL: URL;
+  let logoURL: URL;
+  let isLoading: boolean = true;
+  let logoFromCms: boolean = false;
+  let primaryMenuLoading: boolean = true;
+
+  let isOptionsListVisible: boolean = false;
+  let mobileView: boolean = false;
+  let userAgent: string = window.navigator.userAgent;
+  let isLoggedIn: boolean = false;
+  let playerID: string = '';
+  let sessionID: string = '';
+  let languagesArray: Array<string> = [];
+  let hamburgerMenuActive: boolean = false;
+  let logoPath: string = '';
+  let shortCashierActivated: boolean = false;
+  let isBalanceOpened: boolean = false;
+
+  const gtagCall = (eventName: string): void => {
+    // @ts-ignore
+    if (typeof gtag == 'function'){
+      // @ts-ignore
+      gtag('event', eventName, {
+        'context': 'HeaderController'
+      });
+    }
+  }
+
+  const menuAction = (type: string, data?: any): void => {
+    switch (type) {
+      case 'login':
+        window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
+
+        gtagCall('OpenLoginModal');
+        break;
+
+      case 'register':
+        window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
+
+        gtagCall('OpenRegisterModal');
+        break;
+
+      case 'lobby':
+        window.postMessage({ type: 'GoToHomepage' }, window.location.href);
+
+        gtagCall('GoToHomepage');
+        break;
+
+      case 'myaccount':
+        window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent) }, window.location.href);
+
+        gtagCall('GoToMyAccount');
+        break;
+
+      case 'deposit':
+        if (isShortCashierEnabled) {
+          shortCashierActivated = true;
+          window.postMessage({ type: 'DisableScroll' }, window.location.href);
+        } else {
+          window.postMessage({ type: 'GoToDeposit' }, window.location.href);
+        }
+
+        gtagCall('GoToDeposit');
+        break;
+
+      case 'language':
+        window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
+        break;
+
+      case 'page':
+        window.postMessage({ type: 'NavigateTo', item: data, path: data.path });
+        break;
+    }
+  }
+
+  const toggleMenu = (): void => {
+    hamburgerMenuActive = !hamburgerMenuActive;
+    window.postMessage({ type: 'OpenHamburgerMenuModal' }, window.location.href);
+  }
+
+  const messageHandler = (e: any): void => {
+    if (e.data) {
+      switch (e.data.type) {
+        case 'UserSessionID':
+          playerID = e.data.userid;
+          sessionID = e.data.session;
+          isLoggedIn = true;
+          break;
+
+        case 'CloseHamburgerMenu':
+          window.postMessage({ type: 'EnableScroll' }, window.location.href);
+          if (e.data.showhamburger) {
+            hamburgerMenuActive = false;
+          }
+          break;
+
+        case 'LogoutSuccessfull':
+          isLoggedIn = false;
+          break;
+
+        case 'LanguageChanged':
+          if (e.data.selectedLanguage.toLowerCase() != lang) {
+            primaryMenuLoading = true;
+          }
+          createCMSUrls();
+          getHeaderMenusData(headerURL);
+          break;
+
+        case 'OpenShortCashier':
+          menuAction('deposit');
+          break;
+
+        case 'CloseShortCashier':
+          closeShortCashier();
+          break;
+
+        case 'RequestHeaderHeight':
+          window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
+          break;
+
+        case 'BalanceModalStatus':
+          isBalanceOpened = e.data.status == 'open';
+          adaptDepositBackground(isBalanceOpened);
+          break;
+
+        case 'BalancedFetched':
+          setInitialStateForDepositBackground();
+          break;
+      }
+    }
+  }
+
+  const setInitialStateForDepositBackground = (): void => {
+    let width = depositContainer.getBoundingClientRect().width;
+    backgroundContainer.style.width = `${width}px`;
+    backgroundContainer.style.left = `${balanceContainer.getBoundingClientRect().width}px`;
+  }
+
+  const adaptDepositBackground = (isBalanceOpened): void => {
+    if (isBalanceOpened) {
+      let width = balanceContainer.getBoundingClientRect().width;
+      backgroundContainer.style.width = `${width}px`;
+      backgroundContainer.style.left = `0px`;
+    } else {
+      setInitialStateForDepositBackground();
+    }
+  }
+
+  const setSession = (): void => {
+    isLoggedIn = true;
+    sessionID = session;
+  }
+
+  const closeShortCashier = (event?: any): void => {
+    shortCashierActivated = false;
+    window.postMessage({ type: 'EnableScroll' }, window.location.href);
+    event?.stopPropagation();
+  }
+
+  const createCMSUrls = (): void => {
+    headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`);
+    hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
+    logoURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/op-options/style`);
+
+    let device = getDevice(userAgent);
+
+    headerURL.searchParams.append('env', cmsenv);
+    headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
+    headerURL.searchParams.append('userRoles', userroles);
+
+    if (device) {
+      if (device === 'PC'){
+        hamburgerURL.searchParams.append('device', 'dk');
+        headerURL.searchParams.append('device', 'dk');
+      } else if (device === 'iPad' || device === 'iPhone') {
+        hamburgerURL.searchParams.append('device', 'mtWeb');  // replace with ios when we will have a native ios up for this
+        headerURL.searchParams.append('device', 'mtWeb');  // replace with ios when we will have a native ios up for this
+      } else {
+        hamburgerURL.searchParams.append('device', 'mtWeb');
+        headerURL.searchParams.append('device', 'mtWeb');
+      }
+    }
+    hamburgerURL.searchParams.append('env', cmsenv);
+    hamburgerURL.searchParams.append('language', selectedLanguage.toLowerCase());
+    hamburgerURL.searchParams.append('userRoles', userroles);
+
+    getHeaderMenusData(headerURL);
+  }
+
+  const setActiveLanguage = (): void => {
+    setLocale(lang);
+  }
+
+  const initialLoad = (): void => {
+    languagesArray = languageslist.replace(/ /g,'').split(',');
+    languagesArray = languagesArray.map((language:string) => language.toUpperCase());
+
+    selectedLanguage = lang.toUpperCase();
+
+    createCMSUrls();
+    getLogo(logoURL);
+  }
+
+  const initializeMenu = (): void => {
+    const primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
+    const secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
+    activeIndex = primaryActiveIndex > secondaryActiveIndex ? primaryActiveIndex : secondaryActiveIndex;
+  }
+
+  const setActiveIndex = (activecategory: any, menuList: any): any => {
+    let result = menuList.find(item => {
+      if (activecategory.indexOf('/sport') > -1) {
+        return item.path.indexOf(activecategory) > -1;
+      } else {
+        if (item.path.includes(activecategory)) {
+          return true;
+        }
+      }
+    });
+
+    if (!result) {
+      result = menuList.find((item: any): boolean => {
+        return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
+      });
+    }
+
+    if (result) {
+      return result.id;
+    } else {
+      return -1;
+    }
+  }
+
+  const getHeaderMenusData = (url: any): Promise<any> => {
+    isLoading = true;
+
+    return new Promise((resolve, reject): void => {
+      fetch(url)
+        .then((res: any): void => res.json())
+        .then((data: any): void => {
+          mainMenuArray = data.desktop.primary;
+          secondaryMenuArray = data.desktop.secondary;
+          isLoading = false;
+          primaryMenuLoading = false;
+
+          resolve(data);
+        }, (err: any): void => {
+          isLoading = false;
+          console.error(err);
+          reject(err);
+        });
+    });
+  }
+
+  const getLogo = (url: URL): Promise<any> => {
+    logoFromCms = false;
+
+    return new Promise((resolve, reject): void => {
+      fetch(url)
+        .then((res: any): void => res.json())
+        .then((data: any): void => {
+          if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
+            logoPath = data.logoUrl;
+            logoFromCms = true;
+          } else {
+            logoFromCms = false;
+          }
+          resolve(data);
+        }, (err: any): void => {
+          logoFromCms = false;
+          console.error(err);
+          reject(err);
+        });
+    });
+  }
+
+  const navigationTrigger = (itemData: any): void => {
+    window.postMessage({ type: 'NavigateTo', itemId: itemData.id, item: itemData, path: itemData.path, externalLink: itemData.externalLink || false, target: itemData.attrs?.target || null }, window.location.href);
+  }
+
+  const selectLanguage = (operatorLanguage: string): void => {
+    selectedLanguage = operatorLanguage;
+    isOptionsListVisible = false;
+    menuAction('language');
+  }
+
+  const toggleLanguageDropdown = (): void => {
+    isOptionsListVisible = !isOptionsListVisible;
+  }
+
+  const determineFlag = (operatorLanguage?: string): string => {
+    let flag = operatorLanguage ? operatorLanguage.slice(-2) : selectedLanguage.slice(-2);
+
+    if (customlocaleidentifier) {
+      flag =
+        customlocaleidentifier.includes(flag.toLowerCase()) ?
+        customlocaleidentifier.slice(-2) :
+        flag;
+    }
+
+    return flag == 'EN' ? 'US' : flag.toUpperCase();
+  }
+
+  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): void => res.text())
+      .then((data: any): void => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+
+  onMount(async () => {
+    window.addEventListener('message', messageHandler, false);
+
+    mobileView = isMobile(userAgent);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: activecategory && !isLoading && initializeMenu();
+  $: session && setSession();
+  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() == 'true';
+  $: lang && setActiveLanguage();
+  $: cmsendpoint && lang && languageslist && userroles && initialLoad();
+  $: translationurl && setTranslationUrl();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+</script>
+
+<div class="HeaderContainer" bind:this={customStylingContainer}>
+  <div class="MainNav">
+      {#if mobileView}
+        <div class="HeaderMobileMainNav">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div on:click={toggleMenu} class="NavIcon {hamburgerMenuActive ? 'Open' : ''}">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+        </div>
+      {/if}
+    <div class="Logo">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
+        {#if logoFromCms}
+          <img src={logoPath} alt="Logo">
+        {:else}
+          <img src={everymatrixLogo} alt="Logo">
+        {/if}
+      </div>
+    </div>
+    <nav class="PrimaryMenu">
+      {#if !mobileView}
+        {#if primaryMenuLoading}
+          {#each new Array(6) as item}
+            <div class="Skeleton SkeletonText"></div>
+          {/each}
+        {:else}
+          {#each mainMenuArray as menuItem}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}" on:click={() => menuAction('page', menuItem)}>
+              <p>{menuItem.label}</p>
+              <div class="MenuHover"></div>
+            </div>
+          {/each}
+        {/if}
+      {/if}
+    </nav>
+    {#if isLoggedIn}
+      <div class="BalanceDepositWrapper">
+        <div class="Balance  {isBalanceOpened ? 'Open' : ''}" bind:this={balanceContainer}>
+          <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
+        </div>
+        <div class="Deposit {isBalanceOpened ? 'Open' : ''}" bind:this={depositContainer}>
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div class="DepositButton" on:click={() => menuAction('deposit')}>
+            <p>{$_('deposit')}</p>
+          </div>
+          {#if shortCashierActivated}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
+            <div class="ShortCashierContainerWrapperMobile">
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <div class="ShortCashierContainerMobile">
+                <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
+                  <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                    <line x1="2" y1="2" x2="18" y2="18" stroke-width="2"/>
+                    <line x1="18" y1="2" x2="2" y2="18" stroke-width="2"/>
+                  </svg>
+                </div>
+                {#if gmversion === 'gmcore'}
+                  <player-deposit
+                    {endpoint}
+                    {session}
+                    playerid={userid}
+                    {lang}
+                    {hasdefaultamount}
+                    {playercurrency}
+                    {shortcashierenabled}
+                    {clientstyling}
+                    {clientstylingurl}
+                  ></player-deposit>
+                {:else}
+                  <user-deposit-withdrawal
+                    {endpoint}
+                    type="deposit"
+                    channel="Mobile"
+                    language={lang}
+                    is-short-cashier={shortcashierenabled}
+                    product-type={producttype}
+                    user-id={userid}
+                    {session}
+                    success-url={'https://' + window.location.hostname + '/' + lang + successurl}
+                    cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
+                    fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
+                    sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
+                    casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
+                    contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
+                    home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
+                    deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
+                  ></user-deposit-withdrawal>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        </div>
+        <div class="Background {isBalanceOpened ? 'Open' : ''}" bind:this={backgroundContainer}></div>
+      </div>
+      <div class="Profile">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div class="ProfileWrapper" on:click={() => menuAction('myaccount')}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16.429">
+            <g transform="translate(-8 -4)">
+              <path class="a"
+                    d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
+                    transform="translate(0 0)"/>
+            </g>
+          </svg>
+        </div>
+      </div>
+    {:else}
+      <div class="AuthButtons">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div class="Item ItemLogin" on:click={() => menuAction('login')}>
+          <p>{$_('login')}</p>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
+        </div>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div class="Item ItemRegister" on:click={() => menuAction('register')}>
+          <p>{$_('register')}</p>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
+        </div>
+      </div>
+    {/if}
+    <div class="Slot1">
+      <slot name="slot1"></slot>
+    </div>
+    <div class="Slot2">
+      <slot name="slot2"></slot>
+    </div>
+    <div class="Slot3">
+      <slot name="slot3"></slot>
+    </div>
+    {#if !mobileView}
+      <div class="LanguageSelector">
+        {#if (languagesArray.length > 1) }
+          <div class="LanguageDropdown">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
+              {#if countryflagheader == 'true' }
+                <span class="LanguageName">{@html countryFlags[determineFlag()]}</span>
+              {:else}
+                <span class="LanguageName">{determineFlag()}</span>
+              {/if}
+              <span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
+                  <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
+                </svg>
+              </span>
+            </div>
+          </div>
+          <div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
+            {#each languagesArray as operatorLanguage}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
+                {#if countryflagheader == 'true' }
+                  <span class="FlagIcon">
+                    {@html countryFlags[determineFlag(operatorLanguage)]}
+                  </span>
+                {/if}
+                <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+  <div class="Separator">
+
+  </div>
+  {#if !mobileView}
+    <div class="SecondaryNav">
+      <div class="LeftSpace">
+        <span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
+      </div>
+      <div class="SecondaryMenuContent">
+        {#if primaryMenuLoading}
+          {#each new Array(2) as item}
+            <div class="Skeleton SkeletonText"></div>
+          {/each}
+        {:else}
+          {#each secondaryMenuArray as secondaryItem}
+            <span class="ItemSecondary {secondaryItem.id == activeIndex ? 'Active' : ''}">
+              <p on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</p>
+            </span>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+<!--
+{#if isLoggedIn}
+  {#if mobileView}
+    <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
+      <div class="HeaderContainer">
+        <div class="HeaderMobileMainNav">
+          {#if !hamburgerMenuActive}
+            <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
+                 viewBox="0 0 22 16">
+              <defs>
+                <style>.a {
+                  fill: var(--emw-color-white, #FFFFFF);
+                }
+                </style>
+              </defs>
+              <g transform="translate(-14 -13)">
+                <rect class="a" width="18" height="2" transform="translate(14 13)"/>
+                <rect class="a" width="22" height="2" transform="translate(14 20)"/>
+                <rect class="a" width="22" height="2" transform="translate(14 27)"/>
+              </g>
+            </svg>
+          {/if}
+        </div>
+
+        <div class="HeaderTopActions" part="HeaderTopActions">
+          <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
+            <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
+            <div>
+              <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
+              {#if shortCashierActivated}
+                <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
+                <div class="ShortCashierContainerWrapperMobile">
+                  <div class="ShortCashierContainerMobile">
+                    <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
+                      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                        <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
+                        <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
+                      </svg>
+                    </div>
+                    {#if gmversion === 'gmcore'}
+                      <player-deposit
+                        {endpoint}
+                        {session}
+                        playerid={userid}
+                        {lang}
+                        {hasdefaultamount}
+                        {playercurrency}
+                        {shortcashierenabled}
+                        {clientstyling}
+                        {clientstylingurl}
+                      ></player-deposit>
+                    {:else}
+                      <user-deposit-withdrawal
+                        {endpoint}
+                        type="deposit"
+                        channel="Mobile"
+                        language={lang}
+                        is-short-cashier={shortcashierenabled}
+                        product-type={producttype}
+                        user-id={userid}
+                        {session}
+                        success-url={'https://' + window.location.hostname + '/' + lang + successurl}
+                        cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
+                        fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
+                        sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
+                        casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
+                        contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
+                        home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
+                        deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
+                      ></user-deposit-withdrawal>
+                    {/if}
+                  </div>
+                </div>
+              {/if}
+            </div>
+            <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
+                <defs>
+                  <style>.a {
+                    fill: var(--emw-color-white, #FFFFFF);
+                  }
+                  </style>
+                </defs>
+                <g transform="translate(-8 -4)">
+                  <path class="a"
+                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
+                        transform="translate(0 0)"/>
+                </g>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  {:else}
+    <header class="HeaderWrapper" bind:this={customStylingContainer}>
+      <div class="HeaderContainer">
+
+        <nav class="HeaderMainNav">
+          {#if !isLoading}
+            <casino-slider
+             class="HeaderItemsMenu"
+             part="HeaderItemsMenu"
+             {identity}
+             use:sendSliderData
+             isprimarymenu=true
+             {actionevent}
+             activeindex={primaryActiveIndex}
+             {endpoint}
+             {lang}
+             location="headerMain"
+             {showsubgroups}
+             {clientstyling}
+             {clientstylingurl}
+             />
+          {/if}
+        </nav>
+        <div class="HeaderTopActions">
+          <div class="HeaderItemsMenu PrimaryMenu">
+            <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision}/>
+            <div>
+              <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
+              {#if shortCashierActivated}
+                <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
+                <div class="ShortCashierContainerWrapper">
+                  <div class="ShortCashierContainer">
+                    <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
+                      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                        <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
+                        <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
+                      </svg>
+                    </div>
+                    {#if gmversion === 'gmcore'}
+                      <player-deposit
+                        {endpoint}
+                        {session}
+                        playerid={userid}
+                        {lang}
+                        {hasdefaultamount}
+                        {playercurrency}
+                        {shortcashierenabled}
+                        {clientstyling}
+                        {clientstylingurl}
+                      ></player-deposit>
+                    {:else}
+                      <user-deposit-withdrawal
+                        {endpoint}
+                        type="deposit"
+                        channel="Desktop"
+                        language={lang}
+                        is-short-cashier={shortcashierenabled}
+                        product-type={producttype}
+                        user-id={userid}
+                        {session}
+                        success-url={'https://' + window.location.hostname + '/' + lang + successurl}
+                        cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
+                        fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
+                        sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
+                        casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
+                        contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
+                        home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
+                        deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
+                      ></user-deposit-withdrawal>
+                    {/if}
+                  </div>
+                </div>
+              {/if}
+            </div>
+            <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
+                <defs>
+                  <style>.a {
+                    fill: var(--emw-color-white, #FFFFFF);
+                  }
+                  </style>
+                </defs>
+                <g transform="translate(-8 -4)">
+                  <path class="a"
+                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
+                        transform="translate(0 0)"/>
+                </g>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav class="HeaderSecondaryNav">
+        <ul class="HeaderItemsMenuSecondary">
+          {#each secondaryMenuArray as secondaryItem}
+            <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
+              <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    </header>
+  {/if}
+{:else}
+  {#if mobileView}
+    <header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
+      <div class="HeaderContainer">
+        <div class="HeaderMobileMainNav">
+          <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
+               viewBox="0 0 22 16">
+            <defs>
+              <style>.a {
+                fill: var(--emw-color-white, #FFFFFF);
+              }
+              </style>
+            </defs>
+            <g transform="translate(-14 -13)">
+              <rect class="a" width="18" height="2" transform="translate(14 13)"/>
+              <rect class="a" width="22" height="2" transform="translate(14 20)"/>
+              <rect class="a" width="22" height="2" transform="translate(14 27)"/>
+            </g>
+          </svg>
+        </div>
+        <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
+        </div>
+
+        <div class="HeaderTopActions">
+          <div class="HeaderItemsMenu">
+            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('login')}</div>
+            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('register')}</div>
+          </div>
+        </div>
+      </div>
+    </header>
+  {:else}
+    <header class="HeaderWrapper" bind:this={customStylingContainer}>
+      <div class="HeaderContainer">
+        <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
+        </div>
+
+        <nav class="HeaderMainNav">
+          {#if !isLoading}
+            <casino-slider
+             class="HeaderItemsMenu"
+             part="HeaderItemsMenu"
+             {identity}
+             use:sendSliderData
+             isprimarymenu=true
+             {actionevent}
+             activeindex={primaryActiveIndex}
+             location="headerMain"
+             {endpoint}
+             {lang}
+             {clientstyling}
+             {clientstylingurl}
+             />
+          {/if}
+        </nav>
+        <div class="HeaderTopActions">
+          <div class="HeaderItemsMenu">
+            <div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
+            <div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
+            {#if (languagesArray.length > 1) }
+              {#if countryflagheader !== 'true'}
+                <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
+                  {#each languagesArray as operatorLanguage}
+                    <option value={operatorLanguage}>{operatorLanguage.slice(-2)}</option>
+                  {/each}
+                </select>
+              {:else}
+                <div class="LanguageDropdown">
+                  <div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
+                    <span class="FlagIcon">
+                      <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(selectedLanguage.slice(-2))}.svg`}/>
+                    </span>
+                    <span class="LanguageName">{selectedLanguage.slice(-2)}</span>
+                    <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
+                        <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
+                      </svg>
+                    </span>
+                  </div>
+                  {#if isOptionsListVisible}
+                    <div class="OptionList">
+                      {#each languagesArray as operatorLanguage}
+                        <div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
+                          <span class="FlagIcon">
+                            <img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage.slice(-2))}.svg`}/>
+                          </span>
+                          <span class="LanguageName">{operatorLanguage.slice(-2)}</span>
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            {/if}
+          </div>
+        </div>
+      </div>
+      <nav class="HeaderSecondaryNav">
+        <ul class="HeaderItemsMenuSecondary">
+          {#each secondaryMenuArray as secondaryItem}
+            <li class="ItemSecondary {secondaryActiveIndex?.toString().indexOf('$') > -1 ? (secondaryActiveIndex?.split("$").pop() == secondaryItem.id.split("$").pop() ? 'active': '') : (secondaryActiveIndex == secondaryItem.id ? 'active': '')}" part="ItemSecondary">
+              <button on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</button>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    </header>
+  {/if}
+{/if}
+  -->
+
+<casino-hamburger-menu {cmsendpoint} {cmsenv} {userroles} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
+
+<style lang="scss">
+  *,
+  *::before,
+  *::after {
+    font-family: inherit
+  }
+
+  :host {
+    font-family: inherit;
+  }
+
+  // ------> new stuff
+  .NavIcon {
+    width: 30px;
+    height: 28px;
+    position: relative;
+    margin: 50px auto;
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transition: .5s ease-in-out;
+    -moz-transition: .5s ease-in-out;
+    -o-transition: .5s ease-in-out;
+    transition: .5s ease-in-out;
+    cursor: pointer;
+
+    span {
+      display: block;
+      position: absolute;
+      height: 3px;
+      width: 100%;
+      background: #ffffff;
+      border-radius: 9px;
+      opacity: 1;
+      left: 0;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+      -webkit-transition: .25s ease-in-out;
+      -moz-transition: .25s ease-in-out;
+      -o-transition: .25s ease-in-out;
+      transition: .25s ease-in-out;
+    }
+
+    span:nth-child(1) {
+      top: 0px;
+      width: 80%;
+    }
+
+    span:nth-child(2) {
+      top: 9px;
+    }
+
+    span:nth-child(3) {
+      top: 18px;
+    }
+
+    &.Open span:nth-child(1) {
+      top: 9px;
+      width: 100%;
+      -webkit-transform: rotate(135deg);
+      -moz-transform: rotate(135deg);
+      -o-transform: rotate(135deg);
+      transform: rotate(135deg);
+    }
+
+    &.Open span:nth-child(2) {
+      opacity: 0;
+      left: -60px;
+    }
+
+    &.Open span:nth-child(3) {
+      top: 9px;
+      -webkit-transform: rotate(-135deg);
+      -moz-transform: rotate(-135deg);
+      -o-transform: rotate(-135deg);
+      transform: rotate(-135deg);
+    }
+  }
+
+  .Skeleton {
+    animation: skeleton-loading .6s linear infinite alternate;
+  }
+
+  @keyframes skeleton-loading {
+    0% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .2) 0%, rgba(0, 61, 93, .2) 100%);
+    }
+    12% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .225) 0%, rgba(0, 61, 93, .225) 100%);
+    }
+    25% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .25) 0%, rgba(0, 61, 93, .25) 100%);
+    }
+    33% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .275) 0%, rgba(0, 61, 93, .275) 100%);
+    }
+    50% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .3) 0%, rgba(0, 61, 93, .3) 100%);
+    }
+    63% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .325) 0%, rgba(0, 61, 93, .325) 100%);
+    }
+    75% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .35) 0%, rgba(0, 61, 93, .35) 100%);
+    }
+    88% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .375) 0%, rgba(0, 61, 93, .375) 100%);
+    }
+    100% {
+      background: linear-gradient(90deg, rgba(35, 178, 78, .4) 0%, rgba(0, 61, 93, .4) 100%);
+    }
+  }
+
+  .SkeletonText {
+    opacity: 0.5;
+    margin: 0 15px;
+    width: 125px;
+    height: 15px;
+    border-radius: 15px;
+  }
+
+  .HeaderContainer {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    user-select: none;
+
+    .MainNav {
+      width: 99%;
+      height: 84px;
+      display: flex;
+      gap: 5px;
+      flex-direction: row;
+      align-items: center;
+      margin: 0 15px;
+
+      .HeaderMobileMainNav {
+        display: flex;
+        margin-left: 5px;
+      }
+
+      .Logo {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 10%;
+        min-width: 75px;
+        transition: all .2s;
+
+        .HeaderBranding {
+          width: 140px;
+          cursor: pointer;
+          img {
+            width: 100%;
+          }
+          @media only screen and (max-width: 360px) {
+            margin-right: 0;
+          }
+        }
+
+        &:active {
+          opacity: .9;
+          transform: scale(1.02);
+        }
+      }
+
+      .BalanceDepositWrapper {
+        height: 34px;
+        background-color: white;
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        border-radius: 30px;
+
+        .Background {
+          height: 34px;
+          position: absolute;
+          background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
+                      linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
+          border-radius: 30px;
+          z-index: 3;
+          transition: all 0.3s ease;
+        }
+
+        .Deposit {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          justify-content: center;
+          z-index: 4;
+
+          .DepositButton {
+            font-size: 14px;
+            text-align: center;
+            cursor: pointer;
+            padding: 0 10px;
+            transition: all .5s linear;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            p {
+              text-transform: uppercase;
+              color: white;
+              transition: all .3s ease;
+
+              &:hover {
+                text-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
+              }
+
+              &:active {
+                color: black;
+              }
+            }
+          }
+
+          &.Open {
+            .DepositButton {
+              p {
+                transition: all .5s linear;
+                color: black;
+                opacity: .5;
+              }
+            }
+
+          }
+        }
+
+        .Balance {
+          display: flex;
+          z-index: 4;
+          height: 100%;
+          padding-left: 10px;
+          align-items: center;
+
+          &.Open {
+            color: white;
+          }
+        }
+      }
+
+      .Profile {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        cursor: pointer;
+
+        .ProfileWrapper {
+          width: 30px;
+          height: 30px;
+          background-color: orange;
+          border-radius: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          transition: all .3s ease;
+
+          svg {
+            width: 15px;
+            height: 16px;
+            fill: var(--emw-color-white, #FFFFFF)
+
+          }
+          &:hover {
+            box-shadow: 0px 0px 4px white;
+          }
+
+          &:active {
+            svg {
+              fill: var(--emw-color-black, #000000)
+            }
+          }
+        }
+      }
+
+      .PrimaryMenu {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+
+        .ItemMenu {
+          color: white;
+          margin: 0 20px;
+          text-transform: uppercase;
+          height: 84px;
+          transition: all .5s;
+          cursor: pointer;
+
+          &:after {
+            content: "";
+            display: block;
+            height: 5px;
+            width: 100%;
+            cursor: pointer;
+            background-color: pink;
+            position: relative;
+          }
+
+          .MenuHover {
+            width: 0px;
+            transition: transform 0.3s ease-in-out;
+            transform-origin: center;
+            transform: scaleX(0);
+          }
+
+          p {
+            height: 33px;
+            margin-top: 35px;
+          }
+
+          &:hover, &.Active {
+            color: #22B04F;
+
+            .MenuHover {
+              transform: scaleX(1);
+              opacity: 1;
+              background-color: rgba(255, 255, 255, 0.5);
+              width: 100%;
+              position: relative;
+              height: 5px;
+              z-index: 4;
+            }
+          }
+
+          &:active {
+            color: rgba(255,255,255,1);
+          }
+        }
+      }
+
+      .AuthButtons {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .Item {
+          gap: 5px;
+          padding: 0 25px;
+          display: flex;
+          align-items: center;
+          color: white;
+
+          &.ItemLogin {
+            font-size: 14px;
+            height: 36px;
+            text-align: center;
+            margin-right: 10px;
+            position: relative;
+            cursor: pointer;
+            background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
+                        linear-gradient(180deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
+            border-radius: 30px;
+            border: 2px solid transparent;
+            transition: all .3s linear;
+
+            &:hover {
+              color: white;
+              background: linear-gradient(180deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
+                          linear-gradient(0deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
+              border: 2px solid white;
+            }
+
+            &:active {
+              background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
+                          linear-gradient(180deg, rgba(231,145,28,.4) 0%, rgba(224,169,76,.4) 100%) border-box;
+            }
+          }
+
+          &.ItemRegister {
+            background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
+                        linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
+            border-radius: 30px;
+            border: 2px solid transparent;
+            font-size: 14px;
+            height: 36px;
+            text-align: center;
+            line-height: 44px;
+            cursor: pointer;
+            transition: all .3s linear;
+
+            &:hover {
+              background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
+                          linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
+              border: 2px solid white;
+            }
+
+            &:active {
+              background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
+                          linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
+            }
+          }
+
+          svg {
+            width: 15px;
+            height: 15px;
+            fill: white;
+            padding-bottom: 2px;
+          }
+        }
+      }
+
+      .Slot1 {}
+      .Slot2 {}
+      .Slot3 {}
+      .LanguageSelector {
+        align-content: center;
+        height: 100%;
+        cursor: pointer;
+        transform: all .3s linear;
+        color: white;
+
+        .SelectedOption {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .TriangleActive, .TriangleInactive {
+            display: block;
+            margin: 0 0 0 10px;
+            transition: all .2s;
+            &:hover {
+              transform: scale(1.2);
+            }
+
+            svg{
+              margin: 2px 0px;
+            }
+          }
+
+          .TriangleActive {
+            transform: scale(1.1) rotateX(180deg);
+            margin-bottom: 5px;
+
+            &:hover {
+              transform: scale(1.1) rotateX(180deg);
+            }
+          }
+        }
+        .LanguageName {
+          .ItemLanguage {
+            display: flex;
+            justify-content: space-around;
+          }
+
+          svg {
+            width: 30px;
+            border-radius: 20px;
+          }
+        }
+
+        .OptionList {
+          border: 1px solid var(--emw-header-color-primary);
+          padding: 10px;
+          position: absolute;
+          cursor: pointer;
+          display: flex;
+          gap: 4px;
+          flex-direction: column;
+          border-radius: 10px;
+          opacity: 0;
+          transition: all 0.4s;
+          z-index: 6;
+          right: 5px;
+          color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+          background: linear-gradient(90deg, rgba(42,79,55,1) 0%, rgba(0,61,92,1) 100%);
+
+          &.Active {
+            opacity: 1;
+          }
+
+          .FlagIcon {
+            width: 16px;
+
+            svg {
+              border-radius: 5px;
+            }
+          }
+
+          .LanguageOption {
+            display: flex;
+            align-items: center;
+            transform: scale(1.1);
+            gap: 3px;
+            padding: 7px;
+
+            &:hover {
+              transition: all 0.2s;
+              color: var(--emw-color-primary);
+              background: var(--emw-color-primary) transparent;
+              box-shadow: inset 0px 0px 0px 2px var(--emw-color-primary);
+              border-radius: 20px;
+              box-sizing: border-box;
+            }
+          }
+        }
+      }
+    }
+
+    .Separator {
+      width: 100%;
+      height: 5px;
+      background: rgb(0,0,0);
+      background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(35,172,77,1) 50%, rgba(0,0,0,1) 100%);
+      z-index: 3;
+    }
+
+    .SecondaryNav {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      background: linear-gradient(90deg, rgba(35,172,77,1) 0%, rgba(18,62,33,1) 100%);
+      z-index: 3;
+
+      .LeftSpace {
+        width: 10%;
+      }
+
+      .SecondaryMenuContent {
+        text-transform: uppercase;
+        margin: 0 20px;
+        color: white;
+        transition: all .5s;
+        display: flex;
+        cursor: pointer;
+        user-select: none;
+
+        .Active {
+          transition: all .5s;
+          color: black;
+
+          &:hover {
+            opacity: .5;
+            color: white;
+          }
+        }
+
+        &:hover {
+          color: black;
+        }
+
+        &:active {
+          color: white;
+        }
+      }
+    }
+  }
+
+  // ------> old stuff
+
+  @keyframes ModalBounce {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    50% {
+      transform: translateY(-6px);
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+
+  input,
+  textarea,
+  button {font-family: inherit}
+
+
+  .HeaderSlider {
+    width: 100%;
+    height: 400px;
+  }
+
+
+.ClosePopUpButtonShortCashier{
+  margin-left: auto;
+  cursor: pointer;
+  svg {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+
+.ShortCashierWindow{
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 16;
+}
+
+.ShortCashierContainerWrapper{
+  position: relative;
+  animation: ModalBounce .5s forwards;
+  z-index: 17;
+  right: 60%;
+}
+.ShortCashierContainer{
+  background-color: var(--emw-color-white, #FFFFFF);
+  position: absolute;
+  width: 360px;
+  top: 16px;
+  transform: translateX(-60%);
+  box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+  border-radius: 5px;
+  z-index: 17;
+  box-shadow: 0px 5px 20px 0px #191919;
+  &:before {
+      content: "";
+    background: var(--emw-color-white, #FFFFFF);
+    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+    position: absolute;
+    top: -8px;
+    left: 84%;
+    width: 25px;
+    height: 10px;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+}
+
+.ShortCashierContainerWrapperMobile{
+  position: relative;
+  animation: ModalBounce .5s forwards;
+  right: 110%;
+  z-index: 17;
+}
+.ShortCashierContainerMobile {
+  background-color: var(--emw-color-white, #FFFFFF);
+  position: absolute;
+  width: 80vw;
+  top: 14px;
+  left: 50%;
+  transform: translateX(-60%);
+  box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+  border-radius: 5px;
+  z-index: 17;
+  box-shadow: 0px 5px 20px 0px #191919;
+  &:before {
+    content: "";
+    background: var(--emw-color-white, #FFFFFF);
+    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+    position: absolute;
+    top: -8px;
+    left: 84%;
+    width: 25px;
+    height: 10px;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+}
+
+
+.FlagIcon img {
+  width: 20px;
+  height: 14px;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+
+
+  .HeaderWrapper {
+    background: var(--emw-header-color-menu-bg, var(--emw-color-background-secondary, #050518));
+  }
+
+
+
+  .HeaderMainNav {
+    text-align: left;
+  }
+
+  .HeaderTopActions {
+    text-align: right;
+    margin-left: auto;
+  }
+
+  .HeaderSecondaryNav {
+    flex-direction: row;
+    width: 100%;
+    background: var(--emw-header-color-secondary-menu-bg, var(--emw-color-background-secondary, #050518));
+    border-top: 1px solid var(--emw-color-gray-300, #58586B);
+  }
+
+  .HeaderItemsMenu {
+    gap: 8px;
+    display: flex;
+    align-content: flex-start;
+    list-style: none;
+    text-transform: uppercase;
+    color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+    font-size: 16px;
+    align-items: center;
+
+    .Item:hover {
+      .HeaderSecondaryNav {
+        display: block;
+      }
+    }
+
+    .Item {
+      gap: 2px;
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
+    }
+
+    &.PrimaryMenu {
+      gap: 10px;
+    }
+  }
+
+  /*.Item a {
+    color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+    text-decoration: none;
+    border-top: 1px solid transparent;
+  }
+
+  .Item a:hover {
+    color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+    border-top: 1px solid var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+    padding-top: 5px;
+  }*/
+
+  .ItemDeposit {
+    background: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+  }
+
+  .ItemLanguage {
+    height: 44px;
+    width: 74px;
+    text-align: center;
+    line-height: 44px;
+    background: transparent;
+    color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+    border: none;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    option {
+      color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+    }
+  }
+
+  .ItemLanguage.NoFlag{
+    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emw-header-color-menu-bg, var(--emw-color-background-secondary, #050518));
+    background-position: calc(100% - 0.75rem) center;
+    width: 90px;
+    margin-right: 6px;
+  }
+
+  .ItemBalance {
+    background: transparent;
+    color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+    border: 0;
+  }
+
+  .ItemAccount {
+    cursor: pointer;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .HeaderItemsMenuSecondary {
+    display: flex;
+    flex-direction: row;
+    align-content: flex-start;
+    align-items: center;
+    height: 60px;
+    list-style: none;
+    text-transform: uppercase;
+    color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+    font-size: 14px;
+    max-width: 1280px;
+    margin: 0 auto;
+    overflow-y: hidden;
+    overflow-x: auto;
+    padding: 0;
+  }
+
+  .HeaderItemsMenuSecondary .ItemSecondary {
+    width: auto;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 0 15px;
+    font-weight: 600;
+    transition-duration: 0.15s;
+
+    button {
+      color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+      text-decoration: none;
+      border: none;
+      background: none;
+      font-size: 14px;
+      font-weight: 600;
+      text-transform: uppercase;
+      cursor: pointer;
+      &:hover {
+        color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+      }
+
+      &:focus {
+        color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+      }
+
+      &:visited {
+        color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+      }
+
+      &:focus-visible {
+        color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
+        outline: none;
+      }
+    }
+    &.active {
+      background: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+    }
+  }
+
+  .HeaderSliderMobile {
+    background-position: bottom;
+  }
+
+  .HeaderMobileWrapper {
+    .HeaderContainer {
+      height: 55px;
+      padding: 0 15px;
+      gap: 10px;
+      @media only screen and (max-width: 360px) {
+        padding: 0 5px;
+      }
+    }
+
+    .HeaderItemsMenu {
+      .Item {
+        padding: 0 10px;
+        display: block;
+        width: unset;
+      }
+
+      .ItemBalance {
+        font-size: 12px;
+      }
+
+      .ItemAccount {
+        padding: 0;
+      }
+    }
+
+    .ItemRegister, .ItemDeposit, .ItemLogin {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+    }
+
+    .ItemLogin {
+      margin-right: 10px;
+    }
+  }
+</style>