:root {
	--highlight-title-bkcolor: #00CC99;
	--highlight-subtitle-bkcolor: #5A9AD8;
	--highlight-ipad-ratio: 0.67;	
	--highlight-mobile-ratio: 0.4;
	--highlight-grid-template-columns : 30px ;
	
	--highlight-grid-template-rows : 38px 46px 155px 55px 28px 28px;
	
	--highlight-grid-template-ipad-rows : 25px 31px 103px 37px 19px 19px;
	
	--highlight-grid-template-mobile-rows : 15px 18px 62px 22px 11px 11px;
				
	--highlight-title-font: normal 24px "Arial", sans-serif,"Microsoft JhengHei";
	--highlight-title-fontsize: 24px; 	
	--highlight-title2-fontsize: 16px; 	
	--highlight-subtitle-font : normal 18px "Arial", sans-serif,"Microsoft JhengHei";
	--highlight-subtitle-fontsize : 18px;
	--highlight-subtitle2-fontsize : 11px;
	--highlight-imagedesc-font: normal 20px "Arial", sans-serif,"Microsoft JhengHei";
	--highlight-imagedesc-fontsize: 16px;
	--highlight-unit-font-chinese: normal 26px "Arial", sans-serif,"Microsoft JhengHei";
	--highlight-unit-font: normal 26px "Arial", sans-serif,"Microsoft JhengHei";
	--highlight-unit-fontsize-chinese: 26px;
	--highlight-unit-fontsize: 26px;
	
	--highlight-imagedesc2-fontsize: 11px;
    --highlight-mdtvalue-font: normal 32px Calibri, sans-serif,"Microsoft JhengHei";
	--highlight-mdtvalue-fontsize: 32px ;
	
	--highlight-mdtvalue2-font: normal 21px Calibri, sans-serif,"Microsoft JhengHei";
	--highlight-mdtvalue2-fontsize: 21px ;
		
	
	--highlight-sdvalue-font: normal 16px Arial, sans-serif,"Microsoft JhengHei";
	--highlight-sdvalue-fontsize: 16px;
	--highlight-sdvalue2-fontsize: 11px;
		
	--highlight-title-fontcolor: black;
	--highlight-subtitle-fontcolor : black;
	--highlight-imagedesc-fontcolor : black;
    --highlight-mdtvalue-fontcolor: black;
	--highlight-sdvalue-fontcolor : black;	
	
	--highlight-title-border-radius	: 10px;
	--highlight-subtitle-border-radius	: 0px 0px 15px 15px;
	
/* 	--highlight-mainbar-color2: #01B2A0;
	--highlight-mainleft-color2: #B5E7DB;
	--highlight-mainright-color2: #C7EFE4;
	
	--highlight-mainbar-color3: #01C6B4;
	--highlight-mainleft-color3: #C7EFE4;
	--highlight-mainright-color3: #DAF3ED;
	
	--highlight-mainbar-color4: #47D7C0;
	--highlight-mainleft-color4: #DAF3ED;
	--highlight-mainright-color4: #EFF9F8;
	
	--highlight-mainbar-color5: #8CE0D1;
	--highlight-mainleft-color5: #EFF9F8;
	--highlight-mainright-color5: #FFFFFF; */
	
	--highlight-mainbar-color1: #E573AA;
	--highlight-mainleft-color1: #F7C2DC;
	--highlight-mainright-color1: #FCE4F0;
	
	--highlight-mainbar-color2: #7137AB;
	--highlight-mainleft-color2: #CDB4E6;
	--highlight-mainright-color2: #EBE1FF;
	
	--highlight-mainbar-color3: #EFA92C;
	--highlight-mainleft-color3: #F8DCAA;
	--highlight-mainright-color3: #FCEED4;
	
	
	--highlight-mainbar-color4: #6094CF;
	--highlight-mainleft-color4: #DFE9F5;
	--highlight-mainright-color4: #F0F5FA;
	
	--highlight-mainbar-color5: #F29155;
	--highlight-mainleft-color5: #FAD5BE;
	--highlight-mainright-color5: #FCE6D8;
	
	--highlight-mainbar-color6: #70B62C;
	--highlight-mainleft-color6: #BEE696;
	--highlight-mainright-color6: #E7F1E3; 
	
	--highlight-mainbar-color7: #E75154;
	--highlight-mainleft-color7: #F6BCBD;
	--highlight-mainright-color7: #FADADB; 
	
	--highlight-mainbar-color8: #63C4DD;
	--highlight-mainleft-color8: #CFEDF5;
	--highlight-mainright-color8: #EBF8FB; 
	
	--highlight-mainbar-color9: #A88879;
	--highlight-mainleft-color9: #E1D6D1;
	--highlight-mainright-color9: #EBE4E1; 
	
	
} 

.highlight.title-b {
	grid-row-start: 1;
   grid-row-end: 3;
   grid-column-start: 1;   
   grid-column-end: 13;
   
	display: flex;
   flex-direction: column; 
   justify-content: start;
   
}

.highlight.title {
   
   /* grid-row-start: 1;
   grid-row-end: 2;
   grid-column-start: 1;   
   grid-column-end: 13; */
   color : var(--highlight-title-fontcolor) ; 
/* 	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */	
   text-align : left ;
   
   font : var(--highlight-title-font);
   margin-left : 20px;  
   margin-top : 0.3em; 	
   position:relative;
   /* top: 20%; */
}

.highlight.subtitle {

   
 /*   grid-row-start: 2;
   grid-row-end: 3;
   grid-column-start: 1;   
   grid-column-end: 13; */
   text-align : left ;
    align-content: center;
    font: var(--highlight-subtitle-font);   
	color : var(--highlight-subtitle-fontcolor) ;   
   margin-left : 20px;	
   margin-top: 0.2em;   
   /* top: -22%; */
   position:relative;
}
 
.highlight.singleImage {

   
   grid-row-start: 3;
   grid-row-end: 4;
   grid-column-start: 3;   
   grid-column-end: 11;
   text-align : center ;
   align-self : center;

}

.highlight.image1 {

   
   grid-row-start: 3;
   grid-row-end: 4;
   grid-column-start: 3;   
   grid-column-end: 6;
   text-align : center ;
   align-self : center;
      
}
.highlight.image2 {

   
   grid-row-start: 3;
   grid-row-end: 4;
   grid-column-start: 8;   
   grid-column-end: 11;   
   
   text-align : center ;
   align-self : center;
      
}


.highlight.singleValue {

   
   grid-row-start: 4;
   grid-row-end: 5;
   grid-column-start: 3;   
   grid-column-end: 11;
   text-align : center ;
   align-content: center;
   
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-mdtvalue-font);
   position: relative;
   top:20%;
}

.highlight.value1 {

   display: flex; 	
   grid-row-start: 4;
   grid-row-end: 5;
   grid-column-start: 1;   
   grid-column-end: 7;
   
   text-align : center ;
   justify-content: center;
   align-items: center;   
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-mdtvalue-font);
   position: relative;
   top:20%;
   
      
}
.highlight.value2 {
display: flex; 	
   grid-row-start: 4;
   grid-row-end: 5;
   grid-column-start: 7;   
   grid-column-end: 13;
   text-align : center ;
   justify-content: center;
   align-items: center;   
   
   font: var(--highlight-mdtvalue-font);
   color: var(--highlight-mdtvalue-fontcolor);
   position: relative;
   top:20%;
      
}


.highlight.singleImagedesc {

   
   grid-row-start: 5;
   grid-row-end: 6;
   grid-column-start: 3;
   grid-column-end: 11;
   text-align : center ;
   align-content: center;
   color: var(--highlight-imagedesc-fontcolor); 
   font: var(--highlight-imagedesc-font);
     
}

.highlight.image1desc {

   
   grid-row-start: 5;
   grid-row-end: 6;
   grid-column-start: 1;
   grid-column-end: 7;
   text-align : center ;
   align-content: center;
   color: var(--highlight-imagedesc-fontcolor); 
   font: var(--highlight-imagedesc-font);
     word-wrap: break-word;      /* Allows long words to be broken */
  overflow-wrap: break-word;  /* Modern alternative for better browser support */
  white-space: normal; 
   line-height:1.0;
}
.highlight.image2desc {

   
   grid-row-start: 5;
   grid-row-end: 6;
   grid-column-start: 7;
   grid-column-end: 13;
     word-wrap: break-word;      /* Allows long words to be broken */
  overflow-wrap: break-word;  /* Modern alternative for better browser support */
  white-space: normal; 
   	text-align : center ;
   align-content: center;
   color: var(--highlight-imagedesc-fontcolor); 
   font: var(--highlight-imagedesc-font);
   line-height:1.0;
}


.highlight.singleImage-b {

   grid-column-start: 1;   
   grid-column-end: 8;
   grid-row-start: 3;
   grid-row-end: 6;   
   text-align : center ;
   align-self : center;

}

.highlight.rightContent-b {

   grid-column-start: 8;   
   grid-column-end: 13;
   grid-row-start: 3;
   grid-row-end: 6;   
   text-align : center ;
   
   display: flex;
   flex-direction: column; 
   justify-content: center;
   align-items: center; 
}

.highlight.gridItemGroup-b {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 12px 0; 
}

.highlight.singleValuePre-b {

   
   text-align : center ;
   align-content: center;
   line-height: 0.1em;
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-title-font);
   position: relative;
   
}

.highlight.singleValue-b {

   
   text-align : center ;
   align-content: center;
   
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-mdtvalue-font);
   position: relative;
   
}

.highlight.singleImagedesc-b {
   
   
   
   
   text-align : center ;
   align-self: center;
   align-content: center;
   color: var(--highlight-imagedesc-fontcolor); 
   font: var(--highlight-imagedesc-font);
   position: relative;
   
   
   justify-content: center;
   
}

.highlight.value1Pre-b {

   
   text-align : center ;
   align-content: center;
   
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-title-font);
   position: relative;
   
}

.highlight.value1-b {

   
   
   
   text-align : center ;
   justify-content: center;
   align-items: center;   
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-mdtvalue-font);
   position: relative;
   
   
      
}

.highlight.image1desc-b {

   
   text-align : center ;
   align-content: center;
   color: var(--highlight-imagedesc-fontcolor); 
   font: var(--highlight-imagedesc-font);
       
   position: relative;
   
   
}

.highlight.value2Pre-b {

 
   text-align : center ;
   align-content: center;   
   color: var(--highlight-mdtvalue-fontcolor); 
   font: var(--highlight-title-font);
   position: relative;
 
}

.highlight.value2-b {
   
   text-align : center ;
   justify-content: center;
   align-items: center;   
   
   font: var(--highlight-mdtvalue-font);
   color: var(--highlight-mdtvalue-fontcolor);
   position: relative;
      
}


.highlight.image2desc-b {
  

   text-align : center ;
   align-content: center;
   color: var(--highlight-imagedesc-fontcolor); 
   font: var(--highlight-imagedesc-font);

   position: relative;

}


.highlight.sd {

   
   
   
   align-content: center;   
   font: var(--highlight-sdvalue-font);
   color : var(--highlight-sdvalue-fontcolor);
   margin-left: 20px;
   margin-right: 20px;
   
}

/* Default (Chinese) */
.highlight.value1-b span.unit-text,
.highlight.value2-b span.unit-text,
.highlight.singleValue-b span.unit-text {
  font: var(--highlight-unit-font-chinese);
}

/* Override for English */
html[lang="en"] .highlight.value1-b span.unit-text,
html[lang="en"] .highlight.value2-b span.unit-text,
html[lang="en"] .highlight.singleValue-b span.unit-text {
  font: var(--highlight-unit-font);
}



.container-area {
  display: grid;  
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  
  overflow: hidden;
  
}


.grid-item  {
	position: relative;     
  
	justify-self : center ;
 
}

.hl_1col > .grid-item {
	width:100%;
	
}
 
.hl_1col > .grid-item::before,
.hl_1col > .grid-item::after {
  content: "";
  position: absolute;
  width: 50px; /* Border thickness */
  height: 10%; /* Only covers 30% of the element height */
  background-color: #c4dce8; /* Border color */
}

.hl_1col > .grid-item::before {
	
  left: -100%; /* Positions on the left */
  top: 0%; /* Starts at 10% down from the top */

}

.hl_1col > .grid-item::before {
	
  left: -10%; /* Positions on the left */
  top: -1%; /* Starts at 10% down from the top */
  width: 10%; /* Border thickness */
}


.hl_1col > .grid-item::after {
  
  right: 100%; /* Positions on the right */
  top: 0%; /* Starts at 10% down from the top */	
	
}
 
 .hl_1col > .grid-item::after {
	
  right: -10%; /* Positions on the left */
  top: -1%; /* Starts at 10% down from the top */
  width: 10%; /* Border thickness */
}
 
 
.hl_1col .singleImage-b {
  margin-left: 3rem;   /* moves right relative to root font size */
}

.hl_1col .rightContent-b {
  margin-right: 3rem;  /* moves left relative to root font size */
}


.grid-item::before,
.grid-item::after {
  content: "";
  position: absolute;
  width: 10px; /* Border thickness */
  height: 8%; /* Only covers 30% of the element height */
  background-color: #c4dce8; /* Border color */
}

.grid-item::before {
  left: -10px; /* Positions on the left */
  top: 0%; /* Starts at 10% down from the top */
}

.grid-item::after {
  right: -10px; /* Positions on the right */
  top: 0%; /* Starts at 10% down from the top */
}

 
 .highlight.singleImage img,.highlight.image1 img, .highlight.image2 img{
	
	width: 100%;    /* Makes the image take full width of the grid cell */
	height: 100%;
	object-fit: contain;
	max-height: 200px;	
		
}
 
 .highlight.singleImage-b img,.highlight.image1-b img, .highlight.image2-b img{
	
	width: 100%;    /* Makes the image take full width of the grid cell */
	height: 100%;
	object-fit: contain;
	max-height: 250px;	
		
} 
 
 .highlight-generic-grid img{
	border: none; 
	outline: none!important;
	display: block; /* removes inline spacing */ 

 
}
.highlight-generic-grid {
   display : grid;  
   grid-template-rows : var(--highlight-grid-template-rows);
   grid-template-columns : repeat(12, calc(100% / 12));
   gap : 0px;
   width: 100%;
   max-height:100%;
  
 }   


 [class*="-grid"] {
	background-color: white;
	
 }


 
.selectbox {
	display:none;
	
}

 p {
	
	margin-bottom: 0;
}

.highlight.header {
	background-color : #c4dce8;
	height: auto;
}

.highlight.header p{
	margin-left:15px;
	
}

.highlight.title2 {
		
	font:normal 20px Arial, sans-serif;
}

.highlight.content {
	font-family:Arial;
	font-size : 16px;
}

.highlight.more {
	display:flex;
	justify-content : right;
	align-items: center;
	height : auto;
	
}

.highlight_morebutton {
            background-color: #028383; /* Blue background color */
            color: white; /* White text color */
            padding: 8px 20px; /* Padding around the text */
			margin-right: 20px;
            border: none; /* No border */
            border-radius: 5px; /* Rounded corners */
            font-size: 16px; /* Font size */
            font-family: Arial, sans-serif; /* Font family */
            cursor: pointer; /* Pointer cursor on hover */
            text-align: center; /* Center the text */
            display: inline-block; /* Inline-block display */
        }
		
.highlight_morebutton2 {
            background-color: #ffffff; /* Blue background color */
            color: #007D7D; /* White text color */
            padding: 5px 15px 5px 15px; /* Padding around the text */
			margin-right: -10px;
			transform: translateY(-10%);
            border: none; /* No border */
            border-radius: 5px; /* Rounded corners */
            font-size: 18px; /* Font size */
			font-weight: 550;
            font-family: Arial, sans-serif; /* Font family */
            cursor: pointer; /* Pointer cursor on hover */
            text-align: center; /* Center the text */
            display: inline-block; /* Inline-block display */
			white-space:nowrap;
        }		
		
.highlight_morebutton2:hover {		
	        color: black; /* White text color */
}

.highlight.value1-b a:hover,
.highlight.value2-b a:hover,
.highlight.singleValue-b a:hover {
  text-decoration: underline!important;
}


.subject_right_title > * {
	
	cursor: auto;
	
}
#subjectIndex {
	display: block;
    position: fixed;
    left: 10px;
    top: 25%; 
   /*  transform: translateY(-50%);  */
    /* max-width: 320px;*/
	
	width: 290px; 
	max-width : 290px;
         
    background: #ffffff;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
    
    border-radius: 10px;
    font-family: "Arial", sans-serif;
     z-index: 2147483647!important;
    /* transition: all 0.3s ease-in-out; */
	padding:0;
	  pointer-events: auto!important; 
	/*overflow-y: auto; */
}

#contextIndex {
    display: block;
    position: relative;
    max-width: 320px;
    background: #f8f8f8;
    padding: 12px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    border-radius: 10px;
    z-index: 999;
}

.subject-link {
    display: block;    
    color: black;
	width:100%;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
   /*  transition: background 0.2s ease-in-out; */
			
	padding-left: 1rem!important;
	text-indent: 0rem; /* pulls first line back to align left */ 
	margin-right: 0rem;
	white-space: normal!important;
	word-break: keep-all!important;
  overflow-wrap: normal!important;
}

.subject-item {
	padding:5px 5px !important;
	border-radius: 10px;
	
}
.subject-item:hover {
    /* background: rgba(2, 131, 131, 0.1); */
	background: #D9F7F5;
	
}

.context-link {
    display: block;
    /* padding: 6px 10px; */
	padding-left: 3rem!important; /* base indent for all lines */
	text-indent: -1rem; /* pulls first line back to align left */ 
	padding-right:1rem;
	white-space: normal;
	
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.child-level a {
    display: block;
    /* padding: 6px 10px; */
	padding-left: 3rem; /* base indent for all lines */
	text-indent: -1.2rem; /* pulls first line back to align left */ 
	padding-right:1rem;
	white-space: normal;
	
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.child-level {
	background-color:#F5FBFB;
	border-radius: 6px;
	color:#038383;
}
.child-level a:hover {
    /* background: rgba(2, 131, 131, 0.1); */
	background: #D7F7F5;
	border-radius: 10px;
	color:#006666!important;
}

.child-level a::before {
    content: "• ";
    color: black;
    font-size: 18px;
    margin-right: 8px;
}

.child-level a.active-link::before {
 
    color: #006666;
 
}

.child-level:hover a::before {
 
    color: #006666;
 
}

.subject_index_selected.subject-item { 
	background-color: #038383;	
	border-radius: 6px;
}
.subject_index_selected.subject-item .subject-link{ 
	color: white;
}
.subject-item.subject_index_selected .material-icons::before { 
	color: white;
}

.subject-item a[data-bs-toggle="collapse"] i::before { 
	
	color: black; /* set arrow color */ 

} 

.subject-item:not(.subject_index_selected):hover .subject-link {
    color: #006666; /* change text color on hover */
}

.subject-item:not(.subject_index_selected):hover .highlight-subject-btn i::before {
    color: #006666; /* change icon color on hover */
}

.subject-item:not(.subject_index_selected):has(.highlight-subject-btn[aria-expanded="true"])
 { 
	background-color: #F5FBFB; /* applies to the entire subject-item */ 
 }

.active-link {
    /* color: white !important; */
    background: #D7F7F5;
	color: #006666!important;
   /*  border-radius: 5px; */
    /* padding: 6px 10px; */
    transition: all 0.3s ease-in-out;
   /*  box-shadow: 0px 3px 6px rgba(2, 131, 131, 0.3); */
}

.subject-link.subject_index_selected {
   
    /* 
    border: #d54000;
    border-style: solid;
    padding: 0.3rem; */
	/* pointer-events: none; 
    cursor: default;  */
	  
    background-color: #038383; /* Soft background for contrast */
    color: white; /* Text color matches border */
    font-weight: bold; /* Makes it stand out */
    padding: 0.5rem 0.8rem; /* More balanced spacing */
    border-top-left-radius: 5px; /* Smooth, rounded corners */
	border-bottom-left-radius: 5px; /* Smooth, rounded corners */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
	
}

.subject_index_selected {
	pointer-events: none; 
    cursor: default;  
}

.highlight-subject-btn {
	pointer-events: auto; 
    cursor: default;  	
}


.hamburger {
	 
	 display:none;
	 
	 
 }


/* Scroll arrows */
.scroll-arrow {
  position: fixed;        /* fixed relative to viewport */
  left: 280px;            /* place just outside the sidebar */
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  cursor: pointer;
  z-index: 1100;
  padding: 5px;
  border-radius: 3px;
}

.scroll-arrow.up {
  top: 10px;
}

.scroll-arrow.down {
  bottom: 10px;
}

.menutopbar {
	
	top: 0;
	z-index: 100000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 0;
	padding-left : 0 ;
	 
}

.hl-separator {
  border: none;
  border-bottom: 1px solid #5b4848;
  margin-top: 0px;
  margin-bottom: 3px;
}


.closemenu {
  	
  display: block; 
  text-align: right; /* align inline content to the right */
  width: 100%;
  padding-right: 6px;
  font-size: 1.2rem;
}

.contextmenuclosebtn {
	cursor: pointer;
	
}

.menulowerpart {
	max-height: 60vh;
	 overflow-y: auto; 
	
}


.semenu-toggle {
  position: fixed;  
  z-index: 200000;
  background: #ff4b37;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 18px;
  height: 30px;
  width: 40px;
}

.semenu-toggle.docked i{
	transform: translateX(-50%);
}
.semenu-toggle.docked {
	
  margin-left: 2px;	  
  position: fixed;
  top: 50%;              
  left: 0;        
  transform: translateY(-50%);  
  width: 30px;            /* keep compact */
  height: 60px;             
  border-radius: 0 40px 40px 0;   
  z-index: 200000;
  font-size: 24px;
}

/* Hide sidebar and enable hamburger at ≤ 1180px */
@media screen and (max-width: 820px) {
    #subjectIndex {
        position: fixed;
        right: 10px;
        /* top: 0; */
        width: 120vw!important; /* Ensures it fits within screen */
         max-width: 95vw; 
         /* height: 60vh;  */
		/*  max-height: calc(100vh - env(safe-area-inset-bottom) - 60px); */
        overflow-y: auto; 
        display: none; /* Hidden initially */
        background: #ffffff;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        
        border-radius: 6px;
        transition: all 0.3s ease-in-out;
		pointer-events: auto!important;
		overflow-y: auto; 
    }

	.semenu-toggle.docked {
		width: 20px;            /* keep compact */
		height: 40px; 
		font-size: 18px;
	}
	body.panel-open {
	 overflow: hidden;   /* disables background scroll */
	
	}

    /* .hamburger {
		display:block;
        position: fixed;
		width:auto;
		height:auto;
		max-width:35px;		
        top: 20%;
        right: 3%;
        font-size: 22px;
        padding: 0px 5px 0px 5px;
        background: white;
        color: #028383;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        border-radius: 5px;
        z-index: 100000;
    } */
		
}

/* Adjust position when scrolling */
@media screen and (max-width: 1180px) {
    .hamburger.fixed {
		
        top: 10px;
    }
}

/* Responsive Styles - Tablet (768px and below) */
@media screen and (max-width: 1024px) {
  
  .hl_3col .highlight-generic-grid {
   display : grid;  
   grid-template-rows : var(--highlight-grid-template-ipad-rows);
   grid-template-columns : repeat(12, calc(100% / 12));
   gap : 0px;
   width: 100%;
   max-height:100%;
  
   }

	.hl_1col > .grid-item {
		width:100%;
		
	}
 
	 .hl_1col .singleImage-b {
	  margin-left: 0rem;   /* moves right relative to root font size */
	}

	.hl_1col .rightContent-b {
	  margin-right: 0rem;  /* moves left relative to root font size */
	}

 
	 .highlight.singleImage img,.highlight.image1 img, .highlight.image2 img{
	
	  width: 100%;    /* Makes the image take full width of the grid cell */
	height: 100%;
	object-fit: contain;
	max-height: 140px;
		
	}

    .highlight.singleImage-b img,.highlight.image1-b img, .highlight.image2-b img{
	
	  width: 100%;    /* Makes the image take full width of the grid cell */
	height: 100%;
	object-fit: contain;
	max-height: 140px;
		
	}

	.highlight.title {
    font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-title-fontsize));
   }
   
   .highlight.subtitle {
   
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-subtitle-fontsize));
   }
   
   .highlight.image1desc,.highlight.image2desc,.highlight.singleImagedesc {
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-imagedesc-fontsize));
   }
   
   .highlight.image1desc-b,.highlight.image2desc-b,.highlight.singleImagedesc-b {
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-imagedesc-fontsize));
   }
     
   
   .highlight.value1,.highlight.value2,.highlight.singleValue {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-mdtvalue-fontsize));
   }
   
   .highlight.singleValuePre-b,.highlight.value1Pre-b,.highlight.value2Pre-b {
   
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-title-fontsize));
   }
   
   .highlight.value1-b,.highlight.value2-b,.highlight.singleValue-b {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-mdtvalue-fontsize));
   }
	.highlight.sd {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-sdvalue-fontsize));
	}
  
	/* Default (Chinese) */
	.highlight.value1-b span.unit-text,
	.highlight.value2-b span.unit-text,
	.highlight.singleValue-b span.unit-text {
	  
	  	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-unit-fontsize-chinese));
	}

	/* Override for English */
	html[lang="en"] .highlight.value1-b span.unit-text,
	html[lang="en"] .highlight.value2-b span.unit-text,
	html[lang="en"] .highlight.singleValue-b span.unit-text {	  
	  	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-unit-fontsize));
	}	


  .hl-maingrid-container {
    grid-template-columns: repeat(2, 1fr)!important; /* only 2 columns */
  }
  .hl-maingrid {
    width: auto;          /* let grid cell control width */
    height: auto;         /* allow flexible height */
    padding: 12px;        /* smaller padding */
  }
  .grid-title {
    font-size: 18px;      /* scale down title */
  }
  .grid-icons img {
    max-width: 100%;
    height: auto;
  }
	.hl-button-container {
     padding: 0 0px;
    max-width: 750px!important;
	}
}
@media print {
  @page {
    size: A4 portrait;
    margin: 0.5cm;
  }
  body {
    zoom: 95%; /* Chrome/Edge support */
	
  }

	.highlight.singleImage-b {
		gap:0px;
		Border:0px;
		Padding:0;
		
	}
	
	.highlight img {
		gap:0px;
		Border:0px;
		Padding:0;
		
	}

   .grid-title {
    position: static !important;   
    transform: none !important;    
    display: block !important;     
    
    font-weight: bold !important;
    color: black !important;
    margin: 0.5em 0 !important;
    max-width: 67.4% !important; 
	width: auto!important;	
    white-space: normal !important;
    overflow-wrap: break-word !important;
	word-break: break-word !important; /* extra safeguard */
  }
 
 
 
  .hl_3col .highlight-generic-grid {
   display : grid;  
   grid-template-rows : var(--highlight-grid-template-ipad-rows);
   grid-template-columns : repeat(12, calc(100% / 12));
   gap : 0px;
   width: 100%;
   max-height:100%;
  
   }

	.hl_1col > .grid-item {
		width:100%;
		
	}
 
	 .hl_1col .singleImage-b {
	  margin-left: 0rem;   /* moves right relative to root font size */
	}

	.hl_1col .rightContent-b {
	  margin-right: 0rem;  /* moves left relative to root font size */
	}

 
	 .highlight.singleImage img,.highlight.image1 img, .highlight.image2 img{
	
	  width: 100%;    /* Makes the image take full width of the grid cell */
	height: 100%;
	object-fit: contain;
	max-height: 140px;
		
	}

    .highlight.singleImage-b img,.highlight.image1-b img, .highlight.image2-b img{
	
	  width: 100%;    /* Makes the image take full width of the grid cell */
	height: 100%;
	object-fit: contain;
	max-height: 140px;
		
	}

	.highlight.title {
    font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-title-fontsize));
   }
   
   .highlight.subtitle {
   
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-subtitle-fontsize));
   }
   
   .highlight.image1desc,.highlight.image2desc,.highlight.singleImagedesc {
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-imagedesc-fontsize));
   }
   
   .highlight.image1desc-b,.highlight.image2desc-b,.highlight.singleImagedesc-b {
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-imagedesc-fontsize));
   }
     
   
   .highlight.value1,.highlight.value2,.highlight.singleValue {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-mdtvalue-fontsize));
   }
   
   .highlight.singleValuePre-b,.highlight.value1Pre-b,.highlight.value2Pre-b {
   
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-title-fontsize));
   }
   
   .highlight.value1-b,.highlight.value2-b,.highlight.singleValue-b {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-mdtvalue-fontsize));
   }
	.highlight.sd {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-sdvalue-fontsize));
	}
  
	/* Default (Chinese) */
	.highlight.value1-b span.unit-text,
	.highlight.value2-b span.unit-text,
	.highlight.singleValue-b span.unit-text {
	  
	  	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-unit-fontsize-chinese));
	}

	/* Override for English */
	html[lang="en"] .highlight.value1-b span.unit-text,
	html[lang="en"] .highlight.value2-b span.unit-text,
	html[lang="en"] .highlight.singleValue-b span.unit-text {	  
	  	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-unit-fontsize));
	}	


  .hl-maingrid-container {
    grid-template-columns: repeat(2, 1fr)!important; /* only 2 columns */
  }
  .hl-maingrid {
    width: auto;          /* let grid cell control width */
    height: auto;         /* allow flexible height */
    padding: 12px;        /* smaller padding */
  }
  .grid-title {
    font-size: 18px;      /* scale down title */
  }
  .grid-icons img {
    max-width: 100%;
    height: auto;
  }
	.hl-button-container {
     padding: 0 0px;
    max-width: 750px!important;
	}
}
 @media screen and (max-width: 820px) {
	 /* .top_section.box_center {
		 display: contents!important;
		 
	 } */
 }


 @media screen and (max-width: 768px) {
    /* font setting for diff viewport size   */
   .highlight.title {
    font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-title-fontsize));
   }
   
   .highlight.subtitle {
   
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-subtitle-fontsize));
   }
   
   .highlight.image1desc,.highlight.image2desc {
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-imagedesc-fontsize));
   }
    
	.highlight.image1desc-b,.highlight.image2desc-b {
	font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-imagedesc-fontsize));
   }
   
   .highlight.value1,.highlight.value2 {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-mdtvalue-fontsize));
   }
   .highlight.value1-b,.highlight.value2-b {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-mdtvalue-fontsize));
   }
	.highlight.sd {
		font-size : calc(var(--highlight-ipad-ratio) * var(--highlight-sdvalue-fontsize));
	}
}

@media (max-width: 600px) {
  .highlight.title {
    font-size: 14px;        /* smaller font for mobile */
  }
  .highlight.subtitle {
    margin-bottom: 10px;    /* extra spacing */
  }
  
  .hl-maingrid-container {
    grid-template-columns: 1fr!important; /* single column */
  }
}

@media screen and (max-width: 480px) {
    
/*    .highlight.title {
     font-size : calc(var(--highlight-mobile-ratio) * var(--highlight-title-fontsize));
   }
   
   .highlight.subtitle {
   
	font-size : calc(var(--highlight-mobile-ratio) * var(--highlight-subtitle-fontsize));
   }
   
   .highlight.image1desc,.highlight.image2desc {
	font-size : calc(var(--highlight-mobile-ratio) * var(--highlight-imagedesc-fontsize));
   }
     
   
   .highlight.value1,.highlight.value2 {
		font-size : calc(var(--highlight-mobile-ratio) * var(--highlight-mdtvalue-fontsize));
   }
   
	.highlight.sd {
		font-size : calc(var(--highlight-mobile-ratio) * var(--highlight-sdvalue-fontsize));
	}
       */

	
	 .highlight-generic-grid {
	   display : grid;  
	   grid-template-rows : var(--highlight-grid-template-ipad-rows);
	   grid-template-columns : repeat(12, calc(100% / 12));
	   gap : 0px;
	   width: 100%;
	   max-height:100%;
	  
	   }
	
	 .highlight.singleImage img,.highlight.image1 img, .highlight.image2 img{
	
		width: 100%;    /* Makes the image take full width of the grid cell */
		height: 100%;
		object-fit: contain;
		max-height: 120px;
		
 	}
	   
   	 .container-area {
        display: flex!important;
        flex-direction: column!important; /* Stack items vertically */
        align-items: center!important; /* Center the items */
        gap: 20px; /* Maintain spacing */
    }
    
    .grid-item {
        width: 100%; /* Ensure full width */
    }
	
	.hl-grid-footer {
		/* display:block; */
		
	}
	
  }

.hl-maingrid-container {
  position:relative;
  display: grid !important;
  /*grid-template-columns: repeat(2, 1fr); */
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 20px; /* spacing between items */
  column-gap: 20px; /* spacing between items */
  padding: 0px;
  width: fit-content !important;
  margin-bottom:2rem;
}

.hl-maingrid {
  
  display: grid;
  grid-template-areas: "title icons";
  grid-template-columns: 1fr auto;
  align-items: center;  
  position: relative;  
  padding: 16px 20px;
  overflow: hidden;
  /* width: 415px; */
  width: 380px;
  height: 160px;
  font-family: 'Segoe UI', sans-serif;   
  background: linear-gradient(to right,#B5E7DB 65.66%,transparent 65.66%) no-repeat;
  border-top: 20px solid #2e7d6b;
  background-size: 100% 100%;  
  background-color: #C7EFE4; /* right side color */  
}


.grid-icons img {
  max-width: calc(100% - 5px); /* leave space */
  aspect-ratio:1/1;
  object-fit: contain;
}


.hl-maingrid.hl-maingridcolor1 {
  background: linear-gradient(to right,var(--highlight-mainleft-color1) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color1);
  background-color: var(--highlight-mainright-color1); /* right side color */  
}

.hl-maingrid.hl-maingridcolor2 {
  background: linear-gradient(to right,var(--highlight-mainleft-color2) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color2);
  background-color: var(--highlight-mainright-color2); /* right side color */  
}

.hl-maingrid.hl-maingridcolor3 {
    background: linear-gradient(to right,var(--highlight-mainleft-color3) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color3);
  background-color: var(--highlight-mainright-color3); /* right side color */  
}
.hl-maingrid.hl-maingridcolor4 {
    background: linear-gradient(to right,var(--highlight-mainleft-color4) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color4);
  background-color: var(--highlight-mainright-color4); /* right side color */  
}
.hl-maingrid.hl-maingridcolor5 {
    background: linear-gradient(to right,var(--highlight-mainleft-color5) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color5);
  background-color: var(--highlight-mainright-color5); /* right side color */  
}

.hl-maingrid.hl-maingridcolor6 {
    background: linear-gradient(to right,var(--highlight-mainleft-color6) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color6);
  background-color: var(--highlight-mainright-color6); /* right side color */  
}

.hl-maingrid.hl-maingridcolor7 {
    background: linear-gradient(to right,var(--highlight-mainleft-color7) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color7);
  background-color: var(--highlight-mainright-color7); /* right side color */  
}
.hl-maingrid.hl-maingridcolor8 {
    background: linear-gradient(to right,var(--highlight-mainleft-color8) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color8);
  background-color: var(--highlight-mainright-color8); /* right side color */  
}
.hl-maingrid.hl-maingridcolor9 {
    background: linear-gradient(to right,var(--highlight-mainleft-color9) 65.66%,transparent 65.66%) no-repeat;
  border-top-color: var(--highlight-mainbar-color9);
  background-color: var(--highlight-mainright-color9); /* right side color */  
}
.grid-title {
	 position: absolute;
	 display : flex;
	 top: 50%; /* Position at 50% from top */
    left: -3%; /* Center horizontally */
    transform: translateY(-50%); /* Adjust to truly center */
	grid-area: title;
  color: black;
  font-size: 30px;
  font-weight: 600;
/*   margin-bottom: 12px; */
   z-index: 3;
   line-height:1em;   
   max-width: 220px;       
  white-space: normal;    
  overflow-wrap: break-word;
    
	vertical-align: middle;
	
  
}

.hl-maingrid.hl-maingridcolor1::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23FCE4F0'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

 .hl-maingrid.hl-maingridcolor2::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23EBE1FF'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor3::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23FCEED4'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor4::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23F0F5FA'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor5::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23FCE6D8'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor6::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23E7F1E3'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor7::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23FADADB'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor8::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23EBF8FB'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.hl-maingrid.hl-maingridcolor9::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(58.66%);
  width: 60px; 
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M30,0 Q -30,50 50,100 L 50 0 Z' fill='%23EBE4E1'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

.grid-icons {
 position:absolute;	
  top: 20px;
  left: 60%;
  gap: 8px;
  align-items: center;
  height:100%;
 display:flex;
  z-index: 3;
}


.main-icon {
 position:relative;	
 max-height: 97%;
 
 width:100%;
 height:100%;
 left: 15px;
 top: -20px;
}

.arrow-icon {
  position:relative;	
  width:100%;
  height:100%;
  
  max-height: 50%; /* adjust size as needed */
  left: 10px;
  top: -10px;
}
.hl-button-container {
  width: 100%;
  max-width: 1145px; /* Same as grid container (2 columns × 415px + 20px gap) */
  margin: 0 auto 0;
  padding: 0 0px; /* Same as hl-maingrid-container */
}
/* Grid structure to align button with right grid items */
.hl-button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto; /* Same as grid items (title + icons) */
  gap: 20px; /* Same as hl-maingrid-container */
  background-color:transparent!important;
}
/* Button styling */
.all-subjects-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: white;
  /* width:190px;
  height: 40px; */
  color: #007D7D;
  border: 1px solid #007D7D;
  border-radius: 25px;
  font-weight: 400;
  vertical-align: middle;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.all-subjects-btn:hover {
  color: black; /* slightly darker on hover */
  
}

/* Responsive: Stack items vertically on mobile */
@media screen and (max-width: 768px) {
  .hl-maingrid-container {
    grid-template-columns: 1fr; /* 1 column layout */
  }
  .hl-maingrid {
  
	  display: grid;
	  grid-template-areas: "title icons";
	  grid-template-columns: 1fr auto;
	  align-items: center;  
	  position: relative;  
	  padding: 10px 13px;
	  overflow: hidden;
	  width: 276px;
	  height: 116px;
	  font-family: 'Segoe UI', sans-serif;   
	  background: linear-gradient(to right,#B5E7DB 65.66%,transparent 65.66%) no-repeat;
	  border-top-width: 14px;
	  background-size: 100% 100%;  
	  background-color: #C7EFE4; /* right side color */  
  }
.grid-title {
		position:absolute;
		font-size: 20px;
		left: 0%;
		max-width:150px;
 }
  .grid-icons {
	 position:absolute;	
	  top: 25px;
	  left: 60%;
	  gap: 8px;
	  align-items: center;
	  height:100%;
	  display:flex;
	  z-index: 3;
  }
	.hl-maingrid.hl-maingridcolor1::before,
    .hl-maingrid.hl-maingridcolor2::before,
	.hl-maingrid.hl-maingridcolor3::before,
	.hl-maingrid.hl-maingridcolor4::before,
	.hl-maingrid.hl-maingridcolor5::before,
	.hl-maingrid.hl-maingridcolor6::before,
	.hl-maingrid.hl-maingridcolor7::before,
	.hl-maingrid.hl-maingridcolor8::before,
	.hl-maingrid.hl-maingridcolor9::before	{
	  
	  width: 45px; 
	  
	}
	
  .hl-button-container {
    padding: 0 0px; /* Matches mobile padding of grid */
    max-width: 276px; /* Single column width */
  }
   .hl-button-grid {
    gap: 10px; /* Adjusted for mobile */
  }
  .all-subjects-btn {
    padding: 8px 16px;
    font-size: 14px;
	
  }
	
}
a [id$="_context"]  {
  color: white;
  text-decoration: none;
}

 a:hover [id$="_context"] {
  text-decoration: underline;
  cursor: pointer;
}

table.hl-table {
	width:100%!important;
	margin : 0px 0px!important;
}
.hl-grid-footnote {
  font-size: 0.6em;          /* smaller text */
  vertical-align: baseline;  /* start from normal line */
  position: relative;        /* allow fine adjustment */
  top: 0.1em;                /* move it up slightly */

}

.hl-grid-footer-content {
	font-size: 0.4em;
	background-color : transparent;
}

.hl-grid-footer {
	font-size: 0.8em;
	background-color : transparent;
}



.hl-footnote-table {
		
	margin-left: 15px;
}

.hl-footnote-table td {
	vertical-align: top;
	padding: 2px;
}

.hl-footnote-table td.footnote-desc {
  padding-left: 1rem;       /* consistent left spacing */
  text-indent: 0;           /* no special indent on first line */
  white-space: normal;      /* allow wrapping */
}


.subject-link:focus,
.highlight-subject-btn:focus,
.semenu-toggle:focus {
  outline: 2px solid #005fcc; /* visible focus */
  outline-offset: 2px;
}

.hl-ct-fnPre {
	vertical-align: top;	
	    white-space: nowrap;

}

@media only screen and (max-width: 433px) {
  table.responsive tr td[data-title="Alternative Statistical Product"],
  table.responsive tr th[data-title="Alternative Statistical Product"] {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-height: 5em;   /* ensures at least double the normal row height */
    line-height: 1.5;  /* improves readability */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Apply styles when viewport height landscape mobile*/
@media only screen and  (min-height: 360px) and (max-height:490px ) {
	#subjectIndex { 
		/*top: 0;
		 max-height: calc(100vh - env(safe-area-inset-bottom) - 60px); */
		
		overflow-y: auto;
	}
}
#overview_section h2.h5 {
  margin-right: 5px;
}

#overview_section .subject_right_title {
  display: flex;
  align-items: center; /* vertical centering */
  justify-content: space-between; /* keep h5 on left, button on right */
}

#overview_section .subject_right_title .highlight_morebutton2 {
  margin: 0; /* reset margins if needed */
}