:root{
      --ink:#111;
      --border:#111;
      --blue:#2f86a6;
      --pad:18px;
      --font: Geist, sans-serif, Roboto, helvetica, sans-serif;

      /* bar colours (approx.) */
      --a:#4f8b2c;
      --b:#1a8c63;
      --c:#7db44a;
      --d:#f0c419;
      --e:#f39c35;
      --f:#e67e22;
      --g:#e53935;
    }

    #epc {
      background:#f8f8f8;
      /*border:4px solid var(--border);*/
      color:var(--ink);
      display: none;
      font-family:var(--font);
      font-size: 18px;
      margin: 20px auto 0px auto;
      width:100%;
    }
	
	#summary.epc #epc {
		display: block;
	}

    .epc_header,
	#epc .bars,
	#epc .bar,
	#epc .bar_fill,
	.epc_footer-top {
	  display: flex;
	  display: -webkit-flex;
	}

    .epc_header{
	  -webkit-justify-content: space-between;
	  justify-content: space-between;
	  background:var(--blue);
	  /*border-bottom: 4px solid var(--border);*/
      color: #fff;
      font-weight:700;
      letter-spacing:.3px;
      padding:10px 10px 10px var(--pad);
      font-size:24px;
      line-height:normal;
    }
	
	.epc_header .epc_close {
		background-color: #4d9dbb;
		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 15.6 25.8'><g fill-rule='evenodd'><path fill-rule='evenodd' clip-rule='evenodd' fill='%23fff' d='M14.2,14L3,25.2l-2.1-2.1s0,0,4.9-4.9S.9,2.8.9,2.8L3,.6l11.2,11.2c.7.7.8,1.4,0,2.1Z'/></g></svg>");
   		margin-right: 15px;
   	}

    .epc_grid{
      display:grid;
      grid-template-columns: 1fr 180px 180px;
      /*border-top:4px solid var(--border);*/
      min-height:520px;
    }

    .epc_cell{
      /*border-left:4px solid var(--border);*/
      padding:10px;
    }
    .epc_cell:first-child{ /*border-left:none;*/ padding:10px 10px 10px 20px; }

    /* Column headings row */
    .epc_colheads{
      display:grid;
      grid-template-columns: 1fr 180px 180px;
      /*border-top:0;*/
    }
    .epc_colhead{
      /*border-left:4px solid var(--border);*/
      padding:10px;
      font-weight:700;
      text-align:center;
    }
    .epc_colhead:first-child{
      /*border-left:none;*/
      text-align:left;
      font-size:0; /* left head is blank in the original */
      padding:10px 10px;
    }

    /* Left panel */
    #epc .legend-top {
      font-style:italic;
      font-weight:700;
	  height: 52px;
      margin:6px 0 14px;
	  max-height: 52px;
	  min-height: 52px;
    }
    
	#epc .legend-bottom	{
      font-style:italic;
      font-weight:700;
      margin:14px 0 0;
    }

    #epc .bars {
      flex-direction:column;
      gap: 10px;
      padding-right:14px;
    }

    #epc .bar {
      position:relative;
      height:50px;
      align-items:center;
	  -webkit-align-items:center;
      overflow:visible;
    }

    /* left range label */
    #epc .bar_range{
      position:absolute;
      left:10px;
      font-weight:700;
      color: #222;
      white-space:nowrap;
      padding-right:10px;
    }

    /* coloured bar body */
    #epc .bar_fill {
      height:100%;
      align-items:center;
	  -webkit-align-items:center;
      justify-content:flex-start;
	  -webkit-justify-content:flex-start;
      color: #fff;
      font-weight:900;
      font-size:24px;
      letter-spacing:.5px;
	  padding-left: 100px;
      width:100%;
    }

    /* Widths (approx. taper) */
    .bar-a{ width:56%; }
    .bar-b{ width:64%; }
    .bar-c{ width:72%; }
    .bar-d{ width:80%; }
    .bar-e{ width:88%; }
    .bar-f{ width:94%; }
    .bar-g{ width:100%; }

    .bar-a .bar_fill{ background:var(--a); }
    .bar-b .bar_fill{ background:var(--b); }
    .bar-c .bar_fill{ background:var(--c); }
    .bar-d .bar_fill{ background:var(--d); color: #fff; }
    .bar-e .bar_fill{ background:var(--e); }
    .bar-f .bar_fill{ background:var(--f); }
    .bar-g .bar_fill{ background:var(--g); }

    /* Right columns (Current / Potential) */
    #epc .markers{
      position:relative;
      height:100%;
      min-height:520px;
    }

    #epc .marker{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      width:145px;
      height:50px;
      display:flex;
	  display:-webkit-flex;
      align-items:center;
	  -webkit-align-items:center;
      justify-content:center;
	  -webkit-justify-content:center;
      color: #fff;
      font-weight:900;
      font-size:38px;
      line-height:1;
    }

    /* left-pointing arrow */
    #epc .marker-left{
      clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 18% 100%, 0% 50%);
    }

    /* right-pointing arrow */
    #epc .marker-right{
      clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%);
    }

    #epc .marker-d { background:var(--d); }
    #epc .marker-b { background:var(--b); }


    .epc_footer-top {
      align-items:center;
	  -webkit-align-items:center;
      gap:10px;
    }

    #epc .region {
      font-size: 24px;
      font-weight: 700;
    }

    #epc .eu-flag {
      width: 120px;
      height: 70px;     
      position: relative;
      flex: 0 0 auto;
    }
	
	#epc .eu-flag svg {
		max-height: 100%;
		max-width: 100%;
	}

    .epc_footer-bottom {
      padding:10px 10px 10px 20px;
    }



	@media (min-width: 991px) {
		.epc_header { 
			border-radius: 5px 5px 0px 0px;			
		}
		
		.epc_footer {
			border-radius: 0px 0px 5px 5px;
		}
		
		.epc_footer-top {
		  padding:10px 10px 25px 20px;
		}
		
		.epc_colheads,
		.epc_footer-bottom {
		  background-color: var(--steam);
		  border-radius: 0px 0px 5px 5px;
		}
    }



	@media (max-width: 992px) {
		#epc {
			background-color: var(--white);
		}
		
		.epc_header { 
			-webkit-justify-content: center;
			justify-content: center;
			background-color: var(--white);
			color: var(--text);
			font-size: 24px;
			font-weight: 600;
			padding: 10px 10px 20px 10px;
			text-align: center;
		}
		
		.epc_header .epc_close {
			display: none;
		}
		
		.epc_colheads, 
		.epc_grid {
			grid-template-columns: 1fr;
		}
		
		.epc_colhead { 
			font-size:28px; 
		}
		
		#epc .bars {
			padding-right: 50px;
		}
		
		#epc .bar_range { 
			font-size:14px; 
		}
		
		#epc .bar_fill { 
			font-size:24px; 
		}
		
		.epc_cell.marks,
		#epc .markers,
		.epc_cell.mrk { 
			position: absolute; 
		}
		
		.epc_cell.marks { 
			height: calc(100% + 70px);
			right: 0px;
			top: -70px;
			width: 100px;
		}
		
		#epc .markers { 
			height: 100%;
			right: 0;
			top: 0;
			width: 100%;
		}
		
		#epc .marker { 
			width: 120px; 
			height: 56px; 
			font-size: 24px; 
		}
		

		#epc .legend-top,
		#epc .legend-bottom,
		.epc_colheads { 
			display:none; 
		}

		.epc_grid {
			min-height:auto;
			position: relative;
		}
		
		.epc_cell.mrk {
			position: absolute;
			top: 0px;
			right: -30px;
		}
		
		.epc_cell.ratings { 
			margin-bottom: 20px;
			padding: 0px;
		}
		
		#epc .eu_flag {
			width: 120px;
		}
		
		#epc .region,
		.epc_footer {
			font-size: 1rem;
		}
		
		.epc_footer {
			display: flex;
			display: -webkit-flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			gap: 0px;
			padding-bottom: 10px;
			padding-right: 20px;
		}
		
		.epc_footer-top {
		  	padding:10px 10px 10px 20px;
		}
	}