html {
	--color-green: #008000;
	--color-red: #cc0000;
	--color-amber: #ffc107;
	--color-blue: #0078D5;
}
html.darkTheme {
	--color-green: #28a745;
	--color-red: #df5959;
	--color-amber: #ffc107;
	--color-blue: #62ace4;

	--jd-dark-background-color: #2e353d;
	--jd-dark-toolbar-color: #2e353d;
	--jd-popup-box-shadow: 0px 0px 0px 1px #666666;
}

html {
	color-scheme: light;
	padding: 0;
	margin: 0;
	text-align: center;
	font-family: system-ui, arial, sans-serif;
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 1.25em;
	overflow: hidden;
	background-color: #fff;
	color: #000;
}
html.widgetPage {
	background-color: transparent;
}
html.darkTheme {
	color-scheme: dark;
	color: #ccc;
	background: linear-gradient(90deg, #2C3036, #334354 50%, #2C3036);
}

body {
	margin: 0;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 330px;
	box-sizing: border-box;
}

a {
	color: #0064c8;
	text-decoration: none;
}
.darkTheme a,
.darkTheme a:visited {
	color: #428ad3;
	text-decoration: none;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

input,
select,
textarea {
	border: 1px solid #ccc;
	border-color: #ccc;
	background-color: #fff;
	color: #000;
	padding: 3px 5px;
	border-radius: 3px;
	font-size: 0.9em;
	min-height: 25px;
	box-sizing: border-box;
}
.darkTheme input,
.darkTheme select,
.darkTheme textarea {
	border-color: #626262;
	background-color: #2e353d;
	color: #ccc;
}
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid #00000066;
}
.darkTheme input:focus,
.darkTheme select:focus,
.darkTheme textarea:focus {
	outline: 2px solid #ffffff66;
}
input::placeholder,
select::placeholder,
textarea::placeholder {
	color: #aaa;
}
.darkTheme input::placeholder,
.darkTheme select::placeholder,
.darkTheme textarea::placeholder {
	color: #777;
}
input.glow {
	border: solid 2px #dcdcdc;
	transition: box-shadow 0.3s, border 0.3s;
}
input.glow:focus {
	border: solid 1px #707070;
	box-shadow: 0 0 5px 1px #969696;
}
input[type="checkbox"],
input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: #0059a2;
}
input:disabled {
	opacity: 0.5;
	background-color: #f5f5f5;
}
.darkTheme input:disabled {
	background-color: #222;
}
option[disabled] {
	opacity: 0.4;
}
.darkTheme input[type="checkbox"]:not(:checked),
.darkTheme input[type="radio"]:not(:checked) {
	filter: brightness(0.5);
}

.inputError {
	border-color: var(--color-red);
	border-style: dashed;
}

.clickable, [onclick] {
	cursor: pointer;
}

.textLowerCase {
	text-transform: lowercase;
}

.hidden,
.template {
	display: none !important;
}

[dir="rtl"] .rtlMirror {
	transform: scaleX(-1);
}

.button {
	all: unset;
	display: inline-flex;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.1;
	color: #ffffff;
	text-decoration: none;
	margin: 5px 5px;
	background-color: #0E83CD;
	position: relative;
	border: 0 none;
	cursor: pointer;
	min-width: 48px;
	border-radius: 4px;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.button:hover {
	filter: brightness(0.80);
}
.button.disabled {
	pointer-events: none;
	opacity: 0.3;
	filter: grayscale(100%);
}
.button.round {
	padding: 8px;
	border-radius: 50%;
}
.button > img,
.button > svg {
	height: 24px;
	max-width: 48px;
}
.button.green {
	background-color: #5BB74A;
}
.button.red {
	background-color: #E84C3D;
}
.button.in-progress {
	pointer-events: none;
}
.button.in-progress > img,
.button.in-progress [class^="icon-"] {
	animation: spin 2s linear infinite;
	display: inline-block;
}
.button.success::before,
.button.error::before,
.button.forward::before {
	position: absolute;
	right: 2px;
	top: 1px;
	font-size: 12px;
}
[dir="rtl"] .button.success::before,
[dir="rtl"] .button.error::before,
[dir="rtl"] .button.forward::before {
	right: auto;
	left: 2px;
}
.button.success::before {
	content: '✔';
}
.button.error::before {
	content: '✘';
}
.button.forward::before {
	content: '➜';
}
.button.vertical {
	display: inline-flex;
	flex-direction: column;
}
.button.vertical i[class*="icon-"] {
	font-size: 18px;
}
.button.vertical.iconOnly i[class*="icon-"] {
	font-size: 23px;
	vertical-align: middle;
}
.button.vertical.iconRot i[class*="icon-"] {
	transform: rotate(90deg);
}
.button.vertical > span {
	padding: 0;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}
.button.light {
	background-color: #fbfbfb;
	color: #222;
	border: 1px solid #ddd;
}
.darkTheme .button.light {
	background-color: #272727;
	color: #ccc;
	border-color: #444;
}
@media (hover: hover) and (pointer: fine) {
	.button.light:hover {
		filter: brightness(0.9);
	}
	.darkTheme .button.light:hover {
		filter: brightness(1.2);
	}
}


.tool:not(.available) {
	display: none !important;
}


.flexcc {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flexvc {
	display: flex;
	align-items: center;
}
.iflexvc {
	display: inline-flex;
	align-items: center;
}

.flexTools {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.flexTools .tool {
	margin: 5px 8px;
	flex-shrink: 1;
}


.textSuccess {
	color: var(--color-green);
}
.textDanger {
	color: var(--color-red);
}
.textWarning {
	color: var(--color-amber);
}


#spinnerView > .text {
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 20px;
}


#errorView > .text {
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 25px;
}
#errorView > .iconWrapper {
	margin-bottom: 30px;
}
#errorView > .iconWrapper i {
	font-size: 42px;
}
#errorView > .tools {
	margin-top: 30px;
}
/* middle: the report button's icon is an SVG (no text baseline as the icon font's) */
#errorView > .tools .button {
	vertical-align: middle;
}
/* "Report problem": a card in place of the view's buttons; the sad face, the teaser and the hints go while it is
   open. The texts of a failed job (forError) or a wrong result (forResult, .resultMode) */
#errorView.reporting > .iconWrapper,
#downloadStartedView.reporting > .teaserSpace,
#downloadStartedView.reporting > .commonHintsWrapper {
	display: none;
}
.reportForm .forResult,
.reportForm.resultMode .forError {
	display: none;
}
.reportForm.resultMode .forResult {
	display: revert;
}
.reportForm {
	--report-line: #e3e6ea;
	box-sizing: border-box;
	margin: 25px auto 0;
	max-width: 650px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: start;
	background-color: #f7f8fa;
	border: 1px solid var(--report-line);
	border-radius: 10px;
}
.darkTheme .reportForm {
	--report-line: #3a3a3a;
	background-color: #222;
}
.reportForm .reportHead {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 4px;
}
.reportForm .reportIcon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #d08a1e;
	background-color: #d08a1e22;
}
.reportForm .reportIcon svg {
	height: 20px;
}
.reportForm .reportTitle {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.3;
}
.reportForm .reportIntro {
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.75;
}
.reportForm textarea,
.reportForm input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	padding: 8px 10px;
	border: 1px solid var(--report-line);
	border-radius: 6px;
	background-color: #fff;
	resize: vertical;
}
.darkTheme .reportForm textarea,
.darkTheme .reportForm input[type="email"] {
	background-color: #181818;
}
.reportForm textarea:focus,
.reportForm input[type="email"]:focus {
	outline: none;
	border-color: #0E83CD;
	box-shadow: 0 0 0 3px #0E83CD33;
}
.reportForm input.inputError {
	border-color: var(--color-red);
	border-style: dashed;
}
.reportForm input[type="email"] {
	height: 38px;
}
/* the files: the box to tick and the files below it, faded when they don't go along */
.reportForm .reportFilesBox {
	padding: 10px 12px;
	border: 1px solid var(--report-line);
	border-radius: 6px;
	background-color: #fff;
}
.darkTheme .reportForm .reportFilesBox {
	background-color: #181818;
}
.reportForm .reportFiles {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
}
.reportForm .reportFiles input {
	flex-shrink: 0;
	margin: 1px 0 0;
}
.reportForm .reportFileList {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	padding-inline-start: 24px;
	transition: opacity 0.2s;
}
.reportForm .reportFileList.off {
	opacity: 0.4;
}
.reportForm .reportFileList li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 13px;
}
.reportForm .reportFileList .ext {
	flex-shrink: 0;
	min-width: 30px;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background-color: #E84C3D;
}
.reportForm .reportFileList li.result .ext {
	background-color: #5BB74A;
}
.reportForm .reportFileList li > i {
	flex-shrink: 0;
	margin-inline-start: -20px;
	width: 12px;
	font-size: 12px;
	opacity: 0.6;
}
.reportForm .reportFileList .name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.reportForm .reportFileList .size {
	flex-shrink: 0;
	opacity: 0.6;
}
.reportForm .reportFilesTooLarge {
	font-size: 13px;
	line-height: 1.35;
	opacity: 0.75;
}
.reportForm .reportFailed {
	font-size: 14px;
	color: var(--color-red);
}
/* cancel quiet, send as the main action at the end */
.reportForm .actionButtons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}
.reportForm .actionButtons .button {
	margin: 0;
	padding: 9px 16px;
}
.reportSent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 25px 0 20px;
	padding: 10px 16px;
	font-size: 15px;
	border-radius: 8px;
	color: #1e7b34;
	background-color: #28a74518;
}
/* the error view's buttons have their own space above them */
#errorView > .reportSent {
	margin-bottom: 0;
}
/* download view: the result report as a quiet line below the buttons */
#downloadStartedView > .reportLink {
	margin-top: 20px;
	font-size: 14px;
	opacity: 0.75;
}
#downloadStartedView > .reportLink a {
	color: inherit;
	text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
	#downloadStartedView > .reportLink a:hover {
		color: #d08a1e;
	}
}
.darkTheme .reportSent {
	color: #6fcf86;
}


#doneView > .text {
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 25px;
}
#doneView > .result {
	font-size: 15px;
	color: var(--color-green);
}
#doneView > .tools {
	margin-top: 30px;
}


#processingView {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 15px;
	min-height: 260px;
}
#processingView > .text {
	font-size: 20px;
	line-height: 1.25;
}
#processingView > .spinner {
	display: flex;
	justify-content: center;
}
#processingView > .status {
	font-size: 0.85em;
}
#processingView > .status .filename {
	color: var(--color-blue);
}
#processingView > .status .error {
	color: var(--color-red);
}


#resultView {
	--rv-border-color: #e9e9e9;
	--rv-thbg-color: #00000008;
	--rv-outfile-info-color: #444;
}
.darkTheme #resultView {
	--rv-border-color: #59606c;
	--rv-thbg-color: #ffffff15;
	--rv-outfile-info-color: #bbb;
}
#resultView {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 270px;
}
#resultView > .text {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 500;
	color: #272727;
}
.darkTheme #resultView > .text {
	color: inherit;
}
/* an empty text result: why, and the way to OCR (pdf24-help todo 277; looks like the page's .onlyImagesNote) */
#resultView > .noTextNote {
	max-width: 640px;
	margin: 0 auto;
	padding: 10px 15px;
	border: 1px solid #e3c065;
	border-radius: 10px;
	background-color: #fff8e3;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
}
.darkTheme #resultView > .noTextNote {
	border-color: #7d6a33;
	background-color: #3a3424;
}
#resultView > .noTextNote.ocrIncomplete,
#resultView > .noTextNote.ocrSkipped {
	max-width: 820px;
}
/* in an in-app browser: open the tool in the normal browser, its link to copy (todo 369) */
#resultView > .inAppBrowserNote { margin-top: 10px; margin-bottom: 4px; }
#resultView > .inAppBrowserNote .linkRow {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}
#resultView > .inAppBrowserNote .linkRow input {
	flex: 1;
	min-width: 0;
	padding: 5px 8px;
	border: 1px solid #d9c27f;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 14px;
	direction: ltr; /* a URL, also on right-to-left pages */
	text-align: left;
}
.darkTheme #resultView > .inAppBrowserNote .linkRow input {
	border-color: #7d6a33;
	background: #2a2a2a;
	color: #ddd;
}
#resultView > .inAppBrowserNote .linkRow .copyLink {
	flex: 0 0 auto;
	padding: 5px 14px;
	white-space: nowrap;
}
/* files of the job that failed while the others worked, one message each (todo 525) */
#resultView > .failedFilesNote { max-width: 820px; margin-top: 10px; }
#resultView > .failedFilesNote .text + .text { margin-top: 6px; }
#resultView > .noTextNote a.ocr {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 14px;
}
/* .darkTheme a (link blue) won over the button's white: blue on blue (todo 626) */
.darkTheme #resultView > .noTextNote a.ocr {
	color: #fff;
}
/* a large attachment: many mailboxes refuse it (todo 304) */
#emailFormSelect .mailSizeNote {
	max-width: 640px;
	margin: 8px auto 12px;
	padding: 8px 14px;
	border: 1px solid #e3c065;
	border-radius: 10px;
	background-color: #fff8e3;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}
.darkTheme #emailFormSelect .mailSizeNote {
	border-color: #7d6a33;
	background-color: #3a3424;
}
#emailFormSelect .mailSizeNote a.compress {
	font-weight: bold;
	text-decoration: underline;
	white-space: nowrap;
}
@media (max-width: 750px) {
	#resultView > .text {
		font-size: 18px;
	}
}
#resultView > .result {
	font-size: 16px;
	min-height: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#resultView > .result .outFile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px 20px;
	line-height: normal;
	font-size: 16px;
	flex-wrap: wrap;
	width: 100%;
}
#resultView > .result .outFile * {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
}
#resultView > .result .outFile .main {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 30px;
	border: 1px solid var(--rv-border-color);
	border-radius: 8px;
	overflow: hidden;
}
#resultView > .result .outFile .main.editing {
	border-color: transparent;
}
#resultView > .result .outFile .fileName {
	padding: 4px 20px;
	display: inline;
	vertical-align: middle;
	text-align: center;
	overflow: hidden;
	height: 100%;
	flex: 1;
	max-width: 500px;
	min-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	border-left: 1px solid var(--rv-border-color);
	border-right: 1px solid var(--rv-border-color);
}
@media (max-width: 600px) {
	#resultView > .result .outFile .fileName {
		padding: 4px 8px;
	}
}
#resultView > .result .outFile .fileNameWrapper .icon-edit {
	height: 100%;
	width: 30px;
	justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
	#resultView > .result .outFile .fileNameWrapper .icon-edit:hover {
		cursor: pointer;
		color: var(--color-blue);
		background-color: var(--rv-thbg-color);
	}
}
#resultView > .result .outFile .fileDetails,
#resultView > .result .outFile .filePreview,
#resultView > .result .outFile .fileEdit {
	padding: 5px;
	height: 100%;
}
@media (hover: hover) and (pointer: fine) {
	#resultView > .result .outFile .fileDetails:hover,
	#resultView > .result .outFile .filePreview:hover,
	#resultView > .result .outFile .fileEdit:hover {
		cursor: pointer;
		color: var(--color-blue);
		background-color: var(--rv-thbg-color);
	}
}
#resultView > .result .outFile .info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 12px;
	color: var(--rv-outfile-info-color);
	line-height: 1em;
	white-space: nowrap;
}
#resultView > .result .outFile .fileSize {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
#resultView > .result .outFile .fileSize .newSize {
	color: var(--color-green);
}
#resultView > .result.compact .outFile .info {
	display: none;
}


#downloadStartedView > .text {
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 25px;
}
#downloadStartedView > .commonHintsWrapper {
	margin-top: 25px;
}
#downloadStartedView > .teaserSpace {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


#erasedView > .text {
	font-size: 20px;
	line-height: 1.25;
	margin-bottom: 25px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#erasedView > .text p {
	margin: 0;
}
#erasedView > .text small {
	font-size: 0.75em;
}
#erasedView > .commonHintsWrapper {
	margin-top: 25px;
}


#mainResultTools {
	user-select: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
#mainResultTools .tool:not(.downloadTool) i {
	font-size: 14px;
}
#mainResultTools .tool.downloadTool {
	background-color: #0E83CD;
	min-width: 130px;
	font-size: 16px;
	min-height: 45px;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	gap: 10px;
}
#mainResultTools .tool.downloadTool i {
	display: inline-block;
	font-size: 26px;
}
#mainResultTools .tool.downloadTool span {
	display: inline-block;
	margin: 0;
	font-size: 24px;
	line-height: 24px;
	width: auto;
}
@media (min-width: 900px) {
	#mainResultTools .tool.downloadTool {
		min-width: 200px;
	}
}

/*
 * Restart, erase and continue with are in both rows (jobMonitor.html), each is shown in one of them.
 * Wide: restart | download | continue with, or erase there if the result can't be continued; the rest below.
 * The side columns are 1fr in a max-content grid: both as wide as the wider label, download stays in the middle
 * (also if a side is missing).
 */
@media (min-width: 500px) {
	#mainResultTools {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		width: max-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	#mainResultTools .tool {
		grid-row: 1;
		min-width: 0;
	}
	#mainResultTools .tool.restartTool {
		grid-column: 1;
	}
	#mainResultTools .tool.downloadTool {
		grid-column: 2;
	}
	#mainResultTools .tool.continueWithTool,
	#mainResultTools .tool.eraseTool {
		grid-column: 3;
	}
	#mainResultTools .tool:not(.downloadTool) {
		justify-self: stretch;
		align-items: center;
		justify-content: center;
		/* secondary next to download: light like .button.light, the color only in the icon as in the row below */
		background-color: #fbfbfb;
		color: #222;
		border: 1px solid #ddd;
	}
	/* dark: translucent, so it takes on the background's tint instead of a black box on it */
	.darkTheme #mainResultTools .tool:not(.downloadTool) {
		background-color: rgba(255, 255, 255, 0.06);
		color: #ccc;
		border-color: rgba(255, 255, 255, 0.14);
	}
	/* several buttons in the row: 10px; download alone (no other one available): round as on narrow screens */
	#mainResultTools .tool {
		border-radius: 10px;
	}
	#mainResultTools:not(:has(.tool.available:not(.downloadTool))) .tool.downloadTool {
		border-radius: 50px;
	}
	#mainResultTools .tool.restartTool i { color: #DF5959; }
	#mainResultTools .tool.eraseTool i { color: #a655bb; }
	#mainResultTools .tool.continueWithTool i { color: #5BB74A; }
	@media (hover: hover) and (pointer: fine) {
		#mainResultTools .tool:not(.downloadTool):hover {
			filter: brightness(0.9);
		}
		.darkTheme #mainResultTools .tool:not(.downloadTool):hover {
			filter: none;
			background-color: rgba(255, 255, 255, 0.12);
		}
	}
	#resultView.continueWithAvailable #mainResultTools .eraseTool,
	#moreResultTools .restartTool,
	#moreResultTools .continueWithTool,
	#resultView:not(.continueWithAvailable) #moreResultTools .eraseTool {
		display: none;
	}
}
/* narrow: only download up there, over the whole width; restart, erase and continue with below */
@media (max-width: 499.98px) {
	#mainResultTools .tool:not(.downloadTool) {
		display: none;
	}
	#mainResultTools .tool.downloadTool {
		flex-grow: 1;
		border-radius: 50px;
	}
}
@media (max-width: 500px) {
	#mainResultTools .tool.previewTool {
		display: none;
	}
}

#moreResultTools {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin: 0px -16px -30px -16px;
	overflow-x: auto;
	scrollbar-width: thin;
}
#moreResultTools .tool {
	background-color: #fff;
	color: #000;
	border: 1px solid #ddd;
	border-bottom: 0 none;
	flex-grow: 1;
	margin-bottom: 0;
	border-radius: 0;
	margin: 0;
	padding: 8px 8px;
	padding-bottom: 0;
	min-height: 55px;
	justify-content: center;
	min-width: 60px;
}
.widgetPage #moreResultTools .tool {
	background-color: transparent;
}
.darkTheme #moreResultTools .tool {
	color: #ccc;
	border-color: #232323;
	background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
	#moreResultTools .tool:hover {
		filter: brightness(0.9);
	}
	.widgetPage #moreResultTools .tool:hover {
		filter: brightness(1);
		background-color: #dee3ed;
	}
	.darkTheme #moreResultTools .tool:hover {
		filter: brightness(1.3);
		background-color: #2c3137;
	}
}
#moreResultTools .tool span:last-child {
	min-height: 22px;
}
#moreResultTools .tool.disabled {
	opacity: 1;
}
#moreResultTools .tool.disabled * {
	opacity: 0.4;
}
#moreResultTools .tool.emailFormSelectTool i { color: #9E7FAA; }
#moreResultTools .tool.emailFormSelectTool .shareIcon { display: none; height: 20px; color: #9E7FAA; }
#moreResultTools .tool.emailFormSelectTool.shareMode .shareIcon { display: inline; }
#moreResultTools .tool.emailFormSelectTool.shareMode i { display: none; }
#moreResultTools .tool.emailTool i { color: #9E7FAA; }
#moreResultTools .tool.emailMeTool i { color: #9E7FAA; }
#moreResultTools .tool.dropboxTool i { color: #CC7C62; }
#moreResultTools .tool.googleDriveTool i { color: #8ca3a3; }
#moreResultTools .tool.mergeTool i { color: #5F9DA4; }
#moreResultTools .tool.compressTool i { color: #70A683; }
#moreResultTools .tool.editTool i { color: #bfa368; }
#moreResultTools .tool.protectTool i { color: #859bc4; }
#moreResultTools .tool.splitTool i { color: #AE72A0; }
#moreResultTools .tool.rotateTool i { color: #85b3c4; }
#moreResultTools .tool.docInfoTool i { color: #ad75d5; }
#moreResultTools .tool.bookmarksTool svg { fill: #5dbfb0; }
#moreResultTools .tool.faxTool i { color: #BF7474; }
#moreResultTools .tool.continueWithTool i { color: #5BB74A; transform: scale(1.2); }
#moreResultTools .tool.restartTool i { color: #DF5959; }
#moreResultTools .tool.eraseTool i { color: #a655bb; }
#moreResultTools .tool.listAllOutputFilesTool svg { color: #c38e00; }
#moreResultTools .tool.printTool svg { color: #5b8bc9; }


#goBackTool,
.button.goBackTool {
	background-color: #6273cf;
}

#restartTool,
.button.restartTool {
	background-color: #DF5959;
}

#previewTool,
.button.previewTool {
	background-color: #17a2b8;
}

#eraseTool,
.button.eraseTool {
	background-color: #a655bb;
}

.button.reportTool {
	background-color: #d08a1e;
}
/* as high as the icon font's icons of the buttons beside it (1.1em: their line height) */
.button.reportTool > svg {
	height: 1.1em;
}
/* in the vertical buttons (download view, the row below the result) as the icon font's there: 18px */
.button.vertical.reportTool > svg {
	height: 18px;
}
#moreResultTools .tool.reportTool svg { color: #d08a1e; }

#fileNameEdit {
	font-size: 15px;
	height: 34px;
	display: flex;
	align-items: center;
	max-width: 100%;
}
#fileNameEdit input {
	vertical-align: middle;
	width: 300px;
	padding: 5px;
	flex: 1;
}
#fileNameEdit .extension {
	color: #555;
	position: relative;
	margin-inline-start: 2px;
}
#fileNameEdit .save {
	color: var(--color-blue);
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: 15px;
	font-size: 20px;
	cursor: pointer;
	padding: 5px 3px;
}
#fileNameEdit .cancel {
	color: var(--color-red);
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: 5px;
	font-size: 20px;
	cursor: pointer;
	padding: 5px 3px;
}
@media (hover: hover) and (pointer: fine) {
	#fileNameEdit i:hover {
		border-radius: 5px;
		background-color: #00000008;
	}
	.darkTheme #fileNameEdit i:hover {
		background-color: #ffffff10;
	}
}
.darkTheme #fileNameEdit .extension {
	color: #ccc;
}


#pdfPreview {
	border: 1px solid silver;
	width: 95%;
	height: 600px;
}
.darkTheme #pdfPreview {
	border-color: #696969;
}


#imagePreview .container {
	display: block;
	text-align: center;
	width: 100%;
}
#imagePreview .container img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 800px;
	box-shadow: 0px 0px 5px #00000060;
}


#emailMeForm input[name="email"] {
	width: 90%;
	max-width: 400px;
	height: 35px;
	font-size: 16px;
	vertical-align: middle;
	padding: 3px 5px;
	border-radius: 3px;
}
@media screen and (max-width: 450px) {
	#emailMeForm input[name="email"] {
		width: 200px;
	}
}
#emailMeForm .actionButtons {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 20px;
}


#emailForm select,
#emailForm input {
	height: 25px;
	box-sizing: border-box;
}
#emailForm textarea {
	width: 100%;
	height: 200px;
}
#emailForm > table {
	border: 0 none;
	border-spacing: 5px;
	max-width: 1000px;
	width: 100%;
	margin: auto;
	text-align: left;
}
[dir="rtl"] #emailForm > table {
	text-align: right;
}
#emailForm .label {
	font-size: 14px;
	width: 60px;
	padding-right: 10px;
}
#emailForm * {
	pointer-events: none;
}
#emailForm.initialized * {
	pointer-events: auto;
}
#emailForm input[type="text"] {
	width: 100%;
	height: 35px;
}
#emailForm input[name="saveAsNewTemplateName"] {
	width: auto;
}
#emailForm select {
	height: 30px;
}
#emailForm .fromFields > div {
	float: left;
	width: calc(50% - 5px);
}
#emailForm .fromFields > div:nth-child(2) {
	padding-left: 10px;
}
#emailForm .fromFields::after {
	clear: both;
}
#emailForm .templateTools i {
	color: #222F3E;
	cursor: pointer;
	margin-left: 4px;
	padding: 1px 0;
	user-select: none;
}
@media (hover: hover) and (pointer: fine) {
	#emailForm .templateTools i:hover {
		color: #0078D5;
	}
}
#emailForm .templateTools i.success {
	color: var(--color-green) !important;
}
#emailForm .templateTools i.error {
	color: var(--color-red) !important;
}
#emailForm .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
	width: auto !important;
}
.darkTheme #emailForm .templateTools i {
	color: #ccc;
}
@media (hover: hover) and (pointer: fine) {
	.darkTheme #emailForm .templateTools i:hover {
		background-color: #373737;
	}
}
#emailForm .actionTools {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#emailForm .actionTools .sendBtnWrapper {
	display: flex;
	align-items: center;
}


#emailFormSelectBtns {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	flex-wrap: wrap;
}
#emailFormSelectBtns .button {
	font-size: 15px;
}
.darkTheme #emailFormSelectBtns .button {
	background-color: #2c323a;
}
#emailFormSelectBtns .sendToMe svg {
	height: 24px;
	fill: #BF7474;
}
#emailFormSelectBtns .sendToExternal svg {
	height: 24px;
	fill: #5F9DA4;
}
/* share with an app (Web Share API, shareTool): first option, set apart; ready = the load outlasted the click, one more */
#emailFormSelectBtns .shareWithApp {
	border-color: #0E83CD;
}
#emailFormSelectBtns .shareWithApp svg {
	height: 24px;
	color: #0E83CD;
}
#emailFormSelectBtns .shareWithApp.ready {
	background-color: #0E83CD;
	color: #fff;
}
#emailFormSelectBtns .shareWithApp.ready svg {
	color: #fff;
}
#emailFormSelectBtns .shareWithApp.in-progress svg {
	animation: spin 2s linear infinite;
}
#emailFormSelect .goBackBtnWrapper {
	margin-top: 20px;
}

/* several files one by one or as the ZIP (attachChoice): two segments */
#attachChoice {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}
#attachChoice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
#attachChoice span {
	display: block;
	padding: 6px 14px;
	font-size: 14px;
	border: 1px solid #ccc;
	background-color: #fbfbfb;
	cursor: pointer;
}
#attachChoice label:first-child span {
	border-radius: 4px 0 0 4px;
}
#attachChoice label:last-child span {
	border-radius: 0 4px 4px 0;
	margin-left: -1px;
}
#attachChoice input:checked + span {
	position: relative;
	background-color: #E3F1FB;
	border-color: #0E83CD;
	color: #0B6AA6;
}
#attachChoice input:disabled + span {
	opacity: 0.5;
	cursor: default;
}
#attachChoice input:focus-visible + span {
	outline: 2px solid #0E83CD;
	outline-offset: 1px;
}
.darkTheme #attachChoice span {
	background-color: #272727;
	border-color: #444;
	color: #ccc;
}
.darkTheme #attachChoice input:checked + span {
	background-color: #16364C;
	border-color: #0E83CD;
	color: #8CC8EF;
}

/* share mode (shareTool): the email options say "email", with the envelope instead of the persons */
#emailFormSelect .icon-envelope {
	display: none;
	font-size: 22px;
}
#emailFormSelect.shareMode #emailFormSelectBtns svg:not(.shareIcon) {
	display: none;
}
#emailFormSelect.shareMode .icon-envelope {
	display: inline-block;
}
#emailFormSelect.shareMode .sendToMe .icon-envelope {
	color: #BF7474;
}
#emailFormSelect.shareMode .sendToExternal .icon-envelope {
	color: #5F9DA4;
}

/* why "Share with an app" doesn't share (the ZIP chosen, too many files) */
#shareNotice {
	margin: 14px auto 0 auto;
	max-width: 520px;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid #f0d58a;
	border-radius: 4px;
	background-color: #fff7e0;
}
#shareNotice .button {
	margin-top: 8px;
}
#shareNotice .button svg {
	height: 20px;
	color: #0E83CD;
}
.darkTheme #shareNotice {
	background-color: #3a3424;
	border-color: #6b5a2a;
}


.mtab {
	margin: 30px 0;
	border-bottom: 1px solid #888;
}
.mtab-btn {
	display: inline-block;
	padding: 5px;
	border: 1px solid #888;
	position: relative;
	top: 1px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #f0f0f0;
	opacity: 0.8;
}
.darkTheme .mtab-btn {
	background-color: #333;
}
.mtab-btn.active {
	border-bottom-color:#fff;
	opacity: 1;
	background-color: transparent;
}
.darkTheme .mtab-btn.active {
	border-bottom-color:#151515;
}


.tippy-popper {
	text-align: left;
}
.darkTheme .tippy-box {
	background-color: #eee;
	color: #222;
}
.darkTheme .tippy-arrow {
	color: #eee;
}


.topBottomNotification {
	display: block;
	padding: 10px;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	background-color: #FDF8E4;
	color: #333;
	font-size: 0.9em;
}
.topBottomNotification.fixed,
.topBottomNotification.sticky {
	z-index: 999;
	margin: auto;
	width: 100%;
	left: 0;
}
.topBottomNotification.fixed {
	position: fixed;
}
.topBottomNotification.sticky {
	position: sticky;
}
.topBottomNotification.success {
	background-color: #DEF0D8;
	color: #007121;
}
.topBottomNotification.warn {
	background-color: #FFE9CE;
	color: #754101;
}
.topBottomNotification.error {
	background-color: #FBD8D8;
	color: #690101;
}
.topBottomNotification.top {
	top: 0;
	margin: -15px;
	margin-bottom: 20px;
	width: auto;
}
.topBottomNotification.bottom {
	bottom: 0;
	margin-top: 20px;
}
.topBottomNotification .text-xl {
	font-size: 1.6em;
}
.topBottomNotification .text-l {
	font-size: 1.2em;
}
.topBottomNotification a:not(.btn) {
	color: maroon !important;
	text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
	.topBottomNotification a:not(.btn):hover {
		color: maroon !important;
		text-decoration: underline;
	}
}
.topBottomNotification a.close {
	position: absolute;
	display: block;
	top: 0px;
	right: 0px;
	color: maroon;
	font-weight: normal;
	text-decoration: none;
	font-size: 16px;
}
@media (hover: hover) and (pointer: fine) {
	.topBottomNotification a.close:hover {
		text-decoration: none;
	}
}


.componentLoadStart {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.45);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}
.componentLoadStart .main {
	background-color: #fff;
	padding: 10px 20px 20px 20px;
	margin: 15px;
	position: relative;
	left: 0;
	top: 0;
	border-radius: 15px;
	color: #222;
	box-sizing: border-box;
	width: 360px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
}
.darkTheme .componentLoadStart .main {
	background-color: #ddd;
}
.componentLoadStart .main .head {
	display: flex;
	align-items: center;
	margin: 0px -10px 0px -10px;
}
.componentLoadStart .main .head .expand {
	flex: 1 1;
	min-width: 20px;
}
.componentLoadStart .main .head .iconWrapper {
	display: inline-flex;
	margin-right: 8px;
}
html[dir="rtl"] .componentLoadStart .main .head .iconWrapper {
	margin-right: 0;
	margin-left: 8px;
}
.componentLoadStart .main .head .iconWrapper img {
	width: 20px;
	height: 20px;
}
.componentLoadStart .main .head .iconWrapper span {
	font-size: 22px;
	color: #0061fe;
}
.componentLoadStart .main .head .closeWrapper span {
	font-size: 18px;
	color: #bc7979;
}
@media (hover: hover) and (pointer: fine) {
	.componentLoadStart .main .head .closeWrapper:hover {
		background-color: rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}
}
.componentLoadStart .main .content {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.componentLoadStart .main .content .loadSpinnerWrapper {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.componentLoadStart .main .content .loadSpinner {
	width: 50px;
	height: 50px;
}
.componentLoadStart .main .content .startButtonWrapper {
	margin-top: 20px;
	display: flex;
	height: 50px;
	align-items: center;
	justify-content: center;
}
.componentLoadStart .main .content .startButton {
	border-radius: 15px;
	border: 0 none;
	background-color: #0078D5;
	color: #fff;
	padding: 8px 16px;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.componentLoadStart .main .content .startButton:hover {
		filter: brightness(0.85);
	}
}
.componentLoadStart.success .main {
	background-color: #d0ffd0;
}
.componentLoadStart.error .main {
	background-color: #ffd0d0;
}


.grecaptcha-badge {
	display: none;
}


#allOutputFiles {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 -5px;
}
#allOutputFiles.grouped {
	gap: 20px 10px;
}
#allOutputFiles .group {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
}
#allOutputFiles .group > .title {
	flex: 0;
	min-width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: #00000008;
}
.darkTheme #allOutputFiles .group > .title {
	background-color: #ffffff08;
}
#allOutputFiles .outputFile {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid #e0e0f0;
	border-radius: 8px;
	padding: 4px 8px;
	min-height: 30px;
	flex-grow: 1;
	flex-shrink: 0;
	overflow: hidden;
	gap: 20px;
	font-size: 0.9em;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	#allOutputFiles .outputFile {
		gap: 10px;
	}
}
.darkTheme #allOutputFiles .outputFile {
	border-color: #515864;
}
#allOutputFiles .outputFile .name {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: start;
	min-width: 0;
	flex: 1;
}
#allOutputFiles .outputFile .tools {
	display: flex;
}
#allOutputFiles .outputFile .tools > .tool {
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 6px;
}
@media (hover: hover) and (pointer: fine) {
	#allOutputFiles .outputFile .tools > .tool:hover {
		background-color: #0000000f;
	}
	.darkTheme #allOutputFiles .outputFile .tools > .tool:hover {
		background-color: #ffffff0f;
	}
}
#allOutputFiles .outputFile .size {
	white-space: nowrap;
	display: flex;
	align-items: center;
	line-height: 1em;
	gap: 5px;
}
#allOutputFiles .outputFile .size .old {
	font-size: 0.9em;
	display: flex;
	align-items: center;
}
#allOutputFiles .outputFile .size .new {
	color: var(--color-green);
	display: flex;
	align-items: center;
}
@media (max-width: 600px) {
	#allOutputFiles .outputFile .size .old,
	#allOutputFiles .outputFile .size .arrowRight {
		display: none;
	}
}