.wsa-desktop {	
	font-family:'Open Sans Condensed';	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
	overflow:hidden;	
}
.wsa-desktop-top-layer {
	position:absolute;
	z-index:1;
}
.wsa-desktop.cover {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;		
}
.wsa-desktop input[type="text"] {
	border:0;
	margin:0;
	padding:0;
	outline:0;	
	width:100%;
	height:100%;		
}
.wsa-desktop .disabled {
	pointer-events:none;
	opacity:0.4;
}
.wsa-desktop .selectable {
	-webkit-touch-callout: '';
    -webkit-user-select: ''; 
     -khtml-user-select: ''; 
       -moz-user-select: ''; 
        -ms-user-select: ''; 
            user-select: '';
}
.wsa-center {
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
/* ---------------------*/ 
/* --- multipanel ----- */
/* ---------------------*/ 
.wsa-multipanel-tabs {
	position:relative;	
	display:table;
	left:8px;
	top:0px;	
	border-top:1px solid black;	
	font:11px arial;	
	cursor:default;
	height:16px;
	width:auto;
}
.wsa-multipanel-tabs > span {
	display:table-cell;
	padding:0px 8px;
	line-height:16px;
	height:16px;
	background:gainsboro;
}
.wsa-multipanel-tabs > span:first-child {
	border-left:1px solid black;
}
.wsa-multipanel-tabs > span:last-child {
	border-right:1px solid black;
}

.wsa-multipanel-tabs > span:not(:first-child) {
	border-left:1px solid silver;
}
.wsa-multipanel-tabs .hovered-tab {
	background:silver;
}
.wsa-multipanel-tabs .active-tab {
	background:black;
	color:white;
}
.wsa-multipanel-tabs .sheet-icons {
	pointer-events:none;
}
.wsa-multipanel-tabs .sheet-caption {
	pointer-events:none;
}
/* sheet body (content) area: */
.wsa-multipanel-sheets {
	position:absolute;	
	left:0px;
	right:0px;
	top:18px;
	bottom:0px;
	width:100%;
	height:100%;
	border:1px solid grey;	
	overflow:hidden;
}
.wsa-multipanel-sheets > div {
	position:absolute;	
	top:0px;
	right:0px;
	left:0px;
	bottom:18px;
}

/* ---------------------*/ 
/* --- mainmenu ------- */
/* ---------------------*/ 
.wsa-mainmenu {
	position:relative;
	color:white;
	cursor:default;	
	font-size:14px;		
	z-index:1;
}
.wsa-mainmenu:hover {
	
}
/*
.wsa-mainmenu > div {
	display:inline-block;
	vertical-align:top;
	line-height:20px;
	padding:0px 8px;	
}
.wsa-mainmenu > div:hover {
	background:teal;
}
.wsa-mainmenu > div > span {

}
.wsa-dropdown-container:hover .wsa-dropdown-menu {
	opacity:1;
	left:auto;
	box-shadow: 1px 1px 16px 0px rgba(0,0,0,0.5);
}
.wsa-dropdown-container .wsa-dropdown-menu {
	opacity:0.5;
	left:-100%;
	transition:opacity 500ms;	
}
.wsa-dropdown-menu {	
	position:absolute;
	background:blue;
	border-top:1px solid navy;
	display:block;	
	width:200px;
}
.wsa-dropdown-menu > div {	
	line-height:20px;
	width:100%;
	color:gray;
}
.wsa-dropdown-menu > div > a {
	display:block;
	text-decoration:none;	
	padding:0px 8px;
	color:inherit;
}
.wsa-dropdown-menu > div > hr {
	border:none;
	border-top:1px dotted silver;	
}
.wsa-dropdown-menu > div > span {
	padding:0px 8px;
	pointer-events: none;
}
.wsa-dropdown-menu > div.enabled {
	color:white;
}
.wsa-dropdown-menu > div.enabled:hover {
	background:teal;
}
.wsa-menu-shortcut {
	position:absolute;
	right:0px;
}
*/
/* ---------------------*/ 
/* --- custom-menu    - */
/* ---------------------*/ 
.wsa-custom-menu {
	display:inline-block;
	position:relative;
	left:0px;		
}
.wsa-custom-menu:first-child {
	margin-left:10px;
}
.wsa-custom-menu .caption {
	white-space:nowrap;	
	padding:0px 8px;	
}

.wsa-custom-menu .body {
	position:absolute;	
}
.wsa-custom-menu .body .menuitem {
	display:block;
	position:relative;
}
.wsa-custom-menu .body .menuitem a {
	display:block;
	position:relative;
	padding:0px 8px;	
	text-decoration:none;	
	color:inherit;
}
.wsa-custom-menu .body .menuitem .caption {
	padding:0px 8px;	
}

/* ---------------------*/ 
/* --- form     ------- */
/* ---------------------*/ 
.wsa-form {
	display:table;
	position:absolute;
	width:480px;
	height:240px;
	background:gainsboro;
	box-shadow:4px 4px 16px 0px rgba(0,0,0,0.25);
	cursor:default;
	
	opacity:0;
	transition:opacity 200ms, transform 200ms;
	transform:scale(0.85, 0.85);	
}
.wsa-form.displayed {	
	opacity:1;
	transform:scale(1, 1);
}
.wsa-form > .titlebar-frame {
	position:relative;
	display:table-row;
	width:100%;
	height:20px;
}
.wsa-form > .titlebar-frame > .titlebar {
	position:relative;
	display:table-cell;
	background:navy;	
	font-size:14px;
	line-height:20px;
	width:auto;
	padding:0px 4px;
	overflow:hidden;	
	color:white;
}
.wsa-form .titlebar .icon {
	position:absolute;
}
.wsa-form .titlebar .label {
	position:absolute;
	white-space:nowrap;
}
.wsa-form > .body-frame {
	position:relative;
	display:table-row;	
	width:100%;
	height:100%;	
}
.wsa-form > .body-frame > .body {
	position:relative;	
	display:table-cell;		
	overflow:auto;	
	color:black;
}
/* -----------------------------*/ 
/* --- keyvalue editor -------- */
/* -----------------------------*/ 
.wsa-key-value-editor {
	width:400px;
	box-sizing:border-box;
}
.wsa-key-value-editor .body {			/* container for columns */
	display:table;
	border:1px solid gray;
	background:white;	
	width:100%;
}
.wsa-key-value-editor .body > .row {		/* columns container */
	display:table-row;
	box-sizing:border-box;	
	width:100%;	
	line-height:1px;
}
.wsa-key-value-editor .body > .row > div {		/* column rows */	
	display:table-cell;	
	padding:1px 1px 1px 2px;	
	box-sizing:border-box;
}
.wsa-key-value-editor .body > .row:not(:last-child) > div {		/* not last row */	
	border-bottom:1px dotted gray;	
}
.wsa-key-value-editor .body > .row > div:not(:first-child) {	/* not first column */		
	border-left:1px dotted gray;	
}
.wsa-key-value-editor .body > .row > div:first-child {			/* first column */		
	width:33%;	
}
.wsa-key-value-editor .edit {	
	width:100%;
	box-sizing:border-box;
	outline:none;
	border:none;
}
/* -----------------------------*/
/* --- Checkbox ----------------*/
/* -----------------------------*/
.wsa-checkbox {
	display:block;	
	cursor:default; 
	margin:1px;	
	position:relative;
}
.wsa-checkbox .icon-frame {
	display:inline-block;
	position:relative;		
	width:1em;
	height:1em;
	line-height:1em;
	vertical-align:middle;
}
.wsa-checkbox .icon-frame > span {		
	position:absolute;
	text-align:center;
}

.wsa-checkbox .caption {
	display:inline-block;
	position:relative;
	vertical-align:middle;
}
/* -- checkbox default styles --*/
.radio-bg {
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;	
	border:2px solid black;
	border-radius:50%;
	margin:10%;
}
.radio-checked-bg {
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;	
	border-radius:50%;
	border:2px solid black;
	margin:10%;
}
.radio-checked {
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;	
	background:black;
	border-radius:50%;	
	margin:0.1em;
}
/* cb */
.checkbox-bg {	
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;	
	margin:0.1em;	
	border:0.1em solid black;
	border-radius:0.15em;	
}
.checkbox-checked:before {
	margin:0.2em;
	text-shadow:-0.05em -0.05em 0.1em white, 0.05em -0.05em 0.1em white, 0.05em 0.05em 0.1em white, -0.05em 0.05em 0.1em white;
	content:"\2713";
	font-size:85%;	
}
.checkbox-checked-bg {
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;		
	background:white;
	margin:0.1em;
	border:0.1em solid black;
	border-radius:0.15em;	
}
/* -----------------------------*/
/* --- Trackbar ----------------*/
/* -----------------------------*/
.wsa-trackbar {
	display:block;	
	cursor:default; 
	margin:1px;	
	position:relative;	
}
.wsa-trackbar .body {
	position:relative;	
	padding:1px;
}
.wsa-trackbar .track {
	position:relative;
	height:10px;
	border:1px solid black;
	border-radius:3px;
	box-sizing:border-box;
	background:rgba(200,200,200,1);
	box-shadow:inset -1px -1px 1px rgba(255,255,255,0.8), inset 1px 1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(0,0,0,0.7);
}
.wsa-trackbar .pointer {
	position:absolute;
	top:-1px;
	left:-1px;
	height:10px;
	width:10px;
	border:1px solid black;
	border-radius:3px;
	box-sizing:border-box;
	background:silver;
	box-shadow:inset 1px 1px 1px rgba(255,255,255,0.8), inset -1px -1px 1px rgba(0,0,0,0.7);
}


/* -----------------------------*/ 
/* --- Button ----------------- */
/* -----------------------------*/ 
.wsa-close-button {	
	position:absolute;
	top:0px;
	right:1px;
	width:32px;
	height:20px;
	text-align:center;
	line-height:20px;
}
.wsa-close-button:hover {	
	background:red;	
}
/* -----------------------------*/ 
.wsa-button {
	display:inline-block;
	height:32px;
	line-height:32px;
	background:teal;
	text-align:center;
	border:2px solid white;
	margin:1px;
	padding:0px 8px;
	overflow:hidden;
	color:white;
	border-radius:4px;
	cursor:pointer;
}
.wsa-button:hover {
	text-shadow:1px 0px 6px cyan, -1px 0px 6px cyan, 1px 0px 4px white, -1px 0px 4px white;	
}
/* -----------------------------*/ 
/* --- Panel ------------------ */
/* -----------------------------*/ 
.wsa-panel {		
	display:block;
	box-sizing:border-box;
	border:1px solid gray;
	height:100%;
	width:100%;	
	overflow:hidden;
}
.wsa-panel .body {	
	display:table;	
	width:100%;
	height:100%;
}
.wsa-panel .body > label {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
/* -----------------------------*/ 
/* --- Listbox --------------- */
/* -----------------------------*/ 
.wsa-listbox {	
	margin:1px;
}
.wsa-listbox select,.wsa-listbox option {	
	outline:none;
	padding:1px 2px;	
	width:100%;	
}
/* -----------------------------*/ 
/* --- Label ------------------ */
/* -----------------------------*/ 
.wsa-label {
	display:inline-block;
}

/* -----------------------------*/ 
/* --- Edit ------------------ */
/* -----------------------------*/ 
.wsa-edit {	
	position:relative;		
}
.wsa-edit .container {				/* container for text container */
	overflow:hidden;
	position:relative;
	box-sizing:border-box;	
	outline:none;
	border:1px solid silver;
	background:white;		
	color:black;	
}
.wsa-edit .wsa-button {				/* clear button (optional) */
	position:absolute;
	right:0px;
	top:0px;
	bottom:0px;
	margin:0px;
	height:auto;
	width:20px;
	padding:0px;
	opacity:0.5;
	background:silver;
	line-height:normal;
	color:black;
}
.wsa-edit .scroll-area {			/* container for text and cursor */
	display:table;
	width:auto;
	position:relative;
	white-space:nowrap;
	padding:1px 2px;	
}
.wsa-edit .cursor {
	visibility:hidden;
	position:absolute;
	border-left:1px solid black;
	margin-left:2px;
	height:100%;
}

.wsa-edit .cursor.enabled {
	visibility: visible;
	animation: blinker 1s ease-in-out infinite;	
}

@keyframes blinker {  
  50% { opacity: 0; }
}

/* -----------------------------*/ 
/* --- Memo ------------------ */
/* -----------------------------*/ 
.wsa-memo {	
	position:relative;	
}
.wsa-memo .container {				/* container for text container */
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
	border:none;
	outline:none;
	background:white;		
	color:black;	
}
.wsa-memo .scroll-area {			/* container for text and cursor */
	display:table;
	width:auto;
	position:relative;
	white-space:nowrap;
	padding:1px 2px;	
}
.wsa-memo .cursor {
	visibility:hidden;
	position:absolute;
	border-left:1px solid black;
	margin-left:2px;
	height:100%;
}

.wsa-memo .cursor.enabled {
	visibility: visible;
	animation: blinker 1s ease-in-out infinite;		/* cursor animation is near Edit component css */
}
/* -----------------------------*/ 
/* --- Table ------------------ */
/* -----------------------------*/ 
.wsa-table {
	display:table;
	box-sizing:border-box;
	border:1px solid gray;
	height:100%;
	width:100%;
	overflow:hidden;	
}
.wsa-table > label {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.wsa-table .body {
	display:table;
	width:100%;
}
.wsa-table .body > div {
	display:table-row;
	width:100%;
}
.wsa-table .body > div > div {
	display:table-cell;
}
/* -----------------------------*/ 
/* --- Menu ------------------ */
/* -----------------------------*/ 
.wsa-menu {	
	position:relative;
	display:inline-block;
	width:100%;
}
.wsa-menu .body {	
	display:inline-block;
	position:relative;
	background:white;
	color:black;
	overflow:hidden;
	padding:1px;
	cursor:default;
	border:1px solid gray;
	box-sizing:border-box;
	width:100%;
	height:100%;
}
.wsa-menu .body > .wsa-menuitem {	 				/* menuitems */
	padding:1px 4px;	
	white-space:nowrap;
	transition:background 150ms;
}
.wsa-menu .body > .wsa-menuitem.enabled:hover {
	background:rgba(0,0,0,0.25);
}
/* -----------------------------*/ 
/* --- Combobox --------------- */
/* -----------------------------*/ 
.wsa-combobox {
	
}
.wsa-combobox .wsa-edit .container {	
	border-radius:2px;
}
.wsa-combobox .wsa-menu {
	
}

/* -----------------------------*/ 
/* --- Scrollbar ---------------*/
/* -----------------------------*/ 
.wsa-scrollbar {
	position:absolute;
	background:rgba(160,160,160,0.5);
	margin:1px;
}
.wsa-scrollbar.vertical {
	top:0px;
	right:0px;
	bottom:0px;	
}
.wsa-scrollbar.horizontal {
	left:0px;
	right:0px;
	bottom:0px;	
}
.wsa-scrollbar .slider {
	position:absolute;
	background:red;
	border:1px solid black;
	pointer-events:none;
}
/* -----------------------------*/
/* --- Treeview ----------------*/
/* -----------------------------*/
.wsa-treeview {
	display:flex;
	flex-direction:column;
	position:relative;	
	width:100%;
}
.wsa-treeview .label {
	
}
.wsa-treeview .body {	
	display:block;
	position:relative;
	border:1px solid silver;
	overflow:hidden;
	background:white;	
	cursor:default;	
	box-sizing:border-box;
	width:100%;
	height:100%;
}
.wsa-treeview .body .selected {
	background:teal;
	color:white;
}
.wsa-treeview .body .icon {
	margin:0px 2px;
}
.wsa-treeview .body .caret {
	margin:0px 2px;
}
.wsa-treeview .body .row:hover {
	*background:rgba(160,160,160,0.5);
	border:1px dotted gray;
	box-sizing:border-box;
}
.wsa-treeview .body .row {
	box-sizing:border-box;
	border:1px solid transparent;
}
/* -----------------------------*/
/* --- Tooltip ----------------*/
/* -----------------------------*/

.wsa-tooltip {
	position:absolute;
	background:rgba(0,0,0,0.5);
	border-radius:1px;
	min-width:100px;
	min-height:20px;
	color:white;
	padding:2px 2px;	
	opacity:1;
	transition:opacity 1s ease-out 250ms;
}
/* -----------------------------*/
/* --- Google Sign in ----------*/
/* -----------------------------*/
.wsa-dlg-signin-info {
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
	top:20px;
}
.wsa-dlg-signin-button > div {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
}