body { text-align: center; }
h1 { color: darkgreen; }
/* h2 { } */

table { margin-left: auto; margin-right: auto; /* center table */ }
td, th { border: 1px solid gray; padding: 0; margin: 0;  }
/* td { max-width: fit-content; } */
th { font-size: large; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	height: 40px; padding: 2px;
}
/* td:first-child { width: 10px; } will this do anyting? */
/* tr:first-child td { border: 1px solid red; padding: 5px; margin: 0; } */

/* select { outline: none; border: none; background-color: white; ** worked!! ** font-weight: bold } */
/* td:has(select) { border: none; background-color: whilte; } */
/* tr:first-child input { color: red; width: 5px; } */

/* tr, th, td {width: 25% !important; } (didn't do a thing!) */

/* Very pleased with how well the following works to fix border doubling: */
td:not(:first-child) { border-left: none; } /* Keep horiz. borders single pix */
tr:not(:first-child) td { border-top: none; } /* Keep vert. borders single pix */
/* Duplicated for th as well */
th:not(:first-child) { border-left: none; } /* Keep horiz. borders single pix */
tr:not(:first-child) th { border-top: none; } /* Keep vert. borders single pix */

/*th { border:1px solid red !important; width: fit-content !important; } */ /* Let's do a test */

input 
{ 
	outline: none; border: none; /* fixed border problem - somehow */ 
	margin: 0; font-size: large; 
	 /* ;padding-left: 3px; padding-right: 3px; */ 
}

th { width: fit-content; } /* Will this do anything? */

td:nth-child(1) input { width:  50px; text-align: center; } /* ID */
td:nth-child(4) input { width: 150px; text-align: center; } /* Phone */
td:nth-child(5) input { width: 150px; text-align: center; } /* Phone 2 */
td:nth-child(6) input { width: 260px; padding-left:  3px; } /* Email */
td:nth-child(7) input { width:  70px; text-align: center; } /* Role */
td:nth-child(8) input { width:  40px; text-align: center; } /* # in Party */
td:nth-child(9) input { width:  40px; text-align: center; } /* Can Seat */
td:nth-child(10) input { width:  40px; text-align: center; color: blue; } /* Cohost */
/* th:nth-child(8) input::selection { background-color: transparent; } */
/* th:nth-child(9)       { width:  40px; text-align: center; }  */

/* th:nth-child(1) { width:  50px; text-align: left; }
th:nth-child(2) { width: 150px; text-align: left; }
th:nth-child(3) { width: 150px; text-align: left; }
th:nth-child(4) { width: 150px; }
th:nth-child(5) { width: 150px; }
th:nth-child(6) { width:  70px; }
th:nth-child(7) { width:  50px; }
th:nth-child(8) { width:  50px; }
th:nth-child(9) { width: 200px; text-align: left; } */

.rowbar { font-size: small; font-weight: bold; padding: 0; line-height: 1.7; }
.rowbar td { height: 5px; padding: 0; background-color:rgb(184, 221, 220); }
.G { color: green; } 	/* Guest */
.H { color: blue;  }	/* Host */
.N { color: gray;  }	/* None - inactive member */
tr:has(+ .N) { color: gray; }
.changed { background-color: #feedea; }
.shadow { box-shadow: 5px 5px 2px gray; }
.hidden { display: none; }
.delete-me { background-color: gray; }
.large-font { font-size: large; }
.sticky { position:	sticky; }
.fixed { position:	fixed}
.checkbox { width: 20px; height: 20px }

/* #existing-rows, #existing-rows td { padding: 0; margin: 0; color: red; } */

#chalice { position: absolute; top: 15px; left: 15px; }

#save-recs { 
	position: absolute; top: 15px; right: 15px; font-size: larger; background-color: white; 
}
#show-counts {
	position: absolute; top: 15px; left: 250px; font-size: larger; background-color: white; 
}
#hide-inactive-members { 
	position: absolute; top: 60px; right: 15px; font-size: large ; }
#hide-guests { 	
	position: absolute; top: 95px; right: 15px; font-size: large; }
#add-row { font-size: large; }
/* #post-box { } */
#diag { border: 1px solid black; position: fixed; bottom:0; left:0 }
#post-table td { padding: 10px; }
#error_box 
{ 
	padding: 30px; max-width: fit-content; margin-left: auto; margin-right: auto;
	border: 1px solid gray; background-color: #feedea;
}
#magic-box 
{ 
	border: 1px solid green; padding: 10px; max-width: fit-content; 
	background-color: #d4f0cc; margin-left: auto; margin-right: auto;
}

/*** Highlights hovered over row with a pale yellow background ***/
tr:hover, tr:hover td, tr:hover input { 
   background-color: #f2f1c2;
}

tr:has( input.N ) input { color: gray; } /* Works, finally! Somehow. */