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

@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;
}

html,body {height: 100%;}
body {
	    font-family: "Ploni DL AAA", sans-serif;

	font-size: var(--bodyFontSize);
	font-weight: 300;
	color: var(--text-color);

        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
    
}
.accessibility, .skip_helpers, .text-logo, .logo-sticky, button, .button, .action-buttons, #infoModal {display: none!important;}

.charts-grid {
	display: grid;
    grid-template-columns:1fr 4fr 2fr 2fr!important;
    gap: 1rem!important;
    justify-content: center!important;}

	


.card-content { padding: 1rem!important;}
.card-description { margin-bottom: 0!important;}
h2.card-title { font-size: 1.3rem!important;}
.mb-5 {margin-bottom: 1rem!important;}
.my-5 {margin-block: 1rem!important;}


a { text-decoration: none;}
brand-color {
color:var(--brand-color)
}
.rounded {border-radius: 1rem!important; }



p { margin: 0;}




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

}

.text-white * {
color:#fff
}

.text-black *, .text-black {
color:var(--bs-body-color);
}


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.8 * var(--h1-font-size))!important; }



.container {margin-inline:auto; max-width: 900px; }

.text-center { text-align: center;}

.d-none { display: none;}
.h100 {height: 100%;}
.w100 { width: 100%;}
.fs80 {font-size: 80%;}
.fs70 {font-size: 70%;}
.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;}

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

.fw700 { font-weight: 700;}


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

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


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



.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;
}
.linear-gauge-value-text {
    font-size: calc(var(--bodyFontSize) * 1);
  
}

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

        .gauge-title {
            color: #333;
            margin-bottom: 20px; /* Space from chart */
           font-weight: bold;
            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; 
        }

  

  

        .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 */
        }
	



	.textuals { text-align: start;}

.lens-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 1.5rem; 
    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: 140px; 
	    aspect-ratio: 1 / 1;
/*    overflow: hidden; */
}

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

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

    border-start-start-radius: 20px;
    border-end-start-radius: 20px;
    color: white;
		top: -3px;
		 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: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	justify-content: space-between;
	height: 100%;
}

.card-title {
    font-weight: 600;
	margin-block-end: 1rem;

}





hr {margin: .1rem 0;}	

	.linear-gauge-label-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%); 
}

.linear-gauge-marker {
    width: 1px; 
    height: 10px;
    background-color: var(--light-grey);
    margin-top: 3px;
}