plane{
	--lt-right-context-sz: 0;
}
:root{
	--lt-right-context-sz: "shit";
}
html{
	--lt-right-context-sz: "help";
}


plane, plane button, plane input, plane select {
	font-family: 'Roboto Condensed',sans-serif;
	letter-spacing: -.05em;
}

:fullscreen body2, :full-screen body2, :-webkit-full-screen body2 {
	width: 100vw;
	height: 100vh;
}




.-ui-text-selectable, view-text, view-detail{
	user-select: auto;
	-webkit-user-select: auto;
	-moz-user-select: auto;
}

.-ui-scrollable {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: auto;
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}





button, label {
	font-size: 1rem;
	border: none;
    cursor: pointer;
    text-align: left;
	text-transform: none;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

a {
	color: inherit;
}

screen-head{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	
	position: sticky;
	position: -moz-sticky;
	position: -webkit-sticky;
}


modal-plane, focus-plane{
	cursor: pointer;
	content: " "; /* unicode non-breakable space */
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9997;

	font-size: 1.4rem;
	
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

modal-plane{
	background-color: rgba(25%,25%,25%,.45);
	pointer-events: auto;
	pointer-events: all;
}

focus-plane{
	background-color: rgba(25%,25%,25%,.35);
	pointer-events: none;
}

modal-plane.ui-blocker-focused{
	border-top: calc(1em + var(--extra-pad-top)) solid rgba(25%,25%,25%,.45);
}

modal-plane.ui-blocker-exclusive{
	border-top: calc(1em + var(--extra-pad-top)) solid rgba(25%,25%,25%,.35);
	background-color: rgba(25%,25%,25%,.05);
}

view-text{
}

view-detail:not(:empty){
}

modal-screen{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;

	z-index: 9998;
	color: #000;
	background: #ececec;
	
	pointer-events: none;
}

modal-head{
	background-color: #ccc;
	color: #333;
	
	pointer-events: auto;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

modal-head.-lt-modal-center-box{
	position: sticky;
	position: -moz-sticky;
	position: -webkit-sticky;
	top: 0;
}

modal-head.-lt-context-menu{
	
}

modal-head.-lt-context-pane{
	
}

modal-body{
	display: block;
	flex: 1;
	flex-grow: 1;
	width: 100%;
	overflow: auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	place-items: start end;
}






modal-screen.-lt-modal-center-box{
	display: flex;
	position: relative;
	margin: auto;

	width: 55%;
	min-width: 15em;
	max-width: 96vh;

	height: unset;
	min-height: 12em;
	max-height: 90vw;

	justify-content: center;
	align-items: center;

	zoom: 0.9;
}
modal-body.-lt-modal-center-box {
	padding: 1em;
	padding: 2vmin;
}
modal-body.-lt-modal-center-box > view-commands {
	grid-row: 3;
	justify-content: space-between;
	margin: 1em .75em 0 .75em;
	margin: 1vmin 0 0 0;
}









modal-screen.-lt-context-menu{
	position: absolute;
	top: var(--extra-pad-top);
	bottom: var(--extra-pad-btm);
	height: calc(100% - var(--extra-pad-hgt));
	right: 0;
	max-width: 80vw;
	min-width: 13em;
	width: 0;
	margin: 0 0 0 auto;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

modal-body.-lt-context-menu {
	place-items: unset;
	flex-flow: column;
	margin: 0;
	padding: 0 .1em;
	width: 100%;
	max-width: unset;
	overflow: hidden;
	overflow-y: auto;
}
modal-body.-lt-context-menu > view-commands {
	place-items: unset;
	flex-flow: column;
	margin: 0;
	max-width: unset;
	overflow: visible;
}
modal-body > user-block, modal-body > device-block, modal-body > group-block, span > user-block, span > device-block, span > group-block {
	margin: .5em .2em .2em .2em;
}
modal-body.-lt-context-menu > view-commands>button {
	display: block;
	align-self: stretch;
}
modal-body.-lt-context-menu > view-commands>radio, modal-body.-lt-context-menu > view-commands>checkbox {
	display: flex;
	flex-direction: column;
	
	display: block;
	align-self: stretch;
}
modal-body.-lt-context-menu > view-commands > spacer {
	display: block;
	height: 1em;
}
modal-body.-lt-context-menu>spacer{
	display: block;
	min-height: 1em;
	flex: 1;
}








modal-screen.menu{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	max-width: 80vh;
	min-width: 15em;
}
modal-body.menu > view-commands {
	display: flex;
	place-items: unset;
	flex-flow: column;
}
modal-body.menu > view-commands > button {
	display: block;
	width: 100%;
	text-align: left;
}



modal-head::before{
	display: inline-block;
	flex: none;
	order: 0;
	height: 100%;
	overflow: hidden;
	flex-shrink: 2;
	text-overflow: ellipsis;
	padding: 0 .2em 0 1.7em;
	/* align-content: center; */
	/* float: left; */
	text-align: left;
	content: " "; /* unicode non-breakable space */
	font-size: 1.5em;
	line-height: 145%;
	vertical-align: middle;
	align-self: center;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(keenetic-fill.svg);
	filter: brightness(0) invert(1);
}

modal-head.-ui-alert::before{
	background-image: url(i/icn-warning.svg);
}



modal-head.-ui-info::before{
	background-image: url(i/icn-info.svg);
}




modal-head.-ui-error::before{
	background-image: url(i/icn-error.svg);
}



modal-head.-ui-notification::before{
	background-image: url(i/icn-notification_important.svg);
}


modal-head > header-logo{
	display: block;
	order: 0;
	flex: none;
	margin: auto .2em 0 0;
	height: 2em;
	width: 2em; 
	align-content: center;
	text-align: left;
	padding: .2em;
	
	display: none;
}

header-body{
	display: flex;
	position: relative;
	font-size: .5rem;
	height: 2em;
	padding: .2em;
	margin: auto 0 0 0;
	padding: .0em .0em;
	margin: auto .2em 0 .2em;
	order: 1;
	flex: 1;
}

.-mpa-text-input{
	font-size: var(--lt-weighted-sz);
	font-size: 1.1em;
	line-height: 100%;
	height: 100%;
	width: 100%;
	max-width: 19em;
	caret-color: currentColor;
	padding: .2em .75em;
} 


input.-mpa-search-input{
	max-width: 15em;
	padding: .2em 1.55em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
	background-position-x: .1em;
	background-position-y: .05em;
	background-image: url(i/icn-search.svg);
}

@media only screen and (max-width:12rem) {
	input.-mpa-search-input{
		max-width: 19em;
	}
}

header-body > input.-mpa-search-input {
	caret-color: white;
	margin-left: auto;
	filter: brightness(0) invert(1);
}
header-body > input.-mpa-search-input + span{
	filter: brightness(0) invert(1);	
}
input.-mpa-search-input::placeholder, login-local > input::placeholder {
	color: transparent;
}
input.-mpa-search-input:not(:placeholder-shown) + span{
	display: block;
	position: absolute;
	right: .25em;
	top: 0;
	width: 2em;
	height: 2em;
	font-size: .5rem;
	background-size: contain;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(i/icn-cancel.svg);
}
input.-mpa-search-input:placeholder-shown + span, login-local > input:placeholder-shown + span {
	display: none;
}

login-local > input:placeholder-shown + span{
	display: block;
	position: relative;
	line-height: 200%;
	height: 0;
	width: 100%;
	font-size: .5rem;
	pointer-events: none;
	text-align: left;
	opacity: .5;
	overflow: visible;
}

login-local > input:placeholder-shown + span::before{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2em;
	margin: .15em 2em 0 .5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: calc(100% - 2.5em);
	font-style: italic;
	padding-right: .2em;
}

input[type="search"].-mpa-search-input{
	padding-left: 1em;
	padding-right: .2em;
	background-position-x: .1em;
	background-position-y: .05em;
	background-image: url(i/icn-search.svg);
	filter: brightness(0) invert(1);
}


input.-mpa-modal-input{
	display: block;
	color: currentColor;
	margin: 1em auto;
	background-color: white;
}



header-body:empty::before{
	content: " "; /* unicode non-breakable space */
}

header-side, title-side{
	display: block;
	margin: auto 0 0 0;
	order: 2;
	flex: none;
	height: 2em; 
	white-space: nowrap;
}

title-side{
	height: 2em;
	margin: 0 0 0 .1em;
}

header-side>button, header-logo>input, title-logo>button, title-side>button{
	display: inline-block;
	position: relative;
	font-size: 0.5rem;
	height: 2em; 
	width: 2em;
	background-color: transparent;
	align-content: center;
	vertical-align: middle;
	text-align: right;
	overflow: visible;
	color: inherit;
}

title-logo{
	font-size: calc(.75 * var(--lt-readable-sz));
	margin: 0 .25em 0 0;
	background-color: currentColor;
	opacity: .5;
	border-radius: .5em;
	line-height: 50%;
	pointer-events: none;
}

title-logo > button{
	font-size: calc(.75 * var(--lt-readable-sz));
	filter: brightness(0) invert(1);
}

header-logo>input::before, header-side>button::before, title-logo>button::before, title-side>button::before{
	display: inline-block;
	margin: 0;
	height: 100%;
	width: 100%;
	align-content: center;
	text-align: right;
	content: " "; /* unicode non-breakable space */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(keenetic-fill.svg);
	align-self: center;
	filter: brightness(0) invert(1);
}

title-logo > button::before{
	background-size: 80%;
}


title-side > button{
	opacity: .33;
}

title-side > button::before{
	filter: brightness(0) invert(.2);
}

header-side > button:hover, title-side>button:hover{
	opacity: .55;
}
header-side>button:active, header-side>button:focus, title-side>button:active{
	filter: invert(1);
}



screen-body{
	grid-row: 2;
	align-content: center;
	align-items: center;
	
	-height: 100%;
	-min-height: calc(100% - 1.2rem);
}




modal-screen{
}

screen-body>view-text{
	font-size: 140%;
}


screen-body>view-detail, modal-body>view-text{
	font-size: 120%;
}

modal-body>view-detail{
	font-size: 100%;
}

modal-body>view-image{
	width: calc( 33vw / 2 + 7vh / 2 );
	height: calc( 30vh / 2 + 7vw / 2 );
	-max-width: 55%; /* ff layout jumps */
	-max-height: 55%; /* ff layout jumps */
	-margin: 1em auto 1em auto;
}

modal-body>view-text{
	max-width: 30em;
}

view-commands.-mpa-minimized-window-list:empty {
	display: none;
}




















index-menu{
	display: block;
}

index-list-container{
	display: block;
	min-height: calc(100% - 2.4em);
	margin: auto;
	max-width: 100%;
}

index-list{
	margin: .5em auto;
	flex: 1;
	justify-content: center;
	justify-content: space-evenly;
	place-items: start end;
	
	display: grid;
	gap: .25em;
	grid-template-columns: auto;
	grid-template-columns: repeat(auto-fill, minmax(17em, max-content));
	grid-template-columns: repeat(auto-fill, minmax(min-content, 19em));
}
index-header, index-subheader {
	display: block;
	display: flex;
	flex-flow: row;
	position: sticky;
	position: -moz-sticky;
	position: -webkit-sticky;
	top: 0;
	left: 0;
	max-width: 100vw;
	grid-column: 1 / -1;
	align-items: center;
	z-index: 2;
}

index-header > title-side, index-subheader > title-side {
	flex: 0;
}


index-header > span {
	font-size: .9rem;
	font-size: calc( 1.5 * var(--lt-weighted-sz) );
}

index-subheader > span {
	font-size: .65rem;
	font-size: calc( 1.2 * var(--lt-weighted-sz) );
}

index-header > span, index-subheader > span{
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	min-width: 2em;
	line-height: 200%;
}

index-list > p {
	display: block;
	width: 100%;
	grid-column: 1 / -1;
	opacity: .5;
}









user-block, device-block, group-block{
	display: grid;
	padding: 0.3em 0 0.3em 0;
	margin: 0 .4em 0 .4em;
	font-size: .6rem;
	font-size: calc( ( .5rem + 1.5 * var(--lt-readable-sz) ) / 2 );
	line-height: 1.2em;

	white-space: nowrap;
	text-align: left;
}


user-block, device-block, group-block{
	grid-template-columns: 2.2em 1fr;
	grid-template-rows: 1.3em 1em .8em;
}

index-list>device-block, index-list>user-block{
	padding: .2em .1em .2em .1em;
	margin: .2em auto .4em auto;
	width: 100%;
	max-width: 91vw;
	grid-template-columns: 2.2em 1fr 1.9em;
	grid-template-rows: 1.2em .9em .9em;
}

user-block::before, device-block::before, group-block::before{
	content: " "; /* unicode non-breakable space */
	grid-column: 1;
	grid-row: 1 / -1;
	margin: .1em .1em 0 .1em;
	min-height: 2em;
	width: 2em;
	opacity: 0.5;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
}

user-block::before{
	background-size: 75%;
	background-image: url(f/user-demo-wink.svg);
}

device-block::before {
	background-size: 90%;
	background-image: url(i/icon-img-router.svg);
}

group-block::before {
	background-size: 90%;
	background-image: url(i/icn-group.svg);
}

index-list > user-block::after, index-list > device-block::after{
	content: " "; /* unicode non-breakable space */
	grid-column: 3;
	grid-row: 1 / -1;
	margin: .5em 0 0 .2em;
	height: 2em;
	width: 1.7em;
	opacity: 0.5;
	background-size: 2em;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(i/icon-cmd-close-right.svg);
}



user-block>user-alias, device-block>device-alias, group-block>group-name{
	display: block;
	grid-column: 2;
	grid-row: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: scale(1, 1.125);
}


user-block>user-email, user-email.-ui-email{
	display: block;
	grid-column: 2;
	grid-row: 2;
	opacity: .75;
	font-size: .75em;
	line-height: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

user-block>user-email::before, user-email.-ui-email::before{
	content: " "; /* unicode non-breakable space */
	height: 1em;
	padding: 0 0 0 1.3em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(i/icn-mail_outline.svg);
}

user-block>user-alias:empty::before{
	opacity: .5;
	content: "Inco Gnito";
}

user-block>user-email:empty::after, user-email.-ui-email:empty::after{
	opacity: .5;
	content: "N/A";
}

user-block>user-email.google::before{
	background-image: url(social-google.svg);
}
user-block>user-email.fb::before, user-block>user-email.facebook::before{
	background-image: url(social-facebook.svg);
}
user-block>user-email.demo::before{
	background-image: url(keenetic-fill.svg);
}





group-block>group-name:empty::before, button[mpa-group]:empty::before, span[mpa-group]:empty::before{
	opacity: .75;
	content: "My Devices";
}





device-block>device-alias:empty::before{
	opacity: .5;
	content: "Keenetic Incognito";
}


device-block>device-token{
	display: block;
	grid-column: 2;
	grid-row: 2;
	opacity: .75;
	font-size: .75em;
	line-height: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
}
device-block>device-token::before{
	content: " "; /* unicode non-breakable space */
	height: 1em;
	padding: 0 0 0 1.3em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(i/icl-unknown-icon.svg);
}
device-block>device-token:empty::after{
	opacity: .5;
	content: "N/A";
}

user-block>user-state, device-block>device-state{
	display: block;
	grid-column: 2;
	grid-row: 3;
	opacity: .75;
	font-size: .75em;
	line-height: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
}

user-block>user-state:empty::before, device-block>device-state:empty::before{
	opacity: .5;
	content: "Some important state values";
}


device-block>user-email.unknown::before{
	background-image: url(social-google.svg);
}
device-block>user-email.online::before{
	background-image: url(social-facebook.svg);
}
device-block>user-email.offline::before{
	background-image: url(keenetic-fill.svg);
}








view-commands {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	align-items: center;
	justify-content: center;
	place-items: start end;
}

view-commands {
	flex: none;
}

view-commands>button, view-commands>radio, view-commands>checkbox{
	font-size: .6rem;
	line-height: 1.5em;
	margin: .2em;
}

view-commands>button, label.ui-radio, label.ui-checkbox, input.ui-radio + label, input.ui-checkbox + label {
	font-size: .6rem;
	line-height: 1.5em;
	padding: 0.2em 0.6em 0.2em 0.4em;
	white-space: nowrap;
}


view-commands>notice {
	max-width: 20em;
}

view-commands>button::before {
	font-size: 0.9em;
	height: 1.2em;	
	padding: 0 0 0 1.5em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
}

view-commands>button::before {
	content: " "; /* unicode non-breakable space */
	background-image: url(i/icl-unknown-icon.svg);
}

view-commands>button[-ui-more]::after {
	content: "…";
}


view-commands>button:hover::before {
	filter: brightness(0);
}
view-commands>button:active::before {
	filter: brightness(0) invert(1);
}


.-lt-hide, .ui-hide{
	display: none;
}

.ui-highlight, .ui-focused, .ui-exclusive{
	z-index: 9998;
}

.ui-highlight, .ui-focused{
	outline: 2pt solid #dff;
}

.ui-exclusive{
	pointer-events: none;
	
	outline-color: rgba(15%,15%,15%,.5);
	outline-width: calc(100vh + 100vw);
	outline-offset: .05rem;
	outline-style: solid;
}



@media (min-aspect-ratio: 7/6) {
	view-commands>button {
	}

	modal-screen.-lt-context-menu{
		max-width: 80vw;
		min-width: 11em;
	}
	modal-screen.-lt-modal-center-box{
		width: 50%;
		width: fit-content;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		min-width: 17em;
		max-width: 80vw;
		min-height: 5em;
		max-height: 95vh;
	}
}

@media (max-aspect-ratio: 7/4) {
	view-commands>button {
	}
}

@media (max-aspect-ratio: 6/7) {
	view-commands>button, view-commands>radio, view-commands>checkbox {
		margin: 0.2em 0.2em;
	}
	view-commands>button, label.ui-radio, label.ui-checkbox {
		padding: 0.2em 0.3em 0.2em 0.3em;
	}
	view-commands>button::before {
		padding: 0 0 0 1.4em;
	}
	
	modal-head, #modal-header{
	}
	modal-head::before{
	}

	modal-screen.-lt-context-menu{
		max-width: 70vw;
		min-width: 11em;
	}
	modal-screen.-lt-modal-center-box{
		width: 75%;
		max-width: 90vh;
		min-width: 12em;
		max-height: 90%;
		min-height: 5em;
	}
	view-text {
		min-height: 0;
		width: 100%;
	}
}



/**
 * coarse click-wise resolution 
 */
@media only screen and (max-width:9rem) {
	modal-screen.-lt-modal-center-box {
		width: 90%;
	}
}
@media only screen and (max-height:9rem) {
	modal-screen.-lt-modal-center-box {
		width: 75%;
	}
}

/**
 * constrained click-wise resolution 
 */
@media only screen and (max-width:6rem), only screen and (max-height:6rem) {
	modal-screen.-lt-modal-center-box {
		zoom: .9;
	}
	modal-head.-lt-modal-center-box {
		zoom: .9;
	}
	modal-body.-lt-modal-center-box {
		padding: .1em;
		zoom: .9;
	}
}

/**
 * high resolution click-wise resolution 
 */
@media only screen and (min-width:19rem) {
	.-lt-right-plane{
		display: block;
	}
}












screen.javascript>screen-body>view-image{
	background-image: url(i/icl-no-javascript.svg);
}


screen.obsolete>screen-body>view-image{
	background-image: url(i/icl-no-javascript.svg);
}


screen.connecting>screen-body>view-image{
	background-image: url(i/network-activity.svg);
}



screen.offline>screen-body>view-image{
	background-image: url(i/icl-no-connect.svg);
}




screen.unknown>screen-body>view-image{
}





view-commands > button.button-drop-account::before{
	background-image: url(i/icn-delete_forever.svg);
}
modal-head.modal-drop-account-confirm::before{
	background-image: url(i/icn-delete_forever.svg);
}
view-image.modal-drop-account-confirm{
	background-image: url(i/icn-delete_forever.svg);
}



view-commands > button.button-create-group::before{
	background-image: url(i/icon-cmd-create-group.svg);
}
modal-head.modal-create-group::before{
	background-image: url(i/icon-cmd-create-group.svg);
}
view-image.modal-create-group{
	background-image: url(i/icon-cmd-create-group.svg);
}



view-commands > button.button-link-device::before{
	background-image: url(i/icon-cmd-link-device.svg);
}
modal-head.modal-link-device-confirm::before{
	background-image: url(i/icon-cmd-link-device.svg);
}
view-image.modal-link-device-confirm{
	background-image: url(i/icon-img-router.svg);
}



view-commands > button.button-edit-user-profile::before{
	background-image: url(i/icon-cmd-change-user-icon.svg);
}





view-commands > button.button-edit-app-settings::before{
	background-image: url(i/icn-settings_applications.svg);
}






view-commands > button.button-privacy-policy::before{
	background-image: url(i/icon-cmd-privacy-policy.svg);
}



view-commands > button.button-contact-us::before{
	background-image: url(i/icn-feedback.svg);
}




view-commands > button.button-try-manage::before{
	background-image: url(i/icn-input.svg);
}





view-commands > button.button-try-manage-blank::before{
	background-image: url(i/icn-launch.svg);
}
modal-head.modal-open-management::before{
	background-image: url(i/icn-launch.svg);
}
view-image.modal-open-management{
	background-image: url(i/icn-launch.svg);
}





view-commands > button.button-start-wps::before{
	background-image: url(i/icn-wifi_tethering.svg);
}





view-commands > button.button-reboot-device::before{
	background-image: url(i/icn-settings_backup_restore.svg);
}






view-commands > button.button-do-close-management::before{
	background-image: url(i/icn-cancel_presentation.svg);
}







view-commands > button.button-do-minimize-management::before{
	background-image: url(i/icn-save_alt.svg);
}






view-commands > button.button-invalidate-session::before{
	background-image: url(i/icn-cloud_off.svg);
}



button.button-reset::before{
	background-image: url(i/icn-power_settings_new.svg);
}
modal-head.modal-session-reset-confirm::before{
	background-image: url(i/icn-power_settings_new.svg);
}
view-image.modal-session-reset-confirm{
	background-image: url(i/icn-power_settings_new.svg);
}




button.button-leave-group::before{
	background-image: url(i/icn-remove_circle.svg);
}
modal-head.modal-leave-group-confirm::before{
	background-image: url(i/icn-remove_circle.svg);
}
view-image.modal-leave-group-confirm{
	background-image: url(i/icn-remove_circle_outline.svg);
}




button.button-drop-device::before{
	background-image: url(i/icn-remove_circle_outline.svg);
}
modal-head.modal-drop-device-confirm::before{
	background-image: url(i/icn-remove_circle_outline.svg);
}
view-image.modal-drop-device-confirm{
	background-image: url(i/icn-remove_circle_outline.svg);
	display: none;
}


button.button-debug::before{
	background-image: url(i/icon-cmd-debug.svg);
}
modal-head.modal-debug-menu::before{
	background-image: url(i/icon-cmd-debug.svg);
}
button.btn-header-debug::before{
	background-image: url(i/icon-cmd-debug.svg);
}






button.btn-header-language::before{
	background-image: url(i/icon-cmd-language.svg);
}
button.button-language::before{
	background-image: url(i/icon-cmd-language.svg);
}
modal-head.modal-language-menu::before{
	background-image: url(i/icon-cmd-language.svg);
}

button.button-restore-window-icon::before{
	background-image: url(i/icn-swap_horiz.svg);
}
button.button-group-select-icon::before{
	background-image: url(i/icn-open_in_browser.svg);
}
button.button-index-mode-menu::before{
	background-image: url(i/icn-open_in_browser.svg);
}
modal-head.-mpa-index-context-menu::before, modal-head.-mpa-index-mode-menu::before{
	background-image: url(i/icn-open_in_browser.svg);
}





view-commands > button.button-retry{
	background-color: #efe;
	color: #050;
}
button.button-retry::before{
	background-image: url(i/icn-refresh.svg);
}





view-commands > button.local-login-have-code{
	background-color: #fe9;
	color: #521;
}
view-commands > button.local-login-have-code::before{
	background-image: url(i/icn-security.svg);
	background-image: url(i/icn-assignment_turned_in.svg);
}


view-commands > button.local-login-resend{
	background-color: #fe9;
	color: #521;
}
view-commands > button.local-login-resend::before{
	background-image: url(i/icn-settings_backup_restore.svg);
}


view-commands > button.local-login-reset{
	background-color: #fe9;
	color: #521;
}
view-commands > button.local-login-reset::before{
	background-image: url(i/icn-settings_backup_restore.svg);
}



view-commands > button.button-clear{
	background-color: #eef;
	color: #005;
}
view-commands > button.button-clear::before{
	background-image: url(i/icon-cmd-clear.svg);
}
button.button-clear::before{
	background-image: url(i/icon-cmd-clear.svg);
}
modal-screen.-lt-context-menu button.button-clear::before{
	background-image: url(i/icon-cmd-close-right.svg);
	background-image: url(i/icn-keyboard_tab.svg);
}




view-commands > button.button-close{
	background-color: #eef;
	color: #005;
}
view-commands > button.button-close::before{
	background-image: url(i/icon-cmd-close.svg);
}
button.button-close::before{
	background-image: url(i/icon-cmd-close.svg);
}





modal-head.-mpa-account-menu::before{
	background-image: url(i/icn-person.svg);
}



modal-head.-mpa-person-menu::before{
	background-image: url(i/icn-person.svg);
}


modal-head.-mpa-group-menu::before{
	background-image: url(i/icn-group.svg);
}



modal-head.-mpa-device-menu::before{
	background-image: url(i/icon-img-router.svg);
}


modal-head.-mpa-direct-menu::before{
	background-image: url(i/icn-cloud_queue.svg);
}




button.button-login::before{
	background-image: url(i/icn-person.svg);
}




input.chk-header-menu::before{
	background-image: url(header-menu.svg);
}


button.button-index-default::before{
	background-image: url(i/icn-home.svg);
}
button.button-index-groups::before{
	background-image: url(i/icn-group.svg);
}
button.button-index-devices::before{
	background-image: url(i/icn-router.svg);
}
button.button-index-people::before{
	background-image: url(i/icn-person.svg);
}



title-side > button.button-group-focus::before{
	background-image: url(i/icn-launch.svg);
	background-image: url(i/icn-open_in_browser.svg);
}

title-side > button.button-index-mode::before{
	background-image: url(i/icon-cmd-close-right.svg);
}

title-side > button.button-index-unfocus::before{
	background-image: url(i/icn-cancel.svg);
}

title-side > button.button-group-options::before{
	background-image: url(i/icon-cmd-change-user-name.svg);
	background-image: url(i/icon-cmd-close-right.svg);
}




screen.initial>screen-body>view-image{
	background-image: url(i/network-activity.svg);
}
screen.initial.ui-inactive>screen-body>view-image{
	background-image: url(i/icn-hourglass_full.svg);
}


screen.error>screen-body>view-image{
	background-image: url(i/icon-img-error.svg);
}

screen.login>screen-body{
	display: grid;	
	position: relative;
	overflow-y: auto;
}



screen.index{
	align-items: start;
}
screen.index>screen-body{
	display: block;	
	overflow-x: hidden;
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}



screen.direct{
	align-items: start;
}






screen-body > form.login-form{
	display: block;
	margin: 0;
	padding: 0;
}



login-form{
	display: block;
	position: relative;
	padding: 1em 1%;
	text-align: center;
	align-content: center;
	max-width: 25em;
}

login-form::before{
	display: block;
	font-size: 150%;
	line-height: 150%;
	width: 85%;
	margin: 0 auto;
	text-align: left;
}

login-local{
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 85%;
	margin: 0 auto;
}

login-local > *{
	width: 100%;
}

login-local > view-text{
	text-align: justify;
	text-align: left;
	order: 2;
}

login-local > user-email{
	font-size: .6rem !important;
}

login-local > view-commands{
	justify-content: space-between;
	justify-content: stretch;
	align-items: center;
	flex-wrap: nowrap;
	order: 3;
}

login-local > view-commands > button {
	flex-grow: 1;
	flex-shrink: 1;
	zoom: .85;
}

login-form:not(.initial) > login-local.initial{
	display: none;
}

login-form:not(.confirm) > login-local.confirm{
	display: none;
}

login-form:not(.validate) > login-local.validate{
	display: none;
}

login-form:not(.authenticate) > login-local.authenticate{
	display: none;
}


login-form:not(.initial) > login-or-social, login-form:not(.initial) > login-social{
	display: none;
}

-mpa-enter-email-or-mobile{
	
}

-mpa-enter-validation-and-password{
	
}

login-social{
	display: flex;
	flex-wrap: wrap;
	max-width: 80%;
	margin: auto;
	font-size: .4rem;
	align-items: center;
	justify-content: center;
	place-items: start end;
}

input.login-input, login-local > user-email{
	height: 1rem;
	vertical-align: middle;
	font-size: .5rem;
	line-height: 110%;
	margin-top: .05rem;
	padding: .1rem .2rem;
	border-radius: .25rem;
	border: .1em solid;
	border-color: #999 #ddd #ddd #999;
	-order: 1;
}
input.login-input:focus{
	box-shadow: 0 0 .125em cyan;
}
login-local.initial > input.login-input{
	padding: .1rem 1rem .1rem .2rem;
}

login-local.initial > input.login-input:placeholder-shown{
	padding-right: .2rem;
}

button.local-login-next, button.local-login-enter, button.local-login-send-code, button.local-login-validate, button.local-login-authenticate{
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	width: 2em;
	height: 2em;
	border: none;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	order: 2;
	flex-grow: 0;
	flex-shrink: 0;
	zoom: 1;
}

button.local-login-enter{
	position: absolute;
	width: 1rem;
	height: 1rem;
	right: .05rem;
	top: .05rem;
	z-index: 3;
}

button.local-login-next::before, button.local-login-authenticate::before, button.local-login-validate::before, button.local-login-enter::before, button.local-login-send-code::before{
	content: unset !important;
}

button.local-login-next{
	background-image: url(i/icn-exit_to_app.svg);
}
button.local-login-validate{
	background-image: url(i/icn-exit_to_app.svg);
}
button.local-login-authenticate{
	background-image: url(i/icn-exit_to_app.svg);
}
button.local-login-enter{
	background-image: url(i/icn-keyboard_return.svg);
}
button.local-login-send-code{
	background-image: url(i/icn-send.svg);
}
input.login-input:placeholder-shown + span + button.local-login-enter{
	display: none;
}

login-social > button{
	font-size: .4rem;
	height: 3em;
	width: 3em;
	padding: .3em;
	margin: .2em .4em;
	line-height: 1.5em;
	cursor: poiner;
	border-radius: .25em;
	border-width: .05em;
	border-style: solid;
	border-color: #000;
	background-color: #fff;
}

login-social > button::before{
	content: " "; /* unicode non-breakable space */
	display: block;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(i/icl-unknown-icon.svg);
}

login-social > button.login-inactive{
	opacity: .5;
	filter: grayscale(.75) brightness(1.5);
	cursor: not-allowed;
}
login-social > button.login-ready{
	outline: 0.2em solid #afa;
}

login-social > button.login-facebook::before{
	background-image: url(social-facebook.svg);
}

login-social > button.login-google::before{
	background-image: url(social-google.svg);
}

login-social > button.login-demo::before{
	background-image: url(f/user-demo-wink.svg);
	filter: invert(1) brightness(.25);
	background-image: url(keenetic-fill.svg);
}

login-social > button:hover, login-social > button:focus{
	border-color: transparent;
	outline: 0.2em solid #acf;
	background-color: transparent;
}
login-social > button:active{
	border-color: transparent;
	outline: none;
	background-color: #222;
}
login-social > button:active::before{
	filter: brightness(0) invert(1);
}


login-article{
	display: block;
	padding: 1em 3% 1em 5%;
	line-height: 150%;
	max-width: 55em;
	justify-self: right;
}

login-article>header{
	margin-bottom: 2em;
}

login-article>header>h1{
	display: inline-block;
	vertical-align: baseline;
	margin: 0;
	font-size: 1.2em;
	font-weight: bolder;
	line-height: 100%;
}
login-article>section>h2{
	margin: 0;
	font-size: 1.2em;
	font-weight: bolder;
	line-height: 150%;
}
login-article>header>p{
	display: inline;
}
login-article ul{
	margin-top: 0;
	padding-left: 1.3rem;
}
login-article a::after{
	content: " (" attr(href) ")";
	opacity: 0.6;
}
login-or-social{
	display: block;
	left: 0;
	width: 80%;
	height: 0;
	margin: 2em auto;
	border-bottom: 1pt solid transparent;
	background: repeating-linear-gradient( 90deg, transparent 0%, transparent 15%, #999 15%, #999 35%, transparent 45%, transparent 55%, #999 65%, #999 85%, transparent 85%, transparent 100% );
}

login-or-social::after{
	display: block;
	position: absolute;
	content: " "; /* unicode non-breakable space */
	line-height: 100%;
	text-align: center;
	vertical-align: middle;
	align-content: center;
	width: 80%;
	height: 1.4em;
	margin: -.7em 0 0 -.2em;
	padding: 0;
	color: #CCC;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(login-choose.svg);
}







grid-2-columns{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .1rem;
	margin: .125rem;
}








@media (min-aspect-ratio: 7/6){
	screen.login>screen-body{
		grid-template-columns: 57% .1% 42.9%;
		grid-template-rows: 1fr 2em;
	}
	login-article{
		grid-column: 1;
		grid-row: 1;
		padding: 1em 3% 0 5%;
	}
	login-spacer{
		display: block;
		position: absolute;
		top: 0;
		margin: 15% 0;
		content: " "; /* unicode non-breakable space */
		grid-column: 2;
		grid-row: 1;
		width: 1pt;
		height: 65%;
		border-right: 1pt dotted #CCC;
	}
	screen-body > form.login-form, login-form{
		grid-column: 3;
		grid-row: 1;
	}
}

@media (max-aspect-ratio: 7/4){
	screen.login>screen-body{
		grid-template-columns: 57% .1% 42.9%;
		grid-template-rows: 1fr 2em;
	}
	screen-body > form.login-form, login-form{
		grid-column: 3;
	}
	login-article{
		grid-column: 1;
	}
	login-spacer, login-article2::after{
		display: block;
		top: 0;
		margin: 15% 0;
		content: " "; /* unicode non-breakable space */
		grid-column: 2;
		width: 1pt;
		height: 70%;
		border-right: 1pt dotted #CCC;
	}
}

@media (max-aspect-ratio: 6/7){
	screen.login>screen-body{
		display: grid;
		grid-template-rows: 35% 1fr 60%;
		grid-template-columns: 1fr;
		justify-items: center;

		display: flex;
	}

	screen.login>screen-body::before{
		content: " "; /* unicode non-breakable space */
		order: 0;
		flex-grow: 1;
		flex-shrink: 2;
	}


	screen-body > form.login-form, login-form{
		order: 1;
		flex-grow: 2;
		
		max-width: 23em;
		width: 90%;
		margin: auto;
	
		grid-column: 1;
		grid-row: 1;
	}
	login-spacer, login-article2::before{
		display: block;
		top: 0;
		margin: 0 20%;
		
		order: 2;
		flex: none;
		content: " "; /* unicode non-breakable space */
		grid-column: 1;
		grid-row: 2;
		height: 1pt;
		width: 60%;
		border-bottom: 1pt dotted #CCC;
	}
	login-article{
		grid-column: 1;
		grid-row: 3;
		order: 3;
		flex-grow: 3;
		width: 100%;
	}
}

screen.direct{
}
screen.direct.loading::before{
	display: block;
	content: "";
	position: absolute;
	height: 50%;
	width: 50%;
	left: 25%;
	top: 25%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(i/network-activity.svg);
}
screen-body.direct{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border: none;
	border: .125em solid #39d;
	border-top-width: calc(.125em + var(--extra-pad-top));
	border-bottom-width: calc(.125em + var(--extra-pad-btm));
	background-color: #999;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;

	display: flex;
}
screen-body.direct>iframe{
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	min-height: 100%;
	min-width: 100%;
	border: none;
	outline: none;
	overflow: visible;
	
	position: relative;
	flex: 1;
	flex-grow: 2;
	height: 100%;
	width: 100%;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;
}
screen-body.direct::after{
	display: none;
}



screen.direct>header-side{
	position: absolute;
	display: block;
	text-align: right;
	padding: 0;
	top: 33%;
	right: 0;
	overflow: visible;
	width: 0;
	height: 0;
	z-index: 8999;
	color: #000;
	align-items: center;
	font-size: 48px;
}
screen.direct>header-side>button{
	position: absolute;
	display: flex;
	top: -.4em;
	right: -.2em;
	font-size: 1.2rem;
	line-height: 1em;
	height: 1.5em;
	width: 1.5em;
	align-content: center;
	vertical-align: middle;
	text-align: center;
	background-color: transparent;
	background-color: #39d;
	margin: 0;
	padding: 0 0 0 .2em;
	color: inherit;
	border: 0 solid white;
	border-radius: 50% 0 0 50%;
	opacity: .55;
}
screen.direct>header-side>button:hover, screen.direct>header-side>button:active {
	opacity: 1;
}
screen.direct>header-side>button::before{
	height: 1em;
	width: 1em;
	padding: 0;
	margin: 0;
}
screen.direct>header-side>button.button-direct-context-menu::before{
	background-image: url(i/icn-cloud_queue.svg);
}
screen.direct>header-side.loading>button.button-direct-context-menu::before{
	background-image: url(i/icon-cmd-close.svg);
}




button.button-language-select-icon::before{
	background-image: url(i/icn-language.svg);
}


button.button-language-detect-icon::before{
	background-image: url(i/icn-brightness_auto.svg);
}


button.button-language-en::before{
	content: "English (Generic)";
}

button.button-language-ru::before{
	content: "Русский (Russian)";
}


view-commands > button.button-language::before{
	content: "ABC ᭆ ✍";
}
modal-head.modal-language-menu::before{
	content: "ABC ᭆ ✍";
}


modal-body>view-text>span{
	display: flex;
	flex-direction: column;
	align-items: center; 
	align-items: stretch;
	max-width: 23em;
	margin: 0 auto;
}


checkbox, radio{
	display: grid;
	box-sizing: border-box;
}

view-commands>radio, view-commands>checkbox{
	display: block;
	position: relative;
}

input.ui-radio, input.ui-checkbox{
	position: absolute;
	display: block;
	top: -1px;
	left: -1px;
	width: 0;
	height: 0;
}

label.ui-radio, input.ui-radio + label, label.ui-checkbox, input.ui-checkbox + label {
	display: block;
	font-size: .5rem;
	max-width: 100%;
	padding-left: 2.1em;
	background-size: contain;
	background-size: 1.2em;
	background-repeat: no-repeat;
	background-position: .5em .35em;
}


input.ui-checkbox + label{
	background-image: url(i/icn-check_box_outline_blank.svg);
}
input.ui-checkbox:checked + label{
	background-image: url(i/icn-check_box.svg);
}

input.ui-checkbox.-ui-starred + label{
	background-image: url(i/icn-star_border.svg);
}
input.ui-checkbox.-ui-starred:checked + label{
	background-image: url(i/icn-star.svg);
}

input.ui-checkbox.-ui-favorite + label{
	background-image: url(i/icn-favorite_border.svg);
}
input.ui-checkbox.-ui-favorite:checked + label{
	background-image: url(i/icn-favorite.svg);
}

input.ui-radio + label::before{
	display: block;
	content: " [" attr(class) "] ";
}

input.ui-radio + label{
	background-image: url(i/icn-radio_button_unchecked.svg);
}
input.ui-radio:checked + label{
	background-image: url(i/icn-radio_button_checked.svg);
}


radio.-mpa-look::before{
	display: block;
	margin: .25em 0 0 .25em;
	line-height: 1;
	background-image: url(i/icn-palette.svg);
	font-size: 0.9em;
	height: 1.2em;	
	padding: 0 0 0 1.5em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
}

radio > form > label{
	margin-left: .5em;
}

@media only screen and (max-width: 9rem) and (max-width: 10cm), only screen and (max-width: 7cm) {
	plane, plane button, plane input, plane select {
		letter-spacing: -.07em;
	}
	
	
	login-form{
		padding: 0;
		width: 100%;
	}

	login-form::before{
		width: unset;
		margin: .2em auto .2em auto;
		text-align: center;
	}

	login-local, login-form::before  {
		width: 99%;
	}
	
	
	login-local > view-commands > button {
		zoom: .75;
	}
}
@media only screen and (max-width: 12rem) and (max-width: 13cm) {
	plane, plane button, plane input, plane select {
		letter-spacing: -.06em;
	}
	
	login-form{
		padding: 0 1%;
		width: 95%;
	}
	
	login-or-social{
		margin: 1.3em auto;
	}
	
	login-social{
		width: unset;
	}
	
	login-local, login-form::before  {
		width: 95%;
	}
	
	login-local > view-commands{
		width: calc(100% + .55rem);
		padding-left: .125rem;
		margin: 0;
	}
	
	login-local > view-commands > button {
		zoom: .8;
	}
}

@media only screen and (min-width: 25rem) and (min-width: 19cm) {

	plane{
		--lt-right-context-sz: calc(5rem + 8vw);
	}
	
	screen{
		width: calc(100% - var(--lt-right-context-sz));
		margin-right: auto;
	}
	
	context-screen{
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: var(--lt-right-context-sz);
		min-width: var(--lt-right-context-sz);
		max-width: var(--lt-right-context-sz);
		margin-left: auto;
		padding-top: var(--extra-pad-top);
		
		z-index: 2;
		pointer-events: auto;
		pointer-events: all;
	}
	screen-head > header-side > * {
		display: none;
	}
	modal-screen.-lt-context-menu{
		width: var(--lt-right-context-sz);
		min-width: var(--lt-right-context-sz);
		max-width: var(--lt-right-context-sz);
		margin-left: auto;
	}

	index-header > span, index-subheader > span{
		font-weight: 600;
	}	
	
	modal-plane.ui-blocker-focused, modal-plane.ui-blocker-exclusive{
		border-right: var(--lt-right-context-sz) solid rgba(25%,25%,25%,.5);
	}
	
	screen.direct>header-side{
		display: none;
	}
	
	login-local, login-form::before{
		width: 80%;
	}
}


@media only screen and (min-width: 37rem) and (min-width: 21cm) {
	plane, plane button, plane input, plane select {
		letter-spacing: -.04em;
	}
	
	index-header > span, index-subheader > span {
		letter-spacing: -.01em;
	}
	
	login-local > view-commands > button {
		zoom: 1;
	}
	
	login-local, login-form::before  {
		width: 66%;
	}
	
}


@media only screen and (max-height: 8rem) and (max-height: 9cm) {
	plane, plane button, plane input, plane select {
		letter-spacing: -.07em;
	}
	
	login-article{
		line-height: 120%;
		padding-top: .25em;
	}
	login-article>header{
		margin-bottom: .5em;
	}
	screen-body::after{
		margin-top: .75em;
	}
}

@media only screen and (max-height: 13rem) and (max-height: 11cm) {
	plane, plane button, plane input, plane select {
		letter-spacing: -.06em;
	}
	
	login-article>header{
		margin-bottom: 1em;
	}
}

plane.-lt-wide-layout > screen{
	width: calc(100% - var(--lt-right-context-sz));
	margin-right: auto;
}


	
plane.-lt-wide-layout > modal-plane.ui-blocker-focused, plane.-lt-wide-layout > modal-plane.ui-blocker-exclusive{
	border-right: var(--lt-right-context-sz) solid rgba(25%,25%,25%,.75);
}

plane.-lt-wide-layout > context-screen{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: var(--lt-right-context-sz);
	min-width: var(--lt-right-context-sz);
	max-width: var(--lt-right-context-sz);
	margin-left: auto;
	
	z-index: 2;
	pointer-events: auto;
	pointer-events: all;
}

context-body > modal-head {
	position: sticky;
	position: -moz-sticky;
	position: -webkit-sticky;
	top: 0;
}

context-body:not(.-lt-element-focused) > .-lt-context-pane.-mpa-focus-info-menu{
	display: none;
}

context-body:not(.-mpa-has-account) > .-lt-context-pane.-mpa-account-menu{
	display: none;
}

context-body:not(.-mpa-has-device) > .-lt-context-pane.-mpa-device-menu{
	display: none;
}

context-body:not(.-mpa-has-group) > .-lt-context-pane.-mpa-group-menu{
	display: none;
}

context-body:not(.-mpa-has-person) > .-lt-context-pane.-mpa-person-menu{
	display: none;
}

context-body:not(.-mpa-index-mode) > .-lt-context-pane.-mpa-index-context-menu, context-body.-mpa-has-header > .-lt-context-pane.-mpa-index-context-menu{
	display: none;
}

context-body:not(.-mpa-index-mode) > .-lt-context-pane.-mpa-index-mode-menu, context-body:not(.-mpa-has-header) > .-lt-context-pane.-mpa-index-mode-menu{
	display: none;
}



context-body:not(.-mpa-direct-mode) > .-lt-context-pane.-mpa-direct-menu{
	display: none;
}

context-body:not(.-mpa-index-mode) > modal-body.-lt-context-pane > view-commands > .-mpa-index-menu{
	display: none;
}













@keyframes fade {
    0% { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-right {
    0% { right: -100vw; }
    to { right: 0; }
}



screen.ui-disappear{
	animation-name: fade;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
	animation-delay: 475ms;
	animation-duration: 100ms;
	animation-direction: reverse;
}
screen.ui-appear {
	animation-name: fade;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
	animation-delay: 450ms;
	animation-duration: 150ms;
}


focus-plane.ui-disappear{
	transition-timing-function: ease-out;
	transition-property: opacity;
	transition-duration: 155ms;
	transition-delay: 15ms;
	opacity: 0;
}

focus-plane.ui-appear{
	animation-name: fade;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 15ms;
	animation-duration: 155ms;
}


modal-plane.ui-disappear{
	background-color: rgba(25%,25%,25%,.75);
	box-shadow: none;
	
	transition-timing-function: ease-out;
	transition-property: opacity, transform;
	transition-duration: 175ms;
	transition-delay: 10ms;
	opacity: 0;
	transform: scale(0,0);
}

modal-plane.ui-disappear2{
	background-color: rgba(25%,25%,25%,.75);
	box-shadow: none;
	
	transition-timing-function: ease-out;
	transition-property: opacity, top, bottom, left, right;
	transition-duration: 175ms, 160ms, 160ms, 160ms, 160ms;
	transition-delay: 35ms, 2ms, 2ms, 2ms, 2ms;
	opacity: 0;
	top: 50%;
	bottom: 50%;
	left: 30%;
	right: 30%;
}

modal-plane.ui-appear{
	animation-name: fade;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 15ms;
	animation-duration: 155ms;
}




modal-screen.-lt-modal-center-box.ui-disappear{
	transition-timing-function: ease-out;
	transition-property: opacity;
	transition-duration: 175ms;
	transition-delay: 5ms;
	opacity: 0;
}
modal-screen.-lt-modal-center-box.ui-disappear2{
	transition-timing-function: linear;
	transition-property: opacity;
	transition-duration: 175ms;
	transition-delay: 50ms;
	opacity: 0;
}
modal-screen.-lt-modal-center-box.ui-appear{
	animation-name: fade;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-delay: 15ms;
	animation-duration: 155ms;
}




modal-screen.-lt-context-menu.ui-disappear{
	transition-timing-function: ease-in;
	transition-property: right, opacity;
	transition-duration: 225ms, 10ms;
	transition-delay: 25ms, 200ms;
	right: -80vw;
	opacity: 0;
}
modal-screen.-lt-context-menu.ui-appear{
	animation-name: slide-right;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-delay: 5ms;
	animation-duration: 165ms;
}