#page {
	background-image: url(../images/pagebg.png);
	background-repeat: no-repeat;
	position:absolute;
	left: 50%;
	margin-left: -420px; 
	margin-top: 1px;
	width:825px;
	height:900px;
}
.left {
    	position: relative;
    	float: left;
   	width: 160px;
   	margin: 10;
    	padding: 5;
    	clear: left;
    	border-style: none;
    	border-color: black;
    	text-alignment: center;
	border-radius: 5px;
}

.right {
    	position: absolute;
	right: 0px;
   	width: 160px;
	margin-right: 30px;
	padding: 0;
    	clear: right;
    	border-style: none;
    	border-color: black;
    	text-alignment: center;
	border-radius: 10px;
}


* {
	font-family:Verdana;
	font-size:9pt;
}

body {
background-repeat: repeat-x;
}

a {
	text-decoration: none;
	font-weight:bold;
	color: silver;
	padding: 2px 2px;


}

a:hover{
	text-decoration: underline-black; 
background-color: silver;
	font-weight: bold;
	border-radius: 10px;
text-decoration:underline;
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 5px #666;
  transform: translateY(3px);
text-decoration:underline;
}


body.green {
background-image: url(../images/green-background.png);       
}

body.green a {
color:#3a8335;
}

body.darkblue {
background-image: url(../images/darkblue-background.png);       
}

body.darkblue a {
color:#39568f;  
}


body.lightblue {
background-image: url(../images/lightblue-background.png);       
}

body.lightblue a {
color:#39568f;  
}
body.red {
background-image: url(../images/red-background.png);       
}

body.red a {
color:#c20000;  
}

body.maroon {
background-image: url(../images/maroon-background.png);       
}

body.maroon a {
color:#c22222;  
}

body.brown {
background-image: url(../images/brown-background.png);       
}

body.brown a {
color:#45250a;  
}

body.orange {
background-image: url(../images/orange-background.png);       
}

body.orange a {
color:#d0942d;  
}

body.yellow {
background-image: url(../images/yellow-background.png);       
}

body.yellow a {
color:#aeae36;  
}

body.teal {
background-image: url(../images/teal-background.png);       
}

body.teal a {
color:#1b574d;  
}

body.darkblue {
background-image: url(../images/darkblue-background.png);       
}

body.darkblue a {
color:#0f009d;  
}

body.purple {
background-image: url(../images/purple-background.png);       
}

body.purple a {
color:9966FF;  
}

body.pink {
background-image: url(../images/pink-background.png);       
}

body.pink a {
color:#ca73ca;  
}

body.grey {
background-image: url(../images/grey-background.png);       
}

body.grey a {
	color:#707070;  
}

body.black {
	background-image: url(../images/black-background.png);       
}

body.black a {
	color:#8b8b8b;  
}

#content {
	width:100%;
	text-align: left;
}

#text {
	margin-right:5px;
	margin-left:5px;
	margin-top:10px;
	clear:both;
	width:99%;
	height:700px;
	overflow: scroll;
} 

#main {
	margin-left:10px;
	margin-top:5px;
	margin-right:10px;
	margin-bottom:5px;
}

.logo {
   	float:left;
	text-align: center;
}

#main .headerlinks {
	position: relative;
	text-align:center;
	font-size:20pt;
	margin-right:20px;
	margin-left:10px;
	margin-top:10px;
	background-color: white; 
	border-radius: 5px;
}

hr {
	margin-top: 2px;
	border: none;
	background-color: #c04f15;
	color: #c04f15;
	height: 2px;  
}

    #scroll-container {
        /* Set a maximum height to enable vertical scrolling */
        
        /* Force the container to take up a defined width to prevent squeezing */
        width: 790px; 
        
        /* Enable vertical scrolling (y-axis) if content exceeds the height */
        overflow-y: scroll;
        
        /* Prevent horizontal scrolling unless absolutely necessary */
        overflow-x: hidden; 
        
        margin: 0; 
    }
    
    /* Ensure the tables maintain their desired width inside the scroll container */
    #scroll-container table {
        width: 770px; 
        margin-left: 10;
        margin-right: 10;
    }
    .inspection-table td, .inspection-table th {
        padding: 5px;
        font-size: 11px;
        text-align: center;
    }
    .inspection-table input[type="text"], .inspection-table input[type="date"], .inspection-table select {
        width: 100%;
        box-sizing: border-box;
        font-size: 10px;
    }

#breadcrumb 
{
	margin-left:10px;	
	margin-top:5px;
	width:785px;
	float:left;
}

#footer {
	position: relative;
    bottom: 0;
    font-size:8pt;
	text-align: center;
	color:#00000;
}

#button
{
	margin:15px;
	float:left;
	width:123px;
	height:123px;    
	background-image: url(../images/button-background.png);
}

#button a {
	float:left;
	width:123px;
	height:123px;
}

#button a img {
	border:0px;
	margin-left:4px;
	margin-top:10px;
}

#button a div {
	text-align: center;
	color:#000;
	font-weight:normal;
}

#print span {
	margin-left:5px;
	margin-top:5px; 
	float:right;
}

#printtext {
}

#text h1, #printtext h1 {
	text-decoration:underline;
}

#text div.indent, #printtext div.indent {
	margin-left:10px;
}

#formtable {
	width:100%;
}

#formtable .header {
	font-weight: bold;
	background-color: #e0e0e0;     
}

#formtable input {
	width:100%;
}

#formtable .actions a 
{
	font-size:30pt;
	font-weight:normal;
}

.button {
    	border: solid black 2px;
	padding: 2px 20px;
    	text-align: center;
    	text-decoration: none;
    	display: inline-block;
    	font-size: 12px;
 	border-radius:5px;
 }
.button1 {background-color: grey;} 
.button2 {background-color: yellow;} 
.button3 {background-color: blue;} 
.button4 {background-color: green;} 
.button5 {background-color: red;} 
.button6 {background-color: Orange;} 
.button7 {background-color: Brown;} 
.button8 {background-color: RebeccaPurple;} 
.button9 {background-color: white;} 
.button10 {background-color: white;} 


.button1:hover {background-color: silver; }
.button2:hover {background-color: gold; }
.button3:hover {background-color: skyblue; }
.button4:hover {background-color: seagreen; }
.button5:hover {background-color: salmon; }
.button6:hover {background-color: PeachPuff;} 
.button7:hover {background-color: Chocolate;} 
.button8:hover {background-color: MediumPurple;} 
.button9:hover {background-color: lightblue;} 
.button10:hover {background-color: PeachPuff;} 

ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	border-radius:5px;
	background-color:#00000;
}

li a {
    display: block;
    color: #000;
    padding: 8px 8px;
   
}

li a.active {
    
    color: silver;
 text-decoration: underline;
}

li a:hover:not(.active) {
    background-color: white;
    color: white;
}


/* Style The Dropdown Button */
.dropbtn {
    position: left;
    color: white;
    padding: 6px;
    font-size: 11px;
    border: none;
    cursor: pointer;

}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    text-align: left;
    }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    	display: none;
    	position: fixed;
    	background-color: white;
    	min-width: 100px;
    	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 6px 12px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: white;
color: WHITE;
text-decoration:underline;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    	color: white;
    }


#frame
{
margin:28px;
width: 707px;
float:left;
background-image: url(../images/frame-background.png);
}

#frame a {
float:left;
width:150;
}
#frame a img {
border:0px;
margin-left:2px;
margin-top:20px;
}
#frame a div {
text-align: center;
color:#000;
font-weight:normal;
}

#icon
{
margin:2px;
float:left;
width:25px;
height:25px;    
background-image: url(../images/icon-background.png);
}
#icon a {
float:left;
width:25px;
height:25px;
}
#icon a img {
border:0px;
margin-left:2px;
margin-top:2px;
}
#icon a div {
text-align: center;
color:#000;
font-weight:normal;
}

table {
    	border-collapse: collapse;
    	}

td {   
	border-radius: 2px;
	padding: 3px;
	
}
tr:nth-child(even){background-color: #f1f1ee}

tr:hover {background-color: silver}

body { 
	font-family: Arial, sans-serif; 
	background-color: #f4f4f9; 
	padding: 20px; 
	text-align: center; /* Center everything in the body */
}

.main-content {
	display: flex;
	flex-direction: column; /* Stack children vertically */
            gap: 10px;
            width: 750px; /* Wider container for better row layout */
            margin: 0 auto;
        }
        h1 { 
            width: 100%; 
            margin-bottom: 20px; 
            color: #d9534f;
        }
        
        /* --- Performance Shield: The Overwhelming Element --- */
        .performance-card {
            background-color: white;
            border: 3px solid #ffc107; /* Highlight with a strong border */
            border-radius: 12px;
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
            padding: 10px;
            text-align: center;
            order: -1; /* Place at the top of the flex container */
        }
        .shield-image { 
            max-width: 200px; /* Much larger image */
            height: auto; 
            margin-bottom: 5px; 
        }
        .performance-label strong { 
            font-size: 28px; /* Massive label */
            color: #000000;
            display: block; /* Make it take its own line */
        }
        .performance-card h3 {
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 8px;
            color: #212529;
        }

        /* --- Category Cards (Now Rows) --- */
        .category-card {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 98%; /* Take full width of the main-content */
            padding: 5px 5px;
            display: flex;
            justify-content: space-between; /* Align items along the row */
            align-items: center; /* Center items vertically */
        }
        .category-card h3 {
            margin: 0;
            color: #d9534f;
            min-width: 100px; /* Ensure heading takes space */
        }
        .count-box {
            display: flex;
            gap: 2px; /* Spacing between Actual and Due */
        }
        .count-box > div { /* Target actual/due boxes */
            padding: 2px 2px;
            border-radius: 4px;
            text-align: center;
            min-width: 70px;
        }
        .total-box {
            background-color: #f0f8ff; 
            border: 1px solid #cceeff;
            padding: 5px;
            font-size: 16px;
            font-weight: bold;
            color: #337ab7;
            text-align: right;
            min-width: 400px; /* Ensure total annual space */
        }
        .actual { background-color: #dff0d8; border: 1px solid #d6e9c6; }
        .due { background-color: #f2dede; border: 1px solid #ebccd1; }
        .count-label { font-size: 10px; color: #666; margin-bottom: 5px; }
        .count-number { font-size: 24px; font-weight: bold; }
        .due .count-number { color: #a94442; }