@charset "utf-8";
/* CSS Document */

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

.header {text-align: center;margin-bottom: 10px;width: 100%;}

.header-box {padding: 15px;font-weight: bold;color: white;}

.header-box.trend {background-color: #6D8793;font-size: 16px;}

.header-box.risk {background-color: #7B5A32;font-size: 16px;}

.header-box.opportunity {background-color: #49898A;font-size: 16px;}

.arrows {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}

.content {}

.column {
flex: 1;
background: #f1f4f4;
padding: 15px;
}

.column.trend {
background: #E3E8EB;
}

.column.risk {
background: #E6DED1;
}

.column.opportunity {
background: #E8EFF0;
}

.item {
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 10px;
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid #000000;
}	

span.grey {
display: block;
background-color: #8E8683;
width: 10px;
height: 10px;
border-radius: 50%;

}

span.yellow {
display: block;
background-color: #DDAB75;
width: 10px;
height: 10px;
border-radius: 50%;

}	

article.short {
max-width: 1360px;
width: 100%;
margin: 0 auto;
}	

.heatmap-box {
background-color: #E3E8EB;
padding: 30px;
}		

.white-box {
background-color: #FFFFFF;
padding: 15px;
}

.risk-table {
width: 100%;
}

.risk-table th {
padding: 10px;
text-align: left;
font-weight: bold;
border: 1px solid #000;
}

.risk-table td {
vertical-align: top;
padding: 15px;
}

.risk-cell {
background: #F2D9CE;
}

.number-circle {
background: white;
color: red;
border: 2px solid red;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
flex-shrink: 0;
}

.risk-text {
line-height: 1.4;
font-size: 14px;
}		

.response-cell {
background: #FEF3EE;			
}	

.risk-cell-orange {
background: #FFE6CB;
}

.number-circle-orange {
background: white;
color: #FEBA12;
border: 2px solid #FEBA12;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
flex-shrink: 0;
}	

.response-cell-orange {
background: #FFF9F1;			
}	

.rr-head {
border: 1px solid #000000;
font-weight: 600!important;
}

.green-box {background-color: #85C577;display: flex;justify-content: center;align-items: center;font-weight: bold;color: #FFFFFF;font-size: 14px;width: 40px;height: 28px;}		

.grey-footnote {
background-color: #E7E7E8;
padding: 11.5px 10px;
}

.blue-box {
background-color: #C7D3D9;
padding: 15px;

}

.ferrous-section {
padding: 45px;
}

.or-head-green {
background-color: #49898A;
color: #FFFFFF!important;
padding: 5px 10px;
width: 100%;
}	

.or-head-green h4 {
margin: 0;
font-size: 14px;
font-weight: 100;
}	

.or-tbl tr td, .or-tbl tr th {
padding: 0px 0px 0px 10px;
}

.or-tbl tr th {
background-color: #F0ECE7!important;
font-weight: 100!important;
}

.or-tbl-head-green {
background-color: #BFD3D5;
color: #49898A;
border-bottom: 1px solid #000000;
}

.switch-green {
color: #49898A!important;
}

.switch-black {
color: #000000!important;
}

.gap-0 {
gap: 0px!important;
}

.kf-tbl {
width: 70%!important;
}

.kf-head {
font-size: 16px!important;
padding: 5px 10px;
}

.or-head-black {
background-color: #231F20;
color: #FFFFFF!important;
padding: 5px 10px;
width: 100%;
}	

.or-head-black h4 {
margin: 0;
font-size: 14px;
font-weight: 100;
}	

.or-tbl tr td, .or-tbl tr th {
padding: 0px 0px 0px 10px;
}

.or-tbl tr th {
background-color: #F0ECE7!important;
font-weight: 100!important;
}

.or-tbl-head-black {
background-color: #D1D2D4;
color: #231F20!important;
border-bottom: 1px solid #000000;
}

.switch-white {
color: #FFFFFF!important;
}

.or-head-blue {
    background-color: #6D8793;
    color: #FFFFFF!important;
    padding: 5px 10px;
    width: 100%;
}	

.or-head-blue h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 100;
}	

.or-tbl tr td, .or-tbl tr th {
    padding: 0px 0px 0px 10px;
}

.or-tbl tr th {
    background-color: #F0ECE7!important;
    font-weight: 100!important;
}

.or-tbl-head-blue {
    background-color: #D1DADF;
    color: #6D8793!important;
    border-bottom: 1px solid #000000;
}

.switch-blue {
    color: #6D8793!important;
}

.col-5 {
flex-basis: 5%;
}

.green-border-box {
border: 1px solid #49898A;
padding: 30px 10px;
margin-top: 75px;
}

.grey-square {
background-color: #6D8793;
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}

.blue-square {
background-color: #00427A;
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}	

.lgrey-square {
background-color: #D1D2D4;
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}	

.switch-green {
color: #367E7F!important;
}

.graph-box {
background-color: #E7E7E8;
padding: 30px 15px;

}





.fin-tbl tr td {
font-size: 14px;
padding: 3px 10px 3px 3px;
line-height: 1.5;
font-weight: 300;
}

.fin-tbl tr th {
font-size: 14px;
padding: 3px 10px 3px 3px;
line-height: 1.5;
font-weight: 600;
background-color: #D1E1E3;
}
.com-tbl th {
color:#4C4D4F; 
font-weight:bold; 
background:#E7E7E8; 
line-height: 1.5; 
padding:3px 10px 3px 3px;
font-size:14px!important;
} 	

table.mp-tbl-1 tr td {
background-color: #DDE8EA!important; 
} 

table.mp-tbl-1 tr td.mp-tbl-head-green {
background-color: #49898A!important;
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}	

table.mp-tbl-2 tr td {
background-color: #F9ECDE!important; 
} 

table.mp-tbl-2 tr td.mp-tbl-head-orange {
background-color: #D1691C!important;
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}			

table.mp-tbl-3 tr td {
background-color: #E6DED1!important; 
} 

table.mp-tbl-3 tr td.mp-tbl-head-brown {
background-color: #856540!important;
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}		

tr.finthindashed td, tr.finthindashed th {
border-bottom: 1px dotted #6D8793;
}

tr.finthingreen td, tr.finthingreen th {
border-bottom: 1px solid #49898A;
}

tr.finthinorange td, tr.finthinorange th {
border-bottom: 1px solid #D1691C;
}

tr.finthinbrown td, tr.finthinbrown th {
border-bottom: 1px solid #856540;
}


tr.finright td, tr.finright th {
border-right: 1px solid #939598;
}

td.finright {
border-right: 1px solid #939598;
}

tr.finthickgreen td, tr.finthickgreen th {
border-bottom: 2px solid #49898A;
}	

tr.finthickblue td, tr.finthickblue th {
border-bottom: 2px solid #6D8793;
}

td.finthinright , th .finthinright {
border-right: 1px solid #000000;
}	

.finheader {
background-color: #DCDDDE!important;
color: #49898A!important;
font-weight: 600!important;
}

td.fintopleftgreen {
border-top: 1px solid #49898A;
border-left: 1px solid #49898A;
}

td.fintoprightgreen {
border-top: 1px solid #49898A;
border-right: 1px solid #49898A;
}	

td.finbotleftgreen {
border-bottom: 1px solid #49898A;
border-left: 1px solid #49898A;
}

td.finbotrightgreen {
border-bottom: 1px solid #49898A;
border-right: 1px solid #49898A;
}	

td.finleftgreen {
border-left: 1px solid #49898A;
}

td.finrightgreen {
border-right: 1px solid #49898A;
}	

.grey-bg {
background-color: #E7E7E8!important;
}

.blue-bg {
background-color: #D6E1F3!important;
}

.green-bg {
background-color: #ECF5E8!important;
}

.orange-bg {
background-color: #F6DAC2!important;
}

table.perf-tbl tr th {
	font-size: clamp(1.0rem, 2vw + 1rem, 1.6rem);
    padding: 3px 10px 3px 3px;
    line-height: 1.5;
    font-weight: 300;
	color: #000000;
}

.img-row img.img-brdr {
	border: 1px solid #000000;
	padding: 5px;
}




section.ferrous div.breadcrumb {
    margin-bottom: 310px;
}

section.plat div.breadcrumb {
    margin-bottom: 310px;
}

section.coal div.breadcrumb {
    margin-bottom: 310px;
}



.tooltip {
  position: relative;
  cursor: help;
  display: table-row; /* keep it a row, but allow positioning */
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 88%;
    left: 18.5%;
    transform: translateX(-50%);
    background-color: #333;
    color: #FFF;
    padding: 6px 8px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.tooltip:hover::after {
  opacity: 1;
}












/*CSS FROM PAGES*/

.committees {
	display:grid; 
	gap:14px; 
	width:100%; 
	margin-top:20px;
}

.committee {
	display:flex; 
	align-items:stretch; 
	border:1px solid #707070; 
	overflow:hidden; 
	background:#fff;
}

.committee-strip {
	flex:0 0 84px; 
	display:flex; 
	align-items:center; 
	justify-content:center;
}

.committee-icon {
	width:44px; 
	height:44px;
}

.committee-content {
	flex:1; 
	padding:16px 20px; 
	display:grid; gap:6px;
}

.committee-title {
	margin:0; 
	font-size:18px; 
	line-height:1.25; 
	font-weight:700; 
	color:#1d1d1f;
}

.committee-desc {
	margin:0; 
	font-size:13px; 
	line-height:1.4; 
	color:#4a4a4a;
}

.dot {
	display:inline-block; 
	width:10px; 
	height:10px; 
	border-radius:50%; 
	background:#000; 
	vertical-align:middle; 
	margin:0 2px;
}

.maroon {
	background:#5b1f1f;
} 

.teal {
	background:#2d6f73;
} 

.navy {
	background:#073e67;
} 

.sand {
	background:#f0c188;
} 

.orange {
	background:#cf7a1a;
} 

.green {
	background: #72876F;
} 

.taupe {
	background:#a09186;
}

.sand .committee-icon, .taupe .committee-icon, .orange .committee-icon {
	filter:invert(12%) sepia(2%) saturate(119%) hue-rotate(166deg) brightness(0) contrast(1000%);
}

.maroon .committee-icon, .teal .committee-icon, .navy .committee-icon, .green .committee-icon {
	filter:invert(100%);
}

.intro-governance {font-size:18px;}

.action-row {
	display:flex;
	gap:clamp(16px,2.5vw,28px);
	box-sizing:border-box;
	align-items:stretch; 
	margin-top:30px; 
	border-bottom:1px solid #707070; 
	padding-bottom:20px;
}
.col-two {
	flex-basis:50%;
}
.action-row>.col-two:first-child {
	display:flex;
	flex-direction:column;
	gap:30px;
	padding-right:20px;
	border-right:1px solid #707070;
}

ul.action-list-1 {
	list-style:none;
	margin:0;
	padding:0;
}

ul.action-list-1 li {
	display:flex;
	align-items:center;
	border:1px solid #2f3c46;
	overflow:hidden;
	width:fit-content;
	color:#2f3c46;
}

ul.action-list-1 li .icon-box {
	background-color:#5b7b83;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px;
}

ul.action-list-1 li .icon-box img {
	width:29px;
	height:23px;
	display:block;}

ul.action-list-1 li span {
	padding:5px 15px;
	font-size: 20px;
	font-weight:600;}


ul.action-list-2 {
	list-style:none;
	margin:0;
	padding:0;
}

ul.action-list-2 li {
	display:flex;
	align-items:center;
	border:1px solid #2f3c46;
	overflow:hidden;
	width:fit-content;
	color:#2f3c46;
}

ul.action-list-2 li .icon-box {
	background-color:#BEAD9B;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px;
}

ul.action-list-2 li .icon-box img {
	width:26px;
	height:25px;
	display:block;
}

ul.action-list-2 li span {
	padding:5px 15px;
	font-size: 20px;
	font-weight:600;
}

ul.action-list-3 {
	list-style:none;
	margin:0;
	padding:0;
}

ul.action-list-3 li {
	display:flex;
	align-items:center;
	border:1px solid #2f3c46;
	overflow:hidden;
	width:fit-content;
	color:#2f3c46;
}

ul.action-list-3 li .icon-box {
	background-color:#49898A;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px;
}

ul.action-list-3 li .icon-box img {
	width:35px;
	height:24px;
	display:block;
}

ul.action-list-3 li span {
	padding:5px 15px;
	font-size: 20px;
	font-weight:600;
}

.greybox {
	background:#D5DDE0;
	padding:10px;
	margin-top:auto;
}

.greybox p {
	font-size:16px;
	margin-bottom:0;
}

.beigebox {
	background:#EEE9E3;
	padding: 10px;
	margin-top:auto;
}

.beigebox p {
	font-size:16px;
	margin-bottom:0;
}

.greenbox {
	background:#C8DCE0;
	padding: 10px;
	margin-top:auto;
}

.greenbox p {
	font-size:16px;
	margin-bottom:0;
}
	
.bg-blue.switch-white {
    background: #6D8793;
    color: #fff;
    padding: 5px;
    text-align: center;
    margin-top: 10px;
    font-size: 18px;
}	
	
	
.king-btn {
	display: inline-flex;
	align-items: center;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0; 
	margin-top:30px;
}

.king-btn .left {
	background: #c76d2a;
	color: #000;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 15px;
}

.king-btn .middle {
	border: 1px solid #000;
	background: #fff;
	color: #000;
	font-weight: bold;
	font-size: 14px;
	padding: 9px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.king-btn .circle {
	width: 36px;
	height: 36px;
	border: 1px solid #000;
	border-radius: 50%;
	margin-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.king-btn .arrow {
	font-size: 18px;
	transition: transform 0.3s ease;
}

.king-btn:hover .circle {
	transform: translateX(10px);
}

.king-btn:hover .arrow {
	transform: rotate(180deg);
} 

.switch-green {
	color:#367E7F;
}


.switch-darkgrey {
	color:#6C8792;
}

/*CSS FROM PAGES*/

@media (max-width: 900px) {
    .kf-tbl {
        width: 100% !important;
    }
}

	@media (max-width: 600px) {
	.ferrous-section {
    padding: 45px 10px;
}
}