/*
	The base css file for all sites and devices.
	No sizes should be set here; just resets and universal styles
*/

/* Reset (clears inconsistent default styles from various browsers) */
	* {
		margin: 0;
		padding: 0;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		/*
		vertical-align: top;
		*/
	}
	table {
		border: 0 none;
		border-collapse: collapse;
		border-spacing: 0;
		clear: both;
	}
	html {
		height: 100%;
		/*
		overflow-y: scroll;
		*/
	}
	body {
		height: 100%;
		color: black;
	}
	pre {
		/*
		white-space: pre-wrap;
		*/
		tab-size: 2;
	}
	label {
		font-weight: normal;
		/*
		display: block;
		*/
	}
	input,
	textarea,
	keygen,
	select,
	button {
		font-family: inherit;
		font-size: inherit;
	}
	button,
	input[type="button"] { /* button reset - also see https://css-tricks.com/overriding-default-button-styles/ */
		/*
		border: 1px solid black;
		*/
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	input[type="submit"] {
		
		/* https://stackoverflow.com/a/46804231/1465198 */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		
		/* https://stackoverflow.com/a/54740199/1465198 */
		opacity: 1;
		
		/* a hack I added myself. text was bold and white on all ios browsers. -chris */
		color: black;
		font-weight: normal;
	}
/* end reset */

/*
	make ALL divs relative by default. this is a major change
	
	argument for: we rarely if ever need a statically positioned element, and this saves us the hassle of manually setting
	 the position attribute of each div one level up from an absolutely-positioned element, and for each z-indexed element
	
	argument against: https://css-tricks.com/what-if-there-was-no-position-static/
*/
div {
	position: relative;
}

/* Headings */
/* end Headings */
	
	.fill {
		height: 100%;
	}
	.full {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.pointer { /* OBSOLETE - use .clickable instead */
		cursor: pointer;
	}
	i.pointer:before {
		cursor: pointer !important; /* override font-awesome's problem */
	}
	a {
		display: inline-block;
	}
	a.external {
		color: #00e;
		/*text-decoration: underline; */
		background-repeat: no-repeat;
		background-position: 100% 25%;
		padding-right: 13px;
		min-height: 10px;
	}
	a.external.raw {
		background-position: 0% 50%;
		padding-left: 13px;
	}
	a.external-block {
		padding-right: 8px;
		background-repeat: no-repeat;
		background-position: 98% 5%;
	}
	a.external-block:before {
	}

/* Forms & Inputs */
	input.both-is-default,
	textarea.both-is-default,
	select.both-is-default {
		color: #999;
	}
	select.both-is-default > option {
		color: initial;
	}
	.single-line-text-input:active,
	.multi-line-text-input:active,
	.dropdown-select-input:active,
	.number-input:active .number-input-window,
	.button-select-input > div:active /*, .button-toggle-input > input:checked:active + label */ {
		outline: #F0FFCA solid 2px;
		outline-offset: -3px;
	}
	.single-line-text-input:focus,
	.multi-line-text-input:focus,
	.dropdown-select-input:focus,
	.number-input:focus-within .number-input-window,
	.button-select-input > div:focus /*, .button-toggle-input > input:checked:focus + label */ {
		outline: #D3FF61 solid 2px;
		outline-offset: -3px;
	}
	div:disabled,
	input:disabled,
	select:disabled {
		color: #999;
		background-color: #CCC;
	}
	label.disabled {
		color: #999;
	}
	input, select {
		border: 1px solid #AAA;
		border-radius: 0;
	}
	
	.editable-indicator {
		position: absolute;
		top: 0;
		left: 100%;
		color: #CCC;
		padding-left: 4px;
		cursor: pointer;
	}
	.editable-indicator:hover {
		color: #555;
	}
	.editable-indicator > i:before {
		cursor: inherit;
	}
	
	/* classic (chads) select */
		.chad-select-input > div {
			clear: both;
		}
		.chad-select-input > div > input {
			float: left;
			height: 22px;
			/*
			width: auto;
			margin: .1em 3px .2em 0;
			*/
		}
		.chad-select-input > div > label {
			padding: 3px 0 0 3px;
		}
		
	/* chadless (button) select */
		input[type="radio"].button-select-input { /* taken from jQuery ui-buttonset styles */
			position: absolute !important;
			clip: rect(1px 1px 1px 1px);
		}
		input[type="radio"].button-select-input + label { /* taken loosely from jQuery ui-buttonset styles */
			border: 1px solid #999;
			padding: 8px 11px;
			background-color: white;
			cursor: pointer;
			display: block;
			margin-right: -1px;
			margin-bottom: -1px;
		}
		input[type="radio"].button-select-input:checked + label {
			background-color: #D3FF61; /* #F0FFCA; */
			/*
			border: 1px solid #D3FF61;
			*/
		}
		/*
		input[type="radio"]:hover.button-select-input + label {
			background-color: #F0FFCA;
			border: 1px solid #D3FF61;
		}
		*/
	
	/* classic checkbox */
		.check-toggle-input > input {
			/*
			float: left;
			height: 30px;
				clear: left;
				margin: .1em 6px .2em 2px;
				width: auto;
			*/
		}
		/*
		div.checkbox label {
			display: inline;
		}
		*/
		.check-toggle-input > label {
			padding: 3px 0 0 5px;
		}
	
	/* box-less checkbox */
		.button-toggle-input > input { /* taken from jQuery ui-buttonset styles */
			position: absolute !important;
			clip: rect(1px 1px 1px 1px);
		}
		.button-toggle-input > label { /* taken loosely from jQuery ui-buttonset styles */
			border: 1px solid #999;
			padding: .5em;
			background-color: white;
			cursor: pointer;
			margin-right: -1px;
			/*
			display: block;
			*/
		}
		/*
		input[type="checkbox"].button-toggle-input:hover + label {
			background-color: #F0FFCA;
			border: 1px solid #D3FF61;
		}
		*/
		.button-toggle-input > input:checked + label {
			background-color: #D3FF61; /* #F0FFCA; */
			/*
			border: 1px solid #D3FF61;
			*/
		}
	
	/* toggle (slider) checkbox */
		.toggle-input {
			display: inline-block;
			z-index: 1;
		}
		.toggle-input.on {
		}
		.toggle-input.off {
		}
		.toggle-input > div {
			cursor: pointer;
			border: 1px solid black;
			/*
			box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .5);
			*/
			box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
		}
		.toggle-input .movable {
			position: relative;
			z-index: -1;
			background-color: white;
			padding-top: .1em;
			padding-bottom: .1em;
		}
		.toggle-input.on .movable {
		}
		.toggle-input.off .movable {
		}
		
		.toggle-input .movable > div:nth-child(1) { /* "on" text */
			display: none;
			padding-right: 1em;
			text-align: right;
		}
		.toggle-input.on .movable > div:nth-child(1) {
			display: block;
		}
		.toggle-input .movable > div:nth-child(2) { /* slider handle */
			position: absolute;
			top: 1px;
			bottom: 1px;
			width: 5px;
			border: 1px solid #555;
			border-radius: 2px;
			box-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
		}
		.toggle-input.off .movable > div:nth-child(2) {
			left: 2px;
		}
		.toggle-input.on .movable > div:nth-child(2) {
			right: 2px;
		}
		.toggle-input .movable > div:nth-child(3) { /* "off" text */
			display: none;
			padding-left: 1em;
		}
		.toggle-input.off .movable > div:nth-child(3) {
			display: block;
		}
	
	/* three-state-checkbox */
		.three-state-input {
			overflow: hidden;
			cursor: pointer;
		}
		.three-state-input label {
			display: block;
			padding: 0 0 4px;
		}
		.three-state-input > div {
			border: 1px solid #999;
			box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
			background-color: #fff;
		}
		.three-state-input.active > div {
			background-color: #ddd;
			transition: background-color 0.5s;
		}
		.three-state-input .three-state-input-button { /* one of the three choices */
			display: inline-block;
			padding: 4px 8px;
			text-align: center;
			width: 50px;
			margin: -1px;
		}
		.three-state-input.active .three-state-input-button {
			color: #999;
			transition: color 0.8s;
		}
		.three-state-input .three-state-input-button.active {
			transition: none;
			font-weight: bold;
			color: inherit;
			background: white;
			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
			border: 1px solid black;
		}
		
		.three-state-input .three-state-input-button:nth-child(1) {
		}
		.three-state-input .three-state-input-button:nth-child(2) {
			width: 30px;
		}
		.three-state-input .three-state-input-button:nth-child(2).active {
			/*
			border: 1px solid #999;
			*/
		}
		.three-state-input .three-state-input-button:nth-child(3) {
		}
		.three-state-input .three-state-input-button:nth-child(3).active {
			box-shadow: none;
		}
	/* end three-state-checkbox */
	
	/* time select */
		.time-select-wrapper {
			position: absolute;
			top: 0;
			left: -31px;
			right: -31px;
			bottom: -7px;
			border-bottom: 6px solid #CCC;
			border-right: 30px solid transparent;
			border-left: 30px solid transparent;
		}
		
	/* time input mobile 5 */
		.mobile-time-input-5 {
			width: 280px;
			padding: 20px 0 0;
			cursor: pointer;
		}
		.mobile-time-input-5 > div { /* slider container */
			cursor: pointer;
		}
		.mobile-time-input-5 > div > div:nth-child(1) { /* hours container */
			display: inline-block;
			white-space: nowrap;
			padding-left: calc( 50% - 20px );
			padding-right: calc( 50% - 20px );
			width: 100%;
			overflow: hidden;
		}
		.mobile-time-input-5 > div > div:nth-child(1) > div { /* hour */
			display: inline-block;
			vertical-align: top;
			text-align: center;
			padding: 10px 0;
			width: 40px;
			height: 40px;
			border: 1px solid black;
			transition: background-color 0.3s;
		}
		.mobile-time-input-5 > div > div:nth-child(1) > div:not(:first-child) {
			margin-left: -1px;
		}
		.mobile-time-input-5 > div > div:nth-child(1) > div.state-set { /* selected hour */
			background: lightgreen;
		}
		.mobile-time-input-5 > div > div:nth-child(2) { /* hour target */
			position: absolute;
			left: 50%;
			border: 2px solid #333;
			border-radius: 3px;
			width: 50px;
			margin-left: -25px;
			pointer-events: none;
		}
		.mobile-time-input-5.state-1 > div > div:nth-child(2) {
			top: -8px;
			height: 9px;
			margin-top: -3px;
		}
		.mobile-time-input-5.state-2 > div > div:nth-child(2) {
			top: 20px;
			height: 50px;
			margin-top: -25px;
		}
	/* end time input mobile 5 */
	
	.single-line-text-input {
		height: 30px;
		/*
		padding: 3px 4px;
		border: 1px solid black;
		*/
	}
	.multi-line-text-input {
		/*
		padding: 3px 4px;
		*/
	}
	input,
	select {
		padding: 1px 2px;
	}
	input[type=text]:not(.inline),
	input[type=password]:not(.inline) { /* single line text input */
		/*
		margin-left: 2px; /* to match the small gutter that text has automatically *
		*/
	}
	input.small,
	select.small {
		height: 22px;
	}
	textarea {
		padding: 4px;
		font-family: inherit;
		font-size: inherit;
		/*
			margin-left: 2px; /* to match the small gutter that text has automatically - we don't seem to be seeing this issue anymore *
		*/
	}
	
	/* number input */
		
		.number-input {
			display: inline-block;
			vertical-align: top;
		}
		.number-input.empty {
			
		}
		
		.number-input label {
			display: block;
		}
		.number-input > div { /* window + buttons */
			width: 99px; /* should be a multiple of 3 */
		}
		.number-input .number-input-window {
			padding: 10px 20px;
			background-color: white;
			border: 1px solid #aaa;
			width: 100%;
		}
		.number-input-display {
			text-align: center;
			line-height: 1;
			height: 1em;
			overflow: hidden;
		}
		.number-input-back,
		.number-input-clear {
			position: absolute;
			top: 0;
			bottom: 0;
			line-height: 1;
			padding: 10px 6px;
			cursor: pointer;
			user-select: none;
			transition: opacity 0.4s;
			opacity: 1;
		}
		.number-input.empty .number-input-back,
		.number-input.empty .number-input-clear,
		.number-input.collapsed .number-input-back,
		.number-input.collapsed .number-input-clear {
			transition: none;
			opacity: 0;
			pointer-events: none;
		}
		.number-input-back {
			right: 0;
			color: #bbb;
		}
		.number-input-clear {
			left: 0;
			font-weight: bold;
			color: #aaa;
			opacity: 1;
		}
		
		.number-input-keypad {
			width: 100%;
			margin-top: 2px;
			background: white;
		}
		.number-input.collapsed .number-input-keypad {
			display: none;
		}
		.number-input-keypad td {
			width: calc( ( 100% ) / 3 );
			border: 1px solid #999;
		}
		.number-input-keypad .number-input-digit {
			text-align: center;
			width: 100%;
			/*
			margin-top: -1px;
			margin-left: -1px;
			border: 1px solid #999;
			*/
		}
		/*
		.number-input tr:first-of-type .number-input-digit {
			margin-top: 2px;
		}
		.number-input td:first-of-type .number-input-digit {
			margin-left: 0;
		}
		.number-input tr:last-of-type .number-input-digit {
			margin-bottom: 0;
		}
		*/
		
	/* end number input */
	
	/* letter picker input */
		.letter-picker {
			height: 25vw;
		}
		.letter-picker > div { /* row */
			padding: 0.3vw 0 0;
		}
		.letter-picker > div:nth-child(1) {
		}
		.letter-picker > div:nth-child(2) {
			padding-left: 2vw;
		}
		.letter-picker > div:nth-child(3) {
			padding-left: 4vw;
		}
		.letter-picker > div:nth-child(4) {
			padding-left: 6vw;
		}
		.letter-picker > div > div { /* letter */
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 4.5vw;
			height: 4.5vw;
			font-size: 16px;
			text-align: center;
			padding-top: calc( ( 4.5vw - 16px ) / 2.7 );
			background: white;
			border: 1px solid #999;
			border-radius: 2px;
			cursor: pointer;
			user-select: none;
		}
		.letter-picker > div > div:not(:first-child) {
			margin-left: 0.3vw;
		}
		.letter-picker > div > div::after { /* letter click circle effect */
			display: none;
			position: absolute;
			top: calc ( 9vw / 2 );
			left: calc ( 9vw / 2 );
			border: 2px solid green;
		}
	/* end letter picker */
	
	.dropdown-select-input {
		height: 30px;
		background: white;
	}
	
	/* time range slider input */
		.time-range-slider-input {
			
		}
		.time-range-slider-input.empty {
			
		}
		
		.time-range-slider-input label {
			display: block;
			padding: 0 0 4px;
		}
		.time-range-slider-input input[name="startHourText"] {
			width: 4.5em;
			text-align: right;
			padding-right: 4px;
			padding-left: 0;
		}
		.time-range-slider-input input[name="endHourText"] {
			width: 8.8em;
			text-align: right;
			padding-right: 4px;
			padding-left: 0;
		}
	/* end time range slider input */
	
	/* datepicker */
		.ui-widget-header {
			background: #D3FF61;
			color: black;
		}
		.ui-widget-header a {
			color: black;
		}
	/* end datepicker */
/* end Forms & Inputs */

/* Buttons */
	/*button, , input[type="submit"], input[type="reset"], input[type="file"]  {*/
	.both-button {
		border: 1px solid black;
		background-color: white;
		cursor: pointer;
		outline-offset: -3px;
		
		/* https://stackoverflow.com/a/53236027 */
		touch-action: manipulation;
	}
	.both-button i:before {
		cursor: pointer !important; /* override font-awesome's problem */
	}
	.clickable {
		cursor: pointer;
		user-select: none;
		touch-action: manipulation;
	}
	i.clickable:before {
		cursor: pointer !important; /* override font-awesome's problem */
	}
	.clickable i:before {
		cursor: pointer !important; /* override font-awesome's problem */
	}
	.unclickable {
		cursor: auto;
	}
	.both-button.dim {
		border: 1px solid #CCC;
	}
	.both-button.mod {
		border: 1px solid #E9BE00;
		background-color: white;
	}
	.both-button.admin {
		border: 1px solid #B100E9;
		background-color: white;
	}
	.both-button.stealth-button { /* appears without the "box" to look like text or a link */
		border: none;
		background-color: transparent;
		outline-offset: -2px;
	}
	.close-button {
		background-color: transparent;
		font-weight: bold;
		text-align: center; 
	}
	.saved-button {
		background-color: #C8F3C8;
	}
	.flagged-button {
		background-color: #666 !important;
		color: white !important;
		font-weight: bold;
	}
	.both-button:active {
		outline: #F0FFCA solid 2px;
	}
	.both-button:focus {
		outline: #D3FF61 solid 2px;
	}
/* end Buttons */

/* Button Flip - see http://davidwalsh.name/css-flip */
	
	/* entire container, keeps perspective */
	.flip-container {
		position: relative;
		perspective: 1000;
	}
	.flip-container .flipper {
		transform-origin: 100% 5px; /* half of height */
	}
	/* flip the pane when given the .flipped class */
	.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flipped .flipper {
		transform: rotateX(-180deg);
	}
	
	.flip-container, .button-flip-front, .button-flip-back {
		/*
		width: 320px;
		height: 480px;
		*/
	}
	
	/* flip speed goes here */
	.flipper {
		transition: 0.6s;
		transform-style: preserve-3d;
		position: relative;
	}
	
	/* hide back of pane during swap */
	.button-flip-front, .button-flip-back {
		backface-visibility: hidden;
		
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/* front pane, placed above back */
	.button-flip-front {
		z-index: 2;
		/* for firefox 31 */
		transform: rotateX(0deg);
	}
	
	/* back, initially hidden pane */
	.button-flip-back {
		transform: rotateX(180deg);
	}
/* end Button Flip */

/* Expandable Elements */
	.dropdown {
		display: none;
		position: absolute;
		z-index: 100;
		/*
		padding: 5px;
		border: 1px solid black;
		*/
		white-space: nowrap;
		background-color: white;
		-webkit-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.5);
		-moz-box-shadow:    3px 3px 10px rgba(50, 50, 50, 0.5);
		box-shadow:         3px 3px 10px rgba(50, 50, 50, 0.5);
	}
	/*
	.both-dropdown-block .both-button {
		z-index: 1000;
		position: relative;
	}
	*/
	.dropdown.left {
		left: 0;
	}
	.dropdown.right {
		right: 0;
	}
	.dropdown.top {
		bottom: 0;
	}
	.dropdown.bottom {
		top: 100%;
	}
	
	.hover-reveal {
		
	}
	.hover-reveal::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		border-top: 9px solid gray;
		border-left: 9px solid transparent;
	}
	.hover-reveal.small::after,
	.small .hover-reveal::after {
		border-top: 5px solid gray;
		border-left: 5px solid transparent;
	}
	.hover-revealed {
		position: absolute;
		display: none;
		z-index: 100;
	}
	.hover-reveal:hover .hover-revealed {
		display: block;
	}
/* end Expandable Elements */

/* Colors & Borders */
	
	.chewitt-color {
		color: #D3FF61;
	}
	.chewitt-color-light {
		color: #F0FFCA;
	}
	.chewitt-bg {
		background-color: #D3FF61;
	}
	.chewitt-bg-light {
		background-color: #F0FFCA;
	}
	.chewitt-border {
		border: 1px solid #D3FF61;
	}
	/* too light to be practical
	.chewitt-border-light {
		border: 1px solid #F0FFCA;
	}
	*/
	
	.border {
		border: 1px solid black;
	}

	.dim {
		color: #999;
	}
	.dim-border {
		border: 1px solid #CCC;
	}

	.dim-2 {
		color: #CCC;
	}
	.faint {
		color: #CCC;
	}
	
	.light {
		color: #eee;
	}
	
	.mod {
		color: #E9BE00 !important; 
	}
	.mod-border {
		border: 1px solid #E9BE00;
	}
	
	.admin {
		color: #B100E9 !important;
	}
	.admin-border {
		border: 1px solid #B100E9;
	}
	
	.test-bg-light {
		background: repeating-linear-gradient(
			-45deg,
			#fef,
			#fef 1px,
			white 1px,
			white 6px
		)
	}
	.test-bg-dark {
		background: repeating-linear-gradient(
			-45deg,
			#424,
			#424 1px,
			black 1px,
			black 6px
		)
	}
	.transparent-bg {
		background-color: transparent;
	}
	.dim-bg {
		background-color: #CCC;
	}
	.faint-bg {
		background-color: #eee;
	}
	.light-bg {
		background-color: #eee;
	}
	.white-bg {
		background-color: white;
	}
	.good {
		background-color: palegreen; /* #DFD */
	}
	.bad {
		background-color: tomato;
	}
/* end Colors & Borders */

.vertical-center-outer {
	display: table;
	width: 100%;
	height: 100%;
}
.vertical-center-inner {
	display: table-cell;
	vertical-align: middle;
}

.wait-block {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.wait-block-contents {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.corner-frame-top-left,
.corner-frame-top-right,
.corner-frame-bottom-left,
.corner-frame-bottom-right {
	position: absolute;
	height: 10px;
	width: 10px;
	border-width: 0;
	border-style: solid;
	border-color: #CFCFFF;
}
.corner-frame-top-left {
	top: 0;
	left: 0;
	border-top-width: 1px;
	border-left-width: 1px;
}
.corner-frame-top-right {
	top: 0;
	right: 0;
	border-top-width: 1px;
	border-right-width: 1px;
}
.corner-frame-bottom-left {
	bottom: 0;
	left: 0;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.corner-frame-bottom-right {
	bottom: 0;
	right: 0;
	border-bottom-width: 1px;
	border-right-width: 1px;
}

.element-explain-container {
}
.element-explain {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.element-explain-container:hover > .element-explain {
	border: 2px dashed #CCC;
}
.element-explain > div {
	position: absolute;
	top: 100%;
	right: 0;
	background: #CCC;
	padding: 2px 4px;
	display: none;
}
.element-explain-container:hover > .element-explain > div {
	display: block;
}

/* Zoomable Block */
	
	.zoomable-block {
		/*
		position: static;
		position: absolute;
		left: 0;
		bottom: 0;
		*/
		width: 100%;
		height: 100%;
		overflow: hidden;
		cursor: pointer;
		transition: transform 0.25s ease-out;
		transform: scale(1);
	}
	.zoomable-block.zoom-backwards {
	}
	.zoomable-block.zoomed {
		/*
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		*/
		transition: transform 0.25s ease-in;
		transform: scale(2);
		cursor: default;
	}
	.zoomable-block > * {
	}
	
	.zoomable-block > .zoom-expanded {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform-origin: center;
		border: 1px solid black;
		transition: filter 0.25s, opacity 0.25s;
		transform: scale(0.5);
		filter: blur(2px);
		opacity: 1;
	}
	.zoomable-block.zoomed > .zoom-expanded {
		filter: blur(0);
		opacity: 1;
		height: auto;
	}
	
	.zoomable-block > .zoom-close {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform-origin: center;
		border: 1px solid black;
		transition: filter 0.25s, opacity 0.25s;
		transform: scale(0.5);
		filter: blur(2px);
		opacity: 1;
		pointer-events: none;
	}
	.zoomable-block.zoomed > .zoom-close {
		filter: blur(0);
		opacity: 1;
	}
	.zoomable-block > .zoom-close > div {
		position: absolute;
		top: 0;
		/*
		right: -50%;
		*/
		right: 0;
		padding: 8px;
		transition: opacity 0.4s;
		opacity: 0;
		pointer-events: auto;
	}
	.zoomable-block.zoomed > .zoom-close > div {
		opacity: 1;
		cursor: pointer;
		pointer-events: auto;
	}
	.zoomable-block > .zoom-close > div > div {
		padding: 4px;
		border: 1px dotted #999;
	}
	.zoomable-block > .zoom-close > div > div > div {
		height: 10px;
		width: 10px;
		border: 1px solid #000;
	}
	
	.zoomable-block > .zoom-default {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: white;
		border: 1px solid black;
		transition: opacity 0.25s;
		opacity: 0.9;
	}
	.zoomable-block.zoomed > .zoom-default {
		opacity: 0;
		pointer-events: none;
	}
	
	.zoomable-block > .zoom-overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: black;
		transition: opacity 0.4s;
		opacity: 0.1;
		display: none;
	}
	.zoomable-block.zoomed > .zoom-overlay {
		pointer-events: none;
		opacity: 0;
	}
	
	@media only screen and (max-width: 400px) {
	}
/* end Zoomable Block */

/* Other Layout Utilities */
	
	.absolute {
		position: absolute;
	}
	.fixed {
		position: fixed;
	}
	.relative {
		position: relative;
	}
	.static {
		position: static;
	}
	
	/*
		            |       | break  | break |
		type        | width | before | after | layout           | native css way
		------------|-------|--------|-------|------------------|----------------
		            |       |        |       | ┌──────────────┐
		inline      | min   | no     | no    | │foo[bar]baz   │  <div syle="display: inline-block"></div>
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		?           | full  | no     | no    | │foo[ bar  ]baz│
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		?           | min   | no     | yes   | │foo[bar]      │  <div syle="display: inline-block"></div><br>
		            |       |        |       | │baz           │
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		?           | full  | no     | yes   | │foo[   bar   ]│
		            |       |        |       | │baz           │
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		?           | min   | yes    | no    | │foo           │  <br><div syle="display: inline-block"></div>
		            |       |        |       | │[bar]baz      │
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		?           | full  | yes    | no    | │foo           │
		            |       |        |       | │[   bar   ]baz│
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		            |       |        |       | │foo           │  <br><div syle="display: inline-block"></div><br>
		?           | min   | yes    | yes   | │[bar]         │  or
		            |       |        |       | │baz           │  <div><div syle="display: inline-block"></div></div>
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		            |       |        |       | │foo           │
		block       | full  | yes    | yes   | │[    bar     ]│  <div></div>
		            |       |        |       | │baz           │
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		absolute    | min   | -      | -     | │[bar]z        │  <div style="position: absolute; top: 0; left: 0; "></div>
		            |       |        |       | └──────────────┘
		            |       |        |       | 
		            |       |        |       | ┌──────────────┐
		full        | full  | -      | -     | │[    bar     ]│  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
		            |       |        |       | └──────────────┘
		            |       |        |       | 
	*/
	.box {
		display: inline-block;
	}
	/* TODO: make this display: inline */
	.inline {
		display: inline-block;
	}
	.stacked {
		display: inline-block;
	}
	.stacked::after {
		content: "\a"; /* line break */
	}
	.block {
		display: block;
	}
	.hidden {
		display: none;
	}
	.nowrap {
		white-space: nowrap;
	}
	
	.top {
		vertical-align: top;
	}
	
	.padded {
		padding: 3px 5px;
	}
	.small.padded {
		padding: 2px 4px;
	}
	.padded-2 {
		padding: 8px 10px;
	}
	.small.padded-2 {
		padding: 7px 9px;
	}
/* end Other Layout Utilities */

/* Other Text Utilities */
	.bold {
		font-weight: bold;
	}
/* end Other Text Utilities */

/* Flex Utilities */
	.flex {
		display: flex;
	}
	.inline-flex {
		display: inline-flex;
	}
	.flex-1 {
		flex: 1;
	}
	.flex-col {
		display: flex;
		flex-direction: column;
	}
/* end Flex Utilities */

/* Obsolete? */
	a.dim {
		color: #999;
	}
	a.dim.underlined {
		text-decoration: underline;
	}
/* end Obsolete? */