


.registrant {
	display: grid;
	grid-template-columns: 2em auto auto auto;
	margin-top: 1em;
}


.registrant > select {
	grid-column: 2 / span 3;
}


.registrant > select:required:invalid {
	color: gray;
}
<!----
.registrant > select option[value="0"][disabled] {
	display: none;
}
---->


div.registrant  select[value="0"] {
	color: gray;
}


.registrant > select option {
	color: black;
}

.registrant  select option:disabled {
	color: gray;
}

span.paid {
	font-size: 0.8rem;
	font-style: italic;
	color: green;
}



.registrant_display_line {
	grid-column: 2 / span 4;
}





.registrant > div.leftmost {
	grid-column: 1 / span 1;
	grid-row-start: 1;
	grid-row-end: 2;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}



.registrant > div.close {
	color: red;
	grid-column: 1 / span 1;
	grid-row-start: 2;
	grid-row-end: 4;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}


div.subtotal {
	color: green;
}



h1 { color: #274692; margin-bottom: 1em; margin-top: 0; }

a h1:hover { color: #6bb000; }

fieldset.inline_checkboxes div {
	display: inline;
}

fieldset.inline_checkboxes input {
	margin-left: 1em;
}

legend {
	margin-top: 1em;
}

div.spacer { margin-top: 1em; } 

div.form_errors { color: red;  }

div.form_errors span { font-size: 1.2em; font-weight: bold; }

p.help-block { color: red; }



div.result {
	display: grid; 
	grid-template-columns: auto 2em auto;
	grid-row-gap: 0.5em;
	margin-top: 1em;
	margin-bottom: 4em;
} 

@media (max-width: 500px) {
div.result {
	grid-template-columns: auto;
}}

div.result h1 { font-size: 1.5em; margin-bottom: 0;  }
div.result h2 {  color: #606065; font-size: 1em; margin-bottom: 0; }
div.result h2 strong { color: #274692;  }
div.result ul { color: #6bb000; }
div.result span.detail { color: #274692; }
div.result span.detail strong { color: #606065; }

ul.jobs { list-style-type: none; }

ul.jobs h1 { margin-bottom: 0; } 



div.content_container { margin-left: 2em; margin-top: 2em; margin-bottom: 2em; }

.row_style { background-color: #fff; padding: 1.5em; }
.alt_row_style { background-color: #f0f0f2; padding: 1.5em; }


div.form-actions input { color: #fff; background-color: #274692; margin-top: 1.5em; }

label { margin: 1em; color: #274692; }


.note { font-style: italic; font-size: %70; text-indent: 4em; }

.btn-primary { background-color: #007bff; border-color: #007bff; border-radius: 0;  margin-top: 2px; margin-bottom: 2px;  }
.btn-primary:hover { background-color: #007bff; border-color: #007bff; border-radius: 0; }
.color-infant { background-color: #007bff; border-color: #007bff; }

.btn-success { background-color: #73be00; border-color: #73be00; border-radius: 0; margin-top: 2px; margin-bottom: 2px;  }
.btn-success:hover { background-color: #73be00; border-color: #73be00; border-radius: 0;  }
.color-primary { background-color: #73be00; border-color: #73be00; }

.btn-danger { background-color: #dc3545; border-color: #dc3545; border-radius: 0; margin-top: 2px; margin-bottom: 2px;  }
.btn-danger:hover { background-color: #dc3545; border-color: #dc3545; border-radius: 0; }
.color-lower-elementary { background-color: #dc3545; border-color: #dc3545; }

.btn-warning { background-color: #ffc107; border-color: #ffc107; border-radius: 0; margin-top: 2px; margin-bottom: 2px; }
.btn-warning:hover { background-color: #ffc107; border-color: #ffc107; border-radius: 0; }
.color-upper-elementary { background-color: #ffc107; border-color: #ffc107; }

.btn-info { background-color: #17a2b8; border-color: #17a2b8; border-radius: 0; margin-top: 2px; margin-bottom: 2px; }
.btn-info:hover { background-color: #17a2b8; border-color: #17a2b8; border-radius: 0; }
.color-middleschool { background-color: #17a2b8; border-color: #17a2b8; }


.btn-elementary { background-color: #fd8935; border-color: #fd8935; border-radius: 0; margin-top: 2px; margin-bottom: 2px; }
.btn-elementary:hover { background-color: #fd8935; border-color: #fd8935; border-radius: 0; }
.color-elementary { background-color: #fd8935; border-color: #fd8935; }


.btn-admin { background-color: #fd35db; border-color: #fd35db; border-radius: 0; margin-top: 2px; margin-bottom: 2px;  }
.btn-admin:hover { background-color: #fd35db; border-color: #fd35db; border-radius: 0; }
.color-admin { background-color: #fd35db; border-color: #fd35db;  }

.btn-after { background-color: #fd3587; border-color: #fd3587; border-radius: 0; margin-top: 2px; margin-bottom: 2px; }
.btn-after:hover { background-color: #fd3587; border-color: #fd3587; border-radius: 0; }
.color-after { background-color: #fd3587; border-color: #fd3587; }


.btn-summer { background-color: #cc35fd; border-color: #cc35fd; border-radius: 0; margin-top: 2px; margin-bottom: 2px; }
.btn-summer:hover { background-color: #cc35fd; border-color: #cc35fd; border-radius: 0; }
.color-summer { background-color: #cc35fd; border-color: #cc35fd; }


.btn-other { background-color: #7935fd; border-color: #7935fd; border-radius: 0; margin-top: 2px; margin-bottom: 2px; }
.btn-other:hover { background-color: #7935fd; border-color: #7935fd; border-radius: 0; }
.color-other { background-color: #7935fd; border-color: #7935fd; }



