header, header div.center, header a,
section#container{ width:100vw !important; }

header { display:none; }
/************************************************************************************************************** MOD CAPTURE */
:root {
	--vh: 100vh;
}

div.animation {
	position: relative;
	z-index: -1;
}
div.animation h1 {
	font-size: 6.5vw;
}
div.animation svg {
	max-height: calc(100% - 2.2em - 64px);
}
div.animation.static svg {
	max-height: calc(60% - 32px);
	margin: 0 3vh;
}

div.animation.static {
	box-sizing: border-box;
	padding: 2em 3em;
	text-align: left;
	line-height: 5vh;
}

div.animation.static ol {
	list-style: numeric;
}

div.animationHeader {
	text-align:center;
	line-height: 1.3em;
}
/* completely rebuilt these notifications for text scalability*/ 
.sctk_capture_notice_top,
.sctk_capture_notice_bottom {
	z-index: 10010;
	position: fixed;

	top:0dvh;
	left:50dvw;
	width:70dvw;
	margin-left:-35dvw;

	text-align:center;
	min-height: 5dvh;
	translate: 0dvw 5dvh;
	pointer-events:none;
}

.sctk_capture_notice_bottom {
	translate: 0dvw 85dvh;
}

.sctk_capture_notice_top.roll90 {
	translate: 30vw 47vh;
	translate: 30dvw 47dvh;
    width: 70vh;
    margin-left: -35vh;
}

.sctk_capture_notice_bottom.roll90 {
	translate: -30vw 47vh;
	translate: -30dvw 47dvh;
    width: 70vh;
    margin-left: -35vh;
}

.notice {
	position:absolute;
	left:0px;
	right:0px;
	color: #fff;
	background: #000;
	opacity: 0.8;
	border-radius: 8px;
	padding:8px;
	border: 1px solid #fff;
	transition: opacity 0ms;
}

.sctk_capture_notice_bottom .notice {
	bottom:0px;
}

.notice>div {
	display:inline;
}

.notice.hidden {
	transition: opacity 666ms;
	opacity: 0;
}


#SCTK_capture {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

#SCTK_having_trouble {
	position: fixed;
	top: calc(50% - 1em);
	font-size: 3vw;
	left: 0px;
	right: 0px;
	text-align: center;
	z-index: 10010;
	color: #fff;
	display: none;
	pointer-events: none;
}

#SCTK_capture_instruct {
	color: var(--textColor);
	text-align: center;
}
#SCTK_capture_instruct object {
	width: 100vw;
	height: 66vh;
}

#SCTK_toggle_focus {
	position:absolute; color:#fff; z-index: 100000; background:transparent; 
	border:0; top:96px; left:0px; padding: 20px;
	outline:none;
	border-radius:43px;
}

#SCTK_toggle_torch {
	position:absolute; color:#fff; z-index: 100000; background:transparent; 
	border:0; top:0px; left:0px; padding: 20px;
	outline:none;
	border-radius:43px;
}

#SCTK_toggle_focus,
#SCTK_toggle_torch {
	opacity: 0.66;
	transition: opacity 200ms ease-in-out, filter 200ms ease-in-out;
}
#SCTK_toggle_focus.active,
#SCTK_toggle_torch.active {
	opacity: 1;
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
}

div.view[roll90] #SCTK_toggle_focus,
div.view[roll90] #SCTK_toggle_torch {
	transform: rotate(-90deg);
	top:0px;
	left:auto;
	right:0px;
}

div.view[roll90] #SCTK_toggle_focus {
	right:96px;
}

#SCTK_dimiss_button {
	background: var(--accent_bright);
	color: #fff;
	padding: 4px 16px;
	border-radius: 48px;
	line-height: 40px;
	z-index: 1;
}

#SCTK_save_debug {
	position: fixed;
	left: 50%;
	width: 50%;
	bottom: 5%;
	margin-left: -25%;
	color: #444;
	border-radius: 32px;
	background: #ddd;
}
#SCTK_save_debug svg,
#SCTK_save_debug > span {
	line-height: 32px;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.5em;
}
#SCTK_save_debug > small {
	font-size: -0.7em;
}

#SCTK_capture_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10002;
	-webkit-user-select: none;
}

#SCTK_video_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10001;
	-webkit-user-select: none;
}

#SCTK_capture_viewfinder {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10001;
}

#SCTK_capture_confirm {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10004;
	/*background: rgba(255, 255, 255, 1);*/
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	transition: 2000ms ease-in-out backdrop-filter;
	text-align: center;
	box-sizing: border-box;
	display: none;
	align-items:center;
	justify-content:center;
	
}

#SCTK_capture_flash {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10010;
	background: rgba(255, 255, 255, 0.75);
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(20px);
}

#SCTK_capture_viewfinder button {
	min-height: 48px;
	min-width: 250px;
	margin: 5px;
}

#SCTK_capture_cancel {
	border: 0px;
	position: absolute;
	top: 1vw;
	right: 1vw;
	background: transparent;
	width: 64px;
	height: 64px;
	min-width: 32px;
	z-index: 100010;
	/*color: var(--accentBright);*/
	color:#8B8680; 
	/* Changed button colour to middle grey 
	this removes contrast issues with both ligh and dark client themes
	on both light and dark capture screens 
	(document capture is always dark, but selies is system color scheme responsive)
	*/
	border-radius: 32px;
}
#SCTK_capture_cancel svg {
	width: 48px;
	height: 48px;
	/*color: #d00;*/
}

#SCTK_sample_trigger,
#SCTK_capture_trigger {
	border: 0px;
	position: absolute;
	bottom: calc(50% - 40px);
	right: 6vw;
	background: transparent;
	height: 100px;
	width: 100px;
	min-width: 32px;
	z-index: 10005;
	text-align: center;
	line-height: 80px;
	color: #fff;
}

#SCTK_sample_trigger svg,
#SCTK_capture_trigger svg {
	display: inline-block;
	veritical-align: middle;
	width: 100px;
	height: 100px;
	opacity: 1;
	transition: width 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8), height 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8), opacity 300ms ease-in,
		margin-left 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

#SCTK_sample_trigger span {
	position:absolute;
	top: 12px;
	left: 16px;
	width: 80px;
	color: #000;
	pointer-events:none;
}

#SCTK_sample_trigger {
	outline: transparent;
	bottom: 6vw;
}

#SCTK_sample_trigger:focus {
	box-shadow: none;
}

#SCTK_sample_download,
#SCTK_sample_clear {
	z-index: 10010;
	border: 0px;
	position: absolute;
	left:16px;
	bottom: 0vw;
	border-radius: 16px 16px 0px 0px;
}

#SCTK_sample_download {
	left: 128px;
}

#SCTK_sample_download[disabled],
#SCTK_sample_clear[disabled] {
	bottom: -80px;
	display:none;
}

#SCTK_sample_trigger[disabled],
#SCTK_capture_trigger[disabled] {
	pointer-events: none;
}
#SCTK_sample_trigger[disabled] svg,
#SCTK_capture_trigger[disabled] svg {
	width: 48px;
	height: 48px;
	opacity: 0.125;
	margin-left: 50vw;
}

#SCTK_capture_reject,
#SCTK_capture_accept {
	background: transparent;
	border: 0px;
	height: 100%;
	width: 20vw;
	min-width: 0px;
	vertical-align: middle;
	color: #444;
}

#SCTK_capture_reject svg,
#SCTK_capture_accept svg {
	width: 100%;
	min-width: 10vw;
	min-height: 10vw;
}

#SCTK_capture_reject svg {
	color: #f34f46;
}
#SCTK_capture_accept svg {
	color: #52a441;
}

#SCTK_capture_viewfinder {
	opacity: 0;
	transition: opacity 200ms;
}
#SCTK_capture_viewfinder.ready {
	opacity: 1;
}

#SCTK_capture_flash.flash {
	animation: camera_flash 333ms;
}

@keyframes camera_flash {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 0;
	}
}

#SCTK_capture_confirm {
	/*transition: top 333ms;*/
	z-index: 10003;
}

#SCTK_capture_confirm .spacer {
	line-height: 100vh;
}

#SCTK_capture_confirm.roll90 .spacer {
	line-height: 100vw;
}


#SCTK_capture_confirm img {
	border-radius: 2.5vw;
	vertical-align: middle;
	margin:auto;
	height: calc( 90vh - 100px );
	max-height:320px;
}

#SCTK_capture_confirm.roll90 img {
	/*max-width: 60vh !important;*/
	height: 70vw !important;
}

#SCTK_capture {
	background: #111;
}

#SCTK_logo {
	position: absolute;
	left: 0vw;
	width: 100vh;
	bottom: 1vh;
	z-index: 10003;
	text-align: center;
}

#SCTK_logo img {
	max-height: 10vh;
	/*width:100%;*/
}

#SCTK_capture_confirm.roll90 #SCTK_capture_reject,
#SCTK_capture_confirm.roll90 #SCTK_capture_accept {
	width: 12vh;
	height: 100%;
}

#SCTK_capture_trigger.roll90 {
	bottom: 6vw;
	right: calc(50% - 50px);
}

#SCTK_capture_cancel.roll90 {
	top: auto;
	bottom: 2vw;
}

#SCTK_logo.roll90 {
	position: absolute;
	bottom: auto;
	z-index: 10003;
	text-align: center;
	transform: rotate(90deg);
	transform-origin: 0% 100%;
	left: 0px;
	width: 75vh;
}

#SCTK_logo.roll90 img {
	max-height: 12vw;
}

#SCTK_logo {
	position: absolute;
	left: 0vw;
	width: 100vw;
	bottom: 1vh;
	z-index: 10003;
	text-align: center;
}

#SCTK_logo img {
	max-height: 10vh;
	/*width:100%;*/
}

#SCTK_capture_confirm.roll90 #SCTK_capture_reject,
#SCTK_capture_confirm.roll90 #SCTK_capture_accept {
	width: 12vh;
	height: 100%;
}

#SCTK_capture_cancel.roll90 {
	top: auto;
	bottom: 2vw;
}

:not(.view).roll90 {
	transform: rotate(90deg);
	transform-origin: 50% 50%;
}

#SCTK_having_trouble.roll90 {
	transform: rotate(90deg);
	transform-origin: 50% 50%;
	top: calc(50% - 1em);
	left: 0;
	right: 0;
	font-size: 3vh;
}

#SCTK_logo.roll90 {
	position: absolute;
	left: 0vh;
	right: 25vh;
	bottom: auto;
	z-index: 10003;
	text-align: center;
	transform: rotate(90deg);
	transform-origin: 0% 100%;
}

#SCTK_logo.roll90 img {
	max-height: 12vw;
}

/************************************************************************************************************** MOD LIVE SELFIE */

#SCTK_instruction_box {
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 64px;
	padding-top: 32px;
	line-height: 24px;
	text-align: center;
	color: var(--accent_bright);
	font-size: 20px;
}

#SCTK_liveness_powered_by {
	position: fixed;
	background: #fff;
	background: var(--whiteSpace);
	left: 0px;
	right: 0px;
	top: 0px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	/*color: var(--accent_bright);*/
	/*border-bottom:1px solid var(--accent_bright);*/
	color: rgba(0, 0, 0, 0.125);
	color: var(--labelColor);

}
#SCTK_liveness_powered_by svg {
	display: inline-block;
	vertical-align: middle;
	max-width: 200px;
}

#SCTK_liveness_bottom_bar {
	position: fixed;
	background: #fff;
	background: var(--whiteSpace);
	color: #000;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 100px;
	/*border-top:1px solid var(--accent_bright);*/
}

#SCTK_liveness_left_bar,
#SCTK_liveness_right_bar {
	position: fixed;
	top: 0px;
	width: 32px;
	bottom: 0px;
	background: #fff;
	background: var(--whiteSpace);
}

#SCTK_liveness_left_bar {
	left: 0px;
}

#SCTK_liveness_right_bar {
	right: 0px;
}

#SCTK_instruction_image {
	position: fixed;
	display: block;
	left: 50%;
	bottom: 38px;
	margin-left: -64px;
	width: 128px;
	height: 128px;
	background: #fff;
	background: var(--whiteSpace);
	border-radius: 64px;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	filter: var(--promptFilter);
}
#SCTK_instruction_image img {
	border-radius: 50%;
	height: 90px;
	pointer-events: none;
}

#SCTK_debug_text {
	background: rgba(0, 0, 0, 0.25);
	position: fixed;
	top: 64px;
	left: 32px;
	font-size: 2vh;
	color:#fff;
}

#SCTK_capture_image {
	position: fixed;
	top: 64px;
	right: 32px;
	background: rgba(0, 0, 0, 0.25);
	width: 128px;
}

#SCTK_selfie_flash {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10010;
	background: rgba(255, 255, 255, 0.75);
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(20px);
}


#SCTK_capture_confirm button {
	border-radius: 24px;
	min-width:200px;
}

#SCTK_capture_confirm button:nth-of-type(1) {
	float:left;
}
#SCTK_capture_confirm button:nth-of-type(2) {
	float:right;
}



#SCTK_signature_powered_by {
	position:fixed;
	/*background: #fff;*/
	color:#000;
	left:0px;right:0px; bottom:0px;
	line-height:24px;
	text-align:center;
	min-height:64px;
	/*color:var(--accent_bright);*/
	color: rgba(0, 0, 0, 0.125);

	z-index:10;
	white-space:nowrap;
	vertical-align: middle;
	pointer-events:none;
}

#SCTK_signature_powered_by hr {
	disdplay:block;
	width:33%;
	margin:0px auto;
	/*border-bottom: 1px solid var(--accent_bright);*/
}
#SCTK_signature_powered_by span {
	line-height:52px;
}
#SCTK_signature_powered_by svg {
	display:inline-block;
	vertical-align: middle;
	margin-top:5px;
	max-height:30px;
	max-width:200px;
}

#SCTK_signature_canvas_holder {
	position:relative;
	/*border:10px solid #dedede;*/
	box-sizing:border-box;
	width:100%;
	/*max-width:400px;*/
	margin:0px auto;
	min-height:128px;
	margin-top:70px;
	background: var(--whiteSpace);)
	/*border-radius: var(--card-border-radius);*/
}
#SCTK_signature_instruct {
	color:#dedede;
	position:absolute;
	text-align: center;
	line-height:1.5em;
	/*left:50%;*/
	/*margin-left: -100px;*/
	width:100%;
	font-size:24px;
	top:calc(50% - 70px);
	pointer-events:none;

}

#SCTK_signature_canvas {
	box-sizing:border-box;
	width:100%;
	height:100%;
}

#SCTK_signature_undo {
	background:none;
	color: var(--accent_bright);
}

#SCTK_signature_save {
	float:right;
	background: var(--accent_bright);
	color: #fff;
	padding:0 30px;
}

#SCTK_signature_replay {
	float:right;
	background: var(--accent_bright);
	color: #fff;
	padding:0 30px;
}

#SCTK_signature_buttons {
	height:128px;
	box-sizing:border-box;
	padding:4px 10px;
	display: flex;
	flex-direction: column; 
	justify-content: center;
	align-items: center;
}

#SCTK_signature_buttons button {
	border-radius: 24px;
	height:48px;
	font-size:18px;
	margin:5px 0px;
}

#SCTK_signature_buttons button[disabled] {
	color:#ddd;
	background:#aaa;
}


@media screen and (min-aspect-ratio: 1/1) {
	
	#SCTK_signature_buttons {
		height:64px;
		box-sizing:border-box;
		padding:4px 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row; 
	}
	
}


#SCTK_signing_canvas_holder {
	position:absolute;
	box-sizing:border-box;
	width:100%;
	margin:0px auto;
	margin-top:0px;
	background:#aaa;
	height: var(--vh);
}

#SCTK_signing_canvas_holder canvas {
	position:absolute;
	box-sizing:border-box;
	width:100%;
	height:var(--vh);
}

.view .activityCanvas {
	position:absolute;
	box-sizing:border-box;
	width:100%;
	height:100%;
}

.view .activityFooter,
.view .activityHeader {
	min-height: var(--activityHeaderHeight);
	position:absolute;
	background: var(--activityBarBackground) !important;
	left:0px;
	right:0px;
	backdrop-filter: blur(5px);
	box-shadow: 0 0 20px rgba(0,0,0,0.125)
}

.view .activityHeader {
	color: var(--textColor);
	top:0px;
}

.view .activityFooter {
	color: var(--textColor);
	bottom:0px;
	align-items: center;
}

.view .activityClose {
	border: 0px;
    position: fixed;
    top: 8px;
    right: 8px;
    background: transparent;
    width: var(--activityCloseWidth);
    line-height: var(--activityHeaderHeight);
    height: var(--activityHeaderHeight);
    min-width: 42px;
    z-index: 100010;
    text-align: center;
    color: var(--textColor);
    border-radius: 42px;
    line-height: 42px;
    height: 42px;
    padding: 0px;
    box-sizing: border-box;
}

.view .activityHeader h1 {
	font-size:18px;
	line-height:var(--activityHeaderHeight);
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	padding: 0px var(--activityCloseWidth);
	margin: 0;
}

.view .activityClose.notheme {
	/*color: var(--accentText);*/
}
.view .activityCancel svg {
	width: 48px;
	height: 48px;
	/*color: #d00;*/
}





img.SCTK_capture_thumbnail {
	z-index:100010;
	position:absolute;

	height: calc( 90vh - 100px );
	max-height:320px;

	border-radius: 2.5vw;
	pointer-events:none;
}

img.SCTK_capture_thumbnail.small {
	position:absolute;
	left:5vw !important;
	bottom:5vh !important;
	width:25vh !important;
	height:auto !important;
	border-radius: 1vw;
	border:2px solid #fff;
	transition: all 300ms;
} 

img.SCTK_capture_thumbnail.small:nth-of-type(2) { margin-right:-1vw; transform: rotate(5deg); z-index:100009; }
img.SCTK_capture_thumbnail.small:nth-of-type(3) { margin-right:-2vw; transform: rotate(10deg); z-index:100008; }
img.SCTK_capture_thumbnail.small:nth-of-type(4) { margin-right:-3vw; transform: rotate(15deg); z-index:100007; }
img.SCTK_capture_thumbnail.small:nth-of-type(5) { margin-right:-4vw; transform: rotate(20deg); z-index:100006; }
img.SCTK_capture_thumbnail.small:nth-of-type(6) { margin-right:-5vw; transform: rotate(25deg); z-index:100005; }

[roll90]>img.SCTK_capture_thumbnail { transform: rotate(90deg); opacity:0; }
[roll90]>img.SCTK_capture_thumbnail.small { transform: rotate(90deg); 
	bottom:auto !important; 
	width:auto !important; 
	top:5vh !important; 
	left:0vw !important;
	height:15vw !important; 
	opacity:1
}

[roll90]>img.SCTK_capture_thumbnail.small:nth-of-type(2) { transform: rotate(95deg); }
[roll90]>img.SCTK_capture_thumbnail.small:nth-of-type(3) { transform: rotate(100deg); }
[roll90]>img.SCTK_capture_thumbnail.small:nth-of-type(4) { transform: rotate(105deg); }
[roll90]>img.SCTK_capture_thumbnail.small:nth-of-type(5) { transform: rotate(110deg); }
[roll90]>img.SCTK_capture_thumbnail.small:nth-of-type(6) { transform: rotate(115deg); }


#SCTK_selfie_flash.flash {
	animation: camera_flash 450ms;
}

@keyframes camera_flash {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
S
	.SCTK_loading-spinner {
		margin-top:35vh;
		line-height: 10vh;
		display:inline-block;
		vertical-align:middle;
	}
	.SCTK_loading-spinner label {
		color: var(--accent_bright);
		font-size: 16px;
	}
	
	/*.SCTK_loading-spinner svg {
		height:25vh;
		display:inline-block;
		width: 3.75em;
		transform-origin: center;
		animation: rotate 2s linear infinite;
	}
	
	.SCTK_loading-spinner circle {
		fill: none;
		stroke: rgb(82, 164, 65);
		stroke-width: 4;
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		stroke-linecap: round;
		animation: dash 1.5s ease-in-out infinite;
	}*/

	@keyframes rotate {
	  100% {
		transform: rotate(360deg);
	  }
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 90, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dashoffset: -125px;
		}
	}
	
	.ripple {
	  display: inline-block;
	  position: relative;
	  width: 80px;
	  height: 80px;
	}
	
	.ripple div:nth-child(1),
	.ripple div:nth-child(2){
		position: absolute;
		background: var(--accentBright);
		border-radius: 50%;
		width: 100%;
		height: 100%;
		opacity: 0;
		/*border:8px solid var(--accentBright);*/
		animation: ripple 1s cubic-bezier(0, 0.1, 0.9, 1) infinite;
		transition: background 200ms;
	}
	
	.ripple div:nth-child(2) {
	  animation-delay: -0.5s;
	}

	.ripple div:nth-child(3) {

		position: absolute;
		background: var(--accentBright);
		border-radius: 50%;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border:10px solid rgba(255,255,255,0.75);
		opacity:0;
	}
	
	
	
	.ripple div:nth-child(3) svg {
		color:var(--accentText);
		margin-top:10px;
	}

	.complete .ripple div:nth-child(3) {
		animation: bounce-in 750ms linear 1;
 	  	transform: scale(1,1) rotate(0deg);
	    opacity: 1;
	}

	@media (prefers-color-scheme: dark) {
		.allowPreferredScheme .ripple div:nth-child(3) {
			border: 8px solid rgba(0,0,0, 0.75);
			outline: 8px solid rgba(10,10,10, 0.5);
		}
		.allowPreferredScheme .ios .ripple div:nth-child(3) {
			border: 12px solid rgba(255, 255, 255, 0.75);
			outline: 0px;
		}
	}
	
	@keyframes ripple {
	  0% {
	    transform: scale(0,0)
	  }
	  5% {
	    transform: scale(0,0);
	    opacity: 1;
	  }
	  95% {
	    transform: scale(1,1);
	    opacity: 0;
	  }
 	  100% {
	    opacity: 0;
	  }
	}
	
	@keyframes bounce-in {
	  0% {
	    transform: scale(0,0) rotate(-270deg);
	    opacity:0
	  }
	  50% {
	    transform: scale(1.2,1.2);
	    opacity: 1;
	  }
	  75% {
		transform: rotate(10deg);
	  }
 	  99% {
 	  	transform: scale(1,1) rotate(0deg);
	    opacity: 1;
	  }
	}

	
	#SCTK_instruction_image>.ripple>div {
		background: #52A441;
	}
	

/* CUSTOM ELEMENT STYLES */

ui-json-view { font-family:dejavu sans mono, monospace; font-size:12px; display:block; background:#fff; border:1px solid #aaa; margin:0 5px; padding:5px; border-radius: 4px;}
ui-json-view br { line-height:0px; }

ui-element.key { color: rgb(136,19,145); }

ui-element.key+.value+.details {
	display:none;
	padding-left:10px;
}

ui-element.key.open+.value {
	display:none;
}

ui-element.key.open+.value+.details {
	display:block;
}

ui-element.key.open+.value+.details+br{
	display:none;
}

ui-element.key::before {
	display:inline-block;
	width:16px;
	font-size:0.7em;
	color: #444;
	content: " ";
	text-align:center;
}

ui-element.key.expand::before {
	content: "⯈";
}

ui-element.key.open::before { content: " ⯆ "; }



ui-element.key::after {
	display:inline-block;
	content: ":";
	color: #444;
}

ui-element.string { color: rgb(196,25,22); }
ui-element.number { color: rgb(13,24,170); }
ui-element.boolean { color: rgb(13,24,170); }