dailyHTML {
	HEIGHT: 100% 
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4; /*menu up down*/
  color: #333; /* very dark gray, almost black but softer than pure black (#000000). */
  background-color: #fafafa;  /* is a very light gray, almost white. */  
}

@page {
  margin-bottom: 40px;
}

ul, ol {
 color:red:
    line-height: 22; /* Sets spacing between list items */
 
	margin-left:0.1rem; margin-top:1rem;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  background-color: rgba(255, 0, 0, 0.7); /* semi-transparent black color (0, 0, 0) black, and 0.5 sets the alpha value to 50%, meaning the color is 50% opaque and 50% transparent*/
}

#myBtn:hover {
  background-color: #555;
}

a {
    text-decoration: none;
	COLOR: #03c; 	
/*    color: #000; */
}

a:hover {
    text-decoration: underline;
}

A:link {
	COLOR: #03c; 
}
A.noul {
	TEXT-DECORATION: none
}
A.red {
	COLOR: #c00
}
IMG {
	BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
FORM {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H1 {
	PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
}
H2 {
	PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
}
H3 {
	PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
}
H4 {
	PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
}
H5 {
	PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
}
H6 {
	PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 0px; COLOR: #000; PADDING-TOP: 0px
}

/* Base font size: 16px (1rem) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;   /* keep headings bold but not too heavy */
  line-height: 1.2;   /* tighter spacing for headings */
  margin: 0.2em 0;    /* consistent spacing */
}


.standardText {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.normalText {
	FONT-SIZE: 16px
}
.bbgcolor {
    BACKGROUND-COLOR: red 
}

/* Base styles */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Desktop / Default */
h1 { font-size: 2.25rem; line-height: 1.3; }  /* ~36px */
h2 { font-size: 1.75rem; line-height: 1.35; } /* ~28px */
h3 { font-size: 1.5rem;  line-height: 1.35; } /* ~24px */
h4 { font-size: 1.25rem; line-height: 1.4; }  /* ~20px */
h5 { font-size: 1.1rem;  line-height: 1.4; }  /* ~18px */
h6 { font-size: 1rem;    line-height: 1.4; }  /* ~16px */

h1 span { color: #b30000; font-weight: 400; }
h2 span { color: #b30000; font-weight: 400; }
h3 span { color: #b30000; font-weight: 400; }
h4 span { color: #b30000; font-weight: 400; }

/* Use consistent REM units for all text classes */
.largeText {
  font-size: 0.875rem; /* 14px equivalent */
  margin-bottom: 3px;
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xlargeText {
  font-size: 1.15rem; /* ~18.4px */
  margin-bottom: 3px;
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxlargeText {
  font-size: 1.1875rem; /* 19px equivalent */
  margin-bottom: 3px;
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxxlargeText {
  font-size: 1.3125rem; /* 21px equivalent */
  margin-bottom: 3px;
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

p,
.xlargeText {
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 400;
}

/* Mobile Scaling (screens ≤ 768px) */
@media (max-width: 768px) {
  /* Remove the duplicate html declaration here */
  
  h1 { font-size: 1.6rem; line-height: 1.3; }
  h2 { font-size: 1.4rem; line-height: 1.35; }
  h3 { font-size: 1.3rem; line-height: 1.35; }
  h4 { font-size: 1.1rem; line-height: 1.4; }
  h5 { font-size: 1rem; line-height: 1.4; }
  h6 { font-size: 0.9rem; line-height: 1.4; }
  
    body, p, ul, ol, li {
        line-height: 1.8; /* slightly taller for mobile */
    }  

  .largeText {
    font-size: 0.8rem; /* Slightly larger on mobile for readability */
    margin-bottom: 3px;
    font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
  }
  .xlargeText {
    font-size: 1rem;
    margin-bottom: 3px;
    font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
  }
  .xxlargeText {
    font-size: 1.1rem;
    margin-bottom: 3px;
    font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
  }
  .xxxlargeText {
    font-size: 1.2rem;
    margin-bottom: 3px;
    font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
  }
  
  p,
   .xlargeText {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
  }  
}
.small {
	FONT-SIZE: 10px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.smallText {
	FONT-SIZE: 11px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xsmallText {
	FONT-SIZE: 10px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxsmallText {
	FONT-SIZE: 9px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxxsmallText {
	FONT-SIZE: 6px
}

.xxx25largeText {
	FONT-SIZE: 25px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxx23largeText {
	FONT-SIZE: 23px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxx20largeText {
	FONT-SIZE: 20px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxx28largeText {
	FONT-SIZE: 28px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxxxlargeText {
	FONT-SIZE: 32px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.xxxxxlargeText {
	FONT-SIZE: 48px; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.bold2 {
	FONT-WEIGHT: 500;
}
.italic {
	FONT-STYLE: italic
}
.grayText {
	COLOR: #666; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.blueText {
	 Color: #009999; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

.bluebz {
     color:#0F0FFF;
}

.redbz {
     color:#B30000;
}

.lightblueText {
	 Color: #0066FF; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.goldText {
	COLOR: #86700; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

.whiteText {
	COLOR: white; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.blackText {
	COLOR: black; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}
.yellowText {
	COLOR: #FFFF00; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

.greenishText {
	COLOR: #57AB4E; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

.greenText {
	COLOR: #284848; MARGIN-BOTTOM: 3px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

.dgText {
	COLOR: #333
}
.smgrayText {
	FONT-SIZE: 11px; COLOR: #666
}
.smdgText {
	FONT-SIZE: 11px; COLOR: #333
}
.required {
	COLOR: #ff0000
}

.redText {
	COLOR: #B30000
}
.redText2 {
	COLOR: #B30000;font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
	/* #c00 */
}

.blackText2 {
	COLOR: #000000;FONT-SIZE: 12px;font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}

.drText {
	COLOR: #600;	
}
.nowrap {
	WHITE-SPACE: nowrap
}
.smallgray {
	FONT-SIZE: 10px; COLOR: #666; TEXT-DECORATION: none
}
.fieldText {
	FONT-SIZE: 11px; font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;
}


.bottom_dotted {
 border-bottom:3px  dotted #ccc;
 }
 
.div12NoBox {
	font-size:12px;color:#666666;float:left;font-weight: 100;margin:2px;padding:10px;border:1px;
}
.div12Box {
	font-size:12px;color:#666666;float:left;font-weight: 100;margin:2px;padding:10px;border:1px solid black;
} 
 
.div14Box {
	font-size:14px;color:#666666;float:left;font-weight: 100;margin:2px;padding:10px;border:1px solid black;
}

.div14NoBox {
	font-size:14px;color:#666666;float:left;font-weight: 100;margin:2px;padding:10px;border:1px;
}
 

.section-closing {
    font-style: italic;
    color: #555;
    margin-top: 1.5em;
}

.section-highlight {
    font-style: italic;
    color: #555;
    margin-top: 1.5em;
}

.my-div1000 {
    width: 100%;
    max-width: 1000px;
/*   float: left;       /* replaces align="left" */
    border: none;      /* replaces border="0" */
    border-collapse: collapse; /* optional, cleaner table borders */
}
.my-div800 {
    width: 100%;
    max-width: 800px;
/*   float: left;       /* replaces align="left" */
    border: none;      /* replaces border="0" */
    border-collapse: collapse; /* optional, cleaner table borders */
}


.my-table1000 {
    width: 100%;
    max-width: 1000px;
/*   float: left;       /* replaces align="left" */
    border: none;      /* replaces border="0" */
    border-collapse: collapse; /* optional, cleaner table borders */
}
.my-table1000 td,
.my-table1000 th {
    padding-left: 10px; /* cell padding */
}


.my-table800 {
    width: 100%;
    max-width: 800px;
/*    float: left;       /* replaces align="left" */
    border: none;      /* replaces border="0" */
    border-collapse: collapse; /* optional, cleaner table borders */
}

.my-table800 td,
.my-table800 th {
    padding-left: 2px; /* cell padding */
}
.my-table1200 {
    width: 100%;
    max-width: 1200px;
    float: left;       /* replaces align="left" */
    border: none;      /* replaces border="0" */
    border-collapse: collapse; /* optional, cleaner table borders */
}
.my-table1200 td,
.my-table1200 th {
    padding-left: 2px; /* cell padding */
}

.art-img {
  width: 80%;         /* default for desktop */
  max-width: 1000px;    /* never overflow */
  height: auto;       /* keep aspect ratio */
  max-height: 400px;
  object-fit: contain;   
}

/* For mobile screens (768px and below) */
@media (max-width: 768px) {
  .art-img {
    width: 100%;      /* full width on phone */
  }
}

.art-img2 {
  width: 60%;
  max-width: 600px;
  height: auto;
  max-height: 400px;
  object-fit: contain; 
}

/* For mobile screens (768px and below) */
@media (max-width: 768px) {
  .art-img2 {
    width: 100%;      /* full width on phone */
  }
}

.art-img3 {
  width: 100%;         /* default for desktop */
  max-width: 1000px;    /* never overflow */
  height: auto;       /* keep aspect ratio */
  max-height: 400px;
  object-fit: contain;   
}

/* For mobile screens (768px and below) */
@media (max-width: 768px) {
  .art-img3 {
    width: 100%;      /* full width on phone */
  }
}


table {
  float: none; /*  Prevent Side-by-Side Layout  */
}

/* =============================
   SITE FOOTER (Light Gray Theme)
   ============================= */
.site-footer {
    width: 100%;
    padding: 0;
    background: #F2F2F2; /* Soft light gray background */
    border-top: 1px solid #CCCCCC; /* Subtle separation line */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    text-align: left;
    color: #333333; /* Dark gray text for readability */
}

/* -----------------------------
   FOOTER CONTAINER
------------------------------ */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: flex-start;
    max-width: 500px;
    margin-left: 0;
    margin-right: auto;
}

/* -----------------------------
   FOOTER SOCIAL BOX
------------------------------ */
.footer-social-box {
    background-color: #FFFFFF; /* Clean white box */
    color: #B30000; /* Red text to match your top menu */
    padding: 15px 20px;
    margin: 10px 0;
    border-radius: 8px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* -----------------------------
   FOOTER COLUMNS
------------------------------ */
.footer-column {
    flex: 1;
    min-width: 150px;
    margin-bottom: 10px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    text-decoration: none;
    color: #333333; /* Dark text for good contrast */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-column ul li a:hover {
/*  color: #1a73e8;                 /* blue accent on hover/focus */
/*  background-color: rgba(26,115,232,0.1); /* subtle highlight */
/*  outline: none;                  /* remove default outline */
   text-decoration: underline; 
/*    color: #B30000; /* Red hover to tie with menu */
}

/* -----------------------------
   COPYRIGHT AREA
------------------------------ */
.footer-copy {
    text-align: center;
    margin-top: 5px;
    font-size: 16px;
    color: #555555; /* Softer dark gray for secondary text */
    max-width: 500px;
    margin-left: 0;
    margin-right: auto;
}


.dropbtn2 {
	background-color:#FFFFFF;
	color:black;
    padding: 5px;
    font-size: 16px; 
	border: 1px solid #000000; /* black solid border */
    cursor: pointer;
}

.dropbtn {
    background-color: #325858; /* 254646; darker green  #B30000  */
    color: #FFFFFF;
    padding: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.submit2 {
  border-radius: 10px;
  background-color: #3366CC;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;  
  
}

.submit3 {
  border-radius: 10px;
  background-color: #3366CC;
  border: none;
  color: white;
  padding: 10px 18px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

.submit4 {
  border-radius: 10px;
  background-color:#993366; 
  border: none;
  color: white;
  padding: 10px 18px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

.submit4smaller {
  border-radius: 10px;
  background-color: #3366CC;
  border: none;
  color: white;
  padding: 4px 4px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

.premium1 {
  border-radius: 10px;
/*  background-color: #3366CC; */
  background-color:#CC6666; 
  border: none;
  color: white;
  padding: 1px 1px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 10pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

.premiumBlue {
  border-radius: 10px;
/*  background-color: #3366CC; */
  background-color: #0099FF; 
  border: none;
  color: white;
  padding: 1px 1px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 13pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

.premiumGreen {
  border-radius: 10px;
/*  background-color: #3366CC; */
  background-color: #006666; 
  border: none;
  color: white;
  padding: 1px 1px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 13pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

input[type=text] {
  padding: 2px 2px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal; 
}
input[type=password] {
  padding: 2px 2px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}
input[type=email] {
  padding: 2px 2px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

input[type=checkbox] {
  height: 25px;
  width: 25px;
  background-color: #4CAF50;
}

input[type=year] {
  padding: 2px 2px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

input[type=number] {
  padding: 2px 2px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 12pt;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight : normal;
}

  
.topnav {
/*  display: flex;  /* hamburger will mess this stop 2 roe when screen is smaller */
  overflow: hidden;
  background-color:#B30000; 
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;  
  font-weight:500;  
}

.topnav a {
  float: left; 
  display: block;
  font-size: 17px;   /* menu w/o drop down */
  color: white;
  text-align: center;
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;    
  font-weight:600;    
  padding: 12px 14px;
  text-decoration: none;
}

.active {
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: ;
}

.dropdown .dropbtn {
  font-size: 17px;   /* menu w drop down */    
  border: none;
  outline: none;
  color: white;
  font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;    
  font-weight:600;    
  padding: 12px 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.topnav a, .dropdown .dropbtn {
    padding: 8px 14px;  /* vertical padding controls bar height */
    line-height: 1.2;   /* optional fine-tune */
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9; /* menu dropdown bar */
  font-weight:400;   
  min-width: 160px;
  padding: 10px 0px 10px 0px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
	
}

.dropdown-content a {
    float: none;
    color: black;
    font-family: 'Segoe UI', PT Sans, Open Sans, Inter, sans-serif;    
    font-weight:400;    
    padding: 5px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  color: white;
  background-color: #B30000; 
  color: yellow;
  
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Icons */
.icons {
/*  display: flex; */
  gap: 10px;
}

.icons a svg {
  width: 20px;
  height: 20px;
  fill: #fff; /* White */
  transition: fill 0.3s ease;
}

.icons a:hover svg {
  fill: #FFD700; /* Gold on hover */
}

/* Add CSS arrow for dropdown buttons */
.dropdown .dropbtn::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  border: 5px solid transparent;
  border-top-color: white; /* Arrow color */
  transition: transform 0.3s ease;
}

/* Rotate arrow on hover */
.dropdown:hover .dropbtn::after {
  transform: rotate(180deg);
}


.logo-img { width:100%; height:auto; min-width:150px; max-width:400px; }

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* max argeting screens with a maximum width of 600px. */
/* min argeting screens with a minimum  width of 600px. */
@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    padding: 8px 12px;      /* less vertical space */
    font-size: 16px;        /* smaller text */	
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;      /* less vertical space */
    font-size: 16px;        /* smaller text */	
  }
  .topnav.responsive .dropdown-content a {
    padding: 6px 12px;      /* smaller dropdown items */
    font-size: 14px;
  }  
}


/* screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

  .daily-flying-star {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fafafa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;	
  }

  .daily-flying-star h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 300;	
  }

  .daily-flying-star h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 300;		
  }

  .toggle-btn {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    background-color: #f0f0f0;
  }

  .toggle-btn:hover {
    background-color: #e5e5e5;
  }

  .toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  .daily-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .daily-details.open {
    max-height: 8000px; /* adjust if content is longer */
  }

  /* Mobile-friendly spacing */
  @media (max-width: 600px) {
    .daily-flying-star {
      padding: 0.75rem;
    }
    .toggle-btn {
      font-size: 0.95rem;
      padding: 0.6rem;
    }
  }
  
  .earthly-branches {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.95rem;
    margin: 1rem 0;
  }
  .earthly-branches caption {
    text-align: left;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }
  .earthly-branches th,
  .earthly-branches td {
    border: 1px solid #e0e0e0;
    padding: 10px;
    text-align: left;
    vertical-align: top;
  }
  .earthly-branches thead {
    background: #f5f5f5;
  }
  .earthly-branches small {
    display: block;
    color: #666;
    font-size: 0.8em;
    margin-top: 2px;
  }

  /* --- Mobile stacked card view --- */
  @media (max-width: 768px) {
    .earthly-branches thead {
      display: none;
    }
    .earthly-branches,
    .earthly-branches tbody,
    .earthly-branches tr,
    .earthly-branches td {
      display: block;
      width: 100%;
    }
    .earthly-branches tr {
      margin-bottom: 1rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 0.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .earthly-branches td {
      border: none;
      padding: 6px 8px;
      position: relative;
    }
    .earthly-branches td::before {
      content: attr(data-label);
      font-weight: 600;
      display: block;
      margin-bottom: 2px;
      color: #333;
    }
  }  
  
  .swatch-container {
    display: flex;
    gap: 10px; /* spacing between swatches */
    padding: 20px;
  }

  .swatch {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #ccc;
  }

  /* Circular swatch */
  .circle {
    border-radius: 50%;
  }

.dropdownul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.dropdownul > li {
  display: inline-block;
  position: relative;
}

.dropdownul a {
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  background: #b30000;
  color: white;
  
}.dropdownulbar {
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  background: #325858; /* 254646; darker green  #B30000  */
  color: #FFFFFF;
}

/* Submenu hidden by default */
.dropdownul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid #ccc;
  min-width: 150px;
  z-index: 1000;
}

.dropdownul li:hover > ul {
  display: block;
}

.dropdownul ul li a {
  background: white;
  color: #333;
  padding: 8px 12px;
}

.dropdownul ul li a:hover {
  background: #eee;
}

/* Highlight selected year */
.dropdownul ul li a.selected {
  background: #325858; /* 254646; darker green  #B30000  */
  color: white;
  font-weight: bold;
}

.date
{ font-weight: 400; }

.line {
    display: block;      /* Make each span behave like a block */
    margin-bottom: 0.2em;
	padding:0px 0px 0px 0px;
}


.left-list {
  list-style-position: outside; /* ensures bullet/number is outside the content box */
  padding-left: 20px;           /* space between bullet and text */
  margin-left: 0;               /* aligns list to container’s left */
}

.daily-tip a {
  text-decoration: underline;
  margin: 0 0.25em;
}


label {
  display: block;        /* each label on its own line */
  font-weight: 400;     /* make text stand out */
  margin-bottom: 0.25em; /* small space below label */
  color: #333;           /* dark gray text */
  font-family: Arial, sans-serif;
}

label.inline {
  display: inline-block;
  margin-right: 1em; /* space between input and next label */
  font-weight: normal;
}

.spaced-block {
  display: block;       /* ensures element starts on a new line */
  width: 100%;          /* takes full width */
  margin-top: 1em;      /* optional spacing before */
  margin-bottom: 0.5em; /* optional spacing after */
}

blockquote {
      font-style: italic;
      border-left: 4px solid #B30000;/*#00796b; */
      padding-left: 1.15rem;
      color: #555;
      margin: 1.5rem 0;
}

.daily-tip {
  background-color: #fffbe6; /* soft highlight for tip */
  border-left: 4px solid #f5b400; /* subtle accent line */
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
  border-radius: 6px;
  max-width: 1000px; /* optional for sidebar */
}

.daily-tip time {
  font-weight: bold;
  margin-right: 4px;
}

.daily-tip a {
  color: #1a73e8;
  text-decoration: none;
}

.daily-tip a:hover,
.daily-tip a:focus {
  text-decoration: underline; 
/*  color: #1a73e8;                 /* blue accent on hover/focus */
/*  background-color: rgba(26,115,232,0.1); /* subtle highlight */
/*  outline: none;     */
}

.daily-tip span[aria-hidden="true"] {
  margin-right: 4px; /* spacing after emojis */
}

.daily-tip br {
  line-height: 1.6; /* slightly larger pause */
}

.flying-star-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  border: 1px solid #ccc;
}
 
.flying-star-cell {
  padding: 2px;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 1.1rem; 
  /* Remove cell borders */
  border: none;   
}

.flying-star-cell8 {
  padding: 2px; 
  padding-bottom:10px;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 1.1rem; 
  /* Remove cell borders */
  border: none;   
}

.flying-star-cell-arrow-left {
  padding: 2px;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: left;
  font-size: 1.1rem; 
  /* Remove cell borders */
  border: none;   
}

.flying-star-cell-arrow-right {
  padding: 2px;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: right;
  font-size: 1.1rem; 
  /* Remove cell borders */
  border: none;   
}

.flying-star-sector {
  background-color: #325858; /* 254646; darker green  #B30000  */
  color: #FFFFFF;
  font-weight: 500;
  text-align: center;  
  font-size: 1.1rem;
  /* Remove cell borders */
  border: none;  
}

.flying-star-stars {
  color: #68717B;
  font-weight: 600;
  font-size: 1.1rem;  
  /* Remove cell borders */
  border: none;  
  text-align: center;  
}

.flying-star-stars2 {
  color: #68717B;
  font-weight: 600;
  font-size: 1.5rem;  
  /* Remove cell borders */
  border: none;  
  text-align: center;  
}

.flying-star-year {
  color: #B30000;
  font-weight: 600;
  /* Remove cell borders */
  border: none; 
  text-align: right;   
}

@media (max-width: 768px) {
  .flying-star-grid {
    font-size: 0.9rem; /* slightly smaller overall */
  }

  .flying-star-cell,
  .flying-star-cell8,
  .flying-star-cell-arrow-left,
  .flying-star-cell-arrow-right,
  .flying-star-sector,
  .flying-star-stars,
  .flying-star-stars2,
  .flying-star-year {
    font-size: 0.9rem;   /* shrink text */
    padding: 1px;        /* tighten spacing */
  }

  .flying-star-stars2 {
    font-size: 1.1rem;   /* larger star version but smaller on mobile */
  }
}

@media (max-width: 480px) {
  .flying-star-grid {
    font-size: 0.8rem; /* even smaller for very small screens */
  }

  .flying-star-cell,
  .flying-star-cell8,
  .flying-star-cell-arrow-left,
  .flying-star-cell-arrow-right {
    padding: 0.5px;
  }

  .flying-star-stars2 {
    font-size: 1rem;
  }
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff8e1;
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

.stars {
  display: flex;
  gap: 2px;
  font-size: 30px;
}

.star {
  color: #ddd; /* empty star */
  position: relative;
  display: inline-block;
}

.star-full {
  color: #f59e0b; /* filled star */
}

.star-half::before {
  content: "★";
  color: #f59e0b;
  position: absolute;
  width: 50%;
  overflow: hidden;
  left: 0;
  top: 0;
}

.score {
  font-weight: bold;
}

.score-text {
  margin-left: 4px;
}

/* Responsive: Tablets */
@media (max-width: 768px) {
  .stars { font-size: 24px; }
  .rating { font-size: 14px; gap: 4px; padding: 2px 4px; }
  .score-text { margin-left: 2px; }
}

/* Responsive: Phones */
@media (max-width: 480px) {
  .stars { font-size: 20px; }
  .rating { font-size: 12px; gap: 2px; padding: 1px 2px; }
  .score-text { margin-left: 1px; }
}

.compass-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  background-color: #FFFFFF;
}

.direction-card {
  border: 1px solid #F6EAB6;
  border-radius: 4px;
  overflow: hidden;
}

.direction-header {
  background-color: #325858; /* 254646; darker green  #B30000  #2E8B57; /* bg2green equivalent */
  color: white;
  text-align: center;
  padding: 1px;
  font-size: 1.25em;
  font-weight: 500;
}

.direction-data {
  text-align: center;
  padding: 15px 10px;
}

.direction-images {
  margin: 10px 0;
}

.direction-images img {
  margin: 0 2px;
}

.direction-advice {
  padding: 10px;
/*  background-color: #f9f9f9; */
}

/* Text size classes */
.large-text {
  font-size: 1.5em;
  color: #B30000;
  display: block;
  margin-bottom: 5px;
}

.xxxlarge-text {
  font-size: 2em;
  color: #000;
  display: block;
  margin: 10px 0; padding-left:20px;
 
}

.advice-text {
  font-size: 1.1em;
  color: #000;
  line-height:1.7;
}

/* Tablet */
@media (max-width: 1024px) {
  .large-text {
    font-size: 1.3em;
  }
  
  .xxxlarge-text {
    font-size: 1.7em;
    padding-left: 15px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .large-text {
    font-size: 1.1em;
    margin-bottom: 3px;
	line-height:1.3; 
  }
  
  .xxxlarge-text {
    font-size: 1.4em;
    margin: 8px 0;
    padding-left: 10px;
	line-height:1.3; 
  }
  .compass-grid {
    grid-template-columns: repeat(3, 1fr);
  }  

}

/* Small mobile */
@media (max-width: 480px) {
  .large-text {
    font-size: 1em;
	line-height:1.3; 
  }
  
  .xxxlarge-text {
    font-size: 1.2em;
    padding-left: 8px;
	line-height:1.3; 
  }
  .compass-grid {
/*    grid-template-columns: 1fr; */
    grid-template-columns: repeat(3, 1fr);
  }  
  
  line-height:1.4;  
}

.legend-box {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  max-width: 350px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #999;
}

.legend-color.monthly {
  background-color: #B30000; /* Red for monthly stars */
}

.legend-color.daily {
  background-color: #000000; /* Black for daily stars */
}

@media (max-width: 768px) {
  .legend-box {
    font-size: 15px;
    gap: 10px;
  }
}


.analysis{
/*  background: #fff; /* #fff4f4;      /* Light red/pink to differentiate from white timelines */
  background-color: #fffbe6; /* soft highlight for tip */
  border-left: 4px solid #f5b400; /* subtle accent line */
/*  border-left: 6px solid #00796b;; /* Thicker or same color */
  padding:4px 5px; 
  border-radius:1px;
}

.timeline{
/*  background:#fff;  */
  border-left:4px solid #B30000; /* #eee; */
  padding:4px 5px; 
  border-radius:8px;
}

.note{font-size:0.9rem; color:var(--muted); margin-top:6px; font-style:italic;}

.header-container {
  display: flex;
  align-items: center;
  justify-content: left;   /* keeps logo centered */
  gap: 8px;                   /* small spacing between text & logo */
  background-color: #fff;
}

.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  width: clamp(100px, 20vw, 200px);
  height: auto;
  border-radius: 6px;
  transition: transform 0.2s ease;
  display: block;
}

.header-logo img:hover {
  transform: scale(1.03);
}

.header-text {
  color: #990000;
  font-family: 'Segoe UI', 'PT Sans', 'Open Sans', 'Inter', sans-serif;
  line-height: 1.2;
  text-align: center;
  font-weight: 300;
  font-size: clamp(38px, 5vw, 50px);
  /* font-size: clamp(24px, 4vw, 40px); /* fluid scaling */
  /* font-size: clamp(20px, 5vw, 28px); */
  white-space: nowrap;      /* ✔ prevent multi-line wrapping */
  /* ❌ remove flex:1 to avoid big gaps */
  flex: 0;  /* or simply remove this line entirely */  
}

@media (max-width: 768px) {
  .header-text {
    font-size: 20px;
	font-weight: 600;
  }
}


/* Fine-tune for mobile */
@media (max-width: 600px) {
  .header-container {
    gap: 8px;
    padding: 4px 2%;
  }

  .header-text span {
/*    font-size: clamp(14px, 4vw, 22px); */
/*    line-height: 1.1; */
  }
}


.header-text span {
  display: block;
}


/* High-contrast accessible list */
.accessible-list {
  color: #000000;             /* solid black text */
/*  font-size: 1.2rem;          /* ~19px for readability */
  font-weight: 500;            /* medium weight */
  line-height: 1.6;           /* comfortable spacing */
  padding-left: 1.2em;        /* indent for numbers */
}

.accessible-list li {
  margin-bottom: 0.8em;       /* spacing between items */
}

/* Modern, clean link style */
.accessible-list li a {
  color: #1a1a1a;                /* dark gray for normal text */
  text-decoration: none;          /* remove underline */
  font-weight: 600;               /* slightly bolder for emphasis */
  transition: color 0.3s, background-color 0.3s;
  padding: 0.05em 0.1em;         /* small touch-friendly padding */
  border-radius: 3px;             /* smooth highlight corners */
}

.accessible-list li a:hover,
.accessible-list li a:focus {
/*  color: #1a73e8;                 /* blue accent on hover/focus */
/*  background-color: rgba(26,115,232,0.1); /* subtle highlight */
/*  outline: none;                  /* remove default outline */
   text-decoration: underline; 
}

/* Optional: ensure good tap target on mobile */
@media (max-width: 600px) {
  .accessible-list li a {
    padding: 0.1em 0.2em;
  }
}

/* almanac1.cfm */
.border1{
border: 1px solid black /*#867000*/  ;
background:white /*#fdffe5 */
}
.border2{
border: 0px solid black /*#867000*/  ;
background:white /*#fdffe5 */
}

.bg1{
width:15%;
vertical-align: top;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
text-align: center;
padding: 0px;
color: #ffffff; /* white text */
border-radius: 5px; /* optional rounded corners */
background:#325858; /* 254646; darker green  #B30000  #006400; /*#006600 */
padding-top: 10px;
padding-bottom: 10px; /* more space at the bottom */
padding-left: 0px;
padding-right: 0px;

}

.bg1left{
width:15%;
vertical-align: top;
align-items: left; /* vertical */
justify-content: left; /* horizontal */
text-align: left;
padding: 0px;
color: #ffffff; /* white text */
border-radius: 5px; /* optional rounded corners */
background: #325858; /* 254646; darker green  #B30000  #006400; /*#006600 */
padding-top: 10px;
padding-bottom: 10px; /* more space at the bottom */
padding-left: 5px;
padding-right: 0px;

}

.bg2{
width:15%;
vertical-align: top;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
text-align: center;
padding: 0px;
color: black; /* white text */
border-radius: 5px; /* optional rounded corners */
background:white /*#006600 */
padding-top: 10px;
padding-bottom: 10px; /* more space at the bottom */
padding-left: 0px;
padding-right: 0px;
}

.bg2left{
width:15%;
vertical-align: top;
align-items: left; /* vertical */
justify-content: left; /* horizontal */
text-align: left;
color: black; /* white text */
border-radius: 5px; /* optional rounded corners */
background:white; /*#006600 */
padding-left:5px;
}

.zodiac {
  display: block;
}

.pinyin {
  display: block;
}

.aus{
  background-color: white;
  color: #325858;
  border-radius: 6px;
  padding: 1px 1px;
  width: 95%;
  text-align: left;
}


hr {
  border: none;
  border-top: 2px solid #ccc; /* The horizontal line */
  text-align: center;
  margin: 2em 0;
  position: relative; /* Needed for the ::after */
}

.keypoint-box {
  background-color: #f0f8ff;   /* light blue background */
  border-left: 4px solid #0077cc; /* blue side border */
  padding: 10px;               /* inner spacing */
  margin: 15px 0;              /* spacing above and below */
/*  font-style: italic;          /* optional: make text italic */
}

.question-box {
  background-color: #f0f8ff;   /* light blue background */
  border-left: 4px solid #0077cc; /* blue side border */
  padding: 10px;               /* inner spacing */
  margin: 15px 0;              /* spacing above and below */
/*  font-style: italic;          /* optional: make text italic */
}

.question-box strong {
  font-style: normal;          /* make "Question:" bold but not italic */
}

.answer-box {
  background-color: #fff8dc;   /* #f0fff0 soft green background Light yellow / cream: #fff8dc */
  border-left: 4px solid #B30000; /* blue side border */
  padding: 10px;               /* inner spacing */
  margin: 15px 0;              /* spacing above and below */
/*  font-style: italic;          /* optional: make text italic */
}

.insight-box {
  background-color: #fff8dc;   /* #f0fff0 soft green background Light yellow / cream: #fff8dc */
  border-left: 4px solid #B30000; /* blue side border */
  padding: 10px;               /* inner spacing */
  margin: 15px 0;              /* spacing above and below */
/*  font-style: italic;          /* optional: make text italic */
}

em {
  font-style: normal;          /* make "Question:" bold but not italic */
}

.separator {
  margin: 0 1px; /*0.5em; /* or use px if you prefer fixed spacing */
  display: inline-block;
}

.page-break {
  page-break-before: always; /* For older engines */
  break-before: page;        /* Modern standard */
}

/* Screen and default styles */
.bar-top {
  background-color: #B30000;
  color:#FFFFFF;  
  height: 30px;
  font-size: 1.15rem; /* ~18.4px */  
  
/*  width: 100%; */
}

.print-url {
  display: none;
  font-size: 12px;
  color: #333;
}


/* Print-specific enhancements */
@media print {

  @page {
  margin-bottom: 60px; 
  }

  .page-break {
    break-before: page;
    page-break-before: always; /* fallback */
  }

  .bar-top {
    background-color: #B30000 !important;
	color:#FFFFFF;	
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  body {
    padding-bottom: 40px; /* Adjust based on .print-url height */
  }

  .print-url {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    color: #333;
  }

}
/* BaZi hua bar */
.stylebaziAgeDotted {	FONT-FAMILY: Arial, sans-serif;
	font-weight: bold;
	font-size: 25px;
	color: #000000;
	BORDER-BOTTOM: #999 2px dotted
}
.stylebaziBlackNormal {	FONT-FAMILY: Arial, sans-serif;
	font-weight: bold;
	font-size: 15px;
	color: #000000;

}

.clrR {
color:#B30000;
}
.clr {
color:#000000
}
.clr2 {
color:#000000
}

.bold {	
	font-weight: bold;
}

.bazibodypartheight {	
 height:120px;

}

/* Mobile Scaling (screens ≤ 768px) */
@media (max-width: 768px) {
.bazibodypartheight {	
 height:120px;

}