a:hover, a.active { color:var(--gold)}
h2 { margin: 20px 0 10px 0 }
form > div > label, .fieldset > div > label { 
	display:block; margin:10px 0 5px 0; font-weight:800; font-size:18px
}
.field { 
	padding:5px 10px !important; border-radius:20px; width:300px; font-size:18px; 
}
.container { margin-bottom:20px; }
.error { color:red; font-weight: bold}

.btn-secondary { border-color: #ccc; border-radius: 10px }

/* check mobile breaks:
.fieldset > div > div { width:510px }
.fieldset > div > label { width:200px }
@media (max-width: 750px) {
	.fieldset > div > div > span { display:block }
	.fieldset > div > div { width:330px; }
}
@media (max-width: 550px) {
	.fieldset > div > div { width:100% }
	.fieldset > div > label { width:100% }
}

ok, I think what I want to do here is to have the left div showing all the time
but, the menu tucked in there, menu-button hidden on desktop but menu showing
then, menu hidden, the ul part, then show the button like we are now
it will stack the same
sticky the menu button the same way
when it scrolls, show/hide the ul set, but, it needs to be absolute relative to the sticky button
	so, it would be ... a sub ele to that div...
	so, not the menu button, well, a div there, that would be the sticky one, hmm
	I could div wrap the button and text elements
	that could be the sticky one, well, it is
	I'm stuck on the ul show/hide, and show/hide of the menu
	---
	ok, this works, see about encapsulating it for other areas
*/

.account-columns { display:flex }
.account-columns .account-left { flex: 0 0 30%; position: sticky; top:80px; background-color:white; }
.account-columns .account-right { flex: 0 0 70%; }

.account-columns .account-left ul { margin:0; padding:0 15% 0 0; }
.account-columns .account-left ul li { margin:0; padding:0; }
.account-columns .account-left ul li a { display:block; font-size:1.4em; padding:10px 0; border-bottom:1px solid #ddd }
.account-columns .account-left ul li:last-child a { border-bottom:none }

.menu-button { font-size: 1.2em; display:none; border-bottom:1px solid #eee; cursor: pointer; }
.menu-button button { display:inline-block; width:24px; margin:5px 5px 0 0; }
.menu-button button span { display:block; width:24px; height:7px; border-bottom:2px solid #888 }

@media (max-width: 640px) { 
	.account-columns { display:block }
	.account-columns .account-left { background-color:white; }
	.account-columns .account-left ul { display:none; position:absolute; width:50%; background-color:white; }
	.menu-button { display:block }
	.account-columns .account-left ul.show { display:block }
}

.cardHeader div { font-weight:bold }
.cardHeader { margin:0 !important; border-bottom:1px solid gray }
.cardRow > div { padding:3px }
.cardRow .cnum { grid-area:cnum }
.cardRow .cnum div:nth-child(1) { font-weight:bold }
.cardRow .cnum div:nth-child(2) { padding-left:20px }
.cardRow .cadr { grid-area:cadr }
.cardRow .cdef { grid-area:cdef; text-align:center; }
.cardRow .copt { grid-area:copt }

.cardRow {
	display:grid;
	grid-template-columns: 25% 40% 10% 25%;
	grid-template-rows: auto;
	grid-template-areas:
		'cnum cadr cdef copt';
	margin: 10px 0 20px 0;
	line-height:1.3em;
}

@media (max-width:600px) {
	.cardRow {
		grid-template-columns: 87% 13%;
		grid-template-rows: repeat(auto);
		grid-template-areas:
			'cnum cdef'
			'cadr cdef'
			'copt cdef';
	}

	.cardRow div.cadr { padding-left:20px }
	.cardRow div.copt { padding-left:20px }

	.cardHeader div.cadr { display:none }
	.cardHeader div.copt { display:none }
}

.big_radio { cursor:pointer; width:36px; height:32px }
/* .big_radio:hover .center { display:none } */

#bottomlessItemsList { display:grid; grid-template-columns: auto 100px 100px 70px }
#bottomlessItemsList > div:nth-child(-n+4) { font-weight:bold; border-bottom:1px solid #999 }
#bottomlessItemsList > div { padding:15px 0 }
#bottomlessItemsList > div > span { display:none }
@media (max-width: 480px) {
	#bottomlessItemsList { display:block; padding-top:10px }
	#bottomlessItemsList > div { padding:3px 0 }
	#bottomlessItemsList > div:nth-child(-n+4) { display:none }
	#bottomlessItemsList > div:nth-child(4n+1) { font-weight:bold }
	#bottomlessItemsList > div:nth-child(4n+4) { padding:15px 0 35px 0 }
	#bottomlessItemsList > div > span { display:inline }
}