:root {

	--bs-gutter-x: 2rem;
	--base-scale:calc(100vw / 75);
	--h1-font-size:clamp(1.5rem, 3vw + 1rem, 3rem);
	--bodyFontSize:1.1rem;
	--grey: #777;
	--light-grey: #ccc;
	--dark-grey: #444;
}

@font-face {
	font-family: 'Ploni DL AAA';
	src: url("font/ploni-regular-aaa-webfont.woff2") format("woff2"),
	url("font/ploni-regular-aaa-webfont.woff") format("woff");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Ploni DL AAA';
	src: url("font/ploni-medium-aaa-webfont.woff2") format("woff2"),
	url("font/ploni-medium-aaa-webfont.woff") format("woff");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Ploni DL AAA';
	src: url("font/ploni-bold-aaa-webfont.woff2") format("woff2"),
	url("font/ploni-bold-aaa-webfont.woff") format("woff");
	font-weight: 700;
	font-display: swap;
}

body {
	    font-family: "Ploni DL AAA", sans-serif;

	font-size: var(--bodyFontSize);
	font-weight: 300;
	color: var(--text-color);
}
.page { display: flex; flex-direction: column; min-height: 100dvh;justify-content: space-between}
a { text-decoration: none;}
brand-color {
color:var(--brand-color)
}
.rounded {border-radius: 1.3rem!important; }

.button, button {
	position: relative;
	display: inline-block;
	padding-block: 15px;
	padding-inline: 2rem;
	border-radius: 3rem;
	border: 0 none;
	margin-bottom: 15px;
	background: var(--brand-color);
	text-align: center;
	color: white; 
	-webkit-box-shadow:  3px 3px 6px -5px rgba(0,0,0,0.5); 
	box-shadow:  3px 4px 20px -10px rgba(0,0,0,0.5);
}



.button-black {
background:black;
color:white;
}

.bg_brand-color {
background:var(--brand-color)
}


.bg_dark-brand-color {
background:var(--dark-brand-color);
	color:white;
}

.bg_light-brand-color {
background:var(--light-brand-color)
}

.bg_light-brand-color .button { background: black; color: white;}

.bg_brand-color-d {
background:var(--brand-color-d);
}

.bg_brand-color-e {
background:var(--brand-color-e);
}
.bg_brand-color-e > *:not(input):not(select):not(.text-brand-color-e) {
	color: white;
}

.bg_brand-color-e .bg_white > * {
	color:var(--brand-color-e)!important;
}

.bg_brand-color-e .button {
	color: var(--brand-color-e);
}

.bg_brand-color-e input { color: var(--brand-color-e); }
.bg_brand-color-e .button {background-color: var(--light-brand-color)!important; color: var(--brand-color-e); }
.bg_brand-color-e .button:hover  {background-color: var(--dark-brand-color)!important; color: var(--brand-color-e); }


.bg_brand-color-f {
background:var(--brand-color-f)
}

.text-brand-color, .brand-color {
color:var(--brand-color)
}
.text-light-brand-color {
color:var(--light-brand-color)
}
.text-dark-brand-color {
color:var(--dark-brand-color)
}
.text-brand-color-d {
color:var(--brand-color-d)
}
.text-brand-color-e {
color:var(--brand-color-e)
}
.text-brand-color-f {
color:var(--brand-color-f)
}

.text-grey {color: var(--grey)!important;}
.text-dark-grey {color: var(--dark-grey)!important;}

.bg_light-grey {
background:var(--grey);
color:#000
}

.bg_white {
background:white;
color:var(--bs-body-color);

}

.text-white * {
color:#fff
}

.text-black *, .text-black {
color:var(--bs-body-color);
}
.min-header-height { min-height: var(--header-height);}
#footer { min-height: var(--header-height);}
.sticky-header.sticky_bg_blur {backdrop-filter: blur(12px);}
.bg_blur {backdrop-filter: blur(12px);}


.bg_trans_white {background-color: rgba(255, 255, 255, 0.1);}
.bg_trans_black {background-color: rgba(0, 0, 0, 0.1);}
#header.sticky-header + #content {padding-top: var(--header-height)!important; }/* good when not fixed header */
#header + #content {padding-top: var(--header-height)!important;}

#header.transparent-header {background: rgb(0,0,0);
	background:
	linear-gradient(0deg, rgba(0,0,0,0) -20%, rgba(0,0,0,0.3) 100%);
	
}


h1 {font-size: var(--h1-font-size)!important}

h2 {font-size: calc(0.8 * var(--h1-font-size))!important}

.text-logo h1{ font-size:calc(0.7 * var(--h1-font-size))!important; }
.sticky-header .text-logo h1{color:white!important; font-size:calc(0.4 * var(--h1-font-size))!important; }
.sticky-header .header_container { opacity: .5}
/*#header.sticky-header .container {width: 100%!important;max-width:1400px!important}*/

.lh-1 {
line-height:1
}

.adviser-wrapper {  text-align: center;   min-height: calc(100dvh - (2 * var(--header-height)));}

.container {margin-inline:auto; }
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}
.d-flex {display: flex;}
.text-center { text-align: center;}

.d-none { display: none;}
.h100vh {min-height: calc(100vh - var(--header-height));}
.h100 {height: 100%;}
.w100 { width: 100%;}
.fs60 {font-size: 60%;}
.fs80 {font-size: 80%;}
.fs90 {font-size: 90%;}
.fs100 {font-size: 100%;}
.fs120 {font-size: 120%;}
.fs140 {font-size: 140%!important;}
.fs160 {font-size: 160%;}
.fs180 {font-size: 180%;}
.fs200 {font-size: 200%!important;}
.fs240 {font-size:	calc(var(--h1-font-size) * 1.2)!important;}


.fw800, .bold, strong, .strong { font-weight: 700;}

.fw700 { font-weight: 700;}

.text-shadow {
text-shadow:0px 3px 7px rgba(0, 0, 0, 0.5);
}

.even_odd:nth-child(odd) {background: #efefef; }

#logo img {width: 100%; height: auto;}

.text-logo h1,
.scalein,
polygon,
#header,
#header.sticky-header,
#logo_position img
 {
-webkit-transition:all .2s ease;
-o-transition:all .2s ease;
transition:all .2s ease;
}

#header {height:var(--header-height);
position:relative;z-index:199;-webkit-backface-visibility: hidden;
}
.header_container {height:100%}
#header {position:fixed;top:0;left:0;width:100%;}
#header.sticky-header{height:var(--sticky-header-height);}

.p-relative { position: relative;}
.p-absolute { position: absolute; top: 0; right: 0;}

#header #logo_position {
	min-width: 200px;
	display: flex;
}

#header #logo_position img {
	width: auto;  position: absolute;max-width: 100%; }


#header.logoStandard {opacity: 1;  }
#header.sticky-header .logoStandard {opacity: 0;  }

#header .logo-sticky {opacity: 0;}
#header.sticky-header .logo-sticky  {opacity: 1;}




.shadow {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1)!important;
}
            

.scalein {
-webkit-transform:scale(1);
transform:scale(1)
}

.scalein:hover {
-webkit-transform:scale(1.01);
transform:scale(1.01)
}

[class^="icon-"]:before, [class*=" icon-"]:before, [class*=" icon-"] svg {
  font-style: normal;
	width: 24px; height: 24px;
}
.not_blur-onload {animation:none!important;}
.blur-onload {
  animation: blurToClear .8s ease forwards;
}

@keyframes blurToClear {
  from {
    filter: blur(20px);
  }
  to {
    filter: blur(0);
  }
}

.blink:target {
animation-name:blink;
animation-direction:normal;
animation-duration:.9s;
animation-iteration-count:2;
animation-timing-function:ease;
}

@keyframes blink {
0% {
background:rgba(228,107,59,1);
}

100% {
background:rgba(228,107,59,0);
	}
}

#copyrights  {background:rgba(0,0,0,0.1)}

.statement_menu li:not(:last-child)::after {
content:'/';
padding:0 4px;
opacity:.5
}

/* accessibility helpers */
.accessibility {position:absolute;left:-99999px;height:10px;width:10px}


.skip_helpers a {position:absolute;left:-99999px;top:30px}

.skip_helpers {position:absolute;left:0;top:0;width:100%;text-align:center;list-style:outside none}

.skip_helpers li {list-style-type:none}
.skip_helpers a:focus,.skip_helpers a:active {position:relative;
left:0;
z-index:9999;
width:75%;
height:auto;
margin:0 auto;
padding:30px 45px;
text-align:center;
text-decoration:none;
font:bold 50px Arial,Freesans,sans-serif!important;
color:black;
background: white;
}

/*end skip helpers*/


	/***** from default.php ******/
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    gap: 2rem;
    justify-content: center;
}		

	.textuals { text-align: start;}

.lens-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 2rem; 
    width: 100%; 
    max-width: 100%; 
    box-sizing: border-box;
}

.lens-card {
    display: flex;
    flex-direction: column;
  
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eee;
	position: relative;
}

.card-image {
    height: 250px; 
	    aspect-ratio: 1 / 1;
/*    overflow: hidden; */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

	.offer_label_number { 
		position: absolute;
		padding: 6px 15px;
		margin-inline: 15px;
		left: 0;
z-index: 1;
    border-radius: 3px;

    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
    color: white;
		top: -2px;
/*		 writing-mode: vertical-rl;*/
/*  text-orientation: mixed;*/
/*		transform: rotate(180deg);*/
		    box-shadow: 3px 2px 1px rgba(0, 0, 0, .5);

		background: linear-gradient(0deg, var(--dark-brand-color) 5%, var(--brand-color) 20%);
		
		}


.card-image img {
    width: 100%;
    display: block;
		border-top-left-radius: 1rem!important;
		border-top-right-radius: 1rem!important;

}

.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	justify-content: space-between;
	height: 100%;
}

.card-title {
    font-size: calc(var(--h1-font-size) * 0.6)!important;
    font-weight: 600;
	margin-block-end: 1rem;

}

.card-description {
    margin-bottom: 1.5rem;
}



/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .lens-grid {
        grid-template-columns: 1fr;
    }
	
	.charts-grid {
        grid-template-columns: 1fr 2fr;
		gap:1rem;
    }
}

	.share-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
		
}
	.share-buttons svg {width: 30px; fill:red;  }

hr {margin: .1rem 0;}	

	.linear-gauge-label-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%); /* Center the group on its 'left' position */
}

.linear-gauge-marker {
    width: 1px; 
    height: 10px;
    background-color: var(--light-grey);
    margin-top: 3px;
}
	
  /* Modal Styling */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
            z-index: 1000; /* Ensure it's on top */
            justify-content: center;
            align-items: center;
            overflow-y: auto; /* Allow scrolling for modal content if needed */
            opacity: 0; /* Start hidden for transition */
            transition: opacity 0.3s ease; /* Smooth fade-in/out */
        }

        .modal-overlay.active {
            display: flex; /* Show when active */
            opacity: 1;
        }
        
        .modal-content {
            background-color: #ffffff;
            position: relative;
            max-width: 1200px; /* Max width for larger screens */
            width: 90%; /* Responsive width */
            transform: translateY(-20px); /* Start slightly above for animation */
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0;
            overflow-y: hidden; 
            display: flex; 
            flex-direction: column;
        }

        .modal-overlay.active .modal-content {
            transform: translateY(0); /* Slide into place */
            opacity: 1;
        }

  .modal-close-button {
    position: absolute;
    top: -5px;
    right: 0;
    width: 40px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 2em;
    cursor: pointer;
    color: var(--brand-color);
    transition: color 0.2s ease;
    padding: 0px;
    line-height: 0;
    z-index: 1;
	 text-shadow:
                -1px -1px 0 white,  /* Top-left */
                 1px -1px 0 white,  /* Top-right */
                -1px 1px 0 white,   /* Bottom-left */
                 1px 1px 0 white,   /* Bottom-right */
                 0px -1px 0 white,  /* Top */
                 0px 1px 0 white,   /* Bottom */
                -1px 0px 0 white,   /* Left */
                 1px 0px 0 white;   /* Right */

}

        .modal-close-button:hover {
            color: var(--grey);
        }


        .modal-body {
            flex-grow: 1; 
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh; 
            position: relative; 
        }

        /* Iframe styling */
        .modal-body iframe {
            width: 100%;
            height: 100%;
			min-height: 80vh;
            border: none; 
            overflow-y: auto;  
            display: none;  
        }
        
        /* Loading Spinner */

#loader-screen {min-height: 200px;}
        .loader {
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--brand-color);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
            position: absolute; /* Center over iframe */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
        } 

        .loader.active {
            display: block;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .modal-content {
                
           
            }
        }

        /* Styles for QR Code content in modal */
        #modal-qrcode-content {
            display: none; /* Initially hidden */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }

        #modal-qrcode-content.active {
            display: flex;
        }

        #modal-qrcode-content p {
            margin-bottom: 15px;
        }





@media (max-width: 991px) {
.footer_logo {
max-width:100%;
height:100%
}

}


@media (max-width: 575px) {

	.text-logo h1{ font-size:calc(0.6 * var(--h1-font-size))!important; text-align: center;}

}

@media print {
	h1 {font-size: 30px!important;}
	#print_logo { display: block!important;margin-top: 50px;}
	#header + #content {padding: 0!important;}
}



/* gauge */
 .gauge-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
    }

        .gauge-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px; /* Space from chart */
            font-weight: 600;
            text-align: center;
        }

        .gauge-svg {
            display: block;
            width: 100%;
            height: auto;
            flex-grow: 1; 
            overflow: visible; 
        }

        .gauge-track {
            fill: none;
            stroke: #e0e0e0; 
            stroke-width: 25; 
        }

        .gauge-fill {
            fill: none;
            stroke: var(--brand-color); 
            stroke-width: 25px;
            transform: rotate(-90deg);
            transform-origin: 100px 100px; 
            transition: stroke-dashoffset 1s ease-out; 
        }

        .gauge-value-text, .linear-gauge-value-text {
            font-size: calc(var(--bodyFontSize) * 1.5);
            font-weight: bold;
            fill: var(--grey);
			color: var(--grey);
            text-anchor: middle;
            dominant-baseline: central;
        }

  

        .tick-label, .linear-gauge-label-item {
            fill: var(--grey);
            color: var(--grey);
            text-anchor: middle;
            dominant-baseline: middle;
			font-size: 1rem;
        }


        /* --- Linear Gauge Specific Styles --- */
        .linear-gauge-container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            box-sizing: border-box;
        }

        .linear-gauge-track {
            height: 20px; 
            position: relative;
			background-color:#e0e0e0;
        }

        .linear-gauge-fill {
            height: 100%;
            width: 0%; 
            background-color: var(--brand-color); 
			
            transition: width 1s ease-out;
        }

        .linear-gauge-labels {
            display: flex;
            justify-content: space-between; 
               height: 30px;
			margin-bottom: 10px;
            position: relative; /* For accurate positioning */
        }