@charset "UTF-8";

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

 :root
 {
	--ci-color: #6bc7ae;
	--background-color: light-dark(#fcfcfc, #333);
	--link-color: light-dark(#B01FE3, #D150FF);
	--button-color: light-dark(#B01FE3, #D150FF);
	--button-color-hover: color-mix(in srgb, var(--button-color) 80%, transparent);
	--button-color-active: color-mix(in srgb, var(--button-color) 60%, transparent);
	--invalid-color: #E0002B;
	--invalid-text-color: light-dark(#E0002B, #FF4647);
	--code-color: light-dark(#008147, #00A05A);
	--code-inline-background: light-dark(#f4f4f4, #222);
	--footnote-color: light-dark(#6e8780, #8fa29d);
	--alert-color: #FF4647;

	/* Accent colors etc. */
	--accent-color: light-dark(#6bc7ae, #34dcaf);
	--tint-color-green: light-dark(#B0E6D4, #2BAA88);
	--tint-color-blue: light-dark(#B4E2F5, #00A3E6);
	--tint-color-purple: light-dark(#D5C4F0, #6A25A1);
	--tint-color-brown: light-dark(#D1C1B3, #7F6D5A);
	--tint-color-red: light-dark(#F4BED2, #B4245E);
	--tint-color-orange: light-dark(#EFD9A6, #CC7A0A);

	/* App tint colors */
	--tint-color-devonthink: #04abcd;
	--tint-color-devonagent: #0daf51;
	--tint-color-devonsphere: #c9405b;
	--tint-color-devonthink-sidebar: light-dark(#81cfdf, #04abcd);
	--tint-color-devonthinktogo-sidebar: light-dark(#81cfdf, #04abcd);
	/* --tint-color--sidebar: light-dark(#38D3EE, #00c5e7); */
	--tint-color-devonagent-sidebar: light-dark(#7FD3A6, #0daf51);
	--tint-color-devonsphere-sidebar: light-dark(#e394a3, #c9405b);
	--highlight-color-devonthink: light-dark(#04abcd, #47dffe);
	--highlight-color-devonagent: #00c251;
	--highlight-color-devonsphere: light-dark(#d6002b, #fc5a7a);

	--link-font-family: 'typoldbook', sans-serif;
	--text-color: light-dark(#000, #fff);
	--text-disabled-color: light-dark(#bbb, #666);
	--text-highlighted-color: light-dark(#16b2f0, #3dc8ff);
	--aside-text-color: light-dark(#000, #fff);
	--highlight-green-color: light-dark(#5EAE98, #34dcaf);
	--highlight-blue-color: light-dark(#5ECBF6, #0093CD);
	--highlight-gray-color: light-dark(#888888, #666);
	--form-input-background-color: light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.15));
	--form-input-border-color: light-dark(#bbb, #444);

	/* Layers */
	--tooltip-layer: 1;
	--widget-layer: 10;
	--gallery-layer: 11;
	--navigation-layer: 1000;
	--overlay-layer: 2000;
	--cookiebar-layer: 9999;

	/* Corner radii etc. */
	--block-corner-radius: 4px;

	color-scheme: light dark;
 }

html
{
	font-family: sans-serif; /* 1 */
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
}
body { margin: 0; }  /* Remove the margin in all browsers (opinionated) */

/* HTML5 display definitions */

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }  /* Add the correct display in Edge, IE, and Firefox. */
audio, canvas, progress, video { display: inline-block; }  /* Add the correct display in IE 9 */
audio:not([controls]) { display: none; height: 0; }  /* Add the correct display in iOS 4-7 */
progress { vertical-align: baseline; }  /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
template, [hidden] { display: none; }  /* Add the correct display in IE */

/* Text-level semantics */

a { background-color: transparent; } /* Remove the gray background on active links in IE 10 */	
a { -webkit-text-decoration-skip: objects; } /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
a:active, a:hover { outline-width: 0; }  /* Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
abbr[title]
{
	border-bottom: none; /* Remove the bottom border in Firefox 39- */
	text-decoration: underline; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
	text-decoration: underline dotted; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
}
b, strong { font-weight: inherit; } /* Prevent the duplicate application of `bolder` by the next rule in Safari 6 */
b, strong { font-weight: bolder; } /* Add the correct font weight in Chrome, Edge, and Safari */
dfn { font-style: italic; } /* Add the correct font style in Android 4.3- */
h1 { font-size: 2em; margin: 0.67em 0; } /* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
mark { background-color: #ff0; color: #000; } /* Add the correct background and color in IE 9- */
small { font-size: 80%; } /* Add the correct font size in all browsers */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }  /* Prevent `sub` and `sup` elements from affecting the line height in all browsers */
sub { bottom: -0.25em; }
sup { top: -0.5em; }
del { position: relative; text-decoration: none; opacity: 0.5; }
del::after { content: ''; position: absolute; top: 50%; left: -0.5rem; right: -0.5rem; border-bottom: 1px solid rgba(255, 0, 0, 0.8) }

/* Embedded content */

img { border-style: none; } /* Remove the border on images inside links in IE 10- */
svg:not(:root) { overflow: hidden; } /* Hide the overflow in IE */

/* Grouping content */

code, kbd, pre, samp
{
	font-family: monospace, monospace;   /* Correct the inheritance and scaling of font size in all browsers */
	font-size: 90%;
	/* font-size: 1.1em; */  /* Correct the odd `em` font sizing in all browsers */ 
	-webkit-hyphens: none;
	hyphens: none;
	color: light-dark(#333, #999);  /* The monospaced fonts look a bit too bold */
}
pre code { font-size: 1.0em }
code { display: inline; background: var(--code-inline-background); border-radius: var(--block-corner-radius); white-space: pre-wrap; }
p > code { padding: 0.3em 0.5em; }
pre > code { padding: 1rem; }
figure { margin: 1em 40px; } /* Add the correct margin in IE 8 */
hr { box-sizing: content-box; height: 0; overflow: visible; border: 0px; border-bottom: 1px solid #999; margin: 1em 0em; } /* Add the correct box sizing in Firefox. Show the overflow in Edge and IE. */

/* Forms */

button, input, select, textarea
{
	font: inherit; /* Change font properties to `inherit` in all browsers (opinionated) */
	margin: 0; /* Remove the margin in Firefox and Safari */ 
}
optgroup { font-weight: bold; } /* Restore the font weight unset by the previous rule */
button, input { overflow: visible; } /* Show the overflow in Edge */
button, select { text-transform: none; } /* Remove the inheritance of text transform in Firefox */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; appearance: button; } /* Correct the inability to style clickable types in iOS and Safari */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /* Remove the inner border and padding */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /* Restore the focus styles unset by the previous rule */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* Change the border, margin, and padding in all browsers (opinionated) */
legend
{
	box-sizing: border-box; /* Correct the text wrapping in Edge and IE */
	color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
	display: table; /* Correct the text wrapping in Edge and IE */
	max-width: 100%; /* Correct the text wrapping in Edge and IE */
	padding: 0; /* Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers */
	white-space: normal; /* Correct the text wrapping in Edge and IE */
}
textarea { overflow: auto; } /* Remove the default vertical scrollbar in IE */
[type="checkbox"], [type="radio"]
{
	box-sizing: border-box; /* Add the correct box sizing in IE 10- */
	padding: 0; /* Remove the padding in IE 10- */
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /* Correct the cursor style of increment and decrement buttons in Chrome */
[type="search"]
{
	-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
	appearance: textfield;
	outline-offset: -2px; /* Correct the outline style in Safari */
}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Remove the inner padding and cancel buttons in Chrome and Safari on OS X */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; line-height: normal; } /* Correct the text style of placeholders in Chrome, Edge, and Safari */
::-webkit-file-upload-button
{
	-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
	font: inherit; /* Change font properties to `inherit` in Safari */
}

/* Font Definitions */

@font-face
{
	font-family: 'foro-extralight';
	font-display: fallback;
	src: url("assets/fonts/foro-extralight.eot") format("embedded-opentype"), url("assets/fonts/foro-extralight.woff2") format("woff2"), url("assets/fonts/foro-extralight.woff") format("woff"), url("assets/fonts/foro-extralight.ttf") format("truetype");
}

@font-face
{
	font-family: 'foro-light';
	font-display: fallback;
	src: url("assets/fonts/foro-light.woff2") format("woff2"), url("assets/fonts/foro-light.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldlight';
	font-display: fallback;
	src: url("assets/fonts/typold-light.woff2") format("woff2"), url("assets/fonts/typold-light.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldlight';
	font-display: fallback;
	src: url("assets/fonts/typold-light-italic.woff2") format("woff2"), url("assets/fonts/typold-light-italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}

@font-face
{
	font-family: 'typoldbook';
	font-display: fallback;
	src: url("assets/fonts/typold-book.woff2") format("woff2"), url("assets/fonts/typold-book.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldbook';
	font-display: fallback;
	src: url("assets/fonts/typold-medium.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldbook';
	font-display: fallback;
	src: url("assets/fonts/typold-book-italic.woff2") format("woff2"), url("assets/fonts/typold-book-italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}

@font-face
{
	font-family: 'typoldbook';
	font-display: fallback;
	src: url("assets/fonts/typold-medium-italic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}

/* Main Styles */

*, *:before, *:after { box-sizing: inherit; }

html { box-sizing: border-box; height: 100%; font-size: 62.5%; background-color: var(--background-color); color: var(--text-color); }
body
{
	height: 100%;
	padding: 0px;
	font-family: 'typoldlight', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.5rem;
	line-height: 2.6rem;
	text-align: center;
	text-rendering: optimizeLegibility;
}
.container
{
	display: flex; 
	flex-direction: column;
	height: auto;
	background-color: var(--background-color);
	text-align: left; 
}
.main { margin-top: 0; flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
p
{
	margin: 0 0 3rem;
	padding: 0;
	word-wrap: break-word;
	word-break: break-word; 
	hyphens: auto;
}
p.center { text-align: center; }
p.hidden { display: none; }
a:link, a:visited, a:hover, a:active { color: inherit; text-decoration: none; hyphens: none; border-bottom: 1px solid transparent; cursor: pointer; }
a:hover { border-bottom: 1px dotted; }
a:hover:has(img) { border-bottom: 1px solid transparent; }
a:target { display: block; position: relative; top: -100px; visibility: hidden; }  /* Correction for navigation bar */
ul { list-style-type: none; margin: 0; padding: 0; }
b, i, em, strong { font-family: 'typoldbook', sans-serif; color: var(--text-highlighted-color); font-style: normal; font-weight: normal; }
figure { margin: 0; }
figure.centered { text-align: center !important; }

form { margin: 0; padding: 0; }
input[type=text],
input[type=url],
input[type=email],
input[type=tel],
input[type=number],
textarea
{
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	resize: vertical;
	background: transparent; 
	outline: none;
}
input[type=search]
{
	width: 100%;
	border: 1px white solid;
	margin: 0;
	padding: 0.5rem 1.5rem 0.5rem 1.5rem;
	resize: vertical;
	background-color: transparent;
	border-radius: 1000px;
	outline: none;
}
::-webkit-input-placeholder { padding-top: 0.2rem; }
::-moz-placeholder { padding-top: 0.2rem; }
:-ms-input-placeholder { padding-top: 0.2rem; }
input[type=number] { text-align: right; }
input[type=number]::-webkit-outer-spin-button { padding-left: 1rem; }
input[type=text]:disabled, input[type=url]:disabled, input[type=email]:disabled, input[type=tel]:disabled, textarea:disabled
{
	border: none !important;
	padding: 0px !important;
}
input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; width: 0px;}
input:disabled, textarea:disabled { color: var(--footnote-color); -webkit-text-fill-color: var(--footnote-color); -webkit-opacity: 1; opacity: 1; cursor: default; }
input:invalid { color: var(--invalid-text-color); }
input.underlined { border-bottom: dotted #bbb 1px; }
.number-input { display: inline-flex; width: 70%; margin-top: -0.2em; }
.number-input.tooltip { display: inline-flex; }
.number-input, .number-input * { box-sizing: border-box; }
.number-input input[type=number] { padding-right: 0.5rem; }
.number-input div { display: inline-block; margin-top: 0.2em; }
.number-input button
{
	outline:none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	width: 0.8em;
	height: 0.8em;
	cursor: pointer;
	margin: 0px;
	display: block;
	padding: 0px;
	font-size: inherit;
	background-color: transparent;
	border-radius: 0px;
}
.number-input button.decrease { background-image: url("assets/images/buttons/decrease.svg"); background-size: 0.8em 0.8em; }
.number-input button.decrease:hover:not([disabled]) { background-image: url("assets/images/buttons/decrease-active.svg"); background-color: transparent; }
.number-input button.decrease[disabled], .number-input button.increase[disabled] { cursor: default; opacity: 0.35; background-color: transparent; }
.number-input button.increase { background-image: url("assets/images/buttons/increase.svg"); background-size: 0.8em 0.8em; }
.number-input button.increase:hover:not([disabled]) { background-image: url("assets/images/buttons/increase-active.svg"); background-color: transparent; }

select
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid var(--link-color);
	border-radius: 4px;
	padding: 0.2em 1.5em 0.3em 0.7em;
	line-height: 140%;
	font-size: 90%;
	font-size: inherit;
	color: black;
	background-image: url("assets/images/buttons/select.png");
	background-position: right 50%;
	background-size: 1.25em 1em;
	background-repeat: no-repeat;
	max-width: 100%;
}
select:invalid
{
	border-color: var(--invalid-color);
	background-color: var(--invalid-color);
	color: #ffffff;
}
select:disabled
{
	-webkit-text-fill-color: var(--footnote-color);
	-webkit-opacity: 1;
	opacity: 1;
	background: transparent;
	border-color: transparent;
	color: var(--footnote-color);
	padding-left: 0px;
	border-left: 0px;
}
td select { margin-bottom: 0.3rem; }  /* Otherwise it wouldn't look vertically centered in table cells */

.checkbox { width: 3rem; height: 3rem; margin: 0px; position: relative; display: inline-block; }
.checkbox input[type="checkbox"] { width: auto; opacity: 0.00000001; position: absolute; left: 0; margin-left: -20px; }
.checkbox label { position: relative; }
.checkbox label:before
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	margin: 3px 3px 3px 0px;
	width: 20px;
	height: 20px;
	transition: transform 0.28s ease;
	border-radius: 4px;
	border: 1px solid var(--link-color);
}
.checkbox label:after
{
	content: '';
	display: block;
	width: 10px;
	height: 5px;
	border-bottom: 2px solid var(--link-color);
	border-left: 2px solid var(--link-color);
	-webkit-transform: rotate(-45deg) scale(0);
	-moz-transform: rotate(-45deg) scale(0);
	-ms-transform: rotate(-45deg) scale(0);
	transform: rotate(-45deg) scale(0);
	position: absolute;
	top: 10px;
	left: 5px;
}
.checkbox input[type="checkbox"]:checked ~ label::before { color: var(--link-color); }
.checkbox input[type="checkbox"] ~ label:active::before { background-color: var(--link-color); }
.checkbox input[type="checkbox"] ~ label:active::after { border-color: #fff; }
.checkbox input[type="checkbox"]:checked ~ label::after
{
	-webkit-transform: rotate(-45deg) scale(1);
	-moz-transform: rotate(-45deg) scale(1);
	-ms-transform: rotate(-45deg) scale(1);
	transform: rotate(-45deg) scale(1);
}
.checkbox label
{
	min-height: 20px;
	display: block;
	padding-left: 40px;
	margin-bottom: 0;
	font-weight: normal;
	cursor: pointer;
}
.checkbox label span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.checkbox input[type="checkbox"]:focus + label::before { outline: 0; }

.checkbox label.disabled { pointer-events: none; }
.checkbox label.disabled:before { opacity: 0.7; }
.checkbox label.disabled:after { opacity: 0.7; }

.nohighlight { user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -o-user-select: none; -moz-user-select: none; }
.transparent { background-color: transparent !important; }

table { width: 100%; border-spacing: 0px; margin-bottom: 2rem; table-layout: fixed; }
form table:last-child { margin-bottom: 0; }
div.table-layout-auto > table { table-layout: auto; }
tr { vertical-align: top; }
th { font-size: 1.1rem; color: light-dark(#666, #999); }
td, th { padding: 0.4em 0.0 0.4em 0.0; border-bottom: 1px light-dark(#eee, #444) solid; margin-left: 0px; margin-right: 0px; word-wrap: break-word; }
td:first-child, th:first-child { padding-left: 0px; }
tr.disabled td { cursor: default !important; }
tr.disabled td, tr.dimmed td { color: var(--text-disabled-color); }
tr.disabled.td, tr.dimemd td img { opacity: 0.3; }
td.disabled, div.disabled, span.disabled { color: var(--text-disabled-color); cursor: default !important; }
td.middle { vertical-align: middle; }

tr.nodivider td, tr.nodivider th { border-bottom: none; }
table.hoverable tr:hover td { background-color: light-dark(#eee, #575757); }

table.download.collapsed-header { margin-top: 0; }
table.download tr { vertical-align: middle; }
table.download tr td a { cursor: pointer; }
table.download td:nth-of-type(1), table.download th:nth-of-type(1) { width: 44px; }
table.download:not(.legacy) td:nth-of-type(2), table.download:not(.legacy) th:nth-of-type(2) { width: 50%; }
table.download:not(.legacy) td:nth-of-type(3), table.download:not(.legacy) th:nth-of-type(3) { width: 20%; }
table.download:not(.legacy) td:nth-of-type(4), table.download:not(.legacy) th:nth-of-type(4) { width: 30%; }
table.download.legacy td:nth-of-type(2), table.download.legacy th:nth-of-type(2) { width: 50%; }
table.download.legacy td:nth-of-type(3), table.download.legacy th:nth-of-type(3) { width: 15%; }
table.download.legacy td:nth-of-type(4), table.download.legacy th:nth-of-type(4) { width: 15%; }
table.download.legacy td:nth-of-type(5) { width: 10%; }
table.download.legacy th:nth-of-type(5) { width: 20%; }
table.download.legacy td:nth-of-type(6) { width: 10%; }
table.download.legacy th:nth-of-type(6) { width: 10%; }
@media (max-width: 640px)
{
	table.download th:nth-of-type(2), table.download td:nth-of-type(2) { width: 60%; }
	table.download th:nth-of-type(3), table.download td:nth-of-type(3) { width: 40%; }
	table.download th:nth-of-type(4), table.download td:nth-of-type(4) { display: none; }
	table.download th:nth-of-type(5), table.download td:nth-of-type(5) { display: none; }
	table.download th:nth-of-type(6), table.download td:nth-of-type(6) { display: none; }
}

table.download.extras { margin-top: 0; }
table.download.extras tr td { cursor: default; }
table.download.extras td:nth-child(2), table.download.extras th:nth-child(2) { width: 50%; }
table.download.extras td:nth-child(3), table.download.extras th:nth-child(3) { width: 20%; }
table.download.extras th:nth-child(4) { width: 15%; }
table.download.extras td:nth-child(4) { width: 15%; }
table.download.extras td:nth-child(5) { width: 15%; }
table.download.extras td:nth-child(5) { width: 15%; }
table.download tr:not([onclick]) a { color: var(--link-color); }
@media (max-width: 980px)
{
	table.download.extras { margin-top: 0px; }
	table.download.extras td:nth-child(2), table.download.extras th:nth-child(2) { width: 60%; }
	table.download.extras td:nth-child(3), table.download.extras th:nth-child(3) { width: 30%; display: none; }
}

table.download.thirdparties td:nth-child(3), table.download.thirdparties th:nth-child(3) { width: 50%; }

table.download.ebooks td:nth-child(2), table.download.ebooks th:nth-child(2) { width: 70%; }
table.download.ebooks td:nth-child(3), table.download.ebooks th:nth-child(3) { width: 15%; }
table.download.ebooks td:nth-child(4), table.download.ebooks th:nth-child(4) { width: 15%; }
@media (max-width: 980px)
{
	table.download.ebooks td:nth-child(2), table.download.ebooks th:nth-child(2) { width: 60%; }
	table.download.ebooks td:nth-child(3), table.download.ebooks th:nth-child(3) { width: 30%; display: none; }
	table.download.ebooks td:nth-child(4), table.download.ebooks th:nth-child(4) { width: 30%; }
}
table.download.ebooks td.buy:nth-child(3) { width: 30%; }
@media (max-width: 980px)
{
	table.download.ebooks td.buy:nth-child(2), table.download.ebooks th.buy:nth-child(2) { width: 60%; }
	table.download.ebooks td.buy:nth-child(3), table.download.ebooks th.buy:nth-child(3) { display: table-cell; }
}

table.download.extensions tr td { cursor: default; }
@media (max-width: 640px)
{
	table.download td:nth-child(3), table.download th:nth-child(3) { display: none; }
	table.download th:nth-child(4), table.download td:nth-child(4) { display: table-cell; }
}

table.download td img { height: 3rem; vertical-align: middle; margin: 0.5rem 0px; }
table.download.bookmarklets a.bubble
{
	background-color: var(--highlight-blue-color);
	padding: 0.1em 1em 0.1em 1em;
	border-radius: 2em;
	color: white;
	font-size: 1.1rem;
	width: 13em;
	max-width: 100%;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
table.download.bookmarklets a:hover.bubble { border-bottom: none; color: white; } 
table.download.bookmarklets img.bubble { width: auto; height: 2.5rem; }
table.download.bookmarklets td:nth-child(4) { text-align: center; }
table.download .tooltip .tooltip-text { width: 50rem; margin-left: -25rem; }
table.download span.tooltip { border-bottom: none; }

/* Navigation */

nav { position: fixed; width: 100%; z-index: var(--navigation-layer); }
nav > div.wrapper
{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 1.5rem 3rem;
	transition: 0.3s;
	z-index: var(--navigation-layer);
	border-bottom: 2px solid var(--ci-color);
	background-color: var(--background-color);
}
@media (max-width: 640px)
{
	nav > div.wrapper { font-size: 1.3rem; padding: 2rem 1.5rem; }
}
nav .wrapper .nav__list-svg { fill: black; }
nav .wrapper .nav__logo-placeholder, .nav__wrapper .nav__logo-placeholder:hover { content: url("assets/images/devontech-logo-green.svg"); }
nav .wrapper.top { border-bottom: none; color: #fff; background-color: transparent; }
nav > div.wrapper.top .nav__list-svg { fill: #fff; }
nav > div.wrapper.top .nav__logo-placeholder, nav > div.wrapper.top .nav__logo-placeholder:hover { content: url("assets/images/devontech-logo-white.svg"); }
nav > div.wrapper.top #cart_icon+span { background-color: #fff; color: #509381; }
nav > div.wrapper.scrolled { border-bottom: 2px solid #94a8a3; color: var(--text-color); background-color: var(--background-color); }
nav > div.wrapper.scrolled .nav__list-svg { fill: black; }
nav > div.wrapper.scrolled .nav__logo-placeholder, nav > div.wrapper.scrolled .nav__logo-placeholder:hover { content: url("assets/images/devontech-logo-grey.svg"); }

.nav__list { display: flex; align-items: center; white-space: nowrap; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
@media (max-width: 640px)
{
	.nav__list-item:nth-child(3) { display: none; }  /* Even on the iPhone X the navigation is too wide, especially in German laguage, so we're hiding the Users segment altogether */
	#main-navigation li:not(:first-child) { opacity: 0.0; width: 0px; transition: none; }
	#main-navigation.visible li:not(:first-child) { opacity: 1.0;  width: inherit; transition: opacity 0.15s linear 0.15s; }
}
.nav__list-item
{
	position: relative;
	margin-left: 1rem;
	cursor: default; 
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.nav__list-item a:visited, .nav__list-item a:hover, .nav__list-item a:active { color: inherit; border-bottom-color: transparent; }
nav > div.wrapper li.cart #cart_icon { display: inline-block; background-image: url("assets/images/cart-black.svg"); background-repeat: no-repeat; width: 17px; height: 12px; }
nav > div.wrapper li.cart div.cart span
{
	width: 1.8rem;
	height: 1.8rem;
	background-color: var(--accent-color);
	border-radius: 50%;
	padding: 0.37rem 0.4rem 0.4rem 0.42rem;
	vertical-align: middle;
	display: inline-block;
	top: -0.2rem;
	position: relative;
	font-size: 1rem;
	line-height: 1rem;
	text-align: center;
	color: white;
}
nav > div.wrapper.top li.cart #cart_icon { background-image: url("assets/images/cart-white.svg"); }

nav > div.wrapper .searchfield { display:inline-block; width: 0px; margin-right: 0.5em; transition: 0.5s ease-in-out; }
nav > div.wrapper .searchfield.visible { width: 175px; margin-left: 1rem; }
nav > div.wrapper .searchfield input
{
	width: 25px;
	border: none;
	border-radius: 1000px;
	padding: 0.5rem 1.0rem 0.7rem 1.5rem;
	background: transparent;
	outline: none;
	color: var(--text-color);
	line-height: 1.2em;
	transition: 0.5s ease-in-out;
	appearance: none;
}
nav > div.wrapper .searchfield.visible input::placeholder { padding-left: 0.1em; text-align: right; }
nav > div.wrapper .searchfield.visible input
{
	width: 200px;
	border: 1px solid var(--form-input-border-color);
	padding-right: 3rem;
}
nav > div.wrapper.top .searchfield input { color: white; }
nav > div.wrapper.top .searchfield.visible input { border-color: white; }
nav > div.wrapper .search .loupe
{
	display: inline-block;
	background-image: url("assets/images/loupe-black.svg");
	width: 12px;
	height: 12px;
	margin-left: -20px;
}
nav > div.wrapper.top .search .loupe { background-image: url("assets/images/loupe-white.svg"); }

nav > div.wrapper li .account-icon
{
	display: inline-block;
	width: 15px;
	height: 21px;
	background-image: url("assets/images/account-loggedout.svg");
	background-repeat: no-repeat;
	background-size: 15px 15px;
	background-position: 0 7px;
}
nav > div.wrapper.top li .account-icon { background-image: url("assets/images/account-loggedout-white.svg"); }
#account_icon_loggedin { background-image: url("assets/images/account-loggedin.svg"); }
nav > div.wrapper.top #account_icon_loggedin { background-image: url("assets/images/account-loggedin-white.svg"); filter: none; }

.nav__list-item:first-child { flex-grow: 1; margin-left: 0; }
.nav__list-item--current a { color: inherit; cursor: default; text-decoration: none; }
.nav__logo-placeholder { width: 40px; height: 40px; border-radius: 50%; content: url("assets/images/devontech-logo-green.svg"); }
.nav__logo-placeholder:hover { cursor: pointer; }
.nav__list-vector { width: 1.4rem; height: 1.4rem; vertical-align: text-bottom; }
.nav__list-svg { fill: #fff; }
.nav__sub-list
{
	position: absolute;
	display: block;
	padding: 1.4rem 0 1.4rem 0;
	outline: 1px solid rgba(174, 183, 180, 0.4);
	background-color: rgba(248, 248, 248, 0.80);
	color: black;
	text-align: left;
	visibility: hidden;
	line-height: 0;
	opacity: 0;
	transition: line-height 0.1s ease, opacity 0.25s ease;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 1rem;
	margin-top: 0.5rem;
}
.nav__sub-list--right { left: auto; right: 0rem; }
.nav__list-item:hover .nav__sub-list { visibility: visible; line-height: 2rem; opacity: 1; }
.nav__sub-list-item a { display: block; padding: 0 2rem; line-height: 180%; }
.nav__sub-list-item a:hover { color: var(--accent-color); }
.nav__sub-list-item--with-icon { background-size: 2.8rem; background-repeat: no-repeat; background-position: 1.8rem 0.5rem; }
.nav__sub-list-item--with-icon a { padding: 0.5rem 2rem 0.5rem 5.7rem; }
.nav__sub-list-item--with-padding a { padding-left: 4.9rem; }
.nav__sub-list-divider { display: block; width: 84%; margin: 0.6rem 8% 1rem; border-top: 1px solid #999; }
.nav__search { padding: 0 1.6rem; color: black; font-size: 1.3rem; }
.nav__search input[type=search] { width: 15rem; height: 2.4rem; border-radius: 1.2rem; border: 1px solid #999; margin-bottom: 1rem; }
.nav__search-options { margin-left: 0.8rem; }
.nav__sub-list-footnote { color: gray; font-size: 1.3rem; line-height: 1.4rem; }

nav.pagination { position: relative; width: auto; margin: 0px; border: none; z-index: auto; text-align: center; }
nav.pagination a { display: inline-block; padding-left: 1rem; padding-right: 1rem; }

.mosaic { display: flex; flex-direction: column; align-content: flex-start; align-items: center; margin: 0 auto 8rem; text-align: center; line-height: 0; }
.mosaic a:link, .mosaic a:visited, .mosaic a:hover, .mosaic a:active { color: #00a383; }
.mosaic__tile { padding: 18rem 8vw 0; display: block; margin: 0; background-image: radial-gradient(circle at bottom center, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 75%); }
.mosaic__row { display: flex; padding: 0 8rem; max-width: 142rem; }
@media (max-width: 1280px) { .mosaic__row { padding: 0 4rem; } }
@media (max-width: 1000px) {	.mosaic__row { flex-flow: column; padding: 0; } }
.mosaic__row:before { content: ""; position: absolute; left: 0; width: 100vw; border-top: 1px solid #fff; }
@media (max-width: 1000px) { .mosaic__row:before { border-top: none; } }
.mosaic__tile--secondary { padding: 4rem 5rem; text-align: left; width: 50%; line-height: 1.3em; display: flex; align-items: flex-start; background-image: none; }
@media (max-width: 1000px) { .mosaic__tile--secondary { border-top: 1px solid #fff; width: 100%; padding: 4rem 12vw; } }
@media (max-width: 840px) { .mosaic__tile--secondary { padding: 3rem 10vw; } }
.mosaic__tile--secondary:nth-child(odd) { border-right: 1px solid #fff; }
@media (max-width: 1000px) { .mosaic__tile--secondary:nth-child(odd) { width: 100%; border-right: none; } }
.mosaic__img { position: relative; width: 54vw; max-width: 1080px; height: auto; }
.mosaic__icon { float: left; padding: 3rem 1.2rem 0 0; }
.mosaic__h1 { margin-bottom: 2.2rem; font-family: 'foro-extralight', serif; font-size: 5.2rem; line-height: 5.5rem; font-weight: 100; }
@media (max-width: 1280px) { .mosaic__h1 { margin-bottom: 1.8rem; font-size: 4.5rem; line-height: 4.8rem; } }
@media (max-width: 1000px) { .mosaic__h1 { font-size: 4.1rem; line-height: 4.4rem; } }
@media (max-width: 840px) { .mosaic__h1 { font-size: 3.6rem; line-height: 3.9rem; } }
@media (max-width: 640px) { .mosaic__h1 { font-size: 3.3rem; line-height: 3.4rem; } }
.mosaic__h2 { position: relative; font-weight: 100; font-family: 'foro-light' serif; font-size: 2.1rem; line-height: 2.6rem; margin-bottom: 0.4em; }
.mosaic__h2 a:link, .mosaic__h2 a:visited, .mosaic__h2 a:active { color: inherit; text-decoration: none; }
.mosaic__h2 a:hover { border-bottom: 1px solid gray; }
.mosaic__h3 { position: relative; margin-bottom: 2rem; font-size: 1.7rem; font-weight: normal; }
@media (max-width: 1280px) { .mosaic__h3 { margin-bottom: 2.8rem; } }
@media (max-width: 840px) { .mosaic__h3 { font-size: 1.5rem; } }
.mosaic__h4 { position: relative; color: gray; margin-bottom: 0.8rem; font-size: 1.3rem; font-weight: normal; }
.mosaic__p { font-size: 1.5rem; line-height: 2.2rem; margin: 0; }
.mosaic-widget { font-size: 0; margin: 0 0 4rem; }

.split-button-container { display: inline-grid !important; grid-template-columns: auto; width: max-content;}
.split-button-container.equal-columns2 { grid-template-columns: 1fr 1fr; }
.split-button-container.equal-columns3 { grid-template-columns: 1fr 1fr 1fr; }
.split-button-container.equal-columns4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.split-button-container.equal-columns5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.split-button-container.auto-columns2 { grid-template-columns: auto auto; }
.split-button-container.auto-columns3 { grid-template-columns: auto auto auto; }
.split-button-container.auto-columns4 { grid-template-columns: auto auto auto auto; }
.split-button-container.auto-columns5 { grid-template-columns: auto auto auto auto auto; }
.split-button-container.auto-columns6 { grid-template-columns: auto auto auto auto auto auto; }
.split-button
{
	color: #fff;
	display: inline;
	margin: 0;
	line-height: 1.3em;
	font-size: 1.5rem;
	background: linear-gradient(#00c29b 20%, #08a082 100%);
	padding: 0.4em 1em 0.5em 1em;
	margin-right: 1px;
	border-radius: 2rem;
	cursor: pointer;
}
.split-button a:link, .split-button a:visited, .split-button a:hover, .split-button a:active,
a.split-button:link, a.split-button:visited, a.split-button:hover, a.split-button:active { color: #fff; border-bottom-color: transparent; }
a.split-button > div.price { display: block; border-top: 0.5px solid rgba(255, 255, 255, 0.5); padding-top: 0.3em; margin-top: 0.5em; }
.split-button > a > span.price, .split-button > div.price > span.secondary { color: rgba(255, 255, 255, 0.5) }
.split-button.left { border-radius: 2rem 0 0 2rem; padding-right: 0.7em; padding-left: 1em; }
.split-button.right { border-radius: 0 2rem 2rem 0; padding-right: 1em; padding-left: 0.7em; margin-right: 0px; }
.split-button.middle { border-radius: 0; }
.split-button.left.multiline { border-radius: 1.5rem 0 0 1.5rem; }
.split-button.right.multiline { border-radius: 0 1.5rem 1.5rem 0; }
@media (max-width: 640px) { .split-button.hideable { display: none; } }  /* For smaller devices such as iPhones, hide appropriate buttons */

.main-intro { margin: 0 auto 8rem; text-align: center; line-height: 0; }
@media (max-width: 720px) { .main-intro { margin-bottom: 4rem; } }
.main-intro:after { content: ""; display: block; height: 30px; border-top: 1px solid #e0e0e0; background: linear-gradient(rgba(255, 255, 255, 0) 100%, white 0%); }
.main-intro > figure { padding: 14rem 8vw 0; color: #fff; text-align: center; }
.main-intro > figure > div { display: inline-flex; align-items: center; margin-bottom: 1.8rem; gap: 1rem; }
.main-intro > figure > div img { height: clamp(3.0rem, 3vw, 5rem); }
.main-intro > figure > div h2 { font-size: clamp(2.5rem, 2vw, 4rem); font-family: 'typoldbook', sans-serif; font-weight: normal; line-height: 120%; }
.main-intro > figure h1 { margin-bottom: clamp(1.4rem, 2vw, 2.4rem); font-family: 'foro-extralight', serif; font-size: clamp(4.0rem, 5vw, 6.6rem); line-height: 120%; font-weight: 100; padding-left: 15%; padding-right: 15%; text-shadow: 0 0 14px rgba(0, 0, 0, 0.1); }
@media (max-width: 640px) { .main-intro > figure h1 { padding-left: inherit; padding-right: inherit; } }
.main-intro > figure h3 { position: relative; display: inline-block; margin-bottom: clamp(2.8rem, 3vw, 4rem); font-size: clamp(1.5rem, 1.7vw, 1.7rem); font-weight: normal; text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.main-intro > figure.devonthink,
.main-intro > figure.devonthink.ios
{
	background: linear-gradient(#35c4e2, rgba(0, 0, 0, 0));
}
.main-intro > figure.devonagent
{
	background: linear-gradient(#8fd6ad, rgba(0, 0, 0, 0));
}
.main-intro > figure.devonsphere
{
	background: linear-gradient(#c89da6, rgba(0, 0, 0, 0));
}
@media (max-width: 1280px) { .main-intro > figure { padding: 11rem 5vw 0; } }
@media (max-width: 840px) { .main-intro > figure { padding: 9rem 3vw 0; } }
.main-intro > figure > picture > img { position: relative; bottom: -40px; width: 72vw; max-width: 1340px; height: auto; }
@media (max-width: 1600px) { .main-intro > figure > picture > img { bottom: -2.6vw; } }
@media (max-width: 1280px) { .main-intro > figure > picture > img { width: 82vw; } }
@media (max-width: 1000px) { .main-intro > figure > picture > img { width: 85vw; } }
@media (max-width: 840px) { .main-intro > figure > picture > img { width: 88vw; } }
.main-intro p { position: relative; width: 100%; max-width: 94rem; top: -1.4rem; margin: 3rem auto -3rem; padding: 0 4rem; font-size: 1.7rem; text-align: left; }
@media (max-width: 1280px) { .main-intro p { margin: 1.8rem auto -6rem; } }
@media (max-width: 1000px) { .main-intro p { font-size: 1.5rem; margin: 1.4rem auto -6rem; } }

.product-widget
{
	display: inline-block;
	position: relative;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.5rem;
}
.product-widget-container
{
	height: 3.6rem;
	width: 100%;
	position: sticky;
    top: 100px;
    align-self: flex-start;
    z-index: var(--widget-layer);
}
.product-widget-container > .product-widget { height: 3.6rem; }
.product-widget-container > .product-widget > .split-button { height: 3.6rem; padding-top: 0.46em; padding-bottom: 0.4em; }
.product-widget-container > .product-widget.fixed { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); z-index: var(--widget-layer); }
.product-widget.devonthink .split-button { background:var(--tint-color-devonthink); }
.product-widget.devonagent .split-button { background: var(--tint-color-devonagent); }
.product-widget.devonsphere .split-button { background: var(--tint-color-devonsphere); }
.product-widget .split-button:hover { filter: brightness(94%); }
.product-widget .split-button:active { filter: brightness(88%); }
.product-widget-container > .product-widget.fixed .split-button { outline: 1px solid light-dark(#fcfcfc, #444); }

.main-body { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 auto 0; padding: 16rem 10rem 0; max-width: 116rem; min-width: 30rem; }
@media (max-width: 720px) { .main-body { padding-left: 3rem; padding-right: 3rem; } }
.main-body.productpage { padding: 0 10rem; }
@media (max-width: 720px) { .main-body.productpage { padding: 0 3rem; } }
.main-body.productpage.devonthink em { color: var(--highlight-color-devonthink); }
.main-body.productpage.devonagent em { color: var(--highlight-color-devonagent); }
.main-body.productpage.devonsphere em { color: var(--highlight-color-devonsphere); }
.main-body.productpage .story a { border-bottom: 1px dotted var(--link-color); }

/*
.main-body.productpage.devonthink .story a { color: var(--highlight-color-devonthink); border-bottom: 1px dotted var(--highlight-color-devonthink); }
.main-body.productpage.devonagent .story a { color: var(--highlight-color-devonagent); border-bottom: 1px dotted var(--highlight-color-devonagent); }
.main-body.productpage.devonsphere .story a { color: var(--highlight-color-devonsphere); border-bottom: 1px dotted var(--highlight-color-devonsphere); }
*/

.main-body.productpage.devonthink .story a:hover,
.main-body.productpage.devonagent .story a:hover,
.main-body.productpage.devonsphere .story a:hover { border-bottom-style: solid; }

.main-body.lead-centered div.lead { text-align: center; margin-bottom: 3rem; }
.main-body > header { width: 100%; margin-bottom: 5.2rem; text-align: center; }
.main-body h1 { text-align: center; width: 100%; margin-bottom: 0; font-family: 'foro-extralight', serif; font-size: clamp(4.0rem, 5vw, 5.2rem); line-height: clamp(4.4rem, 5vw, 5.5rem); font-weight: 100; letter-spacing: 0.014em; }
.main-body header img { height: clamp(14rem, 15vw, 18rem); margin-top: 2rem; }
.main-body div.lead, .main-body p.lead
{
	font-family: 'typoldbook', sans-serif;
	font-size: 1.7rem;
	line-height: 3.2rem;
	color: light-dark(#333, #bbb); 
}
.main-body.lead-centered div.lead p { margin-bottom: 0; }
.main-body div.lead a { border-bottom: 1px dotted var(--text-color); }
.main-body div.lead a:hover, .main-body div.lead a:active { border-bottom-style: solid; }
.main-body div.lead figure a, .main-body div.lead figure a:hover, .main-body figure div.lead a:active { border-bottom: none; }
.main-body .logo { width: 100%; margin-bottom: 5rem; text-align: center;}
.main-body .logo div { width: 30%; min-width: 200px; min-height: 200px; padding-bottom: 30%; height: 0px; margin-left: auto; margin-right: auto; }
.main-body .logo div img { width: 100%; min-width: 200px; }
.main-body > div.login { width: 70%; margin-left: 15%; margin-right: 15%; }
@media (max-width: 640px) { .main-body > div.login { width: 90%; margin-left: 5%; margin-right: 5%; } }
.main-body div.login form { margin-top: 6rem; margin-bottom: 5rem; }
.main-body div.login form input[type="text"], .main-body div.login form input[type="password"]
{
	width: 100%;
	outline: none;
	background: var(--form-input-background-color);
	padding: 1rem 1rem 1rem 1rem;
	border: none;
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin-bottom: 0.25rem;
	font-size: 2rem;
	line-height: 2.5rem;
	text-align: center;
}
.main-body div.login form input[type="password"]
{
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.main-body div.login form input[type="password"]:last-of-type
{
	border-bottom-left-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
}
.main-body div.login form input[name="lookup"]
{
	border-bottom-left-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
}
.main-body.login form p:last-of-type, .main-body .login form p:last-of-type { margin-top: 3rem; }
.main-body.login header { margin-bottom: 0px; }
.main-body div.login h2
{
	margin-top: 3rem;
	font-family: 'typoldbook', sans-serif;
	font-weight: normal;
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
	text-wrap-style: balance;
}
.main-body div.login p { width: 100%; text-align: center; }
.main-body div.login a { color: var(--link-color); }
.main-body div.login div.footnote p  { text-align: inherit; margin: 0; }
@media (max-width: 640px)
{
	.main-body div.login form input[type="text"], .main-body div.login form input[type="password"] { font-size: 1.5rem; }
}

.story { flex: 1 1 40rem; padding-right: 3rem; }
@media (max-width: 840px) { .story { padding-right: 0; margin-bottom: 3rem; } }
.story.no-sidebar { padding-right: 0; }
.story h1 { font-family: typoldbook, sans-serif; font-size: 2.5rem; letter-spacing: 0.014em; line-height: 3.4rem; margin-bottom: 1.5rem; color: var(--text-color); margin-top: 1em; text-align: left; }
.story h1:first-child { margin-top: 0rem; }
.story h3+h1 { margin-top: 0px; }
.story > div:first-child > h2:first-child,
.story > div:first-child >h2:first-child + input[type=button] { margin-top: 0.8rem; }
.story h2
{
	font-size: 130%;
	font-family: 'typoldbook';
	font-weight: normal;
	margin-bottom: 0.5em;
	color: var(--highlight-green-color);
	margin-top: 3rem;
	text-align: left; 
}
.story .fragment header { padding: 0 0 1rem 0; }
.story .fragment h1 { width: 100%; margin-bottom: 0; }
.story .fragment h2 { font-size: 100%; margin-top: 1rem; }
.story .fragment h2[onclick] { color: light-dark(inherit, #fff); }
.story h2 a:link, .story h2 a:visited, .story h2 a:active { color: inherit; text-decoration: none; }
.story h2 a:hover { border-bottom: 1.5px dotted; }
.story h2 img.icon { padding: 0rem 0.5rem 1rem 0; width: 4rem; vertical-align: -2rem; }

.story h2.large { text-align: center; font-size: 250%; line-height: 100%; margin-bottom: 3rem; }
.story h2.large .headlinelabel
{
	display: inline-block;
	border: 1px solid var(--highlight-green-color);
	border-radius: 7px;
	padding: 0.25rem 0.6rem 0.55rem 0.65rem;
	font-size: 2rem;
	line-height: 2rem;
	vertical-align: 0.7rem;
	color: var(--highlight-green-color);
}
.story h2.large a:hover { border-bottom: none; }
.story h2.large a:hover .headlinelabel { background-color: var(--highlight-green-color); color: #fff; }

.story h3 { position: relative; font-family: typoldbook, sans-serif; color: var(--highlight-green-color); font-size: 1.5rem; font-weight: normal; text-align: left; display: none; }
.story h3 a:hover { text-decoration: underline; }
.story h3 img.icon { padding: 0rem 0.5rem 1rem 0; width: 4rem; vertical-align: -2.5rem; }

.story .fragment .headline-button-container { display: flex; flex-wrap: wrap; flex-flow: row; align-items: center; margin-bottom: 1.5rem; }
.story .fragment .headline-button-container > h1 { flex: 1 1 auto; white-space: normal; margin-bottom: 0; }
.story .fragment .headline-button-container > .button { flex: 0 0 auto; margin-left: 1rem; }

.story .fragment > table:last-child,
.story .fragment div.table-layout-auto > table:last-child { margin-bottom: 0; }

.story ul { list-style: none; margin-bottom: 0.5em; }
.story ul li::before { content: "•"; color: var(--footnote-color); display: inline-block; width: 2.5rem; font-size: 200%; line-height: 50%; vertical-align: -0.3rem; margin-left: -2.5rem; }
.story ul.searchresults li::before { content: none; }
.story ul li { padding-left: 2.5rem; }
.story ul li:first-child { margin-top: 0.5em; }

.story > p+div.fragment { margin-top: 3rem; }
.story div.fragment, .story article.fragment
{
	display: flex;
	align-items: flex-start;
	padding: 2rem;
	background-color: rgba(174, 183, 180, 0.15);
	border-radius: 1.5rem;
	width: 100%;
	/* text-wrap-style: balance; */
}
.story div.fragment > div { flex: 1; }
.story div.fragment.transparent header:has(+ p.right) { float:left; }
@media screen and (max-width: 640px)
{
	.story div.fragment.transparent header:has(+ p.right) { float: none; }
}
.story div.fragment.transparent header+p.right { margin-top: 0.3rem; }
.story div.fragment.transparent:has(.icon) { padding-left: 0; padding-right: 0; }
.story div.fragment.transparent {  padding-top: 0; padding-bottom: 0; }
.story div.fragment.transparent > div:has(figure), .story div.fragment > div:has(picture) { width: 100%; }
.story div.fragment > div:has(> picture) { text-align: center; }
.story div.fragment > div > picture > img { max-width: 70%; }
.story div.fragment.transparent > div:has(figure) > figure { margin: 0; }
.story div.fragment.bigimage { min-height: 20em; align-items: stretch; gap: 2rem; padding-top: 0; padding-bottom: 0; }
.story div.fragment.bigimage.left { padding-left: 0; }
.story div.fragment.bigimage.right { padding-right: 0; }
.story div.fragment.bigimage > picture { display: flex; flex: none; width: 44%; }
.story div.fragment.bigimage > picture > img
{
	width: 100%;
	object-fit: cover;
}
.story div.fragment.bigimage.left > picture > img
{
	border-top-left-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	mask-image: linear-gradient(to left, transparent, 33%, black);
	object-position: 100%;
}
.story div.fragment.bigimage.right > picture > img
{
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	mask-image: linear-gradient(to right, transparent, 33%, black);
	object-position: 0%;
}
.story div.fragment.bigimage > div:has(p) { margin-bottom: 2rem; margin-top: 2rem; }
.story div.fragment.bigimage p:last-child { margin-bottom: 0; padding: 0; }
.story div.fragment:last-child { margin-bottom: 0; }
.story div.fragment a { color: var(--link-color); }
.story div.fragment div p:last-child:has(a.button) { margin-top: 2rem; }
.story .fragment div:last-child > p:last-child { margin-bottom: 0; }
.story .fragment > img.icon+div { width: 100%; }

.story { display: flex; flex-flow: row wrap; gap: 2rem; align-content: flex-start; }
.story div.textblock { width: 100%; }
.story div.textblock:not(:first-child) h1 { padding-top: 2rem; }
.story div.textblock h2 { margin-top: 0; flex: 1; }
.story div.textblock p.center:has(a.button) { margin-top: 1.8rem; }


.story div.fragment.cols1 { flex: 100%; }
.story div.fragment.cols2 { width: calc(50% - 1rem); }
.story div.fragment.cols3 { width: calc(33.3333% - 2rem); }
.story div.fragment.cols2 { margin-bottom: 0; flex-grow: 0; }
.story div.fragment.cols3 { margin-bottom: 0; flex-grow: 0; }
.story div.fragment.cols3.bigimage { gap: 0px; flex-direction: column-reverse; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem; }
.story div.fragment.cols3.bigimage.left { flex-direction: column; }
.story div.fragment.cols3.bigimage > picture { margin-left: -2rem; width: calc(100% + 4rem); }
.story div.fragment.cols3.bigimage > picture > img { mask-image: none; border-radius: 1.5rem 1.5rem 0 0; object-position: 0%; }
.story div.fragment.cols3.bigimage > div:has(p) { margin-bottom: auto; margin-top: 2rem; }

@media screen and (max-width: 840px)
{
	.story div.fragment.cols2,
	.story div.fragment.cols3 { width: 100%; }
	.story div.fragment.cols3.bigimage > picture { margin-left: 0; padding: 0; width: 100%; }
	.story div.fragment.cols3.bigimage { padding-left: 0; padding-right: 0; padding-bottom: 0; }
	.story div.fragment.cols3.bigimage.right { padding-bottom: 0; }
	.story div.fragment.cols3.bigimage.right { flex-direction: column-reverse; }
	.story div.fragment.cols3.bigimage.right > picture > img
	{
		border-radius: 1.5rem 1.5rem 0 0;
		mask-image: linear-gradient(to top, transparent, 33%, black);
	}
	.story div.fragment.bigimage > div:has(p) { margin-bottom: 2rem; }
}

@media (max-width: 840px)
{
	.story div.fragment.bigimage.left, .story div.fragment.bigimage.right
	{
		flex-direction: column;
	}
	.story div.fragment.bigimage.left { padding-right: 0; }
	.story div.fragment.bigimage.right { padding-left: 0; }
	.story div.fragment.bigimage.left > div:has(p), .story div.fragment.bigimage.right > div:has(p)
	{
		margin-left: 2rem;
		margin-right: 2rem;
	}
	.story div.fragment.bigimage > picture { width: 100%; }
	.story div.fragment.bigimage.left > picture > img
	{
		border-radius: 1.5rem 1.5rem 0 0;
		mask-image: linear-gradient(to top, transparent, 33%, black);
	}
	.story div.fragment.bigimage.right > picture > img
	{
		border-radius: 0 0 1.5rem 1.5rem;
		mask-image: linear-gradient(to bottom, transparent, 33%, black);
	}
}

.story .fragment > div > table:last-child,
.story .fragment > div > form > table:last-child,
.story .fragment > div > div.table-container > table:last-child { margin-bottom: 0rem; }
.story .fragment h1 + table, .story .fragment h1 + input + table { margin-top: 1.5rem; }  /* +input for additional buttons directly after the H1 */
.story .fragment td, .story .fragment th { border-bottom: 1px rgba(174, 183, 180, 0.33) solid; }
.story .fragment tr:last-child td { border-bottom: none; }
.story .fragment div.faq-body { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease-in; padding-left: 1.25em; }
.story .fragment div.faq-body > *:first-child { margin-top: 0.5rem; }
.story .fragment div.faq-body > *:last-child { margin-bottom: 2rem !important; }
.story .fragment div.faq-body.hidden { max-height: 0px; transition-timing-function: ease-out; }
.story .fragment h1 p, .story .fragment h3 p { word-break: normal; hyphens: none; -webkit-hyphens: none; }
.story .fragment h2.faq-article { font-family: 'typoldlight'; font-weight: normal; }
.story .fragment h2[onclick] { cursor: pointer; user-select: none; color: var(--text-color); margin-top: 0; margin-left: 1.25em; margin-bottom: 0; transition: color 0.1s ease-in; }
.story .fragment h2[onclick]:hover,
.story .fragment h2[onclick].open { color: var(--highlight-green-color); }
.story .fragment h2[onclick]:before,
.story .fragment tr.chevron td:first-child:before,
.story .fragment tr.chevron th:first-child:before
{
	display: inline-block;
	content: " ";
	width: 1em;
	height: 1em;
	margin-right: 0.25em;
	vertical-align: -0.2em;
	background-image: url("assets/images/buttons/caret.png");
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.3;
	transform: rotate(-90deg);
	transition: transform 0.1s ease-in;
	margin-left: -1.25em;
}
@media(prefers-color-scheme: dark)
{
	.story .fragment h2[onclick]:before,
	.story .fragment tr.chevron td:first-child:before,
	.story .fragment tr.chevron th:first-child:before
	{
		filter: invert(1);
	}
}
.story .fragment h2[onclick].open:before,
.story .fragment tr.chevron.open td:first-child:before,
.story .fragment tr.chevron.open th:first-child:before
{
	transform: rotate(0deg); transition-timing-function: ease-out; 
}

.story .fragment tr.chevron { cursor: pointer; user-select: none; }

@media(max-width:720px)
{
	.story .fragment h2[onclick] { margin-left: calc(-5rem + 1.25em); }
	.story .fragment div.faq-body { margin-left: -5rem; padding-left: 0; }
}

img.glyph { display: inline-block; max-height: 1rem; }
.story .icon { padding: 0rem 1.5rem 0 0; width: 5rem; }
.story h1 > .icon { display: inline-block; padding: 0; height: 1.5em; margin: 0em 0 -0.25em 0.3em; }
.story h1 > .inline-icon { display: inline-block; padding: 0; height: 1em; margin: 0em 0 -0.15em 0.3em; }
.story p > .icon { display: inline-block; padding: 0 0; width: 1em; height: 1em; min-width: 1em; min-height: 1em; vertical-align: -0.1em; }
.story figure { margin-top: 2.0rem; margin-bottom: 1.4rem; text-align: center; }
.story > figure:first-child { margin-top: 0; }
.story figure.right { float: right; }
.story figure:not(.inline) img { max-width: 100%; }
.story figure.inline { display: inline; }
.story figure.inline:not(:last-of-type) { margin-right: 1rem; }
.story figure.inline img { width: inherit; margin-top: 1rem; margin-bottom: 1rem; }
.story figure a img { opacity: 0.8; transition: opacity 0.2s; }
.story figure a img:hover { opacity: 1.0; }
.story figure.inline-image { display: inline-block; padding-right: 1rem;}
.story figure:not(.inline-image) img { height: auto; }
.story img[data-lightbox-src] { cursor: pointer; }
.story.blog h1 { width: auto; display: inline-block; }
.story.blog h1 + a.button { float: right; }
.story.blog h3 { display: block; color: var(--text-disabled-color); }
.story.blog article.fragment figure, .story article.pressrelease figure { text-align: left; margin-top: 0; }
.story.blog article.fragment figure img, .story article.pressrelease figure img { width: 100%; max-width: 300px; }
.story.blog .fragment header { padding-bottom: 2rem; }
.main-body.productpage .story figure:not(.inline) img { max-width: 60%; margin-left: 20%; margin-right: 20%; }
.main-body.productpage .story figure { margin-top: 0rem; margin-bottom: 1.5rem; }
.main-body.productpage .story .fragment.transparent figure:only-child { margin-top: 0; margin-bottom: 0; }
.story figure.cropped img { max-width: 60%; padding: 0 8px; border-bottom: 1px dotted #94a8a3; }
.story figure.bordered img { padding: 4px; border: 1px solid #bbb; }
.story figcaption { display: inline-block; width: 78%; font-size: 1.3rem; line-height: 1.6em; color: var(--footnote-color); }
.story figcaption a:link, .story figcaption a:visited, .story figcaption a:hover, .story figcaption a:active { color: var(--link-color); }
.story.blog article.fragment figcaption { display: block; }
.story.blog code { color: var(--code-color); }
.story > table { table-layout: auto; }
.story > table th:not(:last-child), .story > table td:not(:last-child) { padding-right: 1rem; }

.story .fragment .newsletter form { text-align: center; }
.story .fragment .newsletter form input[name=email] { font-size: 2rem; text-align: center; }
.story .fragment .newsletter form input[name=email]:invalid { color: inherit; }
.story .fragment .newsletter form input[name=subscribe] { margin: 2rem 0 2rem 0; }

.story .fragment .gallery { display: flex; margin: 0; column-gap: 1rem; }
.story .fragment .gallery picture { display: flex; }
.story .fragment .gallery picture > img { width: 100%; height: 100%; max-width: 100%; }

div.lead, p.lead { width: 100%; hyphens: none; 	text-wrap-style: balance; }
.story.pressrelease div.lead { font-size: inherit; line-height: inherit; }  /* .main-body .lead { font-size: 1.7rem; font-weight: bold; letter-spacing: -0.035em; line-height: 3.2rem; color: #333; } */

.story p { margin-bottom: 0.8rem; }
.story p a:link, .story p a:visited, .story p a:hover, .story p a:active, .story td a, .story li a
{
	color: var(--link-color);
	font-family: var(--link-font-family);
}
.story table.download td a, .story .crew.listrequests td a .story .crew.manageusers td a { color: inherit; }
.story table.download td a:hover, .story .crew.listrequests td a:hover, .story .crew.manageusers td a:hover { color: var(--link-color); border-bottom: 1px dotted var(--link-color); }
/* .story p span:not(.nohyphens) { cursor: pointer; } */

.story p.footnote, .story div.footnote, section.login div.footnote { font-size: 1.3rem; color: var(--footnote-color); }
.story p.footnote:not(:last-child), .story div.footnote:not(:last-child) { margin-bottom: 1rem; }
.story table + div.footnote:not(:last-child) { margin-bottom: 2rem; }
span.footnote { color: var(--footnote-color); }
span.right { float: right; }
div.left p.left { text-align: left; }
div.center p.center { text-align: center; }
div.right:not(.fragment), p.right { text-align: right; }
td div.footnote p { margin-top: 1em; }
.story div.footnote a:hover { border-bottom: 1px dotted var(--link-color); }

.main-body.productpage .story p { line-height: 3.2rem; margin-bottom: 1.5rem; }
.main-body.productpage .story .fragment.transparent p:not(:last-child) { margin-bottom: 3rem; }

.story p.download a:link, .story p.download a:visited, .story p.download a:hover, .story p.download a:active { color: var(--link-color); }
p.versioninfo::before { margin-right: 8px; background-size: 1.2em 1.2em; display: inline-block; width: 1.2em; height: 1.2em; content: " "; background-position-y: 0.2em; background-repeat: no-repeat; }
p.versioninfo.mac::before { background-image: url("assets/images/icons/icon-mac.svg"); }
p.versioninfo.ios::before { background-image: url("assets/images/icons/icon-iosdevice.svg"); }
.story p.versioninfo { color: var(--footnote-color); margin-bottom: inherit; }

section.searchfield { width: 100%; text-align: center; margin-top: 2rem; margin-bottom: 4rem; }
section.searchfield input[name="q"]
{
	width: 70%;
	border: 2px solid var(--form-input-border-color);
	padding: 0.5rem 1.5rem 0.7rem 1.5rem;
	background: transparent;
	font-size: 3rem;
	text-align: center;
	outline: none;
	transition: 0.3s;
}
section.searchfield p { margin: 1rem 0rem 0rem 0rem; }
section.searchfield a { color: var(--link-color); }
.story .searchresults li { list-style-type: none; text-indent: 0px; margin-bottom: 3rem; padding-left: 0; }
@media (max-width: 720px) { section.searchfield input[name="q"] { width: 100%; } }
@media (max-width: 640px) { section.searchfield input[name="q"] { font-size: 2rem; } }

.blog-masthead { width: 100%; text-align: center; max-width: 106rem; margin: 1rem 0 6rem; }
.blog-masthead h2 img { width: 32rem; max-width: 100%; }
.blog-masthead h3
{
	margin: 1rem auto 0;
	padding-top: 1rem;
	width: 56rem;
	max-width: 100%;
	font-family: 'foro-light', serif;
	font-size: 2.15rem;
	font-weight: normal;
	letter-spacing: 0.05em;
	border-top: 1px solid var(--text-color);
}
@media (max-width: 640px)
{
	.blog-masthead h2 img { width: 26rem}
	.blog-masthead h3 { font-size: 1.8rem; }
}
@media (max-width: 375px)
{
	.blog-masthead h3 { font-size: 1.5rem; }
}

.scope { margin-left: 3rem; padding-bottom: 2rem; margin-top: 0.5rem; width: 100%; }
.scope span.tag,
.scope span.category,
.scope span.search { background-color: var(--link-color); padding: 0.2em 0.8em 0.3em 0.8em; margin-left: 0.3em; border-radius: 1000px; color: #fff; }

.scope div.closebox
{
	content: " ";
	width: 0.4em;
	height: 0.4em;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0.2em 0.5rem;
	background-image: url("assets/images/buttons/tag-delete-white.png");
	background-size: 0.4em 0.4em;
	background-repeat: no-repeat;
	cursor: pointer;
}
.scope div.closebox:active { background-image: url("assets/images/buttons/tag-delete-white-active.png"); }

.scope span.category { background-color: var(--highlight-green-color); }
.scope span.search { background-color: #73baff; }
.story.blog li a { color: var(--link-color); }
.story.faq h1 { font-size: 1.8rem; font-family: typoldbook, sans-serif; color: var(--accent-color); }
.story.faq h2 { font-family: inherit; }
.story.faq article.fragment { margin-bottom: 0; }
 .story.faq .fragment img.icon { padding-top: 0; }

.story > figure.pageicon { width: 100%; margin-bottom: 2em; }
.story.error404 > section.searchfield { margin-top: 2em; }

.meta { justify-content: space-between; }
.aside span.tag, .meta span.tag
{
	display: inline-block;
	background-color: transparent;
	padding: 0.0em 0.6em 0.2em 0.6em;
	margin: 0.0 0.3em 0.5rem 0.0;
	border-radius: 1000px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--link-color);
	line-height: 1.3em;
}
.aside figure.center { text-align: center; }
.aside hr { border-bottom-color: var(--aside-text-color); opacity: 0.33; margin: 1.5em 0em; }

.aside p.tags { line-height: 2.2em; }
.aside span.tag { border-color: var(--aside-text-color); }
.aside span.tag a { text-decoration: none; border-bottom: none; }
.aside span.tag.dimmed { opacity: 0.5; }

.meta { margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; font-size: 1.3rem; color: var(--footnote-color); }
.meta a:link, .meta a:visited, .meta a:hover, .meta a:active { color: var(--link-color); }
.meta a:hover { text-decoration: underline; }
.meta .date { margin-right: 0.5rem; }

.meta .tags { display: flex; flex-wrap: wrap; margin-top: 0.8rem; }
.meta span.tag:first-of-type { margin-left: -0.1em; }
.meta span.tag.dimmed { opacity: 0.5; }
.meta span.tag a:hover { text-decoration: none; border-bottom: none; }

.meta__related { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 0.4em; }
.meta__related div { width: 31%; margin: -0.4em 2% 0 0; padding: 0; }
.meta__related a:link, .meta__related a:visited, .meta__related a:hover, .meta__related a:active
{
	display: inline-block;
	margin-top: 0.3em;
	font-family: 'foro-extralight', serif;
	font-weight: 100;
	font-size: 1.7rem;
	line-height: 1.28em;
	letter-spacing: 0.014em;
	color: black;
}

.share-icon { width: 16px; height: auto; margin: 0.3rem 0 0 0.7rem; }
.share-icon path { fill: #aeb7b5; }
.share-icon:hover { cursor: pointer; }
.share-icon:hover path { fill: black; }

.forum__table { font-size: 1.3rem; border: 1px solid gray; border-collapse: collapse; line-height: 1.4em; }
.forum__table thead { border: 1px solid gray; }
.forum__table thead th { margin-bottom: 0.5rem; font-family: typoldbook, sans-serif;  font-size: 1.3rem; font-weight: normal; color: #000; border: 1px solid gray; }
.forum__table tbody { border: 1px solid gray; }
.forum__table td { border: 1px solid gray; }

.testimonial { position: relative; margin: 4rem 0 1rem 0; }
.story blockquote.testimonial { border-left: inherit; margin: 4rem 0 1rem 0; padding-left: 0; padding-right: 0; color: var(--highlight-green-color); }
.story.blog blockquote.testimonial { margin-top: 1.5rem; margin-bottom: 1.5rem; }
section:not(.productpage) .story blockquote { padding-left: 2rem; padding-right: 2rem; }
.story.pressrelease .testimonial { margin-top: 2rem; margin-bottom: 2rem; }
.story .fragment .quote-container-outer { width: 100%; text-align: center; }
.story .fragment blockquote { display: inline-block; }
.story .fragment blockquote.testimonial { margin-top: 0; margin-bottom: 0; font-size: 2rem; }
.story .fragment blockquote.testimonial p.source { margin-bottom: 0; }

.main-body.devonthink .testimonial { color: var(--highlight-color-devonthink); }
.main-body.devonagent .testimonial { color: var(--highlight-color-devonagent); }
.main-body.devonsphere .testimonial { color: var(--highlight-color-devonsphere); }
.main-body.devonthink blockquote.testimonial p.source a:hover { border-bottom-color: var(--highlight-color-devonthink); }
.main-body.devonagent blockquote.testimonial p.source a:hover { border-bottom-color: var(--highlight-color-devonagent); }
.main-body.devonsphere blockquote.testimonial p.source a:hover { border-bottom-color: var(--highlight-color-devonsphere); }

blockquote.testimonial { font-family: 'typoldbook', sans-serif; font-size: 2rem; line-height: 150%; }
blockquote.testimonial p.quote { position: relative; display: inline; word-break: keep-all; }
.story.pressrelease blockquote.testimonial p.quote { font-size: inherit; line-height: inherit; }
blockquote.testimonial p.quote:before { position: absolute; left: -0.55em; content: "“"; font-family: Baskerville, sans-serif; font-size: 3.2rem; }
blockquote.testimonial p.quote.de:before { content: "„"; }
blockquote.testimonial p.quote:after { position: relative; padding-left: 0.1em; top: 0.1em; line-height: 0%; display: inline; content: "”"; font-family: Baskerville, sans-serif; font-size: 3.2rem; }
blockquote.testimonial p.quote.de:after { content: "“"; }
blockquote.testimonial p.source { text-align: right; }
blockquote.testimonial p.source:before { content: "— "; }
blockquote.testimonial p.source a { color: inherit; border-bottom-color: transparent !important; }
blockquote.testimonial p.source a:hover { border-bottom-color: inherit !important; }
@media (max-width: 840px) { blockquote.testimonial p.source { right: 3rem; } }

span.error { color: red; }
div.error { text-align: center; width: 100%; }
div.error h1 { color: red; }
div.error a { border-bottom: 1px solid red; }
div.error a:active { color: red; }

div.note
{
	padding: 1rem;
	margin: 2rem 0 2rem 0;
	border-radius:0.5rem;
	background-color: var(--accent-color);
	color: #fff;
	text-align: center;
}
div.note p:last-child { margin-bottom: 0px; }

aside
{
	align-self: flex-start;
	order: 3;
	width: 30%; /* 26rem; */
	background-color: transparent;
	font-size: 1.5rem;
	line-height: 2.4rem;
	background-color: rgba(89, 201, 178, 1.0);
	padding: 2.5rem;
	border-radius: 1.5rem;
	/* box-shadow: -1px 0.5rem 1rem rgba(204, 204, 204, 0.5); */
	color: var(--aside-text-color);
}
aside a:link, aside a:visited, aside a:hover, aside a:active { border-bottom: 1px dotted; font-family: typoldbook; }
aside a:hover { opacity: 0.7; border-bottom-style: solid; }
aside a:active { opacity: 0.5; border-bottom-style: solid; }
aside form { margin-bottom: 2rem; }
aside form select { width: 100%; }
aside form input[type=text] { width: 100%; padding: 0 0.4em; line-height: 1.4em; }
@media (max-width: 1000px) { aside { width: 23rem; } }
@media (max-width: 840px) { aside { order: 5; width: 100%; } }
.aside h1, .aside h2
{
	margin-bottom: 1em;
	margin-top: 3rem;
	font-family: 'typoldbook', sans-serif;
	font-size: 2rem;
	font-weight: normal;
	text-align: left;
	line-height: 1.2em;
}
.aside h1:first-child { margin-top: 0px; }
.aside h2 a, .aside li a { color: inherit; border-bottom: 1px dotted; }
.aside b, .aside i, .aside em, .aside strong { color: var(--aside-text-color); }
.aside p, .aside ul { margin-bottom: 1rem; }
.aside > p:last-child { margin-bottom: 0; }
.aside p.footnote, .aside div.footnote p { font-size: 1.3rem; opacity: 0.6; }
.aside div.footnote p { margin-bottom: 0; }
.aside div.footnote { margin-bottom: 1em; }
.aside a.rss { display: inline-block; }
.aside a.rss::before { content: url("assets/images/blog/rss.svg"); margin: 0 0.2em 0 0.1em; filter: grayscale(100%) brightness(0); }
@media (prefers-color-scheme: dark)
{
	.aside a.rss::before { filter: grayscale(100%) brightness(2); }
}
.aside ul { list-style-type: disc; list-style-position: inside; margin-bottom: 1.4rem; padding-left: 0.4em; }
.aside ul span { cursor: pointer; }
.aside figure { margin: 0 0 1em 0; }
.aside figure a:has(img) { border-bottom: 1px solid transparent; }
.aside img { max-width: 100%; }
.aside__form--inline { margin-top: -1.4rem; }
.aside form input { color: var(--aside-text-color); }
.aside form input[type=search] { border-color: var(--aside-text-color); }
.aside .newsletter form { text-align: center; }
.aside .newsletter form input[name=email] { border-bottom: dotted 1px; margin-bottom: 2rem; }
.aside .newsletter form input.button { font-size: 1.3rem; padding: 0.0rem 0.9rem 0.2rem 0.9rem; }

/* Cover */

#cover
{
	background-color: rgba(0, 0, 0, 0);
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: var(--overlay-layer);
	transition: background-color 0.5s, -webkit-backdrop-filter 0.5s;
}
#cover.visible
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.75);
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}
#cover .close-button { position: fixed; top: 1.4rem; left: 1.6rem; color: #fff; font-size: 2rem; padding: 0.4rem; cursor: pointer; display: none; font: 3rem "Helvetica", sans-serif; z-index: calc(var(--overlay-layer) + 1);  /* The button must overlay e.g. the gallery */ }
#cover .close-button:before { content: "✕"; }
#cover.visible .close-button { display: block; }

/* Modals */

.modal { background-color: var(--background-color); border-radius: 2px; padding: 2.4rem 2rem 1.2rem; display: none; margin-top: -10vh; text-align: center; }
.modal p { line-height: 1.2em; margin: 0 0 0.4rem; }
.modal p.footnote { font-size: 1.3rem; line-height: 1.8rem; color: var(--footnote-color); padding-bottom: 1rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--footnote-color); }
.modal a { color: #00b3d6; }
.modal .product-widget { margin: 1.4rem 5rem 0.8rem; }
.modal.visible { display: inline-block; }

/* Gallery */

#gallery { display: none; flex-direction: column; justify-content: center; align-items: center; width: 80vw; height: 100%; padding-bottom: 20vh; margin: 0 auto; z-index: var(--gallery-layer); }
#gallery.visible { display: block; }
#gallery section { width: 100%; height: 95vh; margin: 5vh 0 0 0; padding: 0; display: none; }
#gallery section.visible { display: block; }
#gallery figure { max-width: 100%; }
#gallery figure div.ratio-fixer { position: relative; text-align: center; width: 100%; height: 80vh; max-height: calc(100vh - 150px); display: flex; margin: 0 auto; justify-content: center; align-items: center; }
#gallery figure div.ratio-fixer span { display: inline-block; height: 100%; vertical-align: middle;}
#gallery figure img { flex-shrink: 0; /* min-width: 100%; */ max-height: 100%; max-width: 100%; /* min-height: 100%; */ object-fit: scale-down; }
#gallery figure iframe { flex-shrink: 0; max-height: 80vh; max-width: 100%; }
#gallery figcaption { padding: 0 8vw; color: #ebebeb; height: 0; }
#gallery figcaption div { height: calc(15vh - 6rem); min-height: 50px; overflow: hidden; text-align: center; display: flex; }  /* Make the caption a block with bottom-aligned, centered text*/
#gallery figcaption div span { align-self: flex-end; display: inline-block; margin-left: auto; margin-right: auto;}
#gallery .gallery-nav { position: relative; top: -5rem; }
#gallery .gallery-nav ul { display: flex; justify-content: center; }
#gallery .gallery-nav li { width: 0.7em; height: 0.7em; margin: 1rem 1rem; background-color: gray; border-radius: 50%; cursor: pointer; }
#gallery .gallery-nav li:only-child { display: none; }
#gallery .gallery-nav li.current { background-color: #fff; }
@media (max-width: 720px)
{
	#gallery figure div.ratio-fixer { height: 70vh; }
	#gallery figcaption div { height: calc(25vh - 6rem); }
}

div.vimeo { position: relative; }
div.vimeo > .darken
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 6px);  /* Don't ask me why; it's just is 6 px off in Safari and Firefox alike */
	background-image: url("assets/images/buttons/play.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 6rem;
	filter: drop-shadow(0px 0px 0.5rem #999);
}
div.vimeo > .darken:before { content: ""; background: url("assets/images/buttons/play-active.svg") no-repeat -9999px -9999px; opacity: 0.0; }
div.vimeo > .darken:active { background-image: url("assets/images/buttons/play-active.svg"); }

/* Footer */

/* border-top: 1px solid #6bc7ae; */
footer { margin-top: 8rem; padding: 1.8rem 0.0 1.8rem; border-top: 1px solid #6bc7ae; letter-spacing: 0.02em; text-align: center; font-size: 1.3rem; position: relative; }
footer a:link, footer a:visited, footer a:hover, footer a:active { color: inherit; }
footer li { display: inline; margin: 0 1rem; }
footer div.language { display: inline-block; }
footer div.language a { font-size: 0.8rem; font-weight: bold; color: light-dark(#666, #999); padding: 0.1rem 0.3rem 0.25rem 0.4rem; border: 1px solid light-dark(#666, #999); border-radius: 0.3rem; vertical-align: 0.2rem; }
footer div.language a:hover { background-color: light-dark(#666, #999); color: #fff; }
footer div.social { display: inline-block; vertical-align: 0.1em; }
footer div.social img { height: 1.5em; margin-right: 0.25em; vertical-align: middle; }
@media (max-width: 720px) { footer { margin-top: 3rem; } }

/* Cookie Disclaimer */

#cookie_disclaimer
{
	display: table;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding: 1rem 1rem env(safe-area-inset-bottom) 1rem;
	min-height: 7rem;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	text-align: center;
	z-index: var(--cookiebar-layer);
}
#cookie_disclaimer.hidden { display: none; }
#cookie_disclaimer a { border-bottom: 1px dotted #999; }
#cookie_disclaimer > div { display: table-cell; vertical-align: middle; }
#cookie_stop { height: 2rem; display: inline-block; vertical-align: -0.4rem; margin-left: 0.5rem; cursor: pointer; }
#cookie_stop svg { width: 2rem; height: 2rem; }
#cookie_stop svg path { fill: #fff; }

/* Buttons */

input.button, label.button, button
{
	background: var(--button-color);
	border: 1px solid transparent;
	border-radius: 1000px;
	padding: 0.5rem 1.5rem 0.7rem 1.5rem;
	font-size: 2.0rem; 
	color: white;
	-webkit-text-fill-color: white;
	transition: opacity 0.15s;
}
input.button:disabled, button:disabled { opacity: 0.3; }
input.button:hover:enabled, button:hover:enabled { background-color: var(--button-color-hover); }
input.button:active:enabled, button:active:enabled { background-color: var(--button-color-active); }
input.button.small, button.small { font-size: 1.5rem; padding: 0.2em 0.7em 0.2em 0.7em; }
input.dangerous { background-color: #ff8f00; }
input.dangerous:hover:enabled { background-color: light-dark(#FF9D20, #DF7D00); }
input.dangerous:active:enabled { background-color: light-dark(#FFAB40, #BF6B00); }

p.button a, a.button
{
	background-color: var(--button-color);
	border: 1px solid transparent !important;
	border-radius: 1000px;
	padding: 0.2em 1em 0.35em 1em;
	color: white;
	-webkit-text-fill-color: white;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
p.button a.float { float: right; margin-top: -4.2rem; }
p.button { margin-top: 2rem; margin-bottom: 2rem;}
p.button a:hover, a.button:hover { background-color: var(--button-color-hover); }
p.button a:active, a.button:active { background-color: var(--button-color-active); }
@media (max-width: 640px) { .button.hideable { display: none; } }  /* For smaller devices such as iPhones, hide appropriate buttons */

p a.button:first-of-type:not(:last-of-type) { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 1px; }
p a.button:not(:first-of-type):not(:last-of-type) { border-radius: 0; margin-right: 1px; }
p a.button:not(:first-of-type):last-of-type { border-top-left-radius: 0; border-bottom-left-radius: 0; }

td a.button { font-size: 1.3rem; padding: 0.2rem 1.5rem 0.4rem 1.5rem; }

img.button { height: 1em; opacity: 0.7; vertical-align: middle; }
img.button:hover { opacity: 1.0; }

/* Tooltips */

.tooltip { position: relative; cursor: default; }
div.tooltip, p.tooltip, span.tooltip { display: inline-block; border-bottom: 1px dotted #aaa; hyphens: none; }
span.tooltip:has(a) { border-bottom: none; }
.tooltip-text > p { margin: 0px; }
.tooltip .tooltip-text
{ 
	visibility: hidden;
	width: 20rem;
	background-color: #555;
	color: #ddd;
	text-align: left;
	padding: 1.5rem 2rem;
	border-radius: 1.5rem;
	position: absolute; /* Position the tooltip text */
	z-index: var(--tooltip-layer);
	top: 135%;
	left: 50%;
	margin-left: -10rem;
	opacity: 0; /* Fade in tooltip */
	transition: opacity 0.3s;
}
.tooltip .tooltip-text::after  /* Tooltip arrow */
{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1.0; }  /* Show the tooltip text when you mouse over the tooltip container */
.tooltip .tooltip-text code { color: #ddd; background: #777; }
/* .tooltip a:link, .tooltip a:visited, .tooltip a:hover, .tooltip a:active { border-bottom: none; } */

/* AJAX */

td.ajaxdots { text-align: center; }
img.ajaxdots { height: 1em; vertical-align: middle; }

.spinner { margin: 0.5em auto 0.5em auto; width: 70px; text-align: center; display: inline-block; line-height: 0.75em; }
.spinner > div
{
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.2em;
	margin-left: 0.2em;
	background-color: #666;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.white > div { background-color: #fff; }
.spinner.small { line-height: 0.5em; }
.spinner.small > div { width: 0.5em; height: 0.5em; }
.spinner.hidden { display: none; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay
{
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay
{
	0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
	40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

/* Various */

@media  (max-width: 640px)
{
	.hide-when-narrow { display: none; }
}

p.backlink { text-align: center; margin-top: 6rem;}
.footnotes { font-size: 1.2rem; line-height: 2rem; }
.footnotes ol { padding-left: 2rem; margin-left: 1rem; }
.aside p.footnotes { font-size: inherit; line-height: inherit; opacity: 0.75; }
.alert { border-radius: 1.5rem; padding: 0.3em 1.5em 0.5em 1.5em; background: var(--alert-color) !important; color: white; margin-bottom: 3rem; width: 100%; }
.alert a { border-bottom: 1px dotted #fff; }
p.alert { border-radius: 1.5em; margin-bottom: 3rem; text-align: start; }  /* We need to set text-align because the checkout-container is right-aligned */
.red { color: var(--invalid-color); font-family: 'typoldbook', sans-serif; }
.nohyphens { hyphens: none; }

.iconrow { width: 100%; }
.iconrow > figure { display: inline-block; width: 48px; margin: 0 1rem 0 0; }
.iconrow > figure a img, figure.inline-image a img { transition: opacity 0.15s; }
.iconrow > figure a { border-bottom-color: transparent; }
.iconrow > figure a:hover img, figure.inline-image a:hover img { opacity: 0.7; }
aside .iconrow { padding-left: 0; }
aside .iconrow > figure { width: calc(25% - 1.1rem); }
aside .iconrow > figure:last-of-type { margin-right: 0; }

/* Markdown table styling */

.table-container:not(:last-child) { margin-bottom: 1rem; }
.table-container.cols-1-3 th:nth-child(1) { width: 25%; }
.table-container.cols-1-3 th:nth-child(2) { width: 75%; }
.table-container.cols-1-1 th { width: 50%; }
.table-container.cols-3-1-1-1 th:nth-child(1) { width: 50%; }
.table-container.cols-3-1-1-1 th:nth-child(2),
.table-container.cols-3-1-1-1 th:nth-child(3),
.table-container.cols-3-1-1-1 th:nth-child(4) { width: 16%; }
.table-container.simple td, .table-container.simple th { border:none !important; }
.table-container.whatsnew img.icon { padding: 0; margin: 0 0.5rem 0 0; width: 2rem; min-width: inherit; min-height: inherit; vertical-align: -0.33rem; }
.table-container td { hyphens: auto; text-wrap-style: balance; }
.table-container td:not(:last-child) { padding-right: 1rem; }
.table-container th:empty { border-bottom: none; padding: 0; }

/* Printing */

@media print
{
	header { display: none; }
}

/* Dark mode */

@media (prefers-color-scheme: dark)
{
	nav { border-top-color: var(--background-color); }
	.nav__sub-list { background-color: rgba(48, 48, 48, 0.8); outline-color: #999 ;}
	.nav__sub-list-item a div { color: #fff; }
	.nav__sub-list-item a:hover div { color: var(--accent-color); }
	.nav__sub-list .nav__sub-list-footnote { color: #999; }

	/* Icons */
	#account_icon, #account_icon_loggedin, #logout_icon, #cart_icon, div.loupe, img.masthead-mini,
	.story .fragment h2[onclick]:before { filter: invert(100%) grayscale(100%); }
	.wrapper.top #account_icon, .wrapper.top #logout_icon, .wrapper.top #cart_icon,.wrapper.top div.loupe { filter: none !important; }

	.number-input button { filter: invert(100%) grayscale(100%); }
	.story h1 > .inline-icon { filter: invert(100%) grayscale(100%); }
}