li.complete {
	font-weight: bold;
}
li.locked {
	opacity: 0.3;
}
div.preview {
	white-space: pre-wrap;
}
#root {
	height: 100vh;
	overflow-y: hidden;
}
html {
	scroll-behavior: smooth;
}
.card-body p:last-child {
	margin-bottom: 0.25em;
}
#pane-nav {
	height: 100%;
}

#pane-main {
	height: 100%;
}

/* Bootstrap Callout inserts */
.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid #eee;
	border-left-width: .25rem;
	border-radius: .25rem
}

.bd-callout h4 {
	margin-top: 0;
	margin-bottom: .25rem
}

.bd-callout p:last-child {
	margin-bottom: 0
}

.bd-callout code {
	border-radius: .25rem
}

.bd-callout+.bd-callout {
	margin-top: -.25rem
}

.bd-callout-info {
	border-left-color: #5bc0de
}

.bd-callout-info h4 {
	color: #5bc0de
}

.bd-callout-warning {
	border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
	color: #f0ad4e
}

.bd-callout-danger {
	border-left-color: #d9534f
}

.bd-callout-danger h4 {
	color: #d9534f
}

/**
 * Add custom theme to Bootstrap components ("tyria")
 *
 * I know this could be solved through customizing bootstrap-scss,
 * but that increases the complexity the build process and dependency
 * graph. I'm fine with this little bit of manual work.
 */
.bg-tyria {
	background-color: #aa0404 !important;
}
.btn-tyria {
	color: #fff;
	background-color: #aa0404;
	border-color: #aa0404;
}
.border-tyria {
	border-color: #aa0404 !important;
}
.btn-outline-tyria {
	color: #aa0404;
	background-color: transparent;
	background-image: none;
	border-color: #aa0404;
}
.btn-outline-tyria.disabled, .btn-outline-tyria:disabled {
	color: #aa0404;
	background-color: transparent;
}
.btn-outline-tyria:not(:disabled):not(.disabled).active, .btn-outline-tyria:not(:disabled):not(.disabled):active, .show>.btn-outline-tyria.dropdown-toggle {
	color: #fff;
	background-color: #aa0404;
	border-color: #aa0404;
}
.list-group-item-tyria {
	color: #76140f;
	background-color: #ebd1cd;
}
.list-group-item.active {
	z-index: 2;
	color: #fff;
	background-color: #aa0404;
	border-color: #aa0404;
}
.list-group-item:not(.active):hover {
	color: #aa0404 !important;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 576px) {
	#pane-nav {
		height: 30%;
	}

	#pane-main {
		height: 70%;
	}
}