@everymatrix/casino-footer-v2 0.0.190 → 0.0.347

package/src/CasinoFooterV2.svelte

@@ -1,282 +1,656 @@
 <svelte:options tag={null} />
-<script lang="typescript">
-  import '@everymatrix/casino-footer-section-v2';
 
-  export let endpoint:String = '';
-  export let clientstyling:String = '';
-  export let target:String = '';
+<script lang="ts">
+  import '@everymatrix/casino-footer-section';
+  import '@everymatrix/panic-button';
 
-  let gameVendorsLinksTitle:String = '';
+  import moment from 'moment';
+  import { checkSession } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { CasinoFooterTranslations } from './translations.js'
+
+  export let endpoint:string = '';
+  export let lang:string = 'en';
+  export let env:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let target:string = '';
+
+  // Clock exposed attributes - If the clock is enabled, all attributes should be given a value, otherwise they can be ignored safely
+  export let clockenabled:string = ''; // "true" to enable, anything to disable
+  export let clocksecondsenabled:string = ''; // "true" to display seconds in our default format and to refresh the clock every 1000ms
+  export let clockcustomformat:string = ''; // "false" for defaulting to our format
+  export let clocktext:string = 'Time'; // string preceding clock
+
+  export let languageselectorenabled = 'true';
+  export let languageslist:string = 'en, ro';
+  export let languagedisplaytype = 'name';
+  export let session:string = '';
+  export let userid:string = '';
+  export let userendpoint:string = '';
+  export let panicbuttonenabled:string = 'true';
+  export let sessiontimerenabled = 'true'; // 'true' to enable, anything to disable
+    
+  let gameVendorsLinksTitle:string = '';
   let gameVendorsRepeater:Array<Object> = [];
-  let paymentLinksTitle:String = '';
+  let paymentLinksTitle:string = '';
   let paymentMethodsRepeater:Array<Object> = [];
-  let sponsorsLinksTitle:String = '';
+  let sponsorsLinksTitle:string = '';
   let sponsorsRepeater:Array<Object> = [];
-  let helpLinksTitle:String = '';
+  let helpLinksTitle:string = '';
   let helpLinksRepeater:Array<Object> = [];
-  let licensesLinksTitle:String = '';
+  let licensesLinksTitle:string = '';
   let licensesRepeater:Array<Object> = [];
-  let socialLinksTitle:String = '';
+  let socialLinksTitle:string = '';
   let socialLinksRepeater:Array<Object> = [];
-  let copyright:String = '';
-  let licenseDesc:String = '';
-  let licenseContainer:HTMLElement;
-  let copyrightContainer:HTMLElement;
-  let footerWidget:HTMLElement;
-  let hasErrors:Boolean = false;
+  let copyright:string = '';
+  let licenseDesc:string = '';
+  let hasErrors:boolean = false;
   let isLoading:boolean = false;
   let receivedFooterData:any;
   let customStyling:string = '';
+  let headScript:boolean = false;
+  let licenseScriptSrc:string = '';
+  let licenseScript:string = '';
+  let isLoggedIn:boolean = false;
+  let sessionID:string = '';
+  let playerID:string = '';
+  let selectedLanguage:string = 'hr';
+  let languages:Array<object> = [];
+
+  let time:string;
+  let refreshRate: number;
+
+  let languagesArray:Array<string> = [];
+  let languageDrawer: HTMLElement;
+  let languageDisplayName:string = '';
+  let currentLanguageFlag:string = '';
+  let languagePackLoaded:boolean = false;
+
+  let timeString:string = '';
+
+  let customStylingContainer:HTMLElement;
+
+  Object.keys(CasinoFooterTranslations).forEach((item:any) => {
+    addNewMessages(item, CasinoFooterTranslations[item]);
+  });
+  
+  // needed for session timer
+  const setSession = ():void => {
+    checkSession(userendpoint, session).then((res:any) => {
+      sessionID = res.Guid;
+      playerID = res.UserID;
+      isLoggedIn = true;
+    }, (err:any) => {
+      isLoggedIn = false;
+      console.error('Error while checking the session - ', err)
+    });
+  }
+
+  const setSessionTimer = ():void => {
+    // using Date instead of moment because they recommend in their docs to stop using it for new projects
+      const sessionData = JSON.parse(localStorage.session);
+      const loginTime = new Date(sessionData.Login);
+      const timezoneOffsetHours = new Date().getTimezoneOffset() / 60;
+      let currentTime = new Date();
+      let milisecondDifference = currentTime.getTime() - loginTime.getTime();
+
+      let hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
+      let minutes = Math.floor(milisecondDifference % 3600000 / 60000);
+      let seconds = Math.floor(milisecondDifference % 60000 / 1000);
+
+      setInterval(() => {
+        hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
+        minutes = Math.floor(milisecondDifference % 3600000 / 60000);
+        seconds = Math.floor(milisecondDifference % 60000 / 1000);
+
+        timeString = `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${seconds > 9 ? seconds : '0' + seconds}`;
+
+        milisecondDifference += 1000;
+      },1000);
+  }
+
+  const refreshClock = ():void => {
+    setInterval(() => {
+      clockDisplay();
+    }, refreshRate); 
+  }
+  
+  const clockDisplay = ():void => {
+    const format = clockcustomformat != 'false' ? clockcustomformat : `hh:mm${clocksecondsenabled === "true" ? ':ss' : ''} (UTC Z)`;
+    time = moment().format(format);
+  }
+
+  const getCmsData = ():void => {
+    let url:URL = new URL(`${endpoint}/${lang}/footer-raw-data?env=${env}`);
 
-  const getData = () => {
     isLoading = true;
 
-    fetch(endpoint)
-            .then((res:any) => res.json())
-            .then((data:any) => {
-              isLoading = false;
+    fetch(url.href)
+      .then((res:any) => res.json())
+      .then((data:any) => {
+        isLoading = false;
+        receivedFooterData = data;
+        let licenseHeadScriptSrc,
+            licenseScriptBody,
+            licenseEvent;
+        ({ 
+          gameVendorsLinksTitle, 
+          gameVendorsRepeater, 
+          paymentLinksTitle, 
+          paymentMethodsRepeater, 
+          sponsorsLinksTitle, 
+          sponsorsRepeater, 
+          helpLinksTitle, 
+          helpLinksRepeater, 
+          licensesLinksTitle, 
+          licensesRepeater, 
+          socialLinksTitle, 
+          socialLinksRepeater, 
+          copyright, 
+          licenseDesc,
+          licenseHeadScriptSrc,
+          licenseScriptBody,
+          licenseEvent,
+          language : languages
+        } = receivedFooterData);
 
-              receivedFooterData = data;
+        if (languages) { 
+          languagePackLoaded = true;
+          updateLanguageDisplayName();
+        }
+      
+        if (licenseHeadScriptSrc?.length > 0) {
+          headScript = true;
+          licenseScriptSrc = licenseHeadScriptSrc;
+        }
+        
+        if (licenseScriptBody?.length > 0) {
+          licenseScript = licenseScriptBody;
+        }
 
-              ({gameVendorsLinksTitle, gameVendorsRepeater, paymentLinksTitle, paymentMethodsRepeater, sponsorsLinksTitle, sponsorsRepeater, helpLinksTitle, helpLinksRepeater, licensesLinksTitle, licensesRepeater, socialLinksTitle, socialLinksRepeater, copyright, licenseDesc} = receivedFooterData);
+        window.postMessage({ type: licenseEvent }, window.location.href);
 
-              window.postMessage({ type: 'FooterData', gameVendorsRepeater, paymentMethodsRepeater, sponsorsRepeater, helpLinksRepeater, licensesRepeater, socialLinksRepeater}, window.location.href);
-            }).catch((err:any) => {
-      hasErrors = true;
-      isLoading = false;
+        window.postMessage({ 
+          type: 'FooterData', 
+          gameVendorsRepeater, 
+          paymentMethodsRepeater, 
+          sponsorsRepeater, 
+          helpLinksRepeater, 
+          licensesRepeater, 
+          socialLinksRepeater
+        }, window.location.href);
+      }).catch((err:any) => {
+        hasErrors = true;
+        isLoading = false;
 
-      console.error(err);
-    });
+        console.error(err);
+      });
   }
 
-  const setContent = (element:HTMLElement, content:any) => {
+  const setContent = (element:HTMLElement, content:any):void => {
     let htmlContent = document.createElement("div");
     htmlContent.innerHTML = content;
     element.append(htmlContent);
   }
 
-  const setClientStyling = () => {
+  const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
-    footerWidget.appendChild(sheet);
+    if (customStylingContainer) {
+      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);
+        }
+      });
+  }
+
+  const changeLanguage = ():void => {
+    window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
+  };
+
+  const toggleLanguageDrawer = ():void => {
+    languageDrawer.classList.toggle('hidden');
+  }
+  
+  const overlayOptionTrigger = (e):void => {
+    let option = e.target.closest('.overlayLanguageOption');
+    selectedLanguage = option.getAttribute('data-lang');
+    changeLanguage();
+    updateLanguageDisplayName();
+    languageDrawer.classList.toggle('hidden');
+  };
+
+  const updateLanguageDisplayName = ():void => {
+    let matchFound = false;
+
+    languages.forEach((l:any, i:number) => {
+      if (l.code == selectedLanguage.toLowerCase()) {
+        matchFound = true;
+        let langName:string = '';
+        currentLanguageFlag = l.flag_icon_editable;
+        switch (languagedisplaytype) {
+          case 'name':
+            langName = l.name;
+            break;
+
+          case 'translatedName':
+            langName = l.translated_name;
+            break;
+
+          default:
+            langName = l.code;
+            break;
+        }
+        languageDisplayName = langName;
+      }
+    });
+
+    if (!matchFound) {
+      languageDisplayName = selectedLanguage;
+    }
+  }
+
+  const setLanguagesArray = ():void => {
+    languagesArray = languageslist.replace(/ /g,'').split(',');
+    languagesArray = languagesArray.map((language:string) => language.toUpperCase());
   }
 
+  $: lang && setLocale(lang);
+  $: languageslist && setLanguagesArray();
+  $: session && userid && endpoint && setSession();
+  $: isLoggedIn && lang && setSessionTimer();
+  $: endpoint && lang && env && getCmsData();
+  $: clockenabled !== 'false' && clocksecondsenabled && clockcustomformat && clockDisplay();
+  $: clockenabled !== 'false' && clocksecondsenabled && (refreshRate = clocksecondsenabled == "true" ? 1000 : 60000) && refreshClock();
+  $: lang && (selectedLanguage = lang) && languages && (languages.length > 0) && updateLanguageDisplayName(); 
   $: clientstyling && setClientStyling();
-  $: endpoint && getData();
+  $: clientstylingurl && setClientStylingURL();
+
 </script>
 
+<svelte:head>
+  {#if headScript}
+    <script src={licenseScriptSrc}></script>
+  {/if}
+</svelte:head>
+
 {#if hasErrors}
   <p class="SearchLoading">500 Error - Internal Server Error</p>
 {:else}
   {#if isLoading}
     <p class="SearchLoading">Loading ...</p>
   {:else}
-    <div class="FooterGrid {sponsorsRepeater ? '' : 'NoSponsorSpacing'}" bind:this={footerWidget}>
-      {#if socialLinksRepeater}
-        <div class="GridRow">
-          <!-- start social section -->
-          {#if socialLinksRepeater}
-            <div class="GridCol">
-              {#if socialLinksTitle}
-                <p class="FooterTitle">{socialLinksTitle}</p>
-              {/if}
-              <casino-footer-section-v2 class="FooterSection SocialSection" socialflag="1" clientstyling={customStyling} target={target}></casino-footer-section-v2>
-            </div>
+
+  <div class="Footer" bind:this={customStylingContainer}>
+    <div class="FooterSide" >
+      <!-- start helper section -->
+        {#if helpLinksRepeater}
+          {#if helpLinksTitle}
+          <p class="FooterTitle">{helpLinksTitle}</p>
           {/if}
-                <!-- end social section -->
-        </div>
-      {/if}
-      {#if helpLinksRepeater}
-        <div class="GridRow">
-          <!-- start helper section -->
-          {#if helpLinksRepeater}
-            <div class="GridCol">
-              {#if helpLinksTitle}
-                <p class="FooterTitle">{helpLinksTitle}</p>
+          <casino-footer-section helperflag="1" clientstyling={customStyling} target={target} displaycolumn="true"></casino-footer-section>
+        {/if}
+    </div>
+
+    <div class="FooterGrid">
+      <!-- start vendors section -->
+        {#if gameVendorsRepeater}
+          <div class="GridRow">
+            <div>
+              {#if gameVendorsLinksTitle}
+              <p class="FooterTitle">{gameVendorsLinksTitle}</p>
               {/if}
-              <casino-footer-section-v2 class="FooterSection" helperflag="1" clientstyling={customStyling} target={target}></casino-footer-section-v2>
+              <casino-footer-section vendorflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
             </div>
-          {/if}
-                <!-- end helper section -->
-        </div>
-      {/if}
-      {#if licensesRepeater}
-        <div class="GridRow">
-          <!-- start license section -->
-          {#if licensesRepeater}
-            <div class="GridCol">
-              <casino-footer-section-v2 class="FooterSection" licenseFlag="1" clientstyling={customStyling} target={target}></casino-footer-section-v2>
-            </div>
-          {/if}
-                <!-- end license section -->
-        </div>
-      {/if}
+          </div>
+        {/if}
+      <!-- end vendors section --> 
+      <!-- start payments section -->
       {#if paymentMethodsRepeater}
         <div class="GridRow">
-          <!-- start payments section -->
-          {#if paymentMethodsRepeater}
-            <div class="GridCol">
-              {#if paymentLinksTitle}
-                <p class="PaymentsTitle">{paymentLinksTitle}</p>
-              {/if}
-              <casino-footer-section-v2 class="FooterSection" paymentflag="1" clientstyling={customStyling} target={target}></casino-footer-section-v2>
-            </div>
-          {/if}
-                <!-- end payments section -->
+          <div>
+            {#if paymentLinksTitle}
+              <p class="FooterTitle">{paymentLinksTitle}</p>
+            {/if}
+            <casino-footer-section paymentflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+          </div>
         </div>
       {/if}
-      {#if gameVendorsRepeater}
+      <!-- end payments section -->
+      
+      <!-- start panic button -->
+      {#if panicbuttonenabled === "true"}
+        <panic-button 
+        customtext = "Hold the button for 3 seconds to take 24 hours instant lock"
+        alternativestyling="true"
+        {lang}
+        {clientstyling}
+        ></panic-button>
+      {/if}
+      <!-- end panic button -->
+      <!-- start license section -->
+      {#if licensesRepeater}
         <div class="GridRow">
-          <!-- start vendors section -->
-          {#if gameVendorsRepeater}
-            <div class="GridCol">
-              {#if gameVendorsLinksTitle}
-                <p class="VendorsTitle">{gameVendorsLinksTitle}</p>
-              {/if}
-              <casino-footer-section-v2 class="FooterSection" vendorflag="1" clientstyling={customStyling} target={target}></casino-footer-section-v2>
-            </div>
-          {/if}
-                <!-- end vendors section -->
+          <div class="LicenseLinks">
+            {#if licensesLinksTitle}
+            <p class="FooterTitle">{licensesLinksTitle}</p>
+            {/if}
+            <casino-footer-section licenseFlag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+          </div>
+          <!-- start detailed licenses section -->
+          <div class="LicenseDesc">
+            {#if licenseDesc}
+              <div class="DetailedLicenses" use:setContent={licenseDesc}></div> 
+              <div class="DetailedCustomLicenses" use:setContent={licenseScript}></div>
+              <div>
+                <!-- start clock section -->
+                {#if clockenabled==="true"}
+                <div class="ClockContainer">
+                  <span class="ClockText">{clocktext}:</span>
+                  <span class="ClockTime">{time}</span>
+                </div>
+                {/if}
+                <!-- end clock section -->
+                <!-- start session timer section -->
+                
+                {#if sessiontimerenabled && localStorage.session}
+                <div class="sessionTimerContainer">
+                  <span class="SessionText">{$_('casinoFooter.sessionTimer')} {timeString}</span>
+                </div>
+                {/if}
+                <!-- end session timer section -->
+              </div>
+                {/if}
+          </div>
+          <!-- end detailed licenses section -->
         </div>
       {/if}
+      <!-- end license section -->
+   
+      <!-- start sponsors section -->
       {#if sponsorsRepeater}
         <div class="GridRow">
-          <!-- start sponsors section -->
           {#if sponsorsRepeater}
-            <div class="GridCol">
-              {#if sponsorsLinksTitle}
-                <p class="FooterTitle">{sponsorsLinksTitle}</p>
-              {/if}
-              <casino-footer-section-v2 class="FooterSection" sponsorflag="1" clientstyling={customStyling} target={target}></casino-footer-section-v2>
-            </div>
+          <div>
+            {#if sponsorsLinksTitle}
+              <p class="FooterTitle">{sponsorsLinksTitle}</p>
+            {/if}
+            <casino-footer-section sponsorflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+          </div>
           {/if}
-                <!-- end sponsors section -->
         </div>
       {/if}
-      {#if licenseDesc || copyright}
-        <div class="GridRow LicenseRow">
-          <div class="GridCol">
-            <!-- start detailed licenses section -->
-            <div class="DetailedLicenses" bind:this={licenseContainer} use:setContent={licenseDesc}></div>
-            <!-- end detailed licenses section -->
-                  <!-- start copyright section -->
-            <div class="CopyrightAreaRights CopyrightArea" bind:this={copyrightContainer} use:setContent={copyright}></div>
-            <!-- end copyright section -->
+        <!-- end sponsors section -->
+          
+        <!-- start social section -->
+        {#if socialLinksRepeater}
+         <div class="GridRow">
+            {#if socialLinksTitle}
+              <p class="FooterTitle">{socialLinksTitle}</p>
+            {/if}
+            <casino-footer-section socialflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
           </div>
-        </div>
-      {/if}
+        {/if}
+        <!-- end social section -->
+       
+        <!-- start language selector -->
+      {#if (languageselectorenabled==="true" && languagePackLoaded && selectedLanguage)} 
+        <div class="GridRow">
+          <div class="languageSelectorContainer"> 
+            <!-- traditional dropdown option for screenreader users. Works the same way as the old language selector. Display: none -->
+            <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>changeLanguage()}> 
+              {#each languagesArray as operatorLanguage} 
+                <option value={operatorLanguage} selected>{operatorLanguage}</option> 
+              {/each} 
+            </select> 
+            
+            <!-- Custom dropdown in order to be able to display country flags -->
+            <div class="languageSelectorOverlay">
+              <button class="drawerButton" value="{selectedLanguage}" on:click={toggleLanguageDrawer}><img class="languageFlag" src={currentLanguageFlag}>{languageDisplayName}
+                <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path opacity="0.4" d="M0.94 0L4.00067 3.05467L7.06 0L8 0.940667L4.00067 4.94133L0 0.940667L0.94 0Z" fill="black"/>
+                  </svg>
+              </button>
+                <div bind:this={languageDrawer} class="languageDrawer hidden">
+                  <ul id="languageList">
+                    {#each languages as language}
+                      <li class="overlayLanguageOption" data-lang={language.code} on:click={overlayOptionTrigger}><img class="languageFlag" src={language.flag_icon_editable}><a href="javascript:void(0)"><span>{language.name}</span></a></li>
+                    {/each}
+                  </ul>
+                </div>
+            </div>
+          </div>
+        </div> 
+        {/if}
+      <!-- end language selector -->
+       
+      {#if copyright}
+      <!-- start copyright section -->
+      <div class="CopyrightAreaRights CopyrightArea" use:setContent={copyright}></div>
+      <!-- end copyright section -->
+     {/if}
+   
     </div>
+  </div>
   {/if}
 {/if}
 
+
 <style lang="scss">
-  //This function does a multiplication
-  // in order to work with px the
-  // same way as working with em
-  @function ttp($value) {
-    $multiplicator: 16px;
-    @return $value * $multiplicator;
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
+  $color-white : #E8E9EB;
 
   .SearchLoading {
-    color: #fff;
+    color: var(--emfe-w-color-white, #FFFFFF);
     text-align: center;
   }
+
+  .Footer {
+   background-color: $color-white;
+   position: relative;
+  }
+
+  .FooterSide { 
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    background-color: $color-white;
+    .FooterTitle {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: 600;
+      margin: 24px 13px;
+    }
+  }
   .FooterGrid {
-    font-family: 'Arial';
+    font-weight: 400;
     display: flex;
-    padding: ttp(0.625) ttp(2.5);
-    background-color: #212529;
-    color: #fff;
+    padding: 100px 0;
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: $color-white;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    &.NoSponsorSpacing {
-      padding-top: ttp(1.875);
-    }
     .GridRow {
       display: flex;
       flex-flow: row wrap;
       width: 100%;
-      padding: ttp(1.25) 0;
       align-items: flex-start;
       justify-content: center;
-      &:first-child {
-        padding-top: 0;
-      }
-      &:not(:last-child) {
-        border-bottom: 1px solid rgba(255, 255, 255, .1);
-      }
-      &.LicenseRow{
-        border-bottom: 0;
-      }
-      .GridCol {
-        width: 100%;
-        flex:1;
-        p {
+      align-items: center;
+      padding: 20px 0;
+      text-align: center;
+      max-width: 1100px;
+      p {
           text-align: center;
           &.FooterTitle {
-            font-size: ttp(1);
+            font-size: 12px;
             font-weight: 700;
           }
-        }
-        .PaymentsTitle, .VendorsTitle {
-          margin: 0 auto ttp(1.25);
-          font-size: ttp(1);
-          font-weight: 700;
+      }
+     .LicenseDesc {
+      flex: 1;
+      max-width: 575px;
+      line-height: 1.3;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      .DetailedLicenses {
+        font-size: 10px;
+        color: var(--emfe-w-color-gray-150, #828282);
+       
+        div {
+          text-align: left;
+          white-space: pre-line;
         }
       }
-    }
-    .DetailedLicenses {
-      margin: ttp(1.875) ttp(3.125) ttp(1.25);
-      font-size: ttp(0.625);
-      text-align: center;
-      color: #828282;
+     }
     }
     .CopyrightAreaRights {
-      margin-top: ttp(0.625);
+      margin-top: 10px;
     }
     .CopyrightTextArea p, .CopyrightArea p {
       margin: 0;
-      color: #828282;
-      font-size: ttp(0.563);
+      color: var(--emfe-w-color-gray-150, #828282);
+      font-size: 9px;
     }
   }
   @media only screen and (max-width: 768px) {
-    .FooterGrid {
-      padding: ttp(0.313) ttp(1.25);
-      .FooterTitle {
-        margin-top: 0;
+    .Footer {
+      display: flex;
+      flex-direction: column;
+      &Side {
+        position: relative;
+        margin-top: 66px;
+        margin-left: 14px;
       }
-      .GridRow {
+      &Grid {
         padding: 0;
-        &:not(:last-child) {
-          border-bottom: 0;
-        }
         &:last-child {
-          .GridCol:last-child {
-            border-bottom: 0;
-          }
-        }
-        &.SplitRow {
-          .GridCol:first-child, .GridCol:nth-child(2) {
-            flex-basis: unset;
-          }
-          .GridCol:nth-child(2) {
-            border-left: none;
-          }
-        }
-        .GridCol {
-          border-bottom: 1px solid rgba(255, 255, 255, .1);
-          padding: ttp(0.938) 0;
-          #DetailedLicenses {
-            margin: ttp(0.625) auto ttp(1.563);
-          }
-          .PaymentsTitle, .VendorsTitle {
-            margin: ttp(0.625) auto;
-          }
+          padding-bottom: 50px;
         }
       }
     }
+    .GridRow {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      gap: 15px;
+        &:last-child {
+          border: none;
+        }
+    }
+  }
+
+
+  .ClockContainer {
+    color: var(--emfe-w-color-gray-150, #828282);
+    font-size: 11px;
+    display: inline;
+  }
+  .sessionTimerContainer {
+    color:  #828282;
+    font-size: 11px;
+    display: inline;
+  }
+
+.ItemLanguage {
+  display: none;
+}
+
+#languageList {
+  padding: 0;
+  margin: 0;
+}
+
+.languageSelectorOverlay {
+  position: relative;
+}
+
+.drawerButton {
+  height: 30px;
+  width: 150px;
+  background: inherit;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  border-radius: 0px;
+  border: 0;
+}
+
+.languageDrawer {
+    position:absolute;
+    background: $color-white;
+    width: 150px;
+    top: 30px;
+    padding: 6px 0;
+    left: 3.9px;
+    
+    &.hidden {
+       display: none;
+    }
+}
+
+.languageFlag {
+  margin-right: 8px;
+  background: black;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  }
+
+.overlayLanguageOption {
+  list-style: none;
+  width: 24px;
+  position: relative;
+  padding: 0;
+  justify-content: center;
+
+  img {
+    position: absolute;
+    z-index: 0;
+    cursor: pointer;
+    top: 6px;
+    left: 12px;
+  }
+
+  a {
+    text-decoration: none;
+    color: black;
+    display: inline-block;
+
+    width: 150px;
+
+    span {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      margin: 4px 0;
+    }
   }
+}
+
 </style>