/* general styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
h1 {
    margin: 0;
    font-size: 200%;
}
h1 a{
	color:#fff;
	text-decoration:none;
}
@media (max-width: 790px) {
	body {
		font-size: 85%;
	}
}
@media (max-width: 590px) {
	body {
		font-size:70%;
	}
}
h2 {
    font-size: 1em;
    margin-bottom: 10px;
}
small{
	font-size:70%;
}

/* tables */
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    font-size:90%;
	padding: 8px 0px 8px 3px;
    background-color: #eee;
	text-align: left;
	vertical-align: top;
}
td {
	padding: 8px 2px 0 0;
	text-align: left;
	vertical-align: top;
}
/* used only if we're using a separate <tr> just for the title; see common.php
td.bill-title {	
	padding: 0;
	color:#777;
} */
td.bill-title-cell {
    position: relative; /* necessary for child element to have position: absolute;
    white-space: nowrap; /* Prevent the number and title from wrapping */
	height: 2em; /* in a td, this works like min-height */
}
.bill-title-cssrow {
	font-size: 90%;
	color: #777;
    position: absolute;
    bottom: 0; /* Position the title at the bottom of the cell */
    left: 0; /* Place it to the left of the cell */
    white-space: nowrap; /* Ensure it doesn’t wrap */
    max-width: calc(100vw - 100%); /* Limit the width so it doesn't overflow the page */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if the title overflows */
    /*background-color: rgba(255, 255, 255, 0.7); /* Optional: to make it stand out */
    z-index: 1; /* Ensure it appears on top */
}
.gopsupport{
	color:#a00;
}
.demsupport{
	color:#00a;
}
a.bill-link{
	color:#00a;
	text-decoration:none;
}
.circle{
	border:2px solid #cc5;
	border-radius:10%;
}
.amendment-number, .vote-margin {
    text-align: center;
}



/* css from here down organized by section of page */


/* page header */
header {
    background-color: #555;
    color: white;
    text-align: center;
    padding: 0.7em;
}


/* the search box */
.search-container {
	max-width: 35em;
	width: 94%;
	margin: 1em auto;
	padding: 0;
	box-sizing: border-box; /* Ensure padding is included in width calculation */
	
}
.search-container label {
    margin-right: 10px;
}
.search-container input,.search-container select {
    padding: 10px;
	margin: 0;
	border:1px solid #ccc;
	border-radius:4px;
}
/*
.search-container label,.search-container input,.search-container select{
	font-size:110%;
} */
.search-container td {
	vertical-align:middle;
}
#billSearch {
	width: calc(100% - 4.1em);
	box-sizing: border-box; /* Ensure padding is included in width calculation */
}
#searchButton{
	width: 3.5em;
	margin-left:0.5em;
	box-sizing: border-box; /* Ensure padding is included in width calculation */
}
#calendarDropdown {
	width: 100%;
}
/* container for the <select> 
#calendarDropdownContainer {
	margin-bottom:1em;
	text-align: center;
} */


/* not used currently. uncomment relevant html and js to use.
#suggestions {
    margin-top: 10px;
	min-height:3em;
    padding: 0;
    width: 100%;    
	box-sizing: border-box;
}
#suggestions a{
	margin:1em 2em;
} */


/* container for the calendar dropdown box and the ajax results with the calendar contents */
.calendar-ajax {
    max-width: 1000px; /* Maximum width of the container */
    width: 98%;
    margin: 1em auto; /* Center the div horizontally */
    padding: 0; /* Inner padding of 2em */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}

/* container for ajax loading spinner and ajax results */
#calendarDropdownResults {
	min-height: 50px;
	background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 20px 0 10px;
    /*min-width: 240px;*/
    padding: 10px;
}
/* responsive text within column headings th */
.long-text {
	display: inline;
}
.short-text {
	font-size:90%;
	display: none;
}
@media (max-width: 590px) {
	.long-text {
		display: none;
	}
	.short-text {
		display: inline;
	}
}

/* the loading spinner, from https://css-loaders.com/spinner/ */
#ajaxLoading{
	text-align:center;
}
.loader {
	margin: 0 auto;
	width: 50px;
	--b: 8px; 
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 1px;
	background: conic-gradient(#0000 10%,#f03355) content-box;
	-webkit-mask:
	repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
	radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
	-webkit-mask-composite: destination-in;
		  mask-composite: intersect;
	animation:l4 1s infinite steps(10);
}
@keyframes l4 {to{transform: rotate(1turn)}}





/* bill information overlay */
#billOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 98%;
    height: 98%; 
	margin: 0.5% 1%;
    background-color: rgba(255, 255, 204, 0.97); /* Pale yellow background with transparency */
	border: solid 2px rgb(200, 200, 150);
	border-radius:5px;
    z-index: 1000; /* Ensure it appears above other content */
    padding: 20px; /* Margin from the edges of the screen */
    box-sizing: border-box;
    overflow-y: auto; /* Allow scrolling if content exceeds screen height */
}
/* Close button */
#billOverlay .close-btn {
    position: fixed;
    top: 3vh;
    right: 3vw;
    font-size: 36px;
    color: #811; /* Close button color */
    cursor: pointer;
    font-weight: bold;
    user-select: none; /* Prevent text selection */
	border-radius:5px;
	background-color:#ecc;
	padding:2px 6px;
}
#billOverlay .close-btn:hover {
    color: #000; /* Darker color on hover */
}
/* Overlay content */
#overlayContent {
    margin-top: 0px; /* Space below the close button */
}
.about-site {
	max-width: 1000px;
}
td.interest-group-title-cell{
	position: relative; /* necessary for child element to have position: absolute; */
	height: 2em;
}
.interest-group-cssrow {
	font-size: 90%;
	color: #777;
    position: absolute;
    bottom: 0; /* Position the title at the bottom of the cell */
    left: 0; /* Place it to the left of the cell */
    white-space: nowrap; /* Ensure it doesn’t wrap */
    max-width: calc(100vw - 100%); /* Limit the width so it doesn't overflow the page */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if the title overflows */
    /*background-color: rgba(255, 255, 255, 0.7); /* Optional: to make it stand out */
    z-index: 1001; /* Ensure it appears on top */
}




footer {
	max-width:500px;
	margin:2em auto;
	text-align:center;
}