:root {
/** CSS DARK THEME PRIMARY COLORS */
--color-primary-100: #94b9ff;
--color-primary-200: #a1c1ff;
--color-primary-300: #aec8ff;
--color-primary-400: #bad0ff;
--color-primary-500: #c6d7ff;
--color-primary-600: #d2dfff;
/** CSS DARK THEME SURFACE COLORS */
--color-surface-100: #121212;
--color-surface-200: #282828;
--color-surface-300: #3f3f3f;
--color-surface-400: #575757;
--color-surface-500: #717171;
--color-surface-600: #8b8b8b;
/** CSS DARK THEME MIXED SURFACE COLORS */
--color-surface-mixed-100: #1e2026;
--color-surface-mixed-200: #33353a;
--color-surface-mixed-300: #494b50;
--color-surface-mixed-400: #606267;
--color-surface-mixed-500: #797a7e;
--color-surface-mixed-600: #929397;
/** FONTS */
--font-family-default: "Moderustic", sans-serif;
--font-optical-sizing:auto;
--font-weight-default:800; /* 300 - 800*/
--font-style-default: normal;
--font-size-base: 16px;
--font-color-base:var(--color-primary-600);
   /* --font-size-large: 800;
    --font-size-small: 100;    
    */
}

.ticker-text {
    color: var(--color-primary-100);
    font-size: 12px;
	font-weight: 300;
	font: var(--font-family-default);
	font-style: normal;
}
a {
  color: var(--color-primary-600); /* Inherit the color from the parent element or set a custom color */
  text-decoration: none; /* Remove the underline */
}

#app-panel-left{
	display: flex;
    flex-direction: column;
    height: 100%;
}

.btn-menu-left {
    background-color: var(--color-surface-200);
    width: 42px;  /* Image takes up 100% of the parent's width */
    height:50px; /* Maintains aspect ratio */
    border: 0px;
    max-width: 64px;
    margin: 0px 0px 0px 0px;
    transition-duration: 0.4s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.btn-menu-left:first-child {
  /* Add unique styles for the first button */
   margin: 0px 0px 0px 0px;
   height:60px;
   }
.btn-menu-left:last-child {
    margin-top: auto; /* Push the last button to the bottom */
	}

.btn-menu-left::before {
    content: "";
    background: var(--color-surface-300); /* Ripple color */
    display: block;
    position: absolute;
    width: 300%;
    height: 300%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    border-radius: 50%;
    transition: transform 0.1s ease, opacity 0.1s ease;
    pointer-events: none;
}

.btn-menu-left:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
}

.filter-applied {
filter: invert(61%) sepia(15%) saturate(2224%) hue-rotate(181deg) brightness(100%) contrast(91%);
}

.img-btn-menu{
	width: 100%;  /* Image takes up 100% of the parent's width */
  	height: auto; /* Maintains aspect ratio */
  	max-width: 32px; /* Optional: max width to avoid excessive scaling */
	display: flex;
	padding: 0px 0px 0px 0px;
    align-items: center;
}
#app-frame-banner-ad {
    display: none;
}

#app-frame-banner-ad2 {
    display: none;
}

#disclaimer{
	text-align:center; 
	font-size: 8px;
	font-weight: 300;
	font: var(--font-family-default);
	font-style: normal;
	margin: 5px 0px 5px 0px;
	color: var(--color-primary-600);
	background-color: var(--color-surface-mixed-100);
}

/* Container to hold the ticker contents in a stacked layout */
.fmx-ticker-container {
  width: 100%; /* Full width of the container */
  height: 150px; /* Adjust this based on the number of tickers and their height */
  overflow: hidden; /* Hide overflow to create the ticker effect */
  box-sizing: border-box; /* Ensure padding/borders do not increase the container's size */
  display: flex;
  flex-direction: column; /* Stack the tickers vertically */
  justify-content: space-between; /* Evenly space out the tickers */
   font-size: 10px;
  height:100%;
}
.ticker-icon-up {
  width: 10px;  /* Set the width of the icon */
  height: 10px; /* Set the height of the icon */
  margin: 0px 5px 0px 0px; /* Add some space between the text and the icon */
  vertical-align: middle; /* Align the icon vertically with the text */
  border-radius: 0px;
  animation: glow-up 1s infinite alternate;
}
.ticker-icon-down {
  width: 10px;  /* Set the width of the icon */
  height: 10px; /* Set the height of the icon */
  margin: 0px 5px 0px 0px; /* Add some space between the text and the icon */
  vertical-align: middle; /* Align the icon vertically with the text */
  border-radius: 0px;
  animation: glow-dn 1s infinite alternate;
}

@keyframes glow-up {
  from {
    box-shadow: 0 0 2px -2px #aef4af;
  }
  to {
    box-shadow: 0 0 2px 2px #aef4af;
  }
}

@keyframes glow-dn {
  from {
    box-shadow: 0 0 2px -2px #aef4af;
  }
  to {
    box-shadow: 0 0 2px 2px #f66151;
  }
}
/* Base style for all ticker content */
.fmx-ticker-content {
  display: inline-block; /* Allows the content to scroll horizontally */
  width: 100%; /* Ensure content takes up full width */
 /* Start the content off-screen to the right */
}

/* Different speeds for each ticker content */
.fmx-ticker-content.slow-speed {
  animation: fmx-ticker 75s linear infinite; /* Slower scrolling */
  height: 12px;
  padding-left: 30%;
}

.fmx-ticker-content.medium-speed {
  animation: fmx-ticker 90s ease-out infinite; /* Medium scrolling */
  height: 12px;
    padding-left: 30%;
}

.fmx-ticker-content.fast-speed {
  animation: fmx-ticker 100s ease-out infinite; /* Faster scrolling */
  height: 12px;
    padding-left:25%;
}
.fmx-ticker-content:hover {
  animation-play-state: paused;
}
/* Keyframes for the scrolling effect */
@keyframes fmx-ticker {
  0% {
    transform: translateX(100%); /* Start fully to the right */
  }
  100% {
    transform: translateX(-100%); /* End fully to the left */
  }
}




/* Show banner-ad1 for large screens (e.g., 1024px and above) */
@media (min-width: 800px) {
    #app-frame-banner-ad{
        display: block;
    }
    #app-frame-banner-ad2 {
        display: none;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.80);
    }
    #consent-banner{
    		font-size: calc(var(--font-size-base) * 0.90);
    }
}

/* Show banner-ad2 for medium screens (e.g., 768px to 1023px) */
@media (min-width: 565px) and (max-width: 800px) {
    #app-frame-banner-ad {
        display: none;
    }
    #app-frame-banner-ad2 {
        display: block;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.70);
    }
    #consent-banner{
    	font-size: calc(var(--font-size-base) * 0.85);
    }
}

/* Hide both ads for small screens (below 768px) */
@media (max-width: 560px) {
    #app-frame-banner-ad, #app-frame-banner-ad2 {
        display: none;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.55);
    }
    #consent-banner{
    	font-size: calc(var(--font-size-base) * 0.80);
    }
}
@media (max-width: 560px) {
    #app-frame-banner-ad, #app-frame-banner-ad2 {
        display: none;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.50);
    }
    #consent-banner{
    	font-size: calc(var(--font-size-base) * 0.70);
    }
}
/*
@media only screen and (min-width: 560px)and (max-width: 818px) {
    #app-frame-banner-ad {
        display: none;
    }
    #app-frame-banner-ad2 {
        display: block;   
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.60);
    }
}
@media only screen and (min-width: 400px) and (max-width: 560px) {
    #app-frame-banner-ad {
        display: none;
    }
    #app-frame-banner-ad2 {
        display: block;
    }
}

@media only screen and (min-width: 570px) {
    #app-frame-banner-ad {
        display: none;
    }
    #app-frame-banner-ad2 {
        display: block;
    }
     #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.60);
    }
}
*/

#dashboard-panel {
    width: 100%;
    height: 100%;
    background-color: var(--color-surface-100);
}
html{
	 height: -webkit-fill-available;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	/*height:100%;*/
	height: 100dvh;
  	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;	background-color: black;
	overflow:hidden;
	font-family: var(--font-family-default);
    font-size: var(--font-size-base);
   	color: var(--font-color-base);
    dispaly: flex;
    align-items: center;
}
.app-frame-container {
	overflow: hidden; /* Prevent scrollbars */
	display:flex;
	flex-direction:column;
	width:100vw;
	height: 100dvh;
	background-color:var(--color-surface-mixed-100);
	box-sizing: border-box;
}
.app-frame-container-header {
    display: flex;
    align-items: center;
    background-color:var(--color-surface-mixed-100);
    padding: 0px ;
    height:100px;
}

#app-container-panel{
	width: 100vw;
   	height: 100dvh;
    box-sizing: border-box; /* Ensures padding/border do not increase size */
    background-color: var(--color-surface-mixed-300);
}
#app-frame-banner-ad{
	position:relative;
}

#app-frame-banner-ad-1{
	height:100%;
	text-align:center;
	position:relative;
	left: 50vw;
}


.rounded-corner {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightblue;
}


#consent-banner {
    position: relative;
    padding: 3px;
    width: 100%;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.85);
    color: #fff;
    font-size: calc(var(--font-size-base)*0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.3);
}
#consent-banner button {
    margin-left: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
}

#consent-banner button:first-of-type {
    background-color:var(--clr-surface-a50);
    color: white;
}

#consent-banner button:last-of-type {
    background-color:var(--clr-surface-a50);
    color: white;
}




.fmx-card-widget {
    position: relative;
    width: 320px;
    border-radius: 12px;
    overflow: hidden;
    color: white;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    transition: background-image 0.6s ease, background-color 0.6s ease;
}
.fmx-card-widget-header{
    background: rgba(0,0,0,0.6);
    padding: 10px 15px;
    font-weight: bold;
    text-align: center;
    transition: background 0.6s ease;
}
.fmx-card-widget-content{
    background: rbga(0,0,0,0.6);
    padding: 10px 15px;
    font-weight: bold;
    text-align: center;
    transition: background 0.6s ease;
}
.fmx-card-widget-content-inner {
    position: absolute;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    animation: scroll-card-up 0.6s ease forwards;
}

@keyframes scroll-card-up {
    from {transform: translateY(100%); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

.fmx-card-widget-inner.exit {
    animation: scroll-card-out 0.6s ease forwards;
}

@keyframes scroll-card-out{
    from {transform: translateY(0); opacity: 1;}
    to {transform: translateY(-100%); opacity: 0;}
}