:root {
	--app-background-color: #DDDDDD;
	--app-header-color: #434343;
	--background-color: #EDF6E9;
	--background-color-alt: #E9ECF6;
	--box-shadow-edit: 0 0 10px 0 rgba(0,0,0,0.45) inset;
	--box-shadow-invalid: 0 0 10px 0 rgba(192,0,0,0.45) inset;
	--box-shadow-view: 0 0 10px 0 rgba(0,0,0,0.45);
	--box-shadow-clickable: 0 0 10px 0 rgba(102,188,70,0.75);
	--box-shadow-clickable-alt: 0 0 10px 0 rgba(33,150,243,0.75);
	--box-shadow-current: 0 0 10px 0 rgb(33,150,243);
	--button-width: 290px;
	--button-shadow: rgba(255,255,255,0.3) 0px 1px 0px 0px inset,rgba(255,255,255,0.2) 0px 16px 0px 0px inset,rgba(255,255,255,0.25) 0px 10px 20px 0px inset,rgba(0,0,0,0.3) 0px -15px 30px 0px inset;
	--cart-color: #FF6A00;
	--checkbox21-label-color: var(--text-color);
	--checkbox21-color: var(--text-color);
	--checkbox21-disabled: #888888;
	--clickable-color: #66BC46;
	--clickable-alt-color: #2196F3;
	--complete-color: #66BC46;
	--dark-gray-color: #888888;
	--error-color: #C00000;
	--focus-color: #FFDD00;
	--focus-indicator: drop-shadow(0 0 4px #FFDD00);
	--light-color: #FFFFFF;
	--light-gray-color: #EEEEEE;
	--medium-gray-color: #CCCCCC;
	--nofocus-hover-color: #0000FF;
	--notify-color: #C00000;
	--notify-background-color: #FFD7D7;
	--pending-color: #FFDD00;
	--radio21-color: var(--text-color);
	--text-color: #333333;
	font-size: 19px;
}

@font-face {
	font-family: "font_main_regular";
	src: url("/resource/ScrambleGlobal/Main-Regular/ttf/font") format("truetype");
}

@font-face {
	font-family: "font_main_bold";
	src: url("/resource/ScrambleGlobal/Main-Bold/ttf/font") format("truetype");
}

*,
*:before,
*:after {
	box-sizing: border-box;
	scrollbar-width: auto;
}

::-webkit-scrollbar {
	width: 4px;
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--clickable-color);
	border-radius: 2px;
}

a {
	font-family: font_main_bold;
	font-variant: small-caps;
	color: var(--clickable-color);
	margin: 0;
	text-decoration: none;
	cursor: pointer;
}

	a:focus {
		outline: 0 !important;
		filter: var(--focus-indicator);
	}

		a:focus:not(:focus-visible) {
			outline: 0 !important;
			filter: unset;
		}

	a.btn {
		font-size: 0.85rem;
		padding: 0.5rem 1rem;
		width: unset;
		min-width: unset;
		max-width: unset;
		display: block;
		text-align: center;
		font-family: font_main_bold;
		font-variant: small-caps;
		color: var(--light-color);
		background-color: var(--clickable-color);
		border: 1px solid var(--clickable-color);
		border-radius: 2rem;
		box-shadow: var(--button-shadow);
	}

		a.btn.alt {
			background-color: var(--clickable-alt-color);
			border-color: var(--clickable-alt-color);
		}

	a.normal {
		font-family: font_main_regular;
		font-variant: normal;
		color: var(--text-color);
	}

	a.small {
		font-size: 0.75rem;
	}

.added {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--light-color);
	background-image: url(/image/check);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	z-index: 9500;
}

.ajax {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

	.ajax.constrained {
		max-height: 100%;
	}

.ajax_div {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.alert_popup {
	position: absolute;
	display: none;
	opacity: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 300px;
	max-width: 500px;
	padding: 1rem;
	border-radius: 1.5rem;
	background-color: var(--text-color);
	color: var(--background-color);
	text-align: center;
	box-shadow: var(--box-shadow-view);
}

.app_header {
	display: flex;
	justify-content: space-between;
	min-height: 3rem;
	align-items: center;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	width: 100%;
	background-color: var(--app-header-color);
	z-index: 11000;
}

.app_header_logo {
	height: 2.25rem;
	display: block;
}

.application {
	position: absolute;
	display: flex;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	background-color: var(--app-background-color);
}

	.application.shown {
		opacity: 1;
	}

.big {
	font-size: 1.5rem;
}

.biglb {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	overflow-y: hidden;
	margin-top: 1rem;
	grid-gap: 0.25rem;
}

.biglb_main {
	position: absolute;
	display: flex;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	flex-direction: column;
}

.biglb_score {
	padding: 0.125rem;
	background-color: var(--light-gray-color);
	border-radius: 0.5rem;
	font-size: 1.5rem;
	text-align: center;
	min-width: 3.5rem;
}

.biglb_team {
	width: 18%;
	max-width: 18%;
	min-width: 18%;
	padding: 0.5rem;
	border: 1px solid #000000;
	border-radius: 0.5rem;
}

.blur {
	filter: blur(10px);
	/*filter: opacity(0.25);*/
	pointer-events: none;
}

body {
	font-family: font_main_regular;
	color: var(--text-color);
	padding: 0;
	margin: 0;
	overflow: hidden;
	word-break: break-word;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.box {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	background-color: var(--light-color);
	padding: 0.75rem;
	grid-gap: 0.5rem;
	border-radius: 1.5rem;
	flex-wrap: wrap;
	box-shadow: var(--box-shadow-edit);
}

	.box.active {
		background-color: var(--background-color);
	}

	.box.calendar {
		align-items: center;
		padding: 0.6rem 0.4rem;
		min-height: unset;
	}

	.box.column {
		flex-direction: column;
		flex-wrap: nowrap;
		box-shadow: var(--box-shadow-view);
		grid-gap: 1rem 0;
		width: 100%;
	}

		.box.column.center {
			align-items: center;
		}

		.box.column.max_width {
			align-items: center;
		}

		.box.column.short {
			grid-gap: 0.5rem 0;
		}

			.box.column.short.current {
				box-shadow: var(--box-shadow-current);
			}

	.box.warn {
		background-color: var(--notify-background-color);
	}

	.box.wide {
		width: 100%;
		justify-content: space-between;
		flex-wrap: nowrap;
		box-shadow: var(--box-shadow-view);
	}

button {
	display: block;
	text-align: center;
	font-family: font_main_bold;
	font-variant: small-caps;
	font-size: 1rem;
	color: var(--light-color);
	background-color: var(--clickable-color);
	border: 1px solid var(--clickable-color);
	border-radius: 2rem;
	box-shadow: var(--button-shadow);
	padding: 1rem 0.75rem;
	width: var(--button-width);
	min-width: 100px;
	max-width: var(--button-width);
	margin: 0;
	cursor: pointer;
}

	button:disabled {
		opacity: 0.25 !important;
		cursor: default;
		pointer-events: none;
	}

	button:focus {
		outline: 0 !important;
		filter: var(--focus-indicator);
	}

		button:focus:not(:focus-visible) {
			outline: 0 !important;
			filter: unset;
		}

	button img {
		width: 1.5rem;
		height: 1.5rem;
		display: block;
	}

	button.alt {
		background-color: var(--clickable-alt-color) !important;
		border-color: var(--clickable-alt-color) !important;
	}

	button.back {
		background-color: var(--clickable-alt-color);
		border-color: var(--clickable-alt-color);
	}

	button.calendar {
		display: inline-flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 0.75rem;
		font-variant: normal;
		padding: 0;
		width: unset;
		min-width: 2rem;
		max-width: unset;
		height: 2rem;
	}

		button.calendar.other {
			background-color: var(--medium-gray-color);
			border: 1px solid var(--medium-gray-color);
		}

		button.calendar.past {
			background-color: var(--medium-gray-color);
			border: 1px solid var(--medium-gray-color);
			opacity: 0.25;
			cursor: initial;
		}

		button.calendar.selected {
			background-color: var(--clickable-alt-color);
			border: 1px solid var(--clickable-alt-color);
		}

	button.cancel {
		background-color: var(--notify-color) !important;
		border: 1px solid var(--notify-color) !important;
	}

	button.cart {
		border-radius: unset;
		box-shadow: unset;
		width: unset;
		min-width: unset;
		padding: 0.25rem 1rem 0.125rem 0.75rem;
		/*border-top-left-radius: 1.5rem;*/
		border-top-right-radius: 1.5rem;
		background-color: var(--cart-color);
		border-color: var(--cart-color);
	}

	button.entity {
		position: relative;
		font-family: font_main_regular;
		font-variant: normal;
		text-align: left;
		color: var(--text-color);
		background-color: var(--background-color);
		width: 100%;
		min-width: unset;
		max-width: unset;
		padding: 1rem;
		box-shadow: var(--box-shadow-clickable);
	}

		button.entity:disabled {
			background-color: var(--light-color);
			border: none;
			opacity: 1 !important;
			box-shadow: var(--box-shadow-view);
		}

		button.entity.row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			grid-gap: 0 0.5rem;
			flex-wrap: wrap;
		}

			button.entity.row.wide {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				grid-gap: 0 0.5rem;
				flex-wrap: wrap;
			}

		button.entity.right_pad {
			padding-right: 2.25rem;
		}

		button.entity.selected {
			background-color: var(--background-color-alt);
			border: 1px solid var(--clickable-alt-color);
			box-shadow: var(--box-shadow-clickable-alt);
		}

	button.float_right {
		position: absolute;
		right: 0.5rem;
		top: 50%;
		transform: translate(0, -50%);
		z-index: 7000;
	}

	button.hot {
		background-color: var(--notify-color) !important;
		border: 1px solid var(--notify-color) !important;
	}

	button.image {
		display: block;
		border: none;
		border-radius: unset;
		background-color: transparent;
		padding: 0;
		margin: 0;
		background-position: center;
		background-size: auto 98%;
		background-repeat: no-repeat;
		box-shadow: unset;
		min-width: unset;
		width: 1.5rem;
		height: 1.5rem;
	}

		button.image.right {
			width: 100%;
			background-position: right center;
		}

		button.image.small {
			background-size: 1rem;
		}

	button.letter {
		margin: 0;
		padding: 0;
		border-radius: 0.5rem;
		font-size: 0.75rem;
		font-family: font_main_regular;
		width: unset;
		min-width: 1rem;
		max-width: unset;
		box-shadow: unset;
	}

	button.menu_item {
		text-align: left;
		width: 100%;
		font-size: 0.85rem;
		padding: 0.5rem 1rem;
		min-width: unset;
		max-width: unset;
	}

	button.mini {
		font-size: 0.85rem;
		padding: 0.5rem 1rem;
		width: unset;
		min-width: unset;
		max-width: unset;
		background-color: var(--clickable-alt-color);
		border-color: var(--clickable-alt-color);
	}

		button.mini.normal {
			background-color: var(--clickable-color);
			border-color: var(--clickable-color);
		}

		button.mini.delete {
			background-color: var(--notify-color) !important;
			border: 1px solid var(--notify-color) !important;
		}

		button.mini.pending {
			background-color: var(--pending-color) !important;
			border: 1px solid var(--pending-color) !important;
		}

		button.mini.thin {
			padding: 0.25rem 0.5rem;
		}

		button.mini.stripe {
			font-family: Verdana, sans-serif;
			padding: 5px 8px;
			font-weight: 600;
			font-variant: normal;
			font-size: 16.625px;
			box-shadow: unset;
		}

	button.module_closer {
		font-size: 0.75rem;
		padding: 0.25rem 0.5rem;
		width: 5rem;
		min-width: 5rem;
		max-width: 5rem;
	}

	button.narrow {
		width: 250px;
		max-width: 250px;
	}

	button.save {
		background-color: var(--clickable-color);
		border: 1px solid var(--clickable-color);
	}

	button.scorecard {
		color: var(--text-color);
		background-color: var(--light-color);
		box-shadow: unset;
		padding: 0.125rem 0;
		width: 1.5rem;
		min-width: 1.5rem;
		max-width: unset;
	}

		button.scorecard.birdie {
			background-color: var(--notify-background-color);
		}

		button.scorecard.bogey {
			background-color: #D7D7FF;
		}

		button.scorecard.double {
			background-color: #D7D7D7;
		}

		button.scorecard.eagle {
			background-color: #D7FFD7;
		}

		button.scorecard.par {
			background-color: var(--light-color);
		}

	button.select_list {
		border: none;
		color: var(--text-color);
		background-color: transparent;
		margin: 0;
		padding: 0 1.25rem 0 0;
		text-align: left;
		font-variant: normal;
		font-size: 1rem;
		font-family: font_main_regular;
		min-width: unset;
		max-width: unset;
		min-height: 1.5rem;
		width: 100%;
		background-position: right 0.1rem center;
		background-repeat: no-repeat;
		background-size: 1rem;
		box-shadow: unset;
	}

	button.text {
		color: var(--clickable-color);
		border: none;
		background-color: transparent;
		margin: 0;
		padding: 0;
		width: unset;
		min-width: unset;
		max-width: unset;
		box-shadow: unset;
		text-align: left;
	}

		button.text.center {
			text-align: center;
		}

	button.wait {
		color: transparent;
		border-color: transparent;
		background-color: transparent;
		background-image: url(/images/uploading.svg);
		background-size: min(100%, 212px) auto;
		background-position: center;
		background-repeat: no-repeat;
		box-shadow: unset;
	}

	button.wide {
		width: 100%;
		max-width: unset;
	}

	button.wrap {
		width: 8rem;
		padding: 0.75rem 0;
	}

.button_box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	grid-gap: 0 0.5rem;
}

	.button_box > button {
		height: 100%;
	}

	.button_box.center {
		justify-content: center;
	}

	.button_box.column {
		flex-direction: column;
		justify-content: flex-start;
		grid-gap: 0.5rem 0;
	}

	.button_box.right {
		width: unset;
		align-self: flex-end;
	}

	.button_box.start {
		justify-content: flex-start;
	}

	.button_box.sticky {
		position: sticky;
		top: -0.85rem;
		padding-bottom: 0.5rem;
		background-color: var(--light-color);
		box-shadow: -12px 0 0 0 var(--light-color), 12px 0 0 0 var(--light-color), 0 -16px 0 0 var(--light-color);
		z-index: 9000;
	}

		.button_box.sticky.padded {
			padding-top: 0.5rem;
		}

	.button_box.top_margin {
		margin-top: 2rem;
	}

	.button_box.wrap {
		justify-content: center;
		grid-gap: 0.25rem 0.25rem;
		flex-wrap: wrap;
	}

		.button_box.wrap button {
			height: unset;
		}

		.button_box.wrap.spaced {
			grid-gap: 0.5rem 1rem;
		}

.calendar_back {
	text-align: center;
	vertical-align: middle;
}

.calendar_next {
	text-align: center;
	vertical-align: middle;
}

.calendar_row {
	display: flex;
	flex-direction: row;
	width: 100%;
}

	.calendar_row > .day_header {
		font-size: 0.75rem;
	}

	.calendar_row > div {
		text-align: center;
		word-break: keep-all;
		flex: 1 1 0;
		width: 0;
	}

.calendar_wrapper {
	display: block;
	width: 100%;
	max-width: 25rem;
}

.cart_button {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	/*justify-content: center;*/
	/*width: 100%;*/
	/*background-color: var(--light-color);*/
	padding-top: 0.5rem;
	z-index: 9900;
	/*transform: translate(-50%, 0);*/
}

.centered {
	text-align: center;
}

.checkbox21 {
	font-family: font_main_bold;
	font-variant: small-caps;
	margin-top: 0.125rem;
	margin-bottom: 0.125rem;
}

	.checkbox21.disabled {
		opacity: 1;
	}

.clickable {
	cursor: pointer;
}

div {
	text-align: left;
}

	div.button_width {
		width: 100%;
		max-width: var(--button-width);
	}

	div.center {
		text-align: center;
		align-self: center;
	}

	div.front {
		z-index: 9500;
	}

	div.header {
		font-family: font_main_bold;
		font-variant: small-caps;
		font-size: 1.1rem;
	}

	div.max_width {
		width: 100%;
		max-width: 500px;
	}

	div.top_margin {
		margin-top: 2rem;
	}

	div.underline {
		padding-bottom: 0.25rem;
		border-bottom: 1px solid var(--text-color);
	}

	div.wait {
		display: none;
		background-color: transparent;
		background-image: url(/images/uploading.svg);
		background-size: min(100%, 212px) auto;
		background-position: center;
		background-repeat: no-repeat;
		width: 100%;
	}

	div.wide {
		width: 100%;
	}

.div_edit {
	font-family: font_main_regular;
	font-size: 1rem;
	border: 1px solid var(--text-color);
	box-sizing: border-box;
	border-radius: 4px;
	padding: 6px 6px;
	background-color: var(--light-color);
	outline: none;
	outline-style: none;
	margin: 0;
	width: 100%;
	max-width: 100%;
	min-height: 4rem;
	text-align: left;
	overflow-x: auto;
}

	.div_edit.short {
		display: flex;
		align-items: center;
		min-height: 1.5rem;
	}

.error {
	font-size: 0.75rem;
	color: var(--error-color);
	width: 100%;
}

	.error.boxed {
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
		text-align: center;
	}

fieldset {
	position: relative;
	border: none;
	margin-inline-start: 0;
	margin-inline-end: 0;
	border-radius: 1.5rem;
	padding: 0.75rem;
	width: 100%;
	background-color: var(--light-color);
	box-shadow: var(--box-shadow-edit);
}

	fieldset .error {
		font-size: 0.75rem;
		text-align: left;
	}

	fieldset input[type="text"], fieldset input[type="password"], fieldset input[type="email"], fieldset input[type="number"], fieldset input[type="date"], fieldset textarea, fieldset .div_edit {
		background-color: transparent;
		border: none;
		padding: 0;
	}

	fieldset.invalid_value {
		box-shadow: var(--box-shadow-invalid);
	}

		fieldset.invalid_value legend {
			color: var(--error-color) !important;
		}

	fieldset.view {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		grid-gap: 0 2rem;
		flex-wrap: wrap;
		box-shadow: var(--box-shadow-view);
	}

.fieldset_wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}
	
	.fieldset_wrapper.multiple {
		padding-bottom: 0.25rem;
	}

	.fieldset_wrapper.invalid_value {
		border: none !important;
	}

		.fieldset_wrapper.invalid_value .legend {
			color: var(--error-color) !important;
		}

.fieldset_subtext {
	font-size: 0.5rem;
	padding: 0 8px 4px 8px;
	margin-left: -6px;
	margin-right: -6px;
	margin-bottom: 8px;
	border-radius: 4px;
	border-bottom: 1px solid var(--medium-gray-color);
	color: var(--medium-gray-color);
}

.flex_box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	grid-gap: 0 0.25rem;
	width: 100%;
}

	.flex_box.center {
		align-items: center;
	}

	.flex_box.centered {
		justify-content: center;
	}

	.flex_box.column {
		flex-direction: column;
		justify-content: flex-start;
		grid-gap: 1rem 0;
	}

		.flex_box.column.center {
			align-items: center;
		}

		.flex_box.column.constrained {
			max-height: 100%;
		}

		.flex_box.column.tight {
			grid-gap: 0;
		}

	.flex_box.left {
		justify-content: flex-start;
	}

	.flex_box.narrow {
		width: unset;
	}

	.flex_box.right {
		justify-content: flex-end;
	}

	.flex_box.scorecard {
		justify-content: center;
		width: unset;
		border: 1px solid var(--medium-gray-color);
		padding: 0 2px 2px 2px;
		border-radius: 8px;
		grid-gap: 0 1px;
	}

	.flex_box.wrap {
		flex-wrap: wrap;
		grid-gap: 0.25rem 0.25rem;
	}

.grow {
	flex-grow: 1;
}

.hidden {
	display: none;
}

hr {
	border: 2px solid var(--medium-gray-color);
	border-radius: 2px;
	margin: 1rem 0;
	width: 100%;
}

html {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

img {
	border-radius: 0.5rem;
	display: block;
}

	img.wide {
		width: 100%;
	}

.img {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	grid-gap: 0.5rem 0;
	padding-bottom: 6px;
	padding-top: 6px;
	border: 1px solid var(--dark-gray-color);
	background-color: var(--light-gray-color);
	border-radius: 0.5rem;
	width: 332px;
}

	.img > div {
		max-width: 320px;
	}

.indent {
	padding-left: 1rem;
}

	.indent.small {
		padding-left: 0.25rem;
	}

input[type="checkbox"]:focus {
	outline: 0 !important;
	filter: var(--focus-indicator);
}

	input[type="checkbox"]:focus:not(:focus-visible) {
		outline: 0 !important;
		filter: unset;
	}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"] {
	font-family: font_main_regular;
	font-size: 1rem;
	color: var(--text-color);
	border: 1px solid var(--text-color);
	box-sizing: border-box;
	border-radius: 4px;
	padding: 6px 6px;
	background-color: var(--light-color);
	outline: none;
	outline-style: none;
	margin: 0;
	width: 100%;
	min-height: 1.5rem;
}

	input[type="text"].invalid_value, input[type="password"].invalid_value, input[type="email"].invalid_value, input[type="number"].invalid_value, input[type="date"].invalid_value, button.select_list.invalid_value {
		border: 1px solid var(--error-color) !important;
	}

.interact_popup {
	position: absolute;
	display: none;
	opacity: 0;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 350px;
	max-height: 80%;
	padding: 16px;
	/*border: 1px solid var(--clickable-color);*/
	box-shadow: var(--box-shadow-view);
	border-radius: 1.25rem;
	background-color: var(--background-color);
	color: var(--text-color);
	text-align: center;
	overflow-y: auto;
	pointer-events: all;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

	.interact_popup::-webkit-scrollbar {
		display: none;
	}

	.interact_popup.shown {
		display: block;
		opacity: 1;
	}

.invalid_value {
	color: var(--error-color) !important;
}

.invisible {
	visibility: hidden;
}

.label {
	font-family: font_main_bold;
	font-variant: normal;
	font-size: 0.75rem;
	text-align: left;
	color: var(--dark-gray-color);
}

.left {
	text-align: left;
}

.legend {
	position: relative;
	display: flex;
	flex-direction: row;
	grid-gap: 0 0.125rem;
	align-items: flex-end;
	margin-left: 0.75rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	font-family: font_main_bold;
	font-variant: normal;
	font-size: 0.75rem;
	text-align: left;
	color: var(--dark-gray-color);
}

	.legend button.image.small {
		position: absolute;
		top: -0.125rem;
		background-size: 1rem;
		width: 1.25rem;
		height: 1.25rem;
	}

	.legend button.image.tiny {
		background-size: 0.75rem;
		width: 1rem;
		height: 1rem;
		margin-left: 0.125rem;
	}

	.legend .button_wrapper {
		position: relative;
		align-self: flex-start;
		width: 1.25rem;
	}

		.legend .button_wrapper.delete {
			position: relative;
			align-self: flex-start;
			display: flex;
			justify-content: flex-end;
			flex-grow: 1;
		}

	.legend.invalid_value {
		color: var(--error-color) !important;
	}

.link_icon {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	min-height: 1.5rem;
	cursor: pointer;
	background-image: url(/image/link);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}

.main {
	position: relative;
	display: flex;
	flex-grow: 1;
	width: 100%;
	max-width: 1000px;
}

.medium {
	font-size: 1.25rem;
}

.menu {
	position: absolute;
	display: none;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0.5rem;
	box-shadow: 0 0 24px var(--text-color);
	min-width: 250px;
	overflow-y: auto;
	background-color: var(--light-gray-color);
	z-index: 100000;
}

.menu_icon {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-right: 4px;
	padding: 4px 0;
}

.message_name {
	display: inline-block;
	font-size: 0.75rem;
	padding-top: 0.125rem;
	margin-top: 0.125rem;
	border-top: 1px solid var(--dark-gray-color);
}

.module {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--light-color);
	box-shadow: 0 0 24px var(--text-color);
	overflow: hidden;
	visibility: hidden;
}

	.module.shown {
		visibility: visible;
	}

		.module.shown .module_contents {
			padding-top: 32px;
		}

		.module.shown.full .module_contents {
			padding-top: 8px;
		}

.module_back_wrapper {
	display: block;
	word-break: normal;
	margin-left: 1rem;
}

.module_closer_wrapper {
	display: block;
	word-break: normal;
	margin-left: 1rem;
}

.module_home_wrapper {
	display: block;
	word-break: normal;
	margin-left: 1rem;
}

.module_contents {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--light-color);
	flex-grow: 1;
	padding: 16px 12px 64px 12px;
	overflow-x: hidden;
	overflow-y: auto;
}

.module_header {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	background-color: var(--light-gray-color);
	box-shadow: 0 2px 8px -2px var(--dark-gray-color);
	z-index: 10001;
	min-height: 3rem;
	flex-shrink: 0;
}

.module_title {
	display: flex;
	grid-gap: 0 6px;
	flex-grow: 1;
	align-items: center;
	font-size: 1.25rem;
	font-variant: small-caps;
	overflow-x: hidden;
}

	.module_title.center {
		justify-content: center;
	}

	.module_title.small {
		font-size: 0.75rem;
	}

.no_break {
		white-space: nowrap;
	}

.no_select, button, .label, .section, .notify, .icon, legend, .fieldset_subtext, .module_closer, .module_closer_disabled, .module_title, .app_header_logo, .menu_icon, .menu, button.select_list, .list_popup, .tab_header {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.notify {
	color: var(--notify-color);
}

.radio_button_item {
	padding-bottom: 2px;
	padding-top: 2px;
}

.radio21 {
	font-family: font_main_bold;
	font-variant: small-caps;
}

.readonly {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 1.5rem;
}

.score {
	text-align: center;
	padding: 0.25rem 0.5rem;
	background-color: var(--light-gray-color);
	border: 1px solid var(--medium-gray-color);
	border-radius: 1rem;
	width: 3rem;
	min-width: 3rem;
}

	.score.finished {
		background-color: #D7FFD7;
	}

.scorecard_cell {
	font-size: 0.7rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: transparent;
	padding: 0 3px;
	text-align: center;
	width: 16px;
	max-width: 16px;
	min-width: 16px;
}

	.scorecard_cell.birdie {
		border: 1px solid var(--dark-gray-color);
		background-color: var(--notify-background-color);
	}

	.scorecard_cell.bogey {
		border: 1px solid var(--dark-gray-color);
		background-color: #D7D7FF;
	}

	.scorecard_cell.double {
		border: 1px solid var(--dark-gray-color);
		background-color: #D7D7D7;
	}

	.scorecard_cell.eagle {
		border: 1px solid var(--dark-gray-color);
		background-color: #D7FFD7;
	}

	.scorecard_cell.par {
		border: 1px solid var(--dark-gray-color);
		background-color: var(--light-color);
	}

.scorecard_hole {
	font-size: 0.75rem;
	text-align: center;
	color: var(--text-color);
}

	.scorecard_hole.start {
		color: #FF0000;
	}

	.scorecard_hole.tiny {
		font-size: 0.5rem;
		min-width: 0.65rem;
	}

.scorecard_col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	grid-gap: 0;
	align-self: flex-start;
}

.scorecard_row {
	display: flex;
	flex-direction: row;
	grid-gap: 0.25rem;
}

.scroller {
	padding: 0.25rem;
	background-color: var(--light-color);
	overflow-y: scroll;
	min-height: 6rem;
	max-height:100%;
	width: 100%;
}

.section_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.25rem;
	border-radius: 1.5rem;
	padding: 0.75rem;
	width: 100%;
	background-color: var(--light-gray-color);
	box-shadow: var(--box-shadow-view);
}

.select_list_closer {
	margin-top: 0.6rem;
	margin-bottom: 0.5rem;
	padding-right: 0.85rem;
}

.select_list_content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	grid-gap: 0.5rem 0.5rem;
	width: 100%;
	padding-right: 0.5rem;
	overflow-y: auto;
}

.select_list_item {
	display: block;
}

.select_list_popup {
	position: absolute;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border-radius: 1.5rem;
	padding: 0 0 0.75rem 0.75rem;
	background-color: var(--background-color);
	border: 1px solid var(--clickable-color);
	width: 100%;
	z-index: 10000;
}

.select_list_subtext {
	color: var(--text-color);
	font-size: 0.75rem;
	opacity: 0.75;
}

.sold_out {
	text-align: center;
	color: var(--notify-color);
}

.status {
	font-family: font_main_bold;
	font-size: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--dark-gray-color);
	padding: 0.25rem 0.5rem;
	border-radius: 1rem;
	word-break: keep-all;
}

	.status.declined {
		background-color: var(--notify-color);
		color: var(--light-color);
	}

	.status.pending {
		background-color: var(--pending-color);
	}

	.status.sold {
		background-color: var(--complete-color);
		color: var(--light-color);
	}

.status_float {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(20deg);
	color: var(--light-color);
	padding: 0 4px;
	border-radius: 8px;
	word-break: keep-all;
}

	.status_float.inactive {
		background-color: var(--notify-color);
	}

	.status_float.pending {
		background-color: var(--pending-color);
	}

	.status_float.sold {
		background-color: var(--complete-color);
	}


.subtext {
	font-size: 0.75rem;
}

table {
	border-spacing: 0;
	width: 100%;
	border: none;
}

	table.cart {
		max-width: 500px;
	}

	table.cart td {
		vertical-align: top;
	}

	table.max_width {
		max-width: 300px;
	}

td {
	text-align: center;
	vertical-align: middle;
	padding: 0.25rem 0.25rem;
}

	td.border {
		border-top: 1px solid var(--dark-gray-color);
	}

	td.icon {
		position: relative;
		width: 2rem;
		padding-right: 0.5rem;
	}

		td.icon button {
			position: relative;
			top: -3px;
		}

	td.left {
		text-align: left;
		padding-left: 0.5rem;
	}

	td.right {
		text-align: right;
	}

	td.unavailable {
		background-color: var(--notify-background-color);
	}

th {
	border-bottom: 1px solid var(--dark-gray-color);
	text-align: center;
	vertical-align: middle;
	padding: 0.25rem 0.25rem;
}

.tinytext {
	font-size: 0.6rem;
}

.timeout_message {
	display: inline-block;
	padding: 16px;
	border: 1px solid var(--clickable-color);
	border-radius: 1.25rem;
	background-color: var(--background-color);
	color: var(--text-color);
	max-width: 340px;
	text-align: center;
	font-size: 0.75rem;
}

.timeout_message_wrapper {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	top: 30%;
	display: none;
}

.wait_spinner {
	position: relative;
	left: -50%;
	background-color: transparent;
	text-align: center;
}

.wait_spinner_wrapper {
	position: absolute;
	left: 50%;
	top: 40%;
	display: none;
	opacity: 0;
}

[contenteditable] {
	-webkit-user-select: text;
	user-select: text;
}