:root {
	--primary-green: #00ad00;
}


#OpenMap {
	border: 1px solid #666;
	border-radius: 6px;
	height: calc(100vh - 120px);
}
/* hack to target only mobile Safari */
@media screen and (max-width:  767px) {
	_::-webkit-full-page-media, _:future, :root #OpenMap {
		/* give some extra room at the bottom for the address bar */
		height: calc(100vh - 185px);
	}
}

body {
	background-color: #fff;
	color: #434343;
	color: #14826e;
	color: #003c33;
	font-family: Verdana, sans-serif;
	margin-left: 15px;
	margin-right: 15px;
	overflow-x: hidden;
	overflow-y: hidden;
}

h1 {
	margin: 0.5em auto 0.25em;
	font-size: 175%;
	color: #434343;
	color: #44f;
	/*color: #00ad00;*/
}

.greek {
	font-family: serif;
}


.passwordToggle {
	margin-left: -2em;
	padding: 5px;
	color: #343434;
	cursor: pointer;
	text-decoration: none;
}

#usernameTakenMsg {
	display: none;
	margin: -0.5em auto 1.25em;
	font-size: 90%;
	color: #b00;
}
#usernameTakenMsg.show {
	display: block;
}

.helpIcon {
	color: #343434;
	vertical-align: middle;
	text-decoration: none;
}


.stdDialog {
	position: fixed;
	top: 15vh;
	left: 20vw;
	width: 60vw;
	background-color: #f3f3f3;
	border-radius: 12px;
	border: 2px solid #535353;
	z-index: 9999;
}
@media (min-width: 500px) {
	.stdDialog {
		width: 300px;
		left: calc((100% - 300px) / 2);
	}
}
.stdDialog .title {
	/* background-color: #148276; */
	background-color: var(--primary-green);
	color: #fff;
	font-size: 125%;
	border-radius: 9px 9px 0 0;
	border-bottom: 2px solid #535353;
	padding: 0.25em 0.75em 0.25em 10px;
}
.stdDialog .body {
	padding: 1em 1em 1em 10px;
}
.stdDialog .okButton {
	margin: 10px;
	padding: 8px 20px;
	border-radius: 8px;
	/* background-color: #148276; */
	background-color: var(--primary-green);
	color: #fff;
	font-size: 115%;
	border: none;
	cursor: pointer;
}
.stdDialog .okButton:disabled {
	opacity: 0.5;
	color: #ccc;
	background-color: #66ad66;
	cursor: default;
}


.stdDialog .otherButton {
	margin: 10px;
	padding: 5px 15px;
	border-radius: 8px;
	/* background-color: #148276; */
	background-color: #66f;
	color: #fff;
	font-size: 115%;
	border: none;
	cursor: pointer;
}
.stdDialog .otherButton:disabled {
	opacity: 0.5;
	color: #ccc;
	background-color: #66b;
	cursor: default;
}

.stdDialog .okButton + button {
	border: none;
	background-color: transparent;
	color: #008800;
	font-size: 95%;
	margin-left: 1em;
	margin-bottom: 1em;
	padding: 0;
	cursor: pointer;
}

.stdDialog button:disabled {
	opacity: 0.5;
	color: #666;
	cursor: default;
}




#SettingsDialog {
	width: 75vw;
	left: 12vw;
}
@media (min-width: 540px) {
	#SettingsDialog {
		width: 400px;
		left: calc((100% - 400px) / 2);
	}
}
#SettingsDialog.version {
	opacity: 50%;
}


#DialogScrim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9998;
}
.stdDialog.hide,
#DialogScrim.hide {
	display: none;
}








#LayersDialog .body label {
	text-transform: capitalize;
}




#displayFields {
	font-size: 90%;
}
#displayFields label {
	text-transform: capitalize;
}
#displayFields p {
	margin-bottom: 0.5em;
}

.required {
	color: red;
	font-weight: 600;
	vertical-align: middle;
}

@media (min-width: 393px) {
	.accesskey {
		text-decoration: underline;
	}
}

#OpenMap.logCoordinatesMode,
#OpenMap.logCoordinatesMode .leaflet-interactive,
body.NOTaddMarkerMode #OpenMap,
body.addMarkerMode #OpenMap .leaflet-interactive {
	cursor: crosshair;
}
#OpenMap.deleteMarkerMode,
#OpenMap.deleteMarkerMode .leaflet-interactive {
	cursor: progress;
}

button.active {
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #999;
}



#display_all {
	margin-top: 1.25em;
}
#display_bars {
	margin-top: 1.25em;
}

.mode-control {
	border-top: thin groove #ccc;
	padding: 10px 0;
	overflow: auto;
	/*font-size: 90%;*/
}
@media (max-height: 640px) {
	.mode-control {
		padding: 7px 0;
	}
}
.mode-control:first-child {
	border-top: none;
}
.mode-control label {
	position: relative;
	top: 5px;
}
.mode-control .slide-switch {
	float: right;
	width: 56px;
	height: 29px;
	background: url('../images/slide-switch.png') -4px 0px;
	cursor: pointer;
}
.mode-control .slide-switch.active {
	background-position: -4px 30px;
}
.mode-control .slide-switch input[type=checkbox] {
	opacity: 0;
	cursor: pointer;
}

.mode-control + fieldset {
	margin-top: 15px;
}




#MapHolder {
	position: relative;
	margin-bottom: 10px;
}

#MapHolder #OpenMap .leaflet-control-attribution {
	display: none;
}

.leaflet-container a.leaflet-popup-close-button {
	padding: 4px 4px 10px 10px;
}

#loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0.5));
	padding-top: 100px;
	text-align: center;
	z-index: 0;
}
#loading.show {
	z-index: 5000;
}
#MarkerDialog {
	position: absolute;
	box-sizing: border-box;
	top: 20px;
	left: 5%;
	width: 90%;
	max-width: 364px;
	height: 55vh;
	max-height: 27em;
	border: 2px solid #666;
	border-radius: 6px;
	padding: 10px;
	font-size: 16px;
	background-color: #e0e0e0;
	background-color: #e9fef8;
	background-color: #c1f5ec;
	background-color: #e3feed;
	background-color: #f3fff9;
	/*background-color: #d5f9f2;*/
	z-index: 5000;
}
#MarkerDialog[data-mode=add] {
	max-height: 21em;
}
#MarkerDialog.animated {
	transition: transform 0.5s, opacity 0.5s;
}
#MarkerDialog.show {
	z-index: 5000;
	transform: scale(1);
	opacity: 1;
}
#MarkerDialog.hiding {
	transform: scale(0.25);
	opacity: 0;
}
#MarkerDialog.hide {
	z-index: 0;
	transform: scale(0.25);
	opacity: 0;
}

#MarkerDialog h2 {
	margin: 0.05em 1em 0.35em auto;
	font-size: 125%;
}

#MarkerDialog h2 #MarkerHeaderVerb {
	float: left;
	margin-right: 0.35em;
}
#MarkerDialog h2 #MarkerHeaderName {
	display: inline-block;
	width: calc(90% - 33px);
	max-width: 240px;
	height: 1.2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#MarkerDialog form {
	max-height: min(calc(55vh - 60px), 24em);
	overflow: auto;
}
#MarkerDialog[data-mode=add] form {
	max-height: min(calc(55vh - 60px), 18em);
}

#MarkerDialog form .row {
	overflow: auto;
	margin-bottom: 0.35em;
}
#MarkerDialog form .row .label {
	float: left;
	text-align: right;
	width: 7em;
	padding-right: 0.25em;
	padding-top: 5px;
	font-size: 95%;
}
#MarkerDialog[data-mode=add] form .row .label {
	width: 4.5em;
}
#MarkerDialog form .row .control {
	float: left;
}

#MarkerDialog form .row .control input,
#MarkerDialog form .row .control select,
#MarkerDialog form .row .control button {
	font-size: 110%;
}
#MarkerDialog form .row .control input,
#MarkerDialog form .row .control select,
#MarkerDialog form .row .control textarea {
	background-color: #fff;
	border-radius: 3px;
}
#MarkerDialog form .row .control input {
	width: 165px;
}
#MarkerDialog form .row .control select {
	width: 173px;
}
#MarkerDialog form .row .control textarea {
	width: 165px;
	height: 5em;
}

@media (min-width: 393px) {
	#MarkerDialog[data-mode=add] form .row .control input {
		width: 205px;
	}
	#MarkerDialog[data-mode=add] form .row .control select {
		width: 213px;
	}
	#MarkerDialog[data-mode=add] form .row .control textarea {
		width: 205px;
	}
}

@media (min-width: 460px) {
	#MarkerDialog {
		left: calc(50vw - 206px); /* why 206? What's with that number? */
	}
}

#MarkerDialog.MarkerDataForm .row.edit,
#MarkerDialog.MarkerDataForm .row.full {
	display: none;
}

#NOTMarkerDialog[data-mode=add].MarkerDataForm .row.full {
	display: block;
}
#MarkerDialog[data-mode=edit].MarkerDataForm .row.edit {
	display: block;
}
#MarkerDialog[data-mode=full].MarkerDataForm .row.edit,
#MarkerDialog[data-mode=full].MarkerDataForm .row.full {
	display: block;
}



.MarkerDataForm .row.state {
	float: left;
	width: 6em;
}

.MarkerDataForm[data-mode=full] .row.zipCode {
	width: 7em;
}

#MarkerDialog #MarkerState {
	width: 5em;
}
#MarkerDialog #MarkerZip {
	width: 4em;
}


#MarkerLat,
#MarkerLng {
	width: 7em;
	margin-right: calc(170px - 7em)
}

.IconSample {
	width: 45px;
	height: 45px;
	object-fit: none;
	overflow: hidden;
	border: 1px solid #666;
	border-radius: 3px;
	margin-top: 5px;
}
.IconSample img {
	margin-top: -3px;
	margin-left: -3px;
}


@media (max-width: 392px) {
	#MarkerDialog h2 {
		font-size: 110%;
	}
	#MarkerDialog form {
		position: relative;
	}
	#MarkerDialog form .row .label {
		text-align: left;
		margin-bottom: 2px;
	}
	#MarkerDialog form .row .control {
		float: none;
	}
	#MarkerDialog form .row .control input {
		width: 95%;
	}
	#MarkerDialog form .row .control select {
		width: calc(100% - 70px);
		margin-right: 12px;
	}
	#typeAndIcon {
		position: relative;
	}
	.IconSample {
		position: absolute;
		top: 19px;
		right: 9px;
	}
	#MarkerDialog form .row .control textarea {
		width: 95%;
	}
	#MarkerDialog #MarkerZip {
		margin-right: calc(170px - 4em)
	}
	#MarkerDialog form .row .label.empty {
		display: none;
	}
	.label.empty + .control {
		text-align: center;
	}
}



#closeMarkerDialog {
	display: block;
	position: absolute;
	box-sizing: border-box;
	top: 7px;
	right: 7px;
	width: 25px;
	height: 25px;
	background-color: transparent;
	border: 1px solid #003c33;
	border-radius: 4px;
	font-size: 18px;
	padding: 0;
}

#NOT_AddMarker form .row #iconPicker {
	width: 182px;
	height: 120px;
	overflow-y: auto;
	border: 2px solid #888;
}
#NOT_AddMarker form .row #iconPicker a {
	display: block;
	float: left;
	margin-right: 6px;
	border: 2px solid #e0e0e0;
}
#NOT_AddMarker form .row #iconPicker a img {
	width: 30px;
}
#NOT_AddMarker form .row #iconPicker a:focus {
	border: 2px solid blue;
}

.actionLinks {
	font-size: 110%;
	margin-top: 0.5em;
}
.actionLinks a {
	padding: auto 1em;
	margin-right: 1em;
}



#notice {
	display: none;
	z-index: 9990;
}
#notice.visible {
	display: block;
}
#noticeScrim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9998;
}
#noticeDialog {
	position: fixed;
	bottom: 35%;
	left: 12%;
	max-height: 50vh;
	width: 75vw;
	background-color: #eee;
	border-radius: 4px;
	z-index: 9999;
	box-shadow: 0 0 10px -2px #777;
}
@media (min-width: 600px) {
	#noticeDialog {
		width: 400px;
		left: calc((100% - 400px) / 2);
	}
}

#notice.award #noticeDialog {
	width: 68vw;
	left: 20%;
}
@media (max-width:  400px) {
	#notice.award #noticeDialog {
		left: 17%;
	}
}

#notice.version #noticeDialog {
	top: 15vh;
	bottom: auto;
	width: 77vw;
	left: 12vw;
	max-height: 65vh;
}
@media (min-width: 600px) {
	#notice.version #noticeDialog {
		width: 500px;
		left: calc((100% - 500px) / 2);
	}
}
#notice.version #noticeScrim {
	display: none;
}
#noticeText {
	margin: 1em;
	color: #333;
	max-height: calc(50vh - 5em);
	overflow: auto;
}
#notice.version #noticeText {
	max-height: calc(65vh - 5em);
}
#notice.passwordHelp #noticeDialog {
	max-height: 65vh;
}
#notice.passwordHelp #noticeText {
	max-height: calc(65vh - 5em);
}
#noticeControls {
	margin: 1em;
	position: relative;
}
#noticeControls button {
	cursor: pointer;
}
#noticeOk {
	border: none;
	background-color: #14826e;
	background-color: var(--primary-green);
	color: #fff;
	border-radius: 5px;
	font-size: 125%;
	padding: 0.25em 1em;
}
#noticeGotIt {
	border: none;
	background-color: transparent;
	color: #14826e;
	color: #008800;
	font-size: 105%;
	margin-left: 1em;
	padding: 0;
	display: none;
	position: absolute;
	right: 0;
	bottom: 0.5em;
}
#notice.hasKey #noticeGotIt {
	display: inline-block;
}

@media (max-width: 392px) {
	#noticeDialog {
		min-width: 14em;
		left: 10%;
	}
	#noticeOk {
		font-size: 108%;
	}
	#noticeGotIt {
		font-size: 100%;
	}
}


#noticeText ul.versionHistory {
	padding-left: 1em;
	text-indent: -1em;
	list-style-type: none;
}

#noticeText img.icon {
	height: 1em;
	vertical-align: middle;
	padding: 0 0.2em 0 0.1em;
}

#noticeText img.icon.rev {
	padding: 0 0.1em 0 0.2em;
}



#settingsControls,
#loginControls {
	margin: 0.1em;
	position: relative;
}
#versionNumberDisplay {
	font-size: 105%;
	position: absolute;
	left: calc(2em + 11vw);
	bottom: 0.25em;
	color: #767676;
}

.userPassForm .strengthMeter,
.userPassForm .strengthMeter + label,
.userPassForm #confirmation,
.userPassForm #confirmation + .passwordToggle {
	display: none;
}
.userPassForm.newPassword .strengthMeter + label,
.userPassForm.newPassword #confirmation,
.userPassForm.newPassword #confirmation + .passwordToggle {
	display: inline;
}
.userPassForm.newPassword .strengthMeter {
	display: block;
}

.userPassForm.newPassword #signupLink {
	display: none;
}

.userPassForm #usernameField,
.userPassForm #currentPassword,
.strengthMeter {
	margin-bottom: 0.75em;
}
.userPassForm input {
	font-size: 125%;
	max-width: 90%;
}
.userPassForm label {
	display: inline-block;
	margin-bottom: 0.35em;
}

.strengthMeter {
	font-size: 75%;
	color: #666;
	margin-top: 5px;
}

.strengthMeter div {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 1px;
}
.strengthMeter .strength1 { background-color: #600; }
.strengthMeter .strength2 { background-color: #600; }
.strengthMeter .strength3 { background-color: #600; }
.strengthMeter .strength4 { background-color: #870; }
.strengthMeter .strength5 { background-color: #870; }
.strengthMeter .strength6 { background-color: #990; }
.strengthMeter .strength7 { background-color: #990; }
.strengthMeter .strength8 { background-color: #070; }
.strengthMeter .strength9 { background-color: #070; }
.strengthMeter .strength10 { background-color: #070; }

.strengthMeter.strength1 .strength1,
.strengthMeter.strength2 .strength1,
.strengthMeter.strength3 .strength1,
.strengthMeter.strength4 .strength1,
.strengthMeter.strength5 .strength1,
.strengthMeter.strength6 .strength1,
.strengthMeter.strength7 .strength1,
.strengthMeter.strength8 .strength1,
.strengthMeter.strength9 .strength1,
.strengthMeter.strength10 .strength1 {
	background-color: #c00;
}
.strengthMeter.strength2 .strength2,
.strengthMeter.strength3 .strength2,
.strengthMeter.strength4 .strength2,
.strengthMeter.strength5 .strength2,
.strengthMeter.strength6 .strength2,
.strengthMeter.strength7 .strength2,
.strengthMeter.strength8 .strength2,
.strengthMeter.strength9 .strength2,
.strengthMeter.strength10 .strength2 {
	background-color: #c00;
}
.strengthMeter.strength3 .strength3,
.strengthMeter.strength4 .strength3,
.strengthMeter.strength5 .strength3,
.strengthMeter.strength6 .strength3,
.strengthMeter.strength7 .strength3,
.strengthMeter.strength8 .strength3,
.strengthMeter.strength9 .strength3,
.strengthMeter.strength10 .strength3 {
	background-color: #c00;
}
.strengthMeter.strength4 .strength4,
.strengthMeter.strength5 .strength4,
.strengthMeter.strength6 .strength4,
.strengthMeter.strength7 .strength4,
.strengthMeter.strength8 .strength4,
.strengthMeter.strength9 .strength4,
.strengthMeter.strength10 .strength4 {
	background-color: #eb0;
}
.strengthMeter.strength5 .strength5,
.strengthMeter.strength6 .strength5,
.strengthMeter.strength7 .strength5,
.strengthMeter.strength8 .strength5,
.strengthMeter.strength9 .strength5,
.strengthMeter.strength10 .strength5 {
	background-color: #eb0;
}
.strengthMeter.strength6 .strength6,
.strengthMeter.strength7 .strength6,
.strengthMeter.strength8 .strength6,
.strengthMeter.strength9 .strength6,
.strengthMeter.strength10 .strength6 {
	background-color: #e4e400;
}
.strengthMeter.strength7 .strength7,
.strengthMeter.strength8 .strength7,
.strengthMeter.strength9 .strength7,
.strengthMeter.strength10 .strength7 {
	background-color: #e4e400;
}
.strengthMeter.strength8 .strength8,
.strengthMeter.strength9 .strength8,
.strengthMeter.strength10 .strength8 {
	background-color: #0b0;
}
.strengthMeter.strength9 .strength9,
.strengthMeter.strength10 .strength9 {
	background-color: #0b0;
}
.strengthMeter.strength10 .strength10 {
	background-color: #0b0;
}


#NOTsignupLink {
	border: none;
	background-color: transparent;
	color: #008800;
	font-size: 95%;
	margin-left: 1em;
	padding: 0;
	cursor: pointer;
}

#userAvatarContainer,
#editUserAvatarContainer {
	float: right;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	border: 1px solid;
	background-image: url('/images/user-faded.png');
	background-size: cover;
	/*background-repeat: no-repeat;*/
	background-position: 50%;
	margin-bottom: 20px;
}
#userAvatar,
#editUserAvatar {
	max-height: 64px;
	max-width: 64px;
	border-radius: 8px;
}


#UserDialog {
	min-width: 310px;
	left: calc((100% - 280px) / 2);
	top: 12vh;
}
@media (max-width: 400px) {
	#UserDialog {
		left: calc((100% - 310px) / 2);
	}
}
#UserDialog .body {
	padding-bottom: 0;
}

#userDlgTop button {
	border: none;
	background-color: transparent;
	color: #008800;
	font-size: 95%;
	margin-left: 1em;
	padding: 0;
	cursor: pointer;
}
#userDlgTop button:disabled {
	opacity: 0.5;
	color:  #888;
	cursor: default;
}

#loggedInUserControls.hide {
	display: none;
}
#otherUserControls.hide {
	display: none;
}

#awardsArea {
	margin-top: 20px;
	/*margin-left: -10px;*/
	
}
#awardsArea label {
	font-size: 95%;
	margin-left: 1em;
}
#awardsArea select {
	background-color: #fff;
	color: #555;
	border: 1px solid #555;
	border-radius: 3px;
	font-size: 105%;
}

#userAwards {
	width: 298px;
	/*height: 350px;*/
	/*border: 2px solid blue;*/
	overflow: auto;
	clear: both;
	margin-top: 20px;
	/*margin-left: -10px;*/

	max-height: calc(100vh - 25em);
	overflow-y: auto;
	scrollbar-width: thin;
}

#userAwards thead tr {
	display: block;
}
#userAwards th,
#userAwards td {
	width: 90px;
	padding: 0;
	display: inline-block;
	font-weight: normal;
}

#userAwards tbody {
	display: block;
	max-height: calc(100vh - 25em);
	overflow-y: auto;
	/* vertical-align: top; */
	scrollbar-width: thin;
}

#awardColumns {
	clear: both;
	margin-top: 10px;
	display: flex;
	max-height: calc(100vh - 25em);
	overflow-y: auto;
}

#awardColumns .column {
	width: 80px;
	/*background-color: #fcc;*/
	/*border: 1px dotted green;*/
}

#userAwards .award {
	text-align: center;
	font-size: 12px;
	width: 88px;
	height: 107px;
	/*background-color: #ffc;*/
	float: left;
	margin-right: 7px;
}

.award.future .image {
	opacity: 0.15;
	filter: grayscale(25%);
}

#userAwards .placeholder {
	font-size: 36px;
	color: #ccc;
	opacity: 0.65;
}
#userAwards .award .image {
	width: 50px;
	height: 69px;
	margin-left: 19px;
	position: relative;
	background-size: contain;
}
#userAwards .award.ribbon .image,
#NewAwardsDialog .award.ribbon .image {
	background-image: url('/images/awards/ribbon-transparent.png');
}
#userAwards .award.trophy .image,
#NewAwardsDialog .award.trophy .image {
	background-size: contain;
	background-image: url('/images/awards/trophy-white.png');
}

#userAwards .award .image.whitestripe,
#NewAwardsDialog .award .image.whitestripe {
	background-image: url('/images/awards/ribbon-whitestripe.png');
}
#userAwards .award .image.blackstripe,
#NewAwardsDialog .award .image.blackstripe {
	background-image: url('/images/awards/ribbon-blackstripe.png');
}
#userAwards .award .image.sparkles,
#NewAwardsDialog .award .image.sparkles {
	background-image: url('/images/awards/ribbon-sparkles.png');
}

#userAwards .award .image.silver-5,
#NewAwardsDialog .award .image.silver-5 {
	background-image: url('/images/awards/medal-silver-5.png');
}
#userAwards .award .image.silver-5-gold,
#NewAwardsDialog .award .image.silver-5-gold {
	background-image: url('/images/awards/medal-silver-5-gold.png');
}
#userAwards .award .image.silver-7,
#NewAwardsDialog .award .image.silver-7 {
	background-image: url('/images/awards/medal-silver-7.png');
}
#userAwards .award .image.silver-7-gold,
#NewAwardsDialog .award .image.silver-7-gold {
	background-image: url('/images/awards/medal-silver-7-gold.png');
}
#userAwards .award .image.gold-5,
#NewAwardsDialog .award .image.gold-5 {
	background-image: url('/images/awards/medal-gold-5.png');
}
#userAwards .award .image.gold-5-silver,
#NewAwardsDialog .award .image.gold-5-silver {
	background-image: url('/images/awards/medal-gold-5-silver.png');
}
#userAwards .award .image.gold-7,
#NewAwardsDialog .award .image.gold-7 {
	background-image: url('/images/awards/medal-gold-7.png');
}
#userAwards .award .image.gold-7-silver,
#NewAwardsDialog .award .image.gold-7-silver {
	background-image: url('/images/awards/medal-gold-7-silver.png');
}
#userAwards .award .image.silver-heart,
#NewAwardsDialog .award .image.silver-heart {
	background-image: url('/images/awards/medal-silver-heart.png');
}

#userAwards .award .image.plainsilver,
#NewAwardsDialog .award .image.plainsilver {
	background-image: url('/images/awards/trophy-silver.png');
}
#userAwards .award .image.silver2,
#NewAwardsDialog .award .image.silver2 {
	background-image: url('/images/awards/trophy-silver-silver.png');
}
#userAwards .award .image.silvergold,
#NewAwardsDialog .award .image.silvergold {
	background-image: url('/images/awards/trophy-silver-gold.png');
}
#userAwards .award .image.plaingold,
#NewAwardsDialog .award .image.plaingold {
	background-image: url('/images/awards/trophy-gold.png');
}
#userAwards .award .image.gold2,
#NewAwardsDialog .award .image.gold2 {
	background-image: url('/images/awards/trophy-gold-gold.png');
}
#userAwards .award .image.goldsilver,
#NewAwardsDialog .award .image.goldsilver {
	background-image: url('/images/awards/trophy-gold-silver.png');
}

#userAwards .award.custom .image.bronx,
#NewAwardsDialog .award .image.bronx {
	background-image: url('/images/awards/flag.bronx.png');
}
#userAwards .award.custom .image.brooklyn,
#NewAwardsDialog .award .image.brooklyn {
	background-image: url('/images/awards/flag.brooklyn.png');
}
#userAwards .award.custom .image.manhattan,
#NewAwardsDialog .award .image.manhattan {
	background-image: url('/images/awards/flag.manhattan.png');
}
#userAwards .award.custom .image.queens,
#NewAwardsDialog .award .image.queens {
	background-image: url('/images/awards/flag.queens.png');
}
#userAwards .award.custom .image.san-francisco,
#NewAwardsDialog .award .image.san-francisco {
	background-image: url('/images/awards/flag.san-francisco.png');
}
#userAwards .award.custom .image.staten-island,
#NewAwardsDialog .award .image.staten-island {
	background-image: url('/images/awards/flag.staten-island.png');
}

#userAwards .award.custom .image.threepeat,
#NewAwardsDialog .award .image.threepeat {
	background-image: url('/images/awards/threepeat.png');
}
#userAwards .award.custom .image.super-seven,
#NewAwardsDialog .award .image.super-seven {
	background-image: url('/images/awards/super-seven.png');
}
#userAwards .award.custom .image.dandy-dozen,
#NewAwardsDialog .award .image.dandy-dozen {
	background-image: url('/images/awards/dandy-dozen.png');
}




#userAwards .award .image.f00,
#NewAwardsDialog .award .image.f00         { background-color: #f00; }
#userAwards .award .image.f00,
#NewAwardsDialog .award .image.f00         { background-color: #f00; }
#userAwards .award .image.f00,
#NewAwardsDialog .award .image.f00         { background-color: #f00; }
#userAwards .award .image.aquamarine,
#NewAwardsDialog .award .image.aquamarine       { background-color: #7fffd4; }
#userAwards .award .image.black,
#NewAwardsDialog .award .image.black            { background-color: #000000; }
#userAwards .award .image.blue,
#NewAwardsDialog .award .image.blue             { background-color: #0000ff; }
#userAwards .award .image.brown,
#NewAwardsDialog .award .image.brown            { background-color: #a52a2a; }
#userAwards .award .image.burlywood,
#NewAwardsDialog .award .image.burlywood        { background-color: #deb887; }
#userAwards .award .image.charcoal,
#NewAwardsDialog .award .image.charcoal          { background-color: #333333; }
#userAwards .award .image.coral,
#NewAwardsDialog .award .image.coral            { background-color: #ff7550; }
#userAwards .award .image.cornflowerblue,
#NewAwardsDialog .award .image.cornflowerblue   { background-color: #6495ed; }
#userAwards .award .image.crimson,
#NewAwardsDialog .award .image.crimson          { background-color: #dc143c; }
#userAwards .award .image.cyan,
#NewAwardsDialog .award .image.cyan             { background-color: #00ffff; }
#userAwards .award .image.darkgreen,
#NewAwardsDialog .award .image.darkgreen        { background-color: #006400; }
#userAwards .award .image.darkkhaki,
#NewAwardsDialog .award .image.darkkhaki        { background-color: #bdb76b; }
#userAwards .award .image.darkred,
#NewAwardsDialog .award .image.darkred          { background-color: #bd0512; }
#userAwards .award .image.darksalmon,
#NewAwardsDialog .award .image.darksalmon       { background-color: #e9967a; }
#userAwards .award .image.darkseagreen,
#NewAwardsDialog .award .image.darkseagreen     { background-color: #8fbc8f; }
#userAwards .award .image.deepskyblue,
#NewAwardsDialog .award .image.deepskyblue      { background-color: #00bfff; }
#userAwards .award .image.fuchsia,
#NewAwardsDialog .award .image.fuchsia          { background-color: #ff00ff; }
#userAwards .award .image.goldenrod,
#NewAwardsDialog .award .image.goldenrod        { background-color: #daa520; }
#userAwards .award .image.green,
#NewAwardsDialog .award .image.green            { background-color: #008000; }
#userAwards .award .image.greenyellow,
#NewAwardsDialog .award .image.greenyellow      { background-color: #adff2f; }
#userAwards .award .image.grey,
#NewAwardsDialog .award .image.grey             { background-color: #808080; }
#userAwards .award .image.lightgreen,
#NewAwardsDialog .award .image.lightgreen       { background-color: #90ee90; }
#userAwards .award .image.lightpink,
#NewAwardsDialog .award .image.lightpink        { background-color: #ffb6c1; }
#userAwards .award .image.lime,
#NewAwardsDialog .award .image.lime             { background-color: #00ff00; }
#userAwards .award .image.maroon,
#NewAwardsDialog .award .image.maroon           { background-color: #800000; }
#userAwards .award .image.navy,
#NewAwardsDialog .award .image.navy             { background-color: #000080; }
#userAwards .award .image.olive,
#NewAwardsDialog .award .image.olive            { background-color: #808000; }
#userAwards .award .image.orange,
#NewAwardsDialog .award .image.orange           { background-color: #ffa500; }
#userAwards .award .image.purple,
#NewAwardsDialog .award .image.purple           { background-color: #800080; }
#userAwards .award .image.red,
#NewAwardsDialog .award .image.red              { background-color: #ff0000; }
#userAwards .award .image.silver,
#NewAwardsDialog .award .image.silver           { background-color: #c0c0c0; }
#userAwards .award .image.tan,
#NewAwardsDialog .award .image.tan              { background-color: #d2b48c; }
#userAwards .award .image.teal,
#NewAwardsDialog .award .image.teal             { background-color: #008080; }
#userAwards .award .image.white,
#NewAwardsDialog .award .image.white            { background-color: #ffffff; }
#userAwards .award .image.yellow,
#NewAwardsDialog .award .image.yellow           { background-color: #ffff00; }

#userAwards .award .awardTitle {
	font-size: 9px;
}

.capsule {
	border-radius: 1em;
	padding: 0.1em 0.4em;
	background-color: #00c;
	color: #fff;
	font-weight: bold;
}
.award .image .capsule {
	position: absolute;
	bottom: 0;
	right: -3px;
	font-size: 78%;
}

.capsule.red         { background-color: #ff0000; }
.capsule.yellow      { background-color: #dddd00; text-shadow: 0 0 1px #000 }
.capsule.cyan        { background-color: #00cccc; text-shadow: 0 0 1px #666}
.capsule.blue        { background-color: #0000cc; }
.capsule.purple      { background-color: #800080; }
.capsule.green       { background-color: #008000; }
.capsule.darkgreen   { background-color: #006400; }

.capsule.black       { background-color: #000000; }



#closeUserDialog {
	display: block;
	position: absolute;
	box-sizing: border-box;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	background-color: transparent;
	border: 1px solid #003c33;
	border-radius: 7px;
	font-size: 18px;
	padding: 0;
}


#UserListDialog {
	top: 20vh;
}

#UserListDialog #usernameList {
	max-height: 12em;
	overflow-y: auto;
	scrollbar-width: thin;
	line-height: 1.8;
}
#UserListDialog #usernameList a {
	text-decoration: none;
	color: #080;
}

#EditUserDialog {
	min-width: 300px;
	left: calc((100% - 270px) / 2);
	top: 10vh;
}
@media (max-width: 400px) {
	#EditUserDialog {
		left: calc((100% - 300px) / 2);
	}
}

#NOTEditUserDialog {
	top: 10vh;
	left: 15vw;
	width: 75vw;
}
#EditUserDialog h3:first-child {
	margin-top: 0;
}
#EditUserDialog h3 {
	margin-bottom: 0.25em;
}
#EditUserDialog p:not([class]) {
	font-size: 80%;
}
p.smallHeader {
	font-weight: bold;
	margin-top: 1.25em;
	margin-bottom: 0.5em;
}
p.smallHeader + p {
	margin-top: 0.5em;
}
label.fileControl {
	/*margin: 10px;*/
	padding: 5px 15px;
	border-radius: 8px;
	/* background-color: #148276; */
	background-color: transparent;
	color: #66f;
	font-size: 115%;
	border: 1px solid #66f;
	cursor: pointer;
	white-space: nowrap;
	min-width: 8em;
	display: inline-block;
	text-align: center;
}
#newAvatar {
	display: none;
}
#uploadAvatar {
	/*margin-top: 5px;*/
	margin: 15px 0 0;
}

#gravatarEmail {
	/*margin-left: 10px;*/
	font-size: 110%;
	width: 12em;
}
#btnGravatar {
	margin: -3px 0 25px;
}
#updatePassword {
	margin: -3px 0 ;
}

#EditUserDialog .okButton {
	margin-top: 20px;
}



#NewAwardsDialog {
	box-sizing: border-box;
	width: 75vw;
	left: 12vw;
	top: 130px;
	text-align: center;
	padding: 20px;
}
@media (min-width: 600px) {
	#NewAwardsDialog {
		width: 500px;
		left: calc((100% - 500px) / 2);
	}
}
#NewAwardsDialog .awardHeadline {
	font-weight: 500;
}
#NewAwardsDialog .award .image {
	width: 100px;
	height: 138px;
	background-size: cover;
	margin: 20px auto;
	/*margin-left: 19px;*/
	/*position: relative;*/
}
#NewAwardsDialog .awardTitle {
	font-weight: bold;
	font-size: 110%;
	margin-bottom: 15px;
}
#NewAwardsDialog .awardDescription {
	margin-bottom: 10px;
}




#coordsStuff {
	margin-top: 1em;
}
#coordsStuff,
#goToSf {
	display: none;
}
@media (min-width: 418px) {
	body.localhost #coordsStuff,
	body.localhost #goToSf {
		display: block;
	}
	body.localhost {
		overflow-y: auto;
	}
}



.leaflet-popup-content .streetAddress {
	display: none;
}
.leaflet-popup-content .zipCode {
	display: none;
}
.leaflet-popup-content .notes {
	display: block;
}
#OpenMap.show-streetAddress .leaflet-popup-content .streetAddress,
#OpenMap.show-zipCode .leaflet-popup-content .zipCode {
	display: block;
}



body.DarkMode {
	background-color: #111;
	color: #888;
}
.DarkMode #loading {
	color: #fff;
	background: radial-gradient(rgba(128,128,128,1), rgba(128,128,128,0.5));
}
.DarkMode #noticeDialog {
	background-color: #ccc;
}
.DarkMode .leaflet-popup-content-wrapper,
.DarkMode .leaflet-popup-tip {
	background-color: #ccc;
	color: #000;
}
.DarkMode .leaflet-container a.leaflet-popup-close-button {
	color: #666;
}
.DarkMode .leaflet-container a.leaflet-popup-close-button:hover {
	color: #fff;
}
.DarkMode #actionBar .fa-half .fa-plus {
	text-shadow: 1px 0px 2px #484848, 0px 1px 2px #484848, -1px 0px 2px #484848, 0px -1px 2px #484848;
}

.no-wrap {
	white-space: nowrap;
}



#actionBar {
	display: flex;
	justify-content: space-between;
}
#actionBar .actionButton {
	/*border: 1px solid #9dd;*/
	/*color: #85d0c8;*/
	color: #14826e;
	color: #44f;
	/*color: #00d0a0;*/
	font-size: 36px;
	width: 48px;
	height: 44px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

#actionBar .actionButton.active {
	transition: color 0ms;
	color: #ff0000;
}
#actionBar .actionButton.afterActive {
	transition: color 2000ms;
	color: #44f;
}

#actionBar .fa-half {
	font-size: 18px;
}
#actionBar .fa-half .fa-map-marker-alt {
	position: relative;
	top: 2px;
}
#actionBar .fa-half .fa-plus {
	text-shadow: 1px 0px 2px #fff, 0px 1px 2px #fff, -1px 0px 2px #fff, 0px -1px 2px #fff;
	/*color: #003b37;*/
	color: #40a3a7;
	color: #0c0;
	color: #44f;
	/*color: #00d0a0;*/
	position: relative;
	left: 5px;
	top: -46px;
	font-size: 22px;
}
body.addMarkerMode #actionBar .fa-half .fa-plus {
	color: #ff0;
	color: #0c0;
	/*color: #44f;*/
	/*text-shadow: 1px 0px 2px #999, 0px 1px 2px #999, -1px 0px 2px #ccc, 0px -1px 2px #ccc;*/
}

h1 + .actionButton {
	position: absolute;
	top: 10px;
	right: 16px;
	color: #44f;
	/*color: #00d0a0;*/
	font-size: 10px;
	width: auto;
	height: 38px;
	text-align: center;
	cursor: pointer;
}
h1 + .actionButton .fa-user {
	font-size: 25px;
}
h1 + .actionButton.notLoggedIn {
	top: 12px;
	color: var(--primary-green);
}
h1 + .actionButton.notLoggedIn .fa-user {
	font-size: 30px;
}
h1 + .actionButton.notLoggedIn .username {
	display: none;
}

.accordion .control {
	/*background-color: #fcc;*/
	/*border: 1px solid #666;*/
	transition: margin 1s;
}
.accordion .control button {
	background-color: #eee;
	color: var(--primary-green);
	border: 1px solid;
	border-radius: 10px;
	width: 100%;
	cursor: pointer;
	text-align: left;
	font-size: 120%;
	padding: 4px 3px 4px 10px;
	z-index: 1;
}
.accordion .division {
	/*background-color: #cfc;*/
	border: 1px solid #666;
	border-top: none;
	transition: max-height 1s, padding 1s, margin 1s;
	overflow: hidden;
	border-radius: 10px;
	margin: -10px 10px;
}
.accordion .division.closed {
	max-height: 0;
	border-top: none;
	border-bottom: none;
	margin-top: 0.25em;
}
.accordion .division.open {
	max-height: 350px;
	padding-top: 1.5em;
}

.accordion .division + .NOTcontrol {
	border-top: none;
}
.accordion .division.closed + .control {
	margin-top: 30px;
}
.accordion .division > form,
.accordion .division > div {
	margin: auto 10px;
}

.accordion .division form:first-of-type p:first-child {
	margin-top: 0;
}



#actionBar .actionButton.disabled {
	filter: grayscale(35%);
	opacity: 40%;
	cursor: default;
}

#debug {
	height: 200px;
	overflow: auto;
	font-family: 'DejaVu Sans Mono', Consolas, Courier, monospace;
	font-size: 12px;
	border: thin inset;
	padding: 0.25em;
}

h1 #extraForDebug {
	/*display: none;*/
	position: absolute;
	top: 3px;
	left: 210px;
	font-weight: normal;
	font-size: 45%;
}