:root {
	color-scheme: only light;
	--inputHeight: 42px;
	--inputTooltipHeight: 60px;
	--iconOffset: -37px;
	--inputOverlayOffset: -46px;
	--inputRadius: 5px;

	--kelly: #52A441; /* scantek theme accent colour */
	--accentBright: var(--kelly); /* this should be overridden by the theme */

	--textColor: #151e25; /*#5F6971;*/
	--textColorAlpha: #151e25aa;
	
	--subtleText: #567;
	
	--inverseTextColor: #eef;
	--labelColor: #6f767b; /*#B2BCC3;*/ /*var(--darkstone);*/
	--inputBorderColor: #D9E3F0;
	--shadedText: rgba(240, 240, 245);
	--shadedBorder: rgba(220, 220, 225);
	--lineColor: #CDCDCD;
	
	--themeError: rgb(220,30,30); /*rgb(200, 50, 50);*/
	--themeSuccess: rgb(50, 200, 50);
	--themeWarning: rgb(220, 120, 0); /*rgb(190,90,0);*/ /*rgb(255, 140, 60);*/
	--themeQuestion: rgb(20,112,245);
	--themeCancel: rgb(105,105,145); /*rgb(145,145,165);*/
	--themeCancelBackground: rgb(245,245,245);
	
	--card-shadow: 0px 3px 20px #D9E3F039;
	--card-border-radius: 30px;
	--card-shadow-dark: 0px 0px 7px #a9b3b090;
	--buttonRadius: 24px;
	--buttonHeight: calc( var(--buttonRadius) * 2 );
	--buttonLineHeight: calc( var(--buttonHeight) - 6px);
	--modalRadius: 20px;

	--inset-border-radius: 10px;
	--inset-border-color: #D9E3F0;
	--inset-background-color: #D9E3F039;
	--inset-note-text-color: #555;

	--inset-note-border-radius: 6px;
	--inset-note-background-color: #D9E3F0;
	--inset-note-text-color: #444;
	

	--subtleBorder: #F7F9FC;

	--accentBright: rgba(0, 0, 0, 0.25); /* this will be overridden when the theme loads */
	--accentText: rgba(255,255,255,1); /* this should be calculated by the theme loader*/

	--viewBackground: #f5f5f7;
	
	--whiteSpace: #fff;
	--focusShadow: 0px 0px 5px #151e25;
	--themeErrorCard: var(--whiteSpace);
	--activityBarBackground: var(--whiteSpace);
	
	/* new bits for theme extension */
	--itemSpacing: 0px 0 12px 0;
	--btnBackRadius: 12px;
	--headerOverlap: 48px;
	--headerOverlapNegative: -48px;

	--activityHeaderHeight:64px;
	--activityFooterHeight: var(--activityHeaderHeight);
	--activityCloseWidth: 48px;
	--activtiyBarLineHeight: var(--activityHeaderHeight);

	--iconSize: 2em;
	--iconSizeSmall: 1.2em;
	--iconSizeMedium: 2.5em;
	--iconSizeLarge: 3em;
	--iconSizeHuge: 5em;
	
	--listItemHeight: 64px;

}

img.logo-dark { display:none; }
img.logo-light { display:initial; }

body.contrastMore .ui.panel.card,
body.contrastMore .ui.panel.statusBar,
body.contrastMore dialog {
	filter: brightness(0.8) contrast(1.8);
	--inset-background-color: #D9E3F039;
	--inset-border-color: #5f6971;
}
body.contrastMore:not(.style-flat) .ui.panel.card,
body.contrastMore .ui.panel.statusBar,
body.contrastMore dialog {
	border:2px solid;
}


@media (prefers-color-scheme: dark) {
	img.logo-dark { display:initial; }
	img.logo-light { display:none; }
	:root .allowPreferredScheme:not(.themeLight) {
		color-scheme: only dark;
		--textColor: #eef;
		--textColorAlpha: #eefa;
		--subtleText: #789;
		--inverseTextColor: #112;
		--labelColor: #B2BCC3; /*var(--darkstone);*/
		--inputBorderColor: #5f6971;
		--shadedText: rgba(240, 240, 245);
		--shadedBorder: rgba(220, 220, 225);
		--lineColor: #CDCDCD;
		
		--themeError: rgb(200, 50, 50);
		--themeSuccess: rgb(50, 200, 50);
		--themeWarning: rgb(255, 140, 60);
		--themeQuestion: rgb(40,130,245);
		--themeCancel: rgb(161,161,180);
		--themeCancelBackground: rgb(55,55,75);
	
		--card-shadow: 0px 3px 20px #111;
		--inset-border-color: #5f6971;
		--inset-background-color: #D9E3F039;
		--inset-note-text-color: #555;
	
		--inset-note-background-color: #090d10;
		--inset-note-text-color: #ffffff;
	
		--subtleBorder: #F7F9FC;
		/*--accentText: rgba(255,255,255,1);*/
	
		--viewBackground: #111114;
		--whiteSpace: #151e25;
		--focusShadow: 0px 0px 5px #ffffff;
		--themeErrorCard: var(--whiteSpace);
		--activityBarBackground: var(--whiteSpace);
	}
	
	body.contrastMore:not(.themeLight) .ui.panel.card,
	body.contrastMore:not(.themeLight) dialog {
		filter: brightness(1.2) contrast(1.3);
	}
	body.contrastMore:not(.themeLight):not(.style-flat) .ui.panel.card,
	body.contrastMore:not(.themeLight) dialog {
		border:2px solid;
	}

	body.allowPreferredScheme.contrastMore:not(.themeLight):not(.style-flat) .ui.panel.card,
	body.allowPreferredScheme.contrastMore:not(.themeLight) dialog {
		border:2px solid;
	}
	
	body.allowPreferredScheme:not(.themeLight) .qr-code img {
		filter:invert(1);
	}
	

	
}

:root .themeDark {
	color-scheme: only dark;
	--textColor: #eef;
	--textColorAlpha: #eefa;
	--inverseTextColor: #112;
	--labelColor: #B2BCC3; /*var(--darkstone);*/
	--inputBorderColor: #5f6971;
	--shadedText: rgba(240, 240, 245);
	--shadedBorder: rgba(220, 220, 225);
	--lineColor: #CDCDCD;
	
	--themeError: rgb(200, 50, 50);
	--themeSuccess: rgb(50, 200, 50);
	--themeWarning: rgb(255, 140, 60);
	--themeQuestion: rgb(40,130,245);
	--themeCancel: rgb(161,161,180);
	--themeCancelBackground: rgb(55,55,75);

	--card-shadow: 0px 3px 20px #111;
	--inset-border-color: #5f6971;
	--inset-background-color: #D9E3F039;
	--inset-note-text-color: #555;

	--inset-note-background-color: #090d10;
	--inset-note-text-color: #ffffff;

	--subtleBorder: #F7F9FC;
	/*--accentText: rgba(255,255,255,1);*/

	--viewBackground: #111114;
	--whiteSpace: #151e25;
	--focusShadow: 0px 0px 5px #ffffff;
	--themeErrorCard: var(--whiteSpace);
	--activityBarBackground: var(--whiteSpace);
}

body.themeDark .qr-code img {
	filter:invert(1);
}

body.contrastMore.themeDark .ui.panel.card,
body.contrastMore.themeDark dialog {
	filter: brightness(1.2) contrast(1.3);
}
body.contrastMore.themeDark:not(.style-flat) .ui.panel.card,
body.contrastMore.themeDark dialog {
	border:2px solid;
}


.swapRB video {
	filter: url(#swap-red-blue);
}

.activity-panel {
	font-weight: bold;
	border: 1px dashed var(--inset-border-color);
	background: var(--inset-background-color);
	padding: 10px;
	margin: var(--itemSpacing);
	border-radius: var(--inset-border-radius);
}
.list .activity-panel {
	display:flex;
	align-items: center;
}
.activity-panel.payment .text{
	flex-grow:1
}
.activity-panel.payment span.inset {
	flex-grow:0
}

.activity-panel.text {
	font-weight:normal;
}

.activity-panel span.insetNote {
	padding: 5px;
	border-radius: var(--inset-note-border-radius);
	background: var(--inset-note-background-color);
	margin-top: 2px;
	float: right;
	font-weight: bold;
}
.activity-panel.inactive {
	opacity: 0.4;
	filter: grayscale(1);
}

.activity-panel span.icon {
	background-color: var(--accentBright);
	line-height:30px;
	height: 32px;
	width: 32px;
	min-width: 32px;
	text-align: center;
	border-radius: 32px;
	margin-right: 0.5em;
	vertical-align:middle;
}

.activity-panel span.icon svg {
	width: 24px;
	height: 32px;
	color: var(--inverseTextColor);
	margin-top: 0px;
}

.activity-panel span.icon.default {
	background-color: black;
	color: white;
}

.activity-panel span.icon.default svg {
	color: white;
}
.activity-panel span.icon.inverse {
	background-color: var(--whiteSpace);
}
.activity-panel span.icon.inverse svg {
	color: var(--inset-note-text-color);
}


.activity-panel span.icon.warn {
	background-color: var(--themeWarning);
}

body {
	font-family: DevaVu Sans, Roboto Regular, Arial;
	font-size: 16px;
	background-color: var(--viewBackground) !important;
}

body.textDefault { font-size: 16px; }
body.textLarge { font-size: 22px; }
body.textHuge { font-size: 28px; }


input,
.overlay {
	font-family: Roboto Light, Arial;
}


input[type="checkbox"].toggle {
	width: var(--iconSizeLarge);
	height: var(--iconSizeLarge);
	vertical-align:middle;
	border:2px solid var(--accentBright);
	border-radius: var(--iconSize);
	outline: 1px solid blue;
	opacity:0;
	position:absolute;
	cursor:pointer;
}

.toggleControl svg [rel=slider] {
	fill: var(--inset-background-color);
	transition: fill 200ms ease-in-out;
	border-radius: var(--btnBackRadius);
	border: 2px solid var(--whiteSpace);
}
.toggleControl svg [rel=toggle] {
	fill: var(--inset-background-color);
	transition: transform 200ms ease-in-out, fill 200ms ease-in-out;
}

input[type="checkbox"]:checked+.toggleControl svg [rel=toggle] {
	transform: translate(38%,0);
	fill: var(--whiteSpace);
}
input[type="checkbox"]:checked+.toggleControl svg [rel=slider] {
	fill: var(--accentBright);
}

input[type="checkbox"]:focus+.toggleControl svg {
}

input[type="checkbox"]:focus+.toggleControl svg [rel=slider]{
	/*stroke: var(--whiteSpace);*/
	/*stroke-color: var(--whiteSpace);*/
    outline: 1px solid var(--textColor);
    outline-style:auto;
    outline-offset: 1px;
}

input[type="checkbox"]:focus+.toggleControl svg [rel=toggle]{
	translate: 0 0.33px;
	fill: var(--whiteSpace);
}

input[type="checkbox"]:hover+.toggleControl svg [rel=slider]{
	fill: var(--accentDark);
}
	
input[type="checkbox"]:checked:hover+.toggleControl svg [rel=slider]{
	fill: var(--accentLight);
}

.overlay {
	cursor: default;
}

.error_holder {
	display: none !important;
}

.view .ui.panel.content {
	position: relative;
	min-height: calc(100vh - 400px);
	padding: 24px 0 80px;
}
.view .ui.panel.content.card {
	padding: 24px 24px 80px;
}

.view .ui.panel.holder>.ui.panel.content:not(.card) {
	padding: 0px;
}

.view .ui.panel.standalone {
	position: relative;
	margin-top: 80px;
	padding-bottom: 64px;
}

.view .ui.panel.content.inverse {
	color: var(--accentText);
	background: var(--accentBright);
}

.view .ui.panel.content.inverse span.icon svg {
	color: var(--accentText);
}

.view.error .ui.panel.content {
	padding-bottom: 16px !important;
}
.view.error .ui.panel.content .navi-inner {
	display: none;
}

h1,h2,h3,h4,h5,h6 {
	color: var(--textColor);
}

h1 {
	font-family: Roboto Medium, Arial;
	font-size: 1.6em;
	text-align: center;
	line-height:1em;
}

h2 {
	font-family: Roboto Medium, Arial;
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
}

h3 {
	font-family: Roboto Medium, Arial;
	font-size: 1em;
	font-weight: bold;
}

b {
	font-weight: bold;
	color: var(--labelColor);
}

.insufficient-docs b {
	color: var(--textColor);
}

a {
	font-weight: bold;
	color: var(--accentBright);
	text-decoration: none;
	opacity: 0.75;
}
a:hover {
	text-decoration: underline;
	opacity: 1;
}

.A .reqAB,
.B .reqAB {
	display: none;
}

.SDK-BUILD {
	position: fixed;
	font-size: 9px;
	z-index: 10000;
	color: rgba(127, 127, 127, 0.66);
	padding: 4px;
	bottom: 0px;
	left:0px;
	right:0px;
	text-align:center;
	pointer-events:none;
}

.statusBar {
	position:fixed;
	top:0px;
	color: var(--textColor);
	background: var(--whiteSpace);
	border-radius: 0 0 var(--card-border-radius) var(--card-border-radius) ;
	box-shadow: var(--card-shadow-dark);
	margin:0px auto;
	min-height:48px;
	box-sizing: border-box;
	padding:8px 8px 8px;
	width: calc(-24px + 100vw);
	max-width:420px;
	z-index:100;
	margin-bottom:-80px;
	
	transition: margin 333ms ease-in-out;
}

.statusBar>div {
	display:flex;
	align-items: center;
}

.statusBar.bottom {
	top:auto;
	bottom:0px;
	border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
	margin-bottom:-80px;
	transition: margin 333ms ease-in-out;
}

.showStatus .statusBar:not(.bottom) {
	margin-top: 0px;
}

.showStatus .statusBar.bottom {
	margin-bottom: 0px;
}

.statusBar div.expand {
	flex-grow:1;
	margin:0 4px;
}

.statusBar button {
	border-radius: var(--btnBackRadius) ;
	padding:0px;
	margin:0px 1px;
	width: 40px;
	height: 40px;
}

.statusBar .tabs button {
	padding-top:4px;
	width:auto;
	padding: 0 8px;
	border-radius: 0px;
	margin:0 -1px;
}

.statusBar .tabs button:first-of-type { border-radius: 16px 0 0 16px; }

.statusBar .tabs button:last-of-type { border-radius: 0 16px 16px 0; }

.statusBar button svg {
	width: 32px;
	height: 32px;
}

.statusBar .tabs>div {
	border-top: 1px solid var(--accentBright);
	padding-top:8px;
	height:200px;
	width:100%;
	overflow:auto;
}

.statusBar .tabs {
	overflow:hidden;
	height:0px;
	transition: height 300ms ease-in-out, padding 300ms ease-in-out;
	
}
.statusBar .tabs.open {
	height:200px;
	padding-top:12px;
}

.statusBar .tabs>div {
	display:none;
}
.progressBar {
	position: absolute;
	height: 12px;
	width: 100%;
	margin-top: -11px;
	min-height: 10px;
	width: 100%;
	background: var(--accentDark);
}
.progress {
	min-width: 1%;
	height: 10px;
	background: var(--accentBright);
	transition: width 333ms;
}

.progressBar.inline {
	position:relative;
	display:block;
	height:1.1em;
	min-height:5px;
	background:#fff;
	color: #000;

	color: var(--textColor);
	background: var(--whiteSpace);

	text-align: center;
	border:1px solid var(--accentBright);
	border-radius: var(--buttonRadius);
	margin:4px 0px;
}

.progressBar.inline .progress {
	position:absolute;
	height:1.1em;
	opacity:0.66;
	z-index:0;
	border-radius: var(--buttonRadius);
}
.progressBar.inline span {
	font-size:0.8em;
	position:relative;
	z-index:1;
}
.milestone {
	position: absolute;
	height: 10px;
	width: 5px;
	background: var(--accentLight);
}

.milestone.start {
	margin-left: 1%;
}
.milestone.docs {
	margin-left: 40%;
}
.milestone.complete {
	margin-left: 98%;
}

.milestone label {
	position: absolute;
	text-align: center;
	border-radius: 4px;
	height: 1.6em;
	line-height: 1.6em;
	margin-top: -1.6em;
	margin-left: -40px;
	width: 80px;
	background: var(--accentLight);
	color: white;
	drop-shadow: 0 2px 10px rgba(0, 0, 0, 0.125);
}

.milestone.start label {
	margin-left: -3px;
}
.milestone.docs label {
	width: 100px;
	margin-left: -45px;
}
.milestone.complete label {
	margin-left: -72px;
}
.ready .milestone label {
	display: none;
}

.panel.viewheader {
	padding-top: 32px;
	background: var(--headerBackground);
	padding-bottom: var(--headerOverlap);
	margin-bottom: var(--headerOverlapNegative);
	
	margin-left:-16px;
	margin-right:-16px;
	transition:padding 333ms ease-in-out;
}

.showStatus .statusBar:not(.bottom)+.panel.viewheader{ 
	padding-top:72px;
}

.showStatus .statusBar.bottom+.panel.viewheader+.panel.holder{ 
	padding-bottom:72px;
}

.MAIN {
}

.MAIN.complete {
}


#SCTK_WORKFLOW_UI[view="complete"],
#SCTK_WORKFLOW_UI[view="complete"] .card {
	background: var(--headerBackground);
	box-shadow:none;
}


.panel.logo {
	text-align: center;
	padding: 4px 0px;
}
.panel.subtitle {
	/*color: var(--accentBright)*/
	color: var(--textColor);
}

/*.panel.content h1 {*/
/*	font-size:1.9em;*/
/*	font-weight:normal;*/
/*	padding: 0.66em 0;*/
/*}*/

/*.panel.content h2 {
		font-size:1.5em;
		font-weight:normal;
		padding: 1em 0;
	}*/

/*.panel.content h2 {*/
/*	font-size:1.3em;*/
/*	font-weight:normal;*/
/*	padding: 0.125em 0;*/
/*}*/

/*.panel h1 {*/
/*font-size:1.1em;*/
/*	text-align:center;*/
/*	line-height:24px;*/
/*	font-weight:bold;*/
/*}*/

/*.panel h2 {*/
/*font-size:1.2em;*/
/*	text-align:center;*/
/*	line-height:22px;*/
/*	font-weight:medium;*/
/*	margin: 0 16px;*/
/*}*/


.panel.footer,
.panel.header {
	background: var(--accentBright);
	color: var(--whiteSpace);
	position: relative;
}

.panel.footer-grey {
	text-align: center;
}
.panel.footer-grey svg {
	max-width: 200px;
	color: rgba(150, 150, 150, 0.5);
}

.panel.footer.sticky {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}
.panel.header.sticky {
	box-shadow: 0px 7px 7px rgba(0, 0, 0, 0.125);
}

.panel.footer.inverse,
.panel.header.inverse {
	color: var(--accentBright);
	background: var(--header_bg);
}

.panel.header h1 {
	font-size: 18pt;
	font-weight: normal;
}
.panel.subtitle h1 {
	font-size: 14px;
	font-weight: normal;
	line-height: 16px;
	padding: 4px 0;
	letter-spacing:1.5px;
}

.panel.line2 {
	height: 64px;
	line-height: 32px;
}
.panel.line2 > * {
	height: 32px;
	line-height: 32px;
}
.panel.header.line2 {
	height: 64px !important;
}
.panel.footer.sticky {
	height: 64px;
	line-height: 64px;
	padding-top: 8px;
	box-sizing: border-box;
}

.panel.footer button.nav,
.panel.header button.nav {
	height: var(--buttonHeight);
	line-height: var(--buttonLineHeight);
	min-width: 48px;
	position: absolute;
	background: transparent;
	color: var(--accentText);
	font-size: 1em;
	top: 0px;
	left: 5px;
}
.panel.footer button.nav.right,
.panel.header button.nav.right {
	left: auto;
	right: 5px;
}

.panel button.action {
	display: inline-block;
	vertical-align: middle;
	left: auto;
	right: auto;
	margin: 0px 5px;
	height: var(--buttonHeight);
	line-height: var(--buttonLineHeight);
	border-radius: var(--buttonRadius);
	font-size: 1em;
	padding: 0 24px;
	background: var(--accentBright);
	color: var(--accentText);
}
.panel button.action.fixed {
	min-width: 120px;
}
.panel button.action.invert {
	color: var(--accentBright);
	border: 1px solid var(--accentBright);
	background: var(--whiteSpace);
}

.panel .action.block {
	display: block;
	border-radius: 0;
	background: var(--whiteSpace);
	color: var(--accentBright);
}

.panel button.action.idle {
	background: var(--accentDark);
	opacity: 0.5;
}
.panel button.action svg {
	height: 14px;
	width: 14px;
}

.panel .item button.action {
	margin-top: -5px;
}

.panel.footer.white,
.panel.header.white {
	background: var(--whiteSpace);
	color: var(--textColor);
}
.panel.footer.white button.nav,
.panel.header.white button.nav {
	color: var(--accentBright);
}

/*.panel:not(.header)>* {
		border-bottom: 1px solid #ccc;
	}*/

.panel.card {
	display: block;
	margin: 16px 0;
	background: var(--whiteSpace);
	border: 0px;
	box-shadow: var(--card-shadow);
	text-align: left;
	border-radius: var(--card-border-radius);
}

.panel.card.flat {
	margin: 10px 0;
	padding: 16px 0;
	background: var(--whiteSpace);
	border-radius: 2px;
}

.panel.card.flat h3 {
	margin: 0px;
	padding: 0px 16px;
	line-height: 48px;
}

.panel.card.flat h3 svg {
	float: right;
	margin-top: 4px;
	vertical-align: middle;
}

.panel.card.flat h3 ellipse,
.panel.card.flat h3 polyline,
.panel.card.flat h3 path {
	stroke: var(--accentBright);
}

.panel.card.flat.inactive h3 {
	opacity: 0.25;
}

.panel.form {
	background: var(--whiteSpace);
	color: var(--textColor);
	padding-top: 16px;
}

.panel.form input[type="date"] {
	color: var(--labelColor);
}

.panel.form.card {
	text-align: left;
	padding: 8px 0px;
}

.panel.form input + label,
.panel.form select + label {
	display: block;
	color: var(--labelColor);
	background: var(--whiteSpace);
	margin: 8px 0;
	font-weight: 300;
	font-size: 14px;

	position: absolute;
	top: 1.3em;
	pointer-events: none;
	background: transparent;
	transform-origin: 0% 0%;
	transform: scale(1.5, 1.5);
	transition: all 300ms;
	padding: 0 4px;
	opacity: 0.5;
}

.panel.form h1 {
	font-size: 1em;
	/*font-weight: bold;*/
}

.panel.form h2 {
	padding-top: 16px;
}

.panel.form select + label,
.panel.form textarea + label,
.panel.form input:not([type="checkbox"]) + label,
.panel.form input[type="date"] + label,
.panel.form input:not([type="checkbox"]).good + label,
.panel.form input:not([type="checkbox"]).bad + label {
	top: 0em;
	left: 8px;
	transform: scale(1, 1);
	opacity: 1;
	background: var(--whiteSpace);
	z-index: 1;
}

.panel.form input[type="checkbox"] {
	width: 28px;
	height: 28px;
	float: right;
	margin-right: 5px;
}
.panel.form input[type="checkbox"] + label {
	transform: scale(1, 1);
	opacity: 1;
}
.panel.form input[type="checkbox"]:focus + span {
	color: var(--accentBright);
}

.panel.form .item label {
	font-family: Roboto, Arial;
	color: var(--labelColor);
}

.panel.form .item .overlay,
.panel.form select,
.panel.form textarea,
.panel.form input {
	display: block;
	/*-webkit-appearance: none;*/
	width: 100%;
	line-height: var(--inputHeight);
	height: var(--inputHeight);
	border: 1px solid var(--inputBorderColor);
	color: var(--textColor);
	background: var(--whiteSpace);
	font-size: 1em;
	/*padding:0px;*/
	word-spacing: 0.25em;
	padding: 0px 8px;
	margin: 4px 0px;
	border-radius: var(--inputRadius);
	border-color: var(--inputBorderColor);
	transition: border 200ms, padding 200ms, opacity 200ms;
	box-sizing: border-box;
}

.panel.form .item.file {
	margin-bottom: 24px;
}
.panel.form .item.checkbox label input {
	float: left;
	padding: 4px 16px;
}
.panel.form .item.checkbox label span {
	font-size: 13px;
}
.panel.form input[type="file"],
.panel.form input[type="file"] + .overlay {
	height: 100px;
	border-radius: var(--inputRadius);
}
.panel.form input[type="file"] + .overlay {
	text-align: center;
	margin-top: -102px;
	line-height: 16px;
	font-size: 1em;
	background: var(--shadedText);
	border: 2px dashed var(--shadedBorder);
}

.panel.form input[type="file"] + .overlay.bad {
	border-color: var(--themeError);
}
.panel.form input[type="file"] + .overlay .icon {
	height: 48px;
}
.panel.form input[type="file"] + .overlay.good .icon {
	height: 40px;
}
.panel.form input[type="file"].good,
.panel.form input[type="file"] + .overlay.good {
	height: var(--inputHeight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-spacing: initial;
	border: none;
}
.panel.form input[type="file"] + .overlay.good {
	margin-top: var(--inputOverlayOffset);
	border: none;
	text-align: left;
	background: var(--whiteSpace);
	padding-right: 32px;
}

.panel.form input[type="file"] + .overlay + .icon {
	background: none;
}

.panel.form input[type="file"] + .overlay {
	overflow: hidden;
	text-overflow: clip;
}

.panel.form select {
	height: var(--inputHeight);
	opacity: 0;
}

.panel.form input[type="checkbox"] {
}
.panel.form .item.checkbox input[type="checkbox"],
.panel.form .item.checkbox label span {
	float: none;
	vertical-align: middle;
	position: static;
	display: inline-block;
}
.panel.form .item.checkbox label span {
	width: calc(100% - 36px);
}

.panel.form .item :not(:focus) .overlay,
.panel.form select,
.panel.form textarea:not(:focus),
.panel.form input:not(:focus) {
	/*border-radius:4px;*/
	/*padding:0px;*/
	/*border-top:1px solid transparent !important;*/
	/*border-left:1px solid transparent !important;*/
	/*border-right:1px solid transparent !important;*/
}

.macos .panel.form .item .overlay,
	.macos .panel.form select,
	.macos .panel.form textarea,
	.macos .panel.form input:not([type=checkbox]),
	/*.macos label,*/
	
	.ios .panel.form .item .overlay,
	.ios .panel.form select,
	.ios .panel.form textarea,
	.ios .panel.form input:not([type=checkbox]) {
	/*.ios label {*/
	min-width: 290px;
	/*border-radius:0px;*/
}

.panel.form .item .overlay {
	position: absolute;
	margin-top: var(--inputOverlayOffset);
	pointer-events: none;
	
	/* fix overlfow breaking the container*/
	text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 20px;
    text-wrap: nowrap;
}

.panel.form .item :focus + label + .overlay {
	border-color: var(--accentBright);
}

.item:not(.mobile) input[type="date"]:focus + .overlay {
	display: none;
}

.item.mobile input[type="date"] {
	opacity: 0;
}

.ios .panel.form input[type="date"],
.ios .panel.form select {
	min-width: 300px;
	opacity: 0;
}

.panel.form[disabled] {
	opacity:0.5;
	pointer-events:none;
}

.tooltip {
	position:absolute;
	background: var(--inset-border-color);
	color: var(--inset-note-text-color);
	margin-top:-50px;
	/*bottom: 100%;*/
	padding:8px;
	left:8px;
	right:8px;
	border-radius: var(--btnBackRadius);
	z-index:1;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	text-align: center;
	font-size:0.8em;
	line-height:1.2em;
}

.tooltip::after {
	content:" ";
	display:block;
	width:10px;
	height:10px;
	left:50%;
	transform: rotate(45deg) translate(0, 5px);
	position:absolute;
	background: var(--inset-border-color);
	
} 

:not(.allowPreferredScheme):not(.themeDark).contrastMore .tooltip,
:not(.allowPreferredScheme).themeLight.contrastMore .tooltip {
	color:var(--whiteSpace);
}

@media (prefers-color-scheme: light) {
	:not(.themeDark).contrastMore .tooltip {
		color:var(--whiteSpace) !important;
	}
	.themeDark.contrastMore .tooltip {
		color:var(--textColor) !important;
	}
}
@media (prefers-color-scheme: dark) {
	:not(.themeLight).contrastMore .tooltip {
		color:var(--textColor) !important;
	}
	.themeLight.contrastMore .tooltip {
		color:var(--whiteSpace) !important;
	}
}


.tooltip a {
	color: var(--accentBright) !important;
	font-weight:bold;
}

.annotation {
	font-size: 14px;
	line-height: 1.25em;
	padding: 0 0.5em;
	border-radius: 2px 2px 8px 8px;
	opacity: 0.75;
	color: var(--labelColor);
}

.annotation:empty {
	display: none !important;
}

.readonly:not(.conditional) .annotation {
	display: none !important;
}

.warn .annotation,
.warn + .annotation,
.warn + * + .annotation {
	color: var(--themeWarning);
	opacity: 1;
}

.bad .annotation,
.bad + .annotation,
.bad + * + .annotation {
	color: var(--themeError);
	opacity: 1;
}

.panel .bad, .panel .error { color: var(--themeError); }
.panel .warn { color: var(--themeWarn); }

.panel.form .item .annotation a { color:inherit;  }


input + span.icon svg {
	color: var(--labelColor);
}
input.warn + span.icon svg {
	color: var(--themeWarning);
}
input.good + span.icon svg {
	color: var(--labelColor);
}
input.bad + span.icon svg {
	color: var(--themeError);
}

.panel.form textarea {
	min-height: 160px;
	line-height: 1.3;
}

.panel.form select[disabled] {
	opacity: 0;
}

.panel.form .item.readonly .icon {
	display: none;
}

.panel.form .item a {
	color: var(--accentBright);
	text-decoration: underline;
}

.panel.form .readonly .overlay,
.panel.form .readonly input,
.panel.form .readonly input:disabled {
	border: 0px !important;
	color: var(--textColor);
	-webkit-text-fill-color: var(--textColor);
	opacity: 1;
	pointer-events: initial;
}

.panel.form .readonly.warn .overlay,
.panel.form .readonly.warn input,
.panel.form .readonly.warn input:disabled {
	-webkit-text-fill-color: var(--themeWarning);
	border-color: var(--themeWarning);
	color: var(--themeWarning);
}

.panel.form .readonly.bad .overlay,
.panel.form .readonly.bad input,
.panel.form .readonly.bad input:disabled {
	-webkit-text-fill-color: var(--themeError);
	border-color: var(--themeError);
	color: var(--themeError);
}

.panel.form .readonly input:not(.bad):not(.warn)::placeholder {
	opacity: 0.25;
}

.item.conditional.readonly input {
	opacity: 0.25 !important;
}

.panel.form select::placeholder,
.panel.form textarea::placeholder,
.panel.form input::placeholder,
.panel.form .overlay {
	/*color:transparent;*/
	/*color: rgba(0, 0, 0, 0.25);*/
	color: var(--labelColor);
}

.panel.form select.bad,
.panel.form input.bad,
.panel.form .overlay.bad {
	border-color: var(--themeError);
}

.panel.form .readonly select.bad::placeholder,
.panel.form .readonly textarea.bad::placeholder,
.panel.form .readonly input.bad:disabled::placeholder,
.panel.form .readonly .overlay.bad {
	-webkit-text-fill-color: var(--themeError);
	border-color: var(--themeError);
	color: var(--themeError);
}

.panel.form select:focus,
.panel.form textarea:focus,
.panel.form input:focus,
.panel.form select:focus + .overlay {
	border: 1px solid var(--accentBright);
	outline: 0px;
}

.panel.form .warn select:focus,
.panel.form .warn textarea:focus,
.panel.form .warn input:focus,
.panel.form .warn select:focus + .overlay {
	border-color: var(--themeWarning);
}

.panel.form .bad select:focus,
.panel.form .bad textarea:focus,
.panel.form .bad input:focus,
.panel.form .bad select:focus + .overlay {
	border-color: var(--themeError);
}

.panel.form .item {
	position: relative;
	border: 0px;
	padding: 12px 0 0;
	/*max-width: 400px;*/
	margin: 8px 12px 8px 8px;
	min-height: 38px;
}

.panel.form .item > .icon {
	position: absolute;
	display: inline-block;
	right: 1px;
	margin-top: var(--iconOffset);
	width: 32px;
	height: 28px;
	color: inherit;
	pointer-events: none;
	border-radius: 0 0 var(--inputRadius) 0;
}

.panel.form .item.bad > .icon,
.panel.form .item.warn > .icon,
.panel.form .bad .item > .icon,
.panel.form .warn .item > .icon {
	right:-32px;
}

.panel.form .item .icon svg {
	width: 100%;
	height: 100%;
}

.panel.form .item .icon.small {
	width: 28px;
}
.panel.form .item .icon.med {
	width: 32px;
}

.panel.form .item .icon.small svg {
	width: 80%;
}

.panel.form .propertyGroup {
	margin-top: 4px;
	border-left: 4px solid var(--inset-note-background-color);
}

.panel.form .propertyGroup[closed] {
	overflow:hidden;
	max-height:0px;
}

.panel.form .propertyGroup[closed] input,
.panel.form .propertyGroup[closed] label{
	display:none !important;
}

.panel.form .propertyGroup legend {
	background: var(--inset-note-background-color);
	color: var(--inset-note-text-color);
	margin-left:-4px;
	border-radius:4px 4px 4px 0;
	padding:8px;
}

/*.panel.form .propertyGroup legend::after {
	content: "⏶";
	display:inline-block;
	margin-left:8px;
}

.panel.form .propertyGroup[closed] legend::after {
	content: "⏷";
}
*/
.item .icon svg {	
	color: var(--textColor); 
}

.panel.form .item .icon.disc,
.item .icon.disc,
.icon.disc {
	display: inline-block;
	position: relative;
	background: var(--accentBright);
	border-radius: 50%;
	height: 32px;
	width: 32px;
	/*margin-top:-2px;*/
	vertical-align: middle;
	text-align: center;
	border: 2px solid rgba(0, 0, 0, 0);
}

.icon.ring {
	display: inline-block;
	position: relative;
	border-radius: 50%;
	text-align: center;
	height: 64px;
	width: 64px;
	/*margin-top:-2px;*/
	vertical-align: middle;
	text-align: center;
	border: 3px solid var(--inset-border-color);
	/*background: var(--accentBright);*/
}


.icon.epic {
	display: inline-block;
	position: relative;
	border-radius: 50%;
	text-align: center;
	height: 56px;
	width: 56px;
	/*margin-top:-2px;*/
	vertical-align: middle;
	text-align: center;
	border: 8px solid rgba(255, 255, 255, 0.75);
	outline: 8px solid rgba(245, 245, 245, 0.5);
	background: var(--accentBright);
}

.ios .icon.epic {
	border: 12px solid rgba(255, 255, 255, 0.75);
	outline: 0px;
}

@media (prefers-color-scheme: dark) {
	.allowPreferredScheme:not(.themeLight) .icon.epic {
		border: 8px solid rgba(0,0,0, 0.75);
		outline: 8px solid rgba(10,10,10, 0.5);
	}
	.allowPreferredScheme:not(.themeLight) .ios .icon.epic {
		border: 12px solid rgba(255, 255, 255, 0.75);
		outline: 0px;
	}
}


.icon.epic.title {
	position: relative;
	margin-top: -56px;
}
.icon.disc.title {
	position: relative;
	margin-top: -24px;
}
.icon.big.disc.title {
	position: relative;
	margin-top: -34px;
}
.icon.big.title {
	position: relative;
	margin-top: -32px;
}	
.icon.title {
	position: relative;
	margin-top: -16px;
}

/*.icon.big.warn,*/
.icon.disc.warn,
.icon.epic.warn {
	background: var(--themeWarning);
}

/*.icon.big.error,*/
.icon.disc.error,
.icon.epic.error {
	background: var(--themeError);
}

.icon.disc:empty {
	background: transparent;
	border: 2px solid var(--inset-border-color);
}
.icon.shade svg {
	filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.125));
}


.panel.form .item .icon.disc.big,
.item .icon.disc.big,
.icon.disc.big {
	border: 8px solid rgba(255, 255, 255, 0.75);
}

.panel.form .item .icon.disc.big,
.item .icon.disc.big,
.icon.disc.big {
	text-align: center;
	height: 48px;
	width: 48px;
}



.icon.disc svg,
.icon.epic svg,
.item .icon.disc svg,
.item .icon.epic svg,
.panel.form .item .icon.disc svg,
.panel.form .item .icon.epic svg {
	width: 60%;
	height: 100%;
	color: var(--accentText) !important;
	margin-top: 0px !important;
	vertical-align: text-top;
	line-height: 32px;
}

.icon.ring svg {
	width: 60%;
	height: 100%;
	margin-top: 0px !important;
	vertical-align: middle;
	line-height: 32px;
}

.modal .item .icon.disc svg {
	margin-top: 2px !important;
}
.panel.form .item .text-link,
.item .text-link {
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 38px);
	font-weight: bold;
}

.panel.form .item.bordered {
	border-radius: var(--inputRadius);
	border: 1px solid var(--shadedBorder);
	padding: 4px 0;
}

.macos .panel.form .item .icon.small svg {
	margin-top: 6px;
}
.panel .line-item > span:first-child {
	text-align: center;
	display: inline-block;
	width: 48px;
}

.panel .line-item a {
	display: inline-block;
	line-height: 32px;
	text-decoration: none;
}
.panel .line-item {
	min-height: 32px;
	font-weight: bold;
	line-height: 32px;
}

.panel .item {
	margin: 0 16px;
	padding: 8px 0;
	border-bottom: 1px solid #ccc;
}
.panel h2 + .item {
	border-top: 1px solid #ccc;
}

.panel .item:last-child {
	border-bottom: 0px;
}

/*.panel .item:hover {
		background:rgba(0,0,0,0.025);
	}*/

.panel.item.darkLabel label {
	color: #000;
}

.panel .item .inner {
	display: inline-block;
	width: 94%;
	margin: 0;
	vertical-align: middle;
}
.panel .item > div.caret {
	display: inline-block;
	width: 6%;
	vertical-align: middle;
	text-align: center;
}
.panel .item > div.caret svg {
	line-height: 3em;
	vertical-align: bottom;
}

.panel .item .inner > div {
	display: inline-block;
	width: 50%;
	line-height: 1.5em;
}
.panel .item .inner > div.title {
	font-weight: bold;
}

.panel .item .inner > div.title span.status {
	margin-left: 10px;
	display: inline-block;
	color: #ddd;
	vertical-align: middle;
}
.panel .item .inner > div.title {
	opacity: 0.25;
}
.panel .item.active .inner > div.title span.status {
	color: #0b0;
	filter: drop-shadow(0px 5px 10px #0b0);
}
.panel .item.idle .inner > div.title span.status {
	color: #F90;
	filter: drop-shadow(0px 5px 10px #F90);
}
.panel .item.active .inner > div.title,
.panel .item.idle .inner > div.title {
	opacity: 1;
}

.panel .item .inner > div.action {
	font-size: 0.9em;
	text-align: right;
	font-weight: bold;
	color: var(--accentBright);
}
.panel .item .inner > div.date {
	text-align: right;
}
.panel .item .inner > div.ref,
.panel .item .inner > div.date {
	font-weight: medium;
	font-size: 0.9em;
	color: var(--labelColor);
}

.panel.context {
	position: sticky;
	bottom: 0px;
	margin: 0px auto;
	width: 100%;
	max-width: 720px;
	height: 68px;
	line-height: 64px;
	padding: 12px;
	background: var(--whiteSpace);
	color: var(--accentBright);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}
.panel.context .menuItem {
	line-height: 48px;
	text-align: center;
	vertical-align: middle;
}

.panel.context button {
	float: right;
	display: inline-block;
	vertical-align: middle;
	background: var(--accentBright);
	color: var(--accentText);
	height: var(--buttonHeight);
	line-height: var(--buttonLineHeight);
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	border-radius: var(--buttonRadius);
	padding: 0 20px;
}

.panel.context div {
	displat: inline-block;
	line-height: 24px;
	border-bottom: 0px;
	color: #999;
}
.panel.context div.active svg {
	color: var(--accentBright);
}

.viewPanel,
.statusBar,
.panel.footer.sticky {
	margin: 0px auto;
	width: calc(-24px + 100vw);
	max-width: 420px;
}

.textLarge .viewPanel,
.textLarge .statusBar,
.textLarge .panel.footer.sticky {
	max-width:530px;
}

.textHuge .viewPanel,
.textHuge .statusBar,
.textHuge .panel.footer.sticky {
	max-width:640px;
}

.ui.panel.actions {
	background: var(--accentDark);
	color: var(--accentText);
	margin: 0px;
	padding: 8px 0;
}

.ui.panel.accent {
	background: var(--accentBright);
	color: var(--accentText);
	margin: 0px;
	padding: 8px 0;
}

.ui.panel.accent.inverse {
	color: var(--textColor);
	background: var(--whiteSpace);
	margin: 0px;
	padding: 8px 0;
}
.ui.panel.accent.inverse svg.white {
	color: var(--accentBright);
}

.captureTrigger {
	width: 30%;
	margin: 8px 1.58%;
	color: var(--accentText);
	background: var(--accentBright);
	border-radius: 8px;
	box-sizing: border-box;
}

.captureTrigger:hover {
	background: var(--accentLight);
}

.captureTrigger[disabled],
[disabled] .captureTrigger {
	background: var(--accentDark);
	color: var(--accentBright);
	cursor: not-allowed;
	opacity: 0.5;
}

.captureTrigger span {
	display: block;
	line-height: 1.3em;
	margin-bottom: 8px;
}

.captureTrigger svg {
	vertical-align: middle;
	font-size: 2em;
	margin: 8px;
}

.SCTK_inset_buttons[disabled] {
	color: var(--accentBright);
	background: var(--accentDark);
	cursor: not-allowed;
}

.accent svg.white path,
.accent svg.white polyline,
.accent svg.white ellipse,
.actions svg.white path,
.actions svg.white polyline,
.actions svg.white ellipse {
	stroke: var(--accentText);
}

.panel.consent {
	max-width: 320px;
	padding: 0px auto;
}

.panel.text {
	padding: 0px 0px 5px;
	
	line-height: 1.25em;
	color: var(--textColor);
}

.panel.text.unsized {
	font-size: 12px;
}

.panel.instructive h1 { padding:0px; }
.panel.instructive {
	position:relative;
	/*background: var(--inset-note-background-color);*/
	border-radius: var(--inset-border-radius);
	color: var(--inset-note-text-color);
	border: 1px solid var(--themeQuestion);
	border-left:5px solid var(--themeQuestion);
	padding: 10px 10px;
	/*font-size:0.9em;*/
	max-width:100%;
	margin:8px 0;
}

.panel.instructive:before {
	content: " ";
	position: absolute; top: 0;  left: 0; width: 100%; height: 100%;
	opacity: .1;
	background: var(--themeQuestion);
	pointer-events:none;
}

.contrastMore .panel.instructive {
	border: 1px solid var(--themeQuestion);
	border-left:5px solid var(--themeQuestion);
}

.activity-panel.instructive {
	/*background: var(--inset-note-background-color);*/
	border-radius: var(--inset-border-radius);
	/*color: var(--inset-note-text-color);*/
	border-left:3px solid var(--themeQuestion);
	padding: 10px 10px;
	font-size:0.9em;
	max-width:100%;
}

.panel.instructive.default {
	border: 1px solid var(--inset-note-text-color);
	border-left:5px solid var(--inset-note-text-color);
}
.panel.instructive.warn {
	border: 1px solid var(--themeWarning);
	border-left:5px solid var(--themeWarning);
}
.panel.instructive.error {
	border: 1px solid var(--themeError);
	border-left:5px solid var(--themeError);
}
.panel.instructive.warn:before { background: var(--themeWarning); }
.panel.instructive.error:before { background: var(--themeError); }
.panel.instructive.default:before { background: var(--inset-note-text-color); }


.panel.text.white {
	background: var(--whiteSpace);
}

.panel.text .abstract {
	text-align: center;
}

.abstract {
	color: var(--textColor);
}

.panel.text .limit320 {
	max-width: 320px;
	margin: 0px auto;
}

.panel.text .abstract ul {
	padding: 8px 0 0;
	margin: 0;
}

.panel ul.list {
	list-style: disc;
	padding-left: 50px;
	margin: 0;
}

.panel ul.tight {
	padding: 0.25em 1.25em;
}

.panel ul ul.list {
	list-style: disc;
	padding-left: 20px;
	padding-top: 4px;
}

.panel.text ul.thirds li {
	display: inline-block;
	max-width: calc(  33% - 8px );
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
}

.panel.text ul.halves li {
	display: inline-block;
	width: calc(50% - 2px);
	vertical-align: middle;
	text-align: center;
}


.panel.text ul.thirds li.double {
	width: 50%;
	vertical-align: middle;
	text-align: center;
}

.panel.text ul.thirds li.interstitial,
.panel.text ul.halves li.interstitial {
	/*position:absolute;*/
	width:0px;
	margin:0px;
	margin-left:-32px;
	margin-right:16px;
}

.panel.text ul li h2 {
	line-height: 1.8em;
	padding: 0px;
}

.halves { display:flex; flex-wrap: wrap; }
.thirds { display:flex; flex-wrap: wrap; }
.halves>* {
	display:inline-block;
	max-width: calc( 50% - 8px );
	margin: 4px;
	box-sizing:border-box;
}
.thirds>* {
	display:inline-block;
	min-width:calc( 30% );
	margin: 1%;
	box-sizing:border-box;
}

.tiles.halves>*,
.tiles.thirds>*{
	padding:8px;
	border-radius: 4px;
	background: var(--whiteSpace);
	box-shadow: var(--card-shadow);
}

small {
	font-size: 0.8em;
	line-height: 1.2em;
}

strong {
	font-weight: bold;
}

.panel.text ul.disc {
	list-style: disc;
}

.panel.text ol.numbers {
	list-style: decimal;
}
.panel.text ol.numbers li {
	margin-bottom: 8px;
}

button {
	background: var(--accentBright);
	color: var(--accentText);
}

button:hover {
	background: var(--accentLight);
}

.contrastMore button {
	background: var(--textColor);
	color: var(--whiteSpace);
}

.contrastMore button.inverse {
	background:var(--whiteSpace);
	color: var(--textColor);
	border-color: var(--textColor);
}

.SCTK_inset_buttons button {
	width: 30% !important;
	margin: 1% 1% !important;
	line-height: 18px !important;
	padding: 1% !important;
}

.SCTK_inset_buttons.complete button {
}

.SCTK_inset_buttons h3 {
	padding: 0.3em;
}

.SCTK_inset_buttons {
	text-align: center;
	background: var(--accentDark);
	padding: 1% !important;
	border-radius: 2px;
}

.SCTK_inset_buttons span {
	line-height: 15px;
	font-size: 12px;
	margin-bottom: 4px;
}

.SCTK_inset_buttons {
	color: var(--accentText);
	font-size: 0.8em;
	line-height: 1.1em;
}

.SCTK_inset_buttons .captureTrigger svg {
	vertical-align: middle;
	font-size: 2em;
	margin: 2px;
}

fieldset {
	border-radius: var(--inset-note-border-radius);
	border: 1px dashed var(--inset-border-color);
	text-align:center;
	padding: 8px;
	/*background: var(--inset-note-background-color);*/
}

fieldset legend {
	text-align:left;
}

svg.themed ellipse,
svg.themed polyline,
svg.themed path {
	stroke: var(--accentBright);
}
svg.themed.accentFill path {
	stroke: none !important;
	fill: var(--accentBright) !important;
}

.ui.panel.navi {
	background: var(--accentDark);
	display: flex;
	position: relative;
	justify-content: space-between;
	min-height: 64px;
}
.navi button {
	/*animation: pulse 2000ms ease-in-out infinite;*/
	transform-origin: 50% 50%;
	transition: transform;
	background: var(--accentBright);
}

.navi button {
	border-radius: 8px;
	height: 48px;
	line-height: 48px;

	padding: 0px 16px;
	margin: 8px;
	box-sizing: border-box;
	vertical-align: middle;
	flex: flex-basis;
}


.navi button.nobutton {
	background: none;
	line-height: 24px;
	height: auto;
	animation: none;
}

.navi button[disabled] {
	background: #777;
	color: #ccc;
	animation: none;
}
.navi button[disabled]:hover {
	background: #777;
	color: #ccc;
	animation: none;
}
.ui.panel.navi-inner button.back {
	color: var(--textColor);
	background: none !important;
	border-radius: var(--btnBackRadius);
	border: 1px solid var(--inset-border-color);
	padding: 0px;
	min-width: 42px;
	width: 42px;
	height: 42px;
}
.ui.panel.navi-inner button.back .icon {
	min-width:42px;
}

.ui.panel.navi-inner button.back .icon svg {
	color: var(--textColor);
}

.ui.panel.navi-inner button.back:hover {
	border: 1px solid var(--subtleBorder) !important;
}
.ui.panel.navi-inner span.spacer {
	display: inline-block;
	min-width: 42px;
	width: 42px;
	height: 42px;
}
.ui.panel.navi-inner button span.spacer {
	min-width: 24px;
	width: 24px;
}

.ui.panel.navi-inner div {
	display:block;
}
.ui.panel.navi-inner div.small {
	font-size:0.8em;
}


@keyframes pulse {
	0% {
		transform: ;
	}
	25% {
		transform: ;
		background: rgba(255, 255, 255, 0.25);
	}
	100% {
		transform: ;
		background: var(--accentBright);
	}
}

div.view {
	z-index: 2;
	background-color: var(--viewBackground);
}

.view .overscrollIndicator {
	position:fixed;
	color:var(--textColor);
	padding-top:16px;
	right:0px;
	left:0px;
	bottom: 0px;
	min-height:42px;
	text-align:center;
	z-index:99;
	background:var(--whiteSpace);
	background: linear-gradient(180deg, rgba(115,115,120,0) 0px, rgba(115,115,120,0.6) 28px, rgba(115,115,120,0.8) 36px);
	transition: opacity 300ms ease-in-out, min-height 300ms ease-in-out;
	opacity:0;
	/*text-shadow: 0px 0px 4px var(--whiteSpace),0px 0px 8px var(--whiteSpace), 0px 0px 12px var(--whiteSpace);*/
	pointer-events:none;
}

.textDefault.showStatus .view .overscrollIndicator {
	min-height:90px;
}

.textLarge.showStatus .view .overscrollIndicator {
	min-height:100px;
}

.textHuge.showStatus .view .overscrollIndicator {
	min-height:110px;
}

.overscroll .view .overscrollIndicator {
	opacity:1;
}

.view .overscrollIndicator span {
	filter: 
		drop-shadow(-1px -1px 4px var(--whiteSpace)) 
		drop-shadow(1px 1px 4px var(--whiteSpace));
	opacity:0.8;
}
#SCTK_WORKFLOW_UI {
	right: 0px;
	z-index: 0;
	padding-top: 0.1px;
}

.limitedLinkText {
	display: block;
	background: #fafaff;
	border: 1px solid #e2e2ea;
	border-radius: 8px;
	padding: 12px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 16px 0 !important;
}
.limitedLinkText + button {
	margin-bottom: 24px !important;
}

#SCTK_VOI {
	left: 0px;
	z-index: 1;
}

.abstract div.tab {
	display: block;
	text-align: center;
	height: 48px;
	line-height: 48px;
}

.abstract div.tab:hover {
	background: var(--accentBright);
	color: var(--accentText);
}
.abstract div.tab:hover svg {
	color: var(--accentText);
}

.abstract div.tab-content {
	display: none;
}

.abstract div.tab-content.active {
	display: block;
}

.panel.text .abstract.left,
.panel.text .abstract.left h1,
.panel.text .abstract.left h2,
.panel.text .abstract.left h3 {
	text-align: justify;
}

.panel.text .abstract.justify,
.panel.text .abstract.justify h1,
.panel.text .abstract.justify h2,
.panel.text .abstract.justify h3 {
	text-align: justify;
}

.panel.text div.disclaim {
	display: block;
	/*line-height: 1.2em;*/
	font-size: 0.8em;
	text-align: left;
}

span.icon {
	display: inline-block;
	min-width: 1em;
	min-height: 1em;
}
button span.icon {
	min-width:auto;
}
span.icon svg {
	height: var(--iconSize);
	width: var(--iconSize);
	vertical-align: middle;
	margin-top: -0.15em;
}

span.icon.huge svg {
	height: var(--iconSizeHuge);
	width: var(--iconSizeHuge);
	margin-top: 0em;
}

span.icon.large svg {
	height: var(--iconSizeLarge);
	width: var(--iconSizeLarge);
	margin-top: 0em;
}

span.icon.medium svg {
	height: var(--iconSizeMedium);
	width: var(--iconSizeMedium);
	margin-top: 0em;
}

span.icon.small svg {
	height: var(--iconSizeSmall);
	width: var(--iconSizeSmall);
	vertical-align: middle;
	margin-top: -0.2em;
}

span.icon.blocked {
	padding:0 8px;
	vertical-align:middle;
}

span.icon.blocked.left { float:left; }
span.icon.blocked.right { float:right; }

.items {
	padding:0 8px;
	margin:0px auto;
	max-width:90%;
	vertical-align:middle;
}
.items li {
	min-height: var(--listItemHeight);
	clear:both;
}

.items span {
	display: inline-block;
    vertical-align: middle;
}
.items span.inner {
	width: calc( 100% - (var(--iconSizeLarge) + 3em)  );
}
.ui.panel.navi-inner {
	background: none;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	justify-content: space-evenly;
	/*min-height: 64px;*/
	/*line-height: 64px;*/
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding:8px;
}

.ui.panel.navi-inner.vertical {
	flex-direction: column-reverse;
	align-items: center;
}

.ui.panel.navi-inner.vertical-custom {
	flex-direction: column;
	text-align:center;
}

.ui.panel.vertical.buttons button {
	margin: 2px auto;
}

/*span.icon.default svg { color: inherit }
	span.icon.error svg { color: var(--themeError) }
	span.icon.success svg { color: var(--themeSuccess) }
	span.icon.warning svg { color: var(--themeWarning) }
	span.icon.question svg { color: var(--themeQuestion) }*/

.navi-inner button {
	min-width: 120px;
	font-size: 1em;
}
.navi-inner.thirds button {
	min-width: 30%;
}
.navi-inner button .icon svg {
	width: 24px;
}

button {
	color: var(--accentText);
	background-color: var(--accentBright);
	border: 2px solid var(--whiteSpace);
	filter: brightness(0.95);
}

button svg {
	vertical-align:middle;
	height:100%;
}


button.error {
	background-color: var(--themeError);
}
button.success {
	background-color: var(--themeSuccess);
}
button.warning {
	background-color: var(--themeWarning);
}
button.question {
	background-color: var(--themeQuestion);
}
button.cancel {
	background: var(--themeCancelBackground);
	border: 1px solid var(--themeCancel);
	color: var(--themeCancel);
}

button.inverse {
	background-color: var(--whiteSpace);
	border: 1px solid var(--accentBright);
	color: var(--accentBright);
	filter: brightness(1);
}

/*

button:focus {
	border-color: var(--textColor);
	outline: 2px solid var(--textColor);
	box-shadow: var(--focusShadow);
}

button.cancel:focus {
	background-color: var(--themeCancel);	
	color: var(--whiteSpace);
}
*/
/*button.warning:focus,*/
/*button.question:focus,*/
/*button.error:focus { background-color: var(--whiteSpace); }*/

/*button.error:focus { color: var(--themeError); border-color: var(--themeError); }*/
/*button.question:focus { color: var(--themeQuestion); border-color: var(--themeQuestion); }*/
/*button.warning:focus { color: var(--themeWarning); border-color: var(--themeWarning); }*/
/*button.inverse:focus { color: var(--themeCancel); border-color: var(--themeCancel); }*/

/*button.inverse:hover,*/
/*button.inverse:focus {*/
/*	background-color: var(--whiteSpace);*/
/*}*/

button:focus {
	filter: brightness(1);
	box-shadow: var(--focusShadow);
	outline: 1px solid var(--textColor);
}

button:hover {
	filter: brightness(1.1);
	box-shadow: var(--focusShadow);
	border-color:transparent;
}

button.inverse:hover,
button.cancel:hover {
	background: var(--viewBackground);
	border: 1px solid var(--whiteSpace);
}
button.cancel:hover {
	color: var(--textColor);
}

button[disabled] {
	opacity: 0.3 !important;
	filter: brightness(1.2) grayscale(0.66);
	cursor: not-allowed;
}


button.no-border {
	border: none !important;
}

/*button span.icon svg,
	button.error span.icon svg,
	button.success span.icon svg,
	button.warning span.icon svg,
	button.question span.icon svg { color: white }*/

.icon.theme svg {
	color: var(--accentBright);
}

.icon svg {
	color: inherit;
	height: 1.8em;
	margin-top: -0.25em;
}

.icon.notheme svg {
	color: inherit !important;
}
.icon.big {
	font-size: 2.3em;
}

.icon.warn svg {
	color: var(--themeWarning);
}
.icon.good svg {
	color: var(--accentBright);
}
.icon.bad svg {
	color: var(--themeError);
}
.icon.error svg {
	color: var(--themeError);
}

.icon.handle svg {
	color: var(--textColor);
}

/* colors inherited for input icons */
.warn .icon svg {
	color: var(--themeWarning);
}
.good .icon svg {
	color: var(--accentBright);
}
.bad .icon svg {
	color: var(--themeError);
}
.error .icon svg {
	color: var(--themeError);
}

/*.inline-error { color: var(--labelColor) };*/
.inline-error
button span.icon svg {
	color: inherit;
}

/*button.cancel span.icon svg { color: inherit }*/

.ui.panel.navi-inner button,
.ui.panel.buttons button {
	border-radius: var(--buttonRadius);
	padding: 0 16px;
	min-height: var(--buttonHeight);
	/*line-height: var(--buttonLineHeight);*/
	margin:4px 0;
	display:flex;
	align-items:center;
	justify-content: center;
}

.ui.panel.navi-inner.vertical button {
	margin-top: 8px;
	width: 200px;
}


.modal .ui.panel.navi-inner {
	min-height: 48px;
}
.modal .panel.subtitle {
	/*line-height: 48px;*/
	text-align:center;
}
.modal .panel.text {
	padding: 5px 20px;
	line-height: 1.3em;
}

.modal .date-select {
	padding: 0.5em 0;
	font-size: 2em;
	line-height: 1.3em;
}

.modal .date-select input {
	height: 1.3em;
	width: 1.3em;
}

.modal b { }

span.themed {
	display: inline-block;
	color: var(--accentBright);
}
span.themed.error svg {
	color: var(--themeError);
}
span.themed.success svg {
	color: var(--themeSuccess);
}
span.themed.warning svg {
	color: var(--themeWarning);
}
span.themed.question svg {
	color: var(--themeQuestion);
}

span.themed svg {
	width: 100%;
	height: 100%;
}
span.themed.big {
	width: 100%;
	height: 220px;
}

.errmsg {
	color: #f93 !important;
	line-height: 1.5em;
	display: none !important;
}

/*.annotation:not(:empty)+.errmsg {
	}*/

.je-header.je-object__title {
	display: none;
}

.item-dependent {
	display: none;
}
.item-set + .item-dependent {
	display: block;
}

.dependent {
	display: none;
}
.set + .dependent {
	display: block;
}

.completeDependent {
	display: none;
}
.complete + .completeDependent {
	display: block;
}

span.examples,
span.abstract {
	font-size: 14px;
	color: var(--labelColor);
	color: var(--accentBright);
	display: block;
	max-width: 320px;
	margin: 0px auto;
	padding: 0 0 8px 0;
	line-height: 1.3em;
}

span.examples span {
	display: inline-block;
	vertical-align: text-top;
}

span.abstract span {
}

.hiddenElement {
	display: none !important;
}

.left {
	text-align: left;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}

.round {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	margin: 28px 20px;
}

.complete #cta {
	display: none !important;
}

#cta {
	width: 100%;
	position: absolute;
}

#cta .arrow {
	left: 30%;
}
.arrow {
	position: absolute;
	bottom: 0;
	margin-left: 0px;
	width: 12px;
	height: 12px;
	background-size: contain;
	top: 15px;
}
.segunda {
	margin-left: 8px;
}
.next {
	background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
}

@keyframes bounceAlpha {
	0% {
		opacity: 1;
		transform: translateX(0px) scale(1);
	}
	25% {
		opacity: 0;
		transform: translateX(10px) scale(0.9);
	}
	26% {
		opacity: 0;
		transform: translateX(-10px) scale(0.9);
	}
	55% {
		opacity: 1;
		transform: translateX(0px) scale(1);
	}
}

.bounceAlpha {
	animation-name: bounceAlpha;
	animation-duration: 1.4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow.primera.bounceAlpha {
	animation-name: bounceAlpha;
	animation-duration: 1.4s;
	animation-delay: 0.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.round .arrow {
	animation-name: bounceAlpha;
	animation-duration: 1.4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.round .arrow.primera {
	animation-name: bounceAlpha;
	animation-duration: 1.4s;
	animation-delay: 0.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

div.paymentSummary {
	background: var(--inset-background-color);
	border-radius: var(--inset-border-radius);
	padding: 8px;
	margin: 0 0 10px 0;
	line-height:1.5em;
}

div.paymentSummary div:first-child {
	display: block;
	border-bottom: 1px solid var(--lineColor);
}
div.paymentSummary div>* { display: inline-block; }
div.paymentSummary div>*:first-child { width: 60%; }
div.paymentSummary div>*:nth-child(2) { width: 35%; text-align: right; }

.panel.item.paymentItem {
	margin: 0px;
}
.panel.item.paymentItem label {
	display: block;
	margin: 8px 0 2px;
}
.panel.item.paymentItem input {
	border: 0;
	background: rgb(245, 245, 250);
	padding: 12px;
	color: #444;
	border-radius: 10px;
	font-weight: bold;
	width: calc(100% - 48px);
}

.panel.item.paymentItem input:focus {
	outline: #0af;
	box-shadow: 0 0 3px #0af;
}

.panel.item.paymentItem input + span + span.annotation {
	border: 0px;
	box-shadow: none;
}

.abstract {
	/*background: var(--whiteSpace);*/
	line-height: 1.4em;
	font-weight: normal;
}

.permissions .abstract:last-of-type {
	margin-top:5px;
}

.permissions {
	background: var(--whiteSpace);
	color: var(--textColor);
	/*padding: 48px 32px 80px !important;*/
}

.permissions p {
	margin: 0 0 10px;
	padding: 5px 0;
}


.permission {
	margin-bottom:1em;
}

.permission label {
	display: block;
	line-height: 42px;
}

.permission.denied label {
	color: var(--themeError);
}

.permission.denied-soft label {
	/*background: #999;*/
}

.permission.granted label {
}

p.denied {
	color: var(--themeError);
}

p.denied-soft {
	color: #999;
}

.permission label .indicator {
	float: right;
	height:32px;
	vertical-align: middle;
}

.permission label .indicator .ripple {
	vertical-align: middle;
	width:32px;
	height:32px;
}

.permission granted button {
	display: none;
}

.permission label svg {
	vertical-align: middle;
}

.permission.center {
	text-align: center;
	width: auto;
}

.permission-btn {
	float: right;
	background: var(--lineColor);
	background: transparent !important;
	color: inherit !important;
	border-radius: 4px;
	vertical-align: middle;
}

.permission span.icon svg { 
	color: inherit;
}

.permission-btn:hover {
	/*background:var(--accentLight) !important;*/
	background: rgba(255, 255, 255, 0.25) !important;
}

.btn {
	background: var(--accentBright);
	color: var(--accentText);
	border-radius: 4px;
	line-height: 32px;
	padding: 0 16px 0 16px;
	margin-top: 4px;
	vetial-align: middle;
}

.btn svg {
	margin-top: -2px;
}

.btn:hover {
	background: var(--accentLight) !important;
}

.btn[disabled]:hover,
.btn[disabled] {
	background: #999 !important;
}


.options div.trigger {
	display:flex;
	padding: 0 0 0 8px;
	min-height: calc( var(--buttonHeight) * 1.25 );
	flex-direction:row;
	align-items: center;
}
.options div.trigger span {
	flex-grow: 0;
}

.options div.trigger span.inner {
	flex-grow: 1;
}
	
/*.options div.trigger span.inner {*/
	/*width: calc(100% - 78px);*/
/*}*/

.scrollList {
	display:inline-block;
	position:relative; 
	width:33%; 
	max-height:calc( 42px * 5 );
	line-height:42px; 
	overflow:hidden;
	text-align:center;
	user-select:none;
	-webkit-user-select:none;
}

.scrollList:nth-child(1) { width:42%; }
.scrollList:nth-child(2) { width:29%; }
.scrollList:nth-child(3) { width:29%;}
.scrollList>.inner {
	display:flex;
	flex-direction: column;
	max-height:calc( 42px * 5 );
	overflow-y:auto;
	overflow-x:hidden;
	width:calc( 100% );
	padding-right:25px;
}

.scrollList>.inner:focus {
	outline:0;
	background: var(--inset-background-color);
}
.scrollList span {
	cursor:pointer;
	font-size: 14px;
	transition: font-size 10ms linear;
}

/*.scrollList .inner>span:nth-child(odd) {*/
/*	background: var(--inset-background-color);*/
/*}*/

.scrollList .line {
	position:absolute;
	top:calc(42px * 2);
	width:100%;
	height:2px;
	background: var(--inset-border-color);
	pointer-events: none;
}
.scrollList .line:nth-child(2) {
	top:calc(42px * 3);
}


ui-irn-selector,
ui-address-validator {
	display:block;
}

.ui-blanker {
	display:block;
	position:absolute;
	left:0px; top:0px; bottom:0px; right:0px;
	background:rgba(0,0,25,0.025);
	z-index:1;
}

ui-overlay {
	position:absolute;
	left:50%;
	top:50%;
	z-index:1;
	width:300px;
	margin-left:-150px;
	min-height:10px;
	padding: 5px;
	box-sizing: border-box;
	border-radius: var(--inputRadius);
	background: var(--whiteSpace);
	box-shadow: var(--card-shadow);
	border: 1px solid var(--lineColor);
}

ui-overlay .item {
	padding:5px;
	cursor:pointer;
	line-height:1.1em;
	color: var(--textColor);
}

ui-overlay .item.muted {
	opacity: 0.66;
}

ui-overlay .item:hover {
	background: var(--accentBright);
	color: var(--accentText);
}

ui-overlay .item.selected {
	background: var(--accentDark);
	color: var(--accentText);
}


ui-overlay .item .irn {
	display:inline-block;
	width:28px;
}

ui-overlay .item .name {
	line-height:1.3em;
}

ui-overlay .item .icon {
	float:right;
	opacity:0.25;
	padding-top:4px;
}

ui-overlay .item br+span{
	display:inline-block;
	width: 32px;
}


.panel.form ui-irn-selector.item input.short {
	width: 28px !important;
	margin-right:6px;
	float:left;
	min-width:28px;
}

.panel.form .item input.short+input {
	width: calc(100% - 34px);
	min-width: calc(100% - 34px);
	display:inline;
}


.panel.form .item > .icon.irnLookup {
	margin-top: 7px;
	height: 36px;
	margin-right:2px;
	background: var(--accentBright);
	pointer-events: auto;
	border-radius: 0 var(--inputRadius) var(--inputRadius) 0;
}

.panel.form .item > .icon.irnLookup svg {
	margin-top: 4px;
	width:32px;
	height:28px;
	color: var(--accentText);
}



.view.modal{
	top:50%; 
	left:50%; 
	width:100%;
	border-radius:var(--modalRadius);
	z-index: 3; background: var(--whiteSpace); box-shadow:0 5px 20px rgba(0,0,0,0.5);
	padding-bottom:8px;
	transition: opacity 333ms ease-in-out;
	
}



dialog.view.modal{
	overflow:visible;
	border:0px;
}

.contrastMore dialog.view.modal {
	border:2px solid var(--textColor);
}


dialog div.alt-select label {
	display:flex;
	justify-content: space-between;
	flex-grow:1;
	/*align-items:center;*/
	align-items:stretch;
	border-bottom: 1px solid var(--inset-border-color)
}

dialog div.alt-select label:last-of-type {
	border-bottom:0px;
}

dialog div.alt-select label input[type=radio] {
	display:none;
}

dialog div.alt-select label input[type=radio]+span,
dialog div.alt-select label input[type=radio]+span+span {
	vertical-align: middle;
	line-height:1.8em;
	padding:4px 8px;
	border-radius: var(--inset-border-radius) 0 0 var(--inset-border-radius);
	flex-grow:1;
}

dialog div.alt-select label input[type=radio]+span+span {
	border-radius: 0 var(--inset-border-radius) var(--inset-border-radius) 0;
	text-align:right;
	color: var(--subtleText);
	font-size: 0.8em;
}

dialog div.alt-select label input[type="radio"]:checked+span,
dialog div.alt-select label input[type="radio"]:checked+span+span {
	background: var(--accentBright);
	color: var(--accentText);
}

dialog div.alt-select label:active input[type="radio"]+span,
dialog div.alt-select label:active input[type="radio"]+span+span,
dialog div.alt-select label:hover input[type="radio"]+span,
dialog div.alt-select label:hover input[type="radio"]+span+span {
	background: var(--accentLight);
	color: var(--accentText);
}

.view.split {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	/*background:pink;*/
}

.view.split .ui.panel.content {
	padding-top:24px; 
	font-size:1.1em;
	line-height:1.2em;
}

.view.split>.MAIN {
	max-width:50%;
	width:50%;
	background:var(--whiteSpace);
	margin:0px;
	min-width:300px;
}
.view.split .MAIN .holder {
	width:100%;
	max-width:480px;
	margin:0px auto;
	/*background: lightgreen;*/
}

.view.split .aside {
	position:fixed;
	right:0px;
	top:0px;
	bottom:0px;
	
	width:50%;
	min-width:300px;
	margin:0;
}

.view.split .aside .ui.panel.content {
	padding-top:40px;
	text-align:center;
	height:100%;
	font-size: 1em;
}

.view.split .aside>.ui.panel.content,
.view.split .aside>.ui.panel.content>.ui.panel.content {
	padding-top:0px;
}
.view.split .aside>.content>.panel.footer-grey {
	position: absolute;
	bottom:32px;
	transform-origin: 0% 150%;
	transform: scale(1.5,1.5);
	filter: drop-shadow(-0px 1px 0px rgba(255, 255, 255, 1));
}
.view.split .aside>.ui.panel.content>.ui.panel.content>abstract.narrow {
	display:flex;
	height:20%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

.phoneFrame {
	position:absolute;
	bottom: 0px;
	height:80%;
	width:100%;
	right:0px;
	margin:0px auto;
	background: url("/static/images/singleton/phone-frame.png?1") bottom center no-repeat;
	background-size: auto 100%;
	pointer-events: none;
	/*background-color: rgba(0,0,0,0.125) ;*/
}

.ui.panel.card.center {
	font-size: 0.8em;
	text-align:center;
}

.ui.panel.card.center.headered {
	margin-top:64px;
}

.ui.panel.card.center.error { 
	background: var(--themeErrorCard); 
}

.split .ui.panel.card.center.error {
	box-shadow:none;
}

h1.warn, h2.warn, h3.warn {
	color: var(--themeWarn);
}

h1.error, h2.error, h3.error {
	color: var(--themeError);
}


dl.expander { text-align:left; padding:8px 16px; }
dl.expander dt { 
	border-top: 1px solid var(--inset-border-color); 
	padding: 8px 0px;
}
dl.expander dt .icon.handle { 
	position:absolute; right:36px; 
	transition: transform ease-in-out 250ms;
}

dl.expander dt+dd {
	max-height:0;
	overflow:hidden;
	padding:0px 8px;
	box-sizing: border-box;
	transition: max-height ease-in-out 250ms;
}
dl.expander dt.active+dd { 
	max-height:50vh;
	overflow-y: auto;
}
dl.expander dt.active .icon.handle { transform: rotate(90deg) }

dl.expander ol{ list-style: decimal; }

#pagePreview {
	position: absolute;
	/*background:lime;*/
	top:20%;
	left:0px;
	right:0px;
	height: 55%;
	padding-top:5px;
}

#pagePreview .inner {
	position:relative;
	background:var(--viewBackground);
	width:420px;
	height:500px;
	margin:0px auto;
	border-radius: 10%;
	overflow:hidden;
	/*font-size:13px;*/
	/*overflow-x:hidden;*/
	/*overflow-y:auto;*/
}

#pagePreview .view.mockPreview .MAIN {
	min-width:480px !important;
	/*margin:0;*/
}

.view.mockPreview .ui.viewPanel .MAIN {
	min-height:100px !important;
}

#pagePreview .view .ui.panel.content {
	padding: 48px 25px;
}

#pagePreview .ui.panel.accent.inverse {
	margin: 0px;
	/*padding:12px;*/
	border-radius: 16px;
}

#pagePreview .view .ui.panel.content.card {
	min-height: 580px !important;
	height:auto !important;
}

#pagePreview ul.thirds {
	position:relative;
	margin:0px;
	padding:0px;
}

#pagePreview ul.thirds li.icon {
	width:31%;
	display:inline-block;
}

#pagePreview .dot {
	position:absolute;
	text-align:left;
	left:50%;
	z-index:1;
	margin-top:-0.5em;
	color: var(--whiteSpace);
	background: var(--textColorAlpha);
	padding:8px;
	border-radius: 8px;
	backdrop-filter: blur(2px);
	box-shadow: 6px 6px 10px rgba(0,0,0,0.25);
}

#pagePreview .dot.our-logo {
	top:6%; 
	margin-left:0%; 
}

#pagePreview .dot.our-payments {
	top:52%; 
	margin-left:0%; 
	z-index:1;
}

#pagePreview .dot.our-provider {
	top:98%; 
	margin-left:0%; 
	z-index:1;
}

#pagePreview .dot::before {
	content:'';
	display:block;
	position:absolute;
	height:0px;
	width:0px;
	background: rgba(0,0,0,0);
	border: 8px solid transparent;
	border-right: 8px solid var(--textColorAlpha);
	transform: translate(-24px, 0px);
} 

#pagePreview .dot.our-payments::before {
	transform: translate(12px, -24px) rotate(90deg);
}

#pagePreview .dot.our-provider::before {
	transform: translate(12px, -24px) rotate(90deg);
}


#pagePreview .dot span {
	display:inline-block;
	display:none;
	background:red;
	width:16px;
	height:16px;
	/*margin-right: 12px;*/
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(200,0,0,0.25);
}

.qr-code img {
	padding:15px;
	background:white;
	/*background:var(--whiteSpace);*/
	border:2px solid var(--inset-border-color);
	border-radius: var(--inset-border-radius);
}

#redirectQR.qr-code img {
	opacity:0.05;
	transition: background 300ms ease-in-out, filter 300ms ease-in-out;
	/*background:var(--whiteSpace);*/
}

body.online #redirectQR.qr-code img {
	opacity:1;
	background:white;
}

#redirectQR .ripple,
#redirectQR .noaccess {
	display:inline-block;
	width:100px;
	height:100px;
	margin-left:-50px;
	margin-top:50px;
	position:absolute;
	transition: opacity 300ms ease-in-out;
	color: var(--accentBright);
}
body #redirectQR .noaccess {
	opacity:0;
}
#redirectQR .noaccess svg {
	width:100px;
	height:100px;
}


body.offline #redirectQR .ripple,
body.online #redirectQR .ripple {
	opacity:0;
}

body.offline #redirectQR .noaccess {
	opacity:1;
}

#redirectQR.connected {
	position:absolute;
	transform: translate(520px, 32px);
	text-align:center;
	
}

#redirectQR.connected img {
	/*border: 0px;*/
	/*box-shadow: none;*/
	/*padding-right:0px;*/
}

.view .ui.panel.standalone.connected {
	padding-right:180px;
	min-width: 520px;
	transform: translate(-140px, 0);
}

@media screen and (max-width: 601px) {
	.view.split .MAIN {
		max-width:100%;
		width:100%;
	}
	.view.split .aside {
		position:static;
		width:100%;
	}
	
/*.view.split {
	flex-direction: vertical;
}*/
}


/*.ScrollList span:hover {*/
/*	background: var(--grey);*/
/*	text: var(--textColor);*/
/*}*/

/*@media screen and (max-width: 442px) {
	.options > div {
		padding: 0 10%;
	}
	.options div.trigger {
		padding: 0 0 0 8px;
	}
	.options div.trigger span.inner {
		width: calc(100% - 78px);
	}
}
@media screen and (max-width: 360px) {
	.options > div {
		padding: 0 5%;
	}
	.options div.trigger {
		padding: 0 0 0 8px;
	}
	.options div.trigger span.inner {
		width: calc(100% - 78px);
	}
}
*/
@media screen and (max-width: 340px) {
/*	.options > div {
		padding: 0 2%;
	}
	.options div.trigger {
		padding: 0 0 0 8px;
	}
	.options div.trigger span.inner {
		width: calc(100% - 78px);
	}
*/
	span.abstract {
		max-width: 290px;
	}
	.panel.form .item,
	.panel.form input {
		max-width: 290px;
		/*padding:0px;*/
	}

	.macos .panel.form input:not([type="checkbox"]),
	.ios .panel.form input:not([type="checkbox"]) {
		min-width: 290px;
		border-radius: 0px;
	}
}

.dbrand .panel.footer-grey { 
	visibility:hidden;
	display:none;
}

.dbrand #SCTK_logo {
	visibility:hidden;
	display:none;
}

.dbrand #SCTK_liveness_powered_by svg,
.dbrand #SCTK_viewfinder_powered_by svg {
	visibility:hidden;
	display:none;
}

.dbrand .dot.our-provider {
	visibility:hidden;
	display:none;
}

pre, code {
	font-family: monospace;
}

/* MOVED TO END OF FILE FOR REVIEW / MODIFICATION LATER */

.options {
	padding: 0;
	margin: 0;
}

.options > div {
	display: list-item;
	list-style-type: none;
	padding: 0 0;
	margin: 0.5em 0;
	/*height: 64px;*/
	box-sizing: border-box;
	line-height: 64px;
	/*box-shadow: 0 3px 10px rgba(0,0,0,0.25);*/
	transition: height 300ms ease-in-out;
	overflow: hidden;
}

.options div .icon,
.options div .inner {
	cursor: pointer;
}

.options div.inner.instruction {
	cursor: default;
	line-height: 32px;
	height: 32px;
	text-align: center;
}

.options div.extra {
	height: auto;
	line-height: 1.3em;
}
.options div.extra > span.inner {
	width: 130%;
	margin-left: -15%;
	text-align: center;
	line-height: 48px;
}

.options div.extra div {
	display: list-item;
	height: 64px;
	transition: height 300ms ease-in-out;
	overflow: hidden;
}

.options .hidden,
.options .extra.hidden,
.options .extra div.hidden,
.options div.inner.instruction.hidden {
	height: 0px;
	margin: 0px !important;
}

.options div span.inner {
	line-height: 1.3em;
	display: inline-block;
	width: calc(100% - 3em);
	padding-left: 0.5em;
	box-sizing: border-box;
	vertical-align: middle;
}

/*.options div.trigger {*/
/*	padding: 0 0 0 15%;*/
/*}*/

.options div.trigger span.inner {
	width: calc(100% - 90px);
	/*padding-left: 0.5em;*/
}

.instruction {
	text-align:center;
}

.instruction, .dsi { 
	max-height:33vh;
	transition: 
		max-height 500ms ease-in-out,
		opacity 250ms ease-in-out,
		/*padding 500ms ease-in-out,*/
		border 250ms ease-in-out;
}

.dsi[checked] {
	background: var(--inset-background-color);
}

.instruction {
	height:auto;
	line-height:1.3em;
	margin-top:8px;
	text-overflow: ellipsis;
    overflow: hidden;
    /*text-wrap: nowrap;*/
}

/* added to support arbitrary labelling on document selection groups*/
.instruction.custom { 
	height: auto;
	line-height: 1.8em;
	margin-top: 16px;
	text-wrap: wrap;
	text-overflow:initial;
}

.selection {
	/*margin-left:15px;*/
	/*background: rgba(0,0,0,0.125);*/
}

.selection .dsi {
	position:relative;
	border: 1px solid var(--inset-border-color);
	border-radius: var(--inset-border-radius);
	margin-bottom:8px;
	display:flex;
}


.selection .dsi .icon.disc {
	margin: 8px;
	vertical-align: top;
	min-width:32px;
}

.selection .dsi .inner {
	display:inline-block;
	width: calc( 100% - 60px );
	/*overflow:hidden;*/
	/*max-height:100%;*/
}

.selection .dsi .inner span {
	display:block;
	opacity: 0.9;
	margin-top:0px;
}

.textLarge .selection .dsi .inner span:not(:first-child), 
.textHuge .selection .dsi .inner span:not(:first-child) {
	display:inline;
}
.textLarge .selection :not(.hidden) .dsi,
.textHuge .selection :not(.hidden) .dsi {
	height:auto;
}

.selection .dsi .inner span:first-child {
	min-height:6px;
	margin-top:12px;
	font-weight:bold;
	line-height:1.3em;
	opacity: 1;
}
.selection .dsi .inner:first-line {
	line-height:30px;
}

.selection .dsi .inner span:not(:first-child) {
	font-size:0.9em;
}

.selection .dsi .inner span:last-child {
	margin-bottom:12px;
}

.dsi.hidden,
.instruction.hidden,
.hidden .dsi,
.hidden .instruction {
	height:0px !important;
	max-height:0vh !important;
	/*padding:0px;*/
	margin:0px;
	border:0px transparent;
	overflow:hidden;
	opacity:0;
	margin-top:0px;
	margin-bottom:0px;
}

.dsi.optional::before {
	content: 'optional';
	position:absolute;
	display:inline-block;
	top:-1px;
	right:-2px;
	color:var(--accentText);
	background:var(--inset-note-background-color);
	color:var(--inset-note-text-color);
	padding: 0 8px;
	border-radius: 8px 0 0 8px;
}

.viewbuild em,
.viewbuild i {
	font-style: italic;
}

.viewbuild>div {
	padding:8px;
}

.viewbuild ul.list li {
	line-height: 1.3em;
	padding:8px 0;
}

/*.viewbuild ul.list li:first-line {
	font-weight:bold;
}
*/
.viewbuild ul.list li::marker {
	color: var(--accentBright);
	font-size:1.5em;
	vertical-align:middle;
}