body {
	/*font-family: monospace;*/
	text-rendering: optimizeLegibility;
	font-size: 2em;
}

u {
	background-color: blanchedalmond;
	text-decoration: none;
	padding: 5px;
	margin: -5px;
	border-radius: 5px;
}

.content {
	max-width: 80rem;
}

.bold { font-weight: bold; }

.block { display: block; }

.allcaps { text-transform: uppercase; }

.centered {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.vspacer-lg { margin-top: .75em; margin-bottom: .75em; }
.vspacer-md { margin-top: .3em; margin-bottom: .3em; }
.vspacer-sm { margin-top: .2em; margin-bottom: .2em; }
.vspacer-xs { margin-top: .1em; margin-bottom: .1em; }

.bspacer-lg { margin-bottom: .75em; }
.bspacer-md { margin-bottom: .3em; }
.bspacer-sm { margin-bottom: .2em; }
.bspacer-xs { margin-bottom: .1em; }

.tspacer-lg { margin-top: .75em; }
.tspacer-md { margin-top: .3em; }
.tspacer-sm { margin-top: .2em; }
.tspacer-xs { margin-top: .1em; }

.hspacer-lg { margin-left: .75em; margin-right: .75em; }
.hspacer-md { margin-left: .3em; margin-right: .3em; }
.hspacer-sm { margin-left: .2em; margin-right: .2em; }
.hspacer-xs { margin-left: .1em; margin-right: .1em; }

.text-lg { font-size: 1.5em; }
.text-md { font-size: 1.25em; }
.text-sm { font-size: .85em; }
.text-xs { font-size: .7em; }

.btn-launcher {
	font-size: 1.5em;
	font-weight: bold;
}

.btn-wide {
	padding-left: 3em;
	padding-right: 3em;
}

.reference {
	border-bottom: dotted 1px #333;
	cursor: pointer;
}

.pointer { cursor: pointer; }

.tasks-board, .empty {
	min-height: 100vh;
}

.task {
	float: left;
	width: 20em;
	height: 50vh;
	max-height: 18em;
	padding: 10px;
	border-radius: 4px;
	box-shadow: 0px 0px 5px;
	overflow: hidden;
	font-family: cursive;
}

.task.active {
	box-shadow: 0 0 11px #e4b526;
	border: solid 1px #e4b526;
}

.task h1 { font-size: 1.6em; }
.task h2 { font-size: 1.4em; }
.task h3 { font-size: 1.25em; }
.task h4 { font-size: 1.15em; }

.bg-task {
	background-color: #fff2ac;
}
.border-task {
	border: solid 1px #fff2ac;
}

.task-text {
	margin-top: 1.25em; /* related: font-size of .task-actions > .glyphicon */
	overflow: auto;
	max-height: 15em;
	scrollbar-width: none;
	cursor: pointer;
}

.task-actions > .glyphicon {
	margin: 0 .15em;
	cursor: pointer;
	font-size: 1.2em; /* related: padding-top of .task-text */
}

@media (pointer: coarse) {
	.task-text { padding-top: 2.25em; }
	.task-actions > .glyphicon { font-size: 2.2em; }
}

.task-actions > .glyphicon:hover, .task-actions > .glyphicon:active {
	filter: hue-rotate(135deg);
}

.vcenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-right {
	position: fixed;
	right: 1em;
	top: .5em;
}

.top-left {
	position: fixed;
	left: 1em;
	top: .5em;
}

.fullscreen {
	min-height: 100vh;
	width: 100vw;
}

.todo-textarea, .md-preview {
	width: 80vw;
	max-width: 60em;
	min-height: calc(75vh - 1.5em);
}

.md-preview {
	font-size: .85em;
}

.todo-textarea {
	font-family: monospace;
}

.snooze-until {
	width: 100%;
	max-width: 8em;
	margin: .3em;
	padding-top: 2em;
	padding-bottom: 2em;
}

.btn.snooze-until {
	white-space: break-spaces;
	text-transform: uppercase;
	height: 7em;
}

.fixed-section {
	position: fixed;
	width: inherit;
	z-index: 50;
}

.snooze-custom .btn.dropdown-toggle.snooze-interval {
	border-radius: 0 !important;
}
.snooze-custom .btn:last {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

@keyframes landing {
	  0% { margin-top: -100px; opacity: 0; }
	 10% { margin-top: 0; opacity: .96; }
	 90% { opacity: .96; }
	100% { opacity: 0; }
}

@keyframes rising {
	  0% { margin-bottom: -100px; opacity: 0; }
	 10% { margin-bottom: 0; opacity: .96; }
	 90% { opacity: .96; }
	100% { opacity: 0; }
}

.notification-top {
	position: fixed;
	z-index: 100;
	top: 0;
	left: .5em;
	width: calc(100% - 1em);
	text-align: center;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin: 0;
	animation: landing;
	animation-duration: 10s;
}

.notification-bottom {
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: .5em;
	width: calc(100% - 1em);
	text-align: center;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0;
	animation: rising;
	animation-duration: 10s;
}

.glyphicon-slashed {
	/* position: absolute; */
}

.glyphicon-slashed::after {
	content: "";
	position: absolute;
	top: 70%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: darkred;
	transform: rotate(-35deg);
	transform-origin: top left;
}

.close {
	opacity: .8 !important;
}

.reference-md-table {
	font-size: .75em !important;
	margin: 1em auto;
	max-width: 60em;
}
.reference-md-table td {
	vertical-align: middle !important;
}
.reference-md-table .preformatted {
	font-family: monospace;
	white-space: pre-line;
}

.snooze-status, .done-status {
	font-size: .75em;
	text-align: center;
}

/* sliding widgets, right to left */
	/*
		you need to define the following for each specific widget to determine its location
		.widget-right#widgetId {
			top: 120px; -- for example
		}
		.widget-right#widgetId > .widget-container {
			margin-top: -120px; -- negative of top value
		}
	*/
	.widget-right {
		position: fixed;
		z-index: 50;
		width: 95vw;
	}
	.widget-right.inactive {
		left: calc(100% - 40px);
	}
	/* :not(.inactive) = when active */
	.widget-right:not(.inactive) {
		left: calc(100% - 95vw);
		z-index: 100;
	}
	.widget-right:not(.inactive) > .widget-toggler {
		box-shadow: -6px 0 10px 3px #aaa;
	}
	.widget-right:not(.inactive) > .widget-container {
		box-shadow: -3px 0 10px 3px #aaa;
	}
	.widget-right .widget-toggler {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: none;
		width: 40px;
		cursor: pointer;
	}
	.widget-right .widget-toggler:hover {
		transition: 0.2s;
		box-shadow: 0 0 10px 3px #aaa;
	}
	.widget-right > .widget-container {
		width: calc(95vw - 40px);
		margin-left: 40px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		min-height: calc(100vh - 40px);
	}
	.widget-right .empty {
		margin-top: 30vh;
	}

/* sliding search box  */
	#search-widget {
		width: 300px;
	}
	#search-widget.inactive {
		left: calc(100% - 40px);
	}
	#search-widget:not(.inactive) {
		left: calc(100% - 300px);
	}
	#search-widget:not(.inactive) .input-group {
		box-shadow: 0 0 10px 3px #aaa;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	#search-widget .clear-search {
		border-radius: 0 !important;
	}

/* sliding insights  */
	#insights-widget {
		top: 100px;
	}
	#insights-widget > .widget-container {
		margin-top: -100px;
	}

/* sliding import/export  */
	#import-export-widget {
		top: 140px;
	}
	#import-export-widget > .widget-container {
		margin-top: -140px;
	}

.btn-floating-bottom-right-1, .btn-floating-bottom-right-2 {
	position: fixed;
	left: calc(100vw - 120px);
	z-index: 25;
	font-size: 25px;
	width: 70px;
	height: 70px;
	border-radius: 35px;
	box-shadow: 0px 0px 8px #000;
}
.btn-floating-bottom-right-1:hover, .btn-floating-bottom-right-2:hover {
	box-shadow: 0px 0px 10px 1px #000;
}
.btn-floating-bottom-right-1 {
	top: calc(100vh - 100px);
}
.btn-floating-bottom-right-2 {
	top: calc(100vh - 200px);
}

/* action-bar is a bar containing a .btn-group, usually fixed to top or bottom using .navbar-fixed-(top|bottom)  */
.action-bar > .btn-group {
	width: 100%;
	box-shadow: 0 1px 5px;
}
.action-bar > .btn-group > .btn {
	border-radius: 0;
	margin: 0;
}

.action-bar-6 > .btn-group > .btn {	width: calc(100% / 6); }
.action-bar-5 > .btn-group > .btn {	width: 20%; }
.action-bar-4 > .btn-group > .btn {	width: 25%; }
.action-bar-3 > .btn-group > .btn {	width: calc(100% / 3); }
.action-bar-2 > .btn-group > .btn {	width: 50%; }
.action-bar-1 > .btn-group > .btn {	width: 100%; }

@keyframes sleeping {
	  0% { padding-top: 0; }
	 50% { padding-top: 15px; }
	100% { padding-top: 0; }
}

.sleeping {
	animation: sleeping;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.due-in {
	font-size: .8em;
	font-style: italic;
}

/* responsive images in md  */
.text-md img,
.md-preview img,
.full-task-text img {
	max-width: 100%;
}

/* chart styling */
#insights .ct-label {
	font-size: .75em;
	font-weight: bold;
}

.bg-task hr {
	border-color: #cacaca;
}

.tasks-board {
	padding: 2em 6em;
}

.task-separator {
	border-bottom: 1px solid #cacaca;
	padding: 1em 1em 0 0;
	text-align: end;
	color: #999;
	line-height: 1;
}

.task-separator.odd {
	background-color: #f9f9f9;
}

.task-separator.even {
	background-color: #f0f0f0;
}

.task-summary {
	max-width: calc(90vw - 20ch);
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	width: fit-content;
	text-wrap: nowrap;
}

.bg-task th, .bg-task td {
	border-bottom: solid 1px;
	padding: 1em;
	vertical-align: text-top;
}