/* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract  */
/* browser should support atleast custom variables */
.does-support { display: none; }
@supports (--a: 0) {
	.does-support { display: block; }
	.not-support {  display: none;  }
  }
  @supports not (--a: 0) {
	.does-support { display: none; }
	.not-support {  display: block;  }
  }

  /* basic Gambit EXTCI 3.x CSS settings -------------------------------------------------------------------- */

:root {
	--gx-c-background : #ffffff;
	--gx-c-text       : #3f3f3f;
  --gx-c-inputtext: #012D7D;
  --gx-c-footer-text: #ffffff;
  --gx-c-menutab : #012D7D;
  --gx-c-buttonborder:  #012D7D;
  --gx-c-buttonhover:#05AE44;
  --gx-c-hovertab: #007acc;
  --gx-c-hovertabtop: #05AE44;
  --gx-c-menubackground: #535D70;
	--gx-c-surface    : #f8f8f8;    /* low contrast background color for elementparts */
	--gx-c-disabled   : #b3b3b3;
	--gx-c-element    : #e6e6e6;    /* background color for standard elements/controls */
	--gx-c-contour    : #8c8c8c;    /* borders ea for elements and controls */
	--gx-c-contrast   : #007acc;
	--gx-c-enabled    : #007acc;    /* active or enabled elements - type of emphasize  */
  --gx-c-emphasize  : #1E90FF;    /* emphasize on text like autofill and inputelements */
	--gx-c-reference  : #FC7307;
	--gx-c-abort      : #CC0000;    /* abort / cancel / stop / terminate */
	--gx-c-warning    : #FF8000;
  --gx-c-warning-border: #CC0000;
  --gx-c-warning-background: #ffff66;
  --gx-c-heading-background: #239090;
  --gx-c-heading-text:#ffffff;
  --gx-c-evenrow : #d6f5f5;
  --gx-c-oddrow : #99e6e6;

	--gx-c-proceed    : #009933;
  --gx-c-selection  : #ffff66;
  --gx-c-focus      : #ccffff;
  --gx-m-small      : 798px;
  --gx-m-medium : 1024px;
  --gx-m-large    : 1360px;
  }

::selection { background-color:var(--gx-c-selection); color: var(--gx-c-text); }
::-moz-selection { background-color: var(--gx-c-selection); color: var(--gx-c-text); }

/* color classes for links, buttons, tabs and icons - note the Z-index to force the element up the display stack*/
.gx-enabled { color:var(--gx-c-enabled) !important; z-index:50;}
.gx-contrast { color:var(--gx-c-contrast)!important; z-index:50; }
.gx-emphasize { color:var(--gx-c-emphasize) !important;z-index:50; }
.gx-proceed { color:var(--gx-c-proceed) !important;z-index:50; }
.gx-abort 	{ color:var(--gx-c-abort) !important;z-index:50; }
.gx-warning { color:var(--gx-c-warning) !important;z-index:50; }
.gx-disabled { color:var(--gx-c-disabled) !important;z-index:50; }
.gx-unchecked { opacity: 0.3; }
.gx-checked { opacity: 1;}
.gx-softtext {color:#4F4F4F;}

.gx-h-contrast {
  background-color: var(--gx-c-contrast); color:var(--gx-c-background);
}

html,body	{
	font-family: 'Roboto', sans-serif;
	font-size:16px;line-height:1.5em;
	background-color: var(--gx-c-background);
  color:var(--gx-c-text);
}

h1{font-size:36px}
h2{font-size:30px;font-style: italic;}
h3, table > caption {font-size:24px;font-style: italic;}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:14px;font-style: italic;}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}

/* --- quote styling ---- https://1stwebdesigner.com/css-snippets-blockquotes/ for more ideas */

.testimonial-quote {
  font-size: 16px;
}

.testimonial-quote blockquote {
  /* Negate theme styles */
  border: 0;
  margin: 0;
  padding: 0;

  background: none;
  color: gray;
  font-family: Georgia, serif;
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.4 !important;
  margin: 0;
  position: relative;
  text-shadow: 0 1px white;
  z-index: 100;
}

.testimonial-quote blockquote * {
  box-sizing: border-box;
}

.testimonial-quote blockquote p {
  color: #75808a;
  line-height: 1.4 !important;
}

.testimonial-quote blockquote p:first-child:before {
  content: '\201C';
  color: #81bedb;
  font-size: 7.5em;
  font-weight: 700;
  opacity: .3;
  position: absolute;
  top: -.4em;
  left: -.2em;
  text-shadow: none;
  z-index: -300;
}

.testimonial-quote img {
  border: 3px solid #9CC1D3;
  border-radius: 50%;
  display: block;
  width: 120px;
  height: 120px;
  position: absolute;
  top: -.2em;
  left: 0;
}

.testimonial-quote cite {
  color: gray;
  display: block;
  font-size: .8em; line-height:1.2em;
}

.testimonial-quote cite span {
  color: #5e5e5e;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px white;
}

.testimonial-quote {
  position: relative;
}

.testimonial-quote .quote-container {
  padding-left: 160px;
}

.testimonial-quote.right .quote-container {
  padding-left: 0;
  padding-right: 160px;
}

.testimonial-quote.right img {
  left: auto;
  right: 0;
}

.testimonial-quote.right cite {
  text-align: right;
}

/* --- end of quote styling -- */

/* WARNING FRAME ------------------------------------------------ */

.gx-frame   {
  border:1px solid var(--gx-c-contour);
}

.gx-warning { color:var(--gx-c-warning) !important; }

.gx-warning-frame {
  border-width:5px;
  border-style:double;
  border-color:var(--gx-c-warning);
  padding:1em;
  background-color:var(--gx-c-surface);
  text-align: center;
  width:95%; margin:0 auto;
}

.gx-warning-frame h2::before {
content:"\f026"; /* alert */
font-family: "Material Design Icons"; font-size:3em;
position:relative;top:0.2em;
color:var(--gx-c-warning);
}

/* links and anchors ------------------------------------------- */

a, a.gx-go-external {
  color:var(--gx-c-reference);
  text-decoration:none;
}

a.gx-go-external::after {
  content:"\F3CC"; /* open-in-new */
  font-family: "Material Design Icons";
  font-size:1.2em;
  position:relative;
}

a.gx-go-local::after {
  content:"\F056"; /* open-in-new */
  font-family: "Material Design Icons";
  font-size:1.2em;
  position:relative;
}

a.gx-cmd-link {cursor:pointer; color:var(--gx-c-enabled); font-size:0.8rem}
a.gx-cmd-link::before {
content:"\F007D"; /* open-in-new */
font-family: "Material Design Icons";
font-size:1.2em;
position:relative;
}
a.gx-cmd-linkINV {cursor:pointer; background-color:var(--gx-c-contrast);
  color:var(--gx-x-background); margin-right:2rem;
  font-size:0.8rem; float:right}
a.gx-cmd-linkINV::before {
    content:"\F007D"; /* open-in-new */
    font-family: "Material Design Icons";
    font-size:1.2em;
    position:relative;
}

/* common text/content tags -------------------------------------- */


p {
   font-size:inherit; line-height:inherit;
}

code
	{
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

kbd {
	font-family: Consolas, Monaco, Courier New, Courier, monospace;
	font-size: 1em;
	background-color: #f9f9f9;
	border: 1px solid #D0D0D0;
	color: #002166;
	padding: 1px 10px;
}
kbd::before {
	content:'\e312';
    font-family: "Material Icons";
    font-size:1.2em;
    position:relative;top:0.2em
}

table {
	border-spacing:0;
	font-size:0.8rem;
}

table td {
	vertical-align: top;
	text-align: left;
	border:0;
	padding: .25rem 0.5rem;
  margin:0px;
  max-width: 30em;
}

th {
  color:var(--gx-c-heading-text);
  background-color: var(--gx-c-heading-background);
}
/* adjust td padding for nested tables */
td > table {
	position:relative; left:-0.5rem; top:-0.25rem;
}

tr.selectable-row:hover { background-color: var(--gx-c-proceed); color:var(--gx-c-background);cursor:pointer;}

tr:nth-child(even) {
  background-color:var(--gx-c-evenrow);
}

tr:nth-child(odd) {
  background-color:var(--gx-c-oddrow);
}
/* MEDIA / SCREEN settings and adjustments ------------------------ */


@media screen and (min-width:1360px) {
  :root {
    --gx-m-pagewidth : calc( 100% - 80px );
  }
  #screen-alert {display:none;}
}

@media screen and (min-width:797px ) and (max-width:1359px) {
  :root {
    --gx-m-pagewidth : calc( 100% - 80px );
  }
   #screen-alert {display:none;}
}

@media screen and (max-width:797px) {
  #screen-alert {display:block;}
  nav, main, footer {display:none;}
}

/* MAIN PAGE content layout frames -------------------------------- */
.page1col {
  margin-left:15%;
  /*min-width:816px;*/
  margin-right: 10%;
}

.page2col {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 0px;
  margin-bottom:2rem;
  min-width:56em; /* 896px */
}

.page2col .leftColumn {border-right:1px solid lightslategray; padding-right:8px; min-width:28em}
.page2col .rightColumn {padding-left:16px;}

.page3col {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  column-gap: 5%;
}

.page3colForm {
  display: grid;
  grid-template-columns: 165px 370px 370px;
  row-gap: 1.0em; column-gap: 0.5em;
  margin-bottom:8px;
}
.page3colForm input[type="text"],.page5colForm input[type="number"],
.page5colForm input[type="date"],.page5colForm input[type="datetime-local"]
 {width: calc(100% - 0px); }
.page3colForm select { width: 100%; }

.page5colForm{  /* max width 905px*/
  display: grid;
/*  grid-template-columns: 165px 138px 138px 138px 138px; */
  grid-template-columns: 165px 185px 185px 185px 185px;
  row-gap: 1.0em; column-gap: 0.5em;
  margin-bottom:8px;
}
.page5colForm input[type="text"],.page5colForm input[type="number"],
.page5colForm input[type="date"],.page5colForm input[type="datetime-local"]
 {width: calc(100% - 0px); }
.page5colForm select { width: 100%; }

.page5grid {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  row-gap: 0.5em; column-gap: 0.5em;
}

.page10grid {
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  row-gap: 0.5em; column-gap: 0.5em;
}
/* .page3colForm > div, .page5colForm > div {min-height:43px;} */

.gspan-1-2 {  grid-column-start: 1;   grid-column-end: 3; }
.gspan-1-3 {  grid-column-start: 1;   grid-column-end: 4; }
.gspan-1-4 {  grid-column-start: 1;   grid-column-end: 5; }
.gspan-1-5 {  grid-column-start: 1;   grid-column-end: 6; }
.gspan-2-3 {  grid-column-start: 2;   grid-column-end: 4; }
.gspan-2-4 {  grid-column-start: 2;   grid-column-end: 5; }
.gspan-2-5 {  grid-column-start: 2;   grid-column-end: 6; }
.gspan-3-4 {  grid-column-start: 3;   grid-column-end: 5; }
.gspan-3-5 {  grid-column-start: 3;   grid-column-end: 6; }
.gspan-4-5 {  grid-column-start: 4;   grid-column-end: 6; }

.gx-container {width:100%;}
.gx-container:after {content:"";clear:both;display:table}


.gx-align-center {
text-align:center;
}

.gx-align-left {
text-align:left;
}

.gx-align-right {
text-align:right;
}

.gx-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.gx-vertical-space {
margin-bottom:1em;
}

/*   ICON styling ------------------------------------------------------------------------------------*/
i ,b {
	font-family: "Material Design Icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
  position:relative;
  /* vertical-align: text-bottom; */
}

b {font-size:1.5em}  /* default fontsize i = 16px - b larger i(con) = 24px */
/* position/size adjustments if 2 icons are supposed to act as 1 */
i + b, b + b  {left:-0.4em; /*-6px */ margin-right:-0.4em;}
b + i  {left:-0.6em; /*-6px */margin-right:-0.6em;}
i.overlap, b.overlap {left:-0.7em;}
i.super, b.super {vertical-align:super;top:-0.1em}
i.lower, b.lower {vertical-align:sub;}
i.overlay, b.overlay  {left:-0.6em; top:-0.3em}
i.smaller, b.smaller {font-size:0.6em; }

/* large-icon  */

div.gx-large-icon {
	display:inline-block; position:relative; font-size: 1.7em; width:6em; height:6em;
	overflow:hidden; border:0; background-color: var(--gx-c-element);
	border-radius:6em; overflow:hidden; margin:0 auto;
}


div.gx-large-icon i:first-child {font-size: 5em;top:0.5em}
div.gx-large-icon i:nth-child(2) {position: absolute; right:0.2em; top:0.7em;  color:var(--gx-c-contrast);font-size: 3em;}

/* tile ---------------------------------------------------------------------------------------------- */

div.gx-tile {display:inline-block; position:relative; width:6em; height:5.5em;
  overflow:hidden; border:1px solid var(--gx-c-contour); background-color:var(--gx-c-surface);}
div.gx-tile > span {font-size:48px; position:absolute; top:16px; left:8px;}

div.gx-tile > div {position:absolute;left:0.3em; bottom:0.5em; width:7em; font-size:0.75em; white-space: nowrap; overflow:hidden; text-align:center;}

/* NAVIGATION - PAGE CONTROL ------------------------------------------------------------------------- */

nav#page-control {
  position:fixed;
  top:0px;
  left: 50%;
  background-color:var(--gx-c-background );
  color: white;
  transform: translateX(-50%);
  width: var(--gx-m-pagewidth);
  min-height: 32px;
  margin:0 auto;
  z-index:200;
  border-bottom:1px solid var(--gx-c-menubackground);
}


#page-control .folded {height:0px; overflow:hidden;}
#page-control .unfold{height:132px;}

.item-show {display:block;}
.item-hide {display:none;}


nav#page-control ol {
	list-style-type: none;
	margin:0;
	padding:0;
  font-size:14px;
}

nav#page-control ol li {
	float:right;
	padding:0.2em 0.5em 0.2em 0.4em;
  margin:0px;
  min-width:120px;
  max-width: 14.25%;
  border-right:1px solid #ffffff;
  border-top:3px solid var(--gx-c-hovertab);
	cursor:pointer;
  line-height:2.2em;
  height:3em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: var(--gx-c-menutab);opacity:1.0;
}

nav#page-control ol li:first-child {border-right:0px;}

nav#page-control ol li:hover {
  background-color: var(--gx-c-hovertab);
  border-top:3px solid var(--gx-c-hovertabtop);
}

nav#page-control ol li i {font-size:24px; margin-right:4px;}

#page-control-extender {
  position:absolute;  z-index:2; background-color: var(--gx-c-menubackground);
  bottom:-16px; left:8px; width:48px;
  border-radius: 0px 0px 8px 8px;
  	cursor:pointer;
}
#page-control-extender:hover {
  background-color: var(--gx-c-hovertab);
}

main {
	position:relative;
  width: var(--gx-m-pagewidth);
	height:100%;
	margin: 2.5em auto;
	padding: 1em 0;
  min-height:30em;
  max-width: 1360px;
}

footer {
  margin-top:1em;
  border-top:1px solid var(--gx-c-menubackground);
  background-color: var(--gx-c-menubackground);
}

footer section {
	position:relative;
  width: var(--gx-m-pagewidth);
	margin:auto;
  min-height:5em;
	padding: 1em 0;
  color: var(--gx-c-footer-text);
  font-weight:normal; font-size:14px;
  text-align:right;
}

footer section i {font-size:24px; color:var(--gx-c-emphasize); cursor:pointer;}

aside {
  position:fixed; top:0px; left:0px; z-index:300;
  height:100%;
  border-right: 1px solid var(--gx-c-menubackground);
  background-color: var(--gx-c-element );
}

aside #cmd-slide {
  font-size:24px;
  position:absolute; top:16px; right:0px; cursor:pointer; height:56px;
}

aside section {
  margin-right:24px; overflow:hidden; position:relative; height:100%;
  background-color:var(--gx-c-background);
  overflow-y:auto;

}

aside .folded {width:0px; overflow:hidden; }
aside .unfold { width: 310px; }

#screen-alert {position:absolute; margin:5% auto; width:350px; left:50%;transform: translateX(-50%); padding:1.5em; font-size:24px; line-height:1.5em;  background-color:var(--gx-c-warning-background); border:5px double var(--gx-c-warning-border);}

#screen-alert i {font-size: 48px; color:var(--gx-c-warning);}

/* MODEL DIALOGUE --------------------------------------------------------------------------   */

section#modal-dialogue {
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  backdrop-filter: blur(5px);
}

section#modal-dialogue  [data-cmd='close-dialogue'] {font-size:32px; color:var(--gx-c-abort); position:absolute; top:5px; right:5px; cursor:pointer;}

section#modal-dialogue  .modal-box {
  position:relative;  margin: 15% auto;
}

#signonDialog {
  width: 680px;
  background-image: url("/inc/data/gx/Gambit-splash.jpg");
  background-repeat:no-repeat;
  height:380px;
  background-color:var(--gx-c-background);
  border:5px double var(--gx-c-proceed);
}


#signonBody form {float:right; margin-top:100px; margin-right:30px;}
#signonBody form {font-size:0.8em}
#signonBody form input {background-color:transparent;}

#signonResult {
  width: 65%; max-width:600px;
  padding:0.8em 1em 0.1em 1em; font-size:16px;
  line-height:1.5em;
  background-color:var(--gx-c-background);

}
#signonResult.signonError {  border:5px double var(--gx-c-abort); }
#signonResult.signonValid {  border:5px double var(--gx-c-proceed); }

#sys-popup {
  width: 680px;
  height:380px;
  background-color:var(--gx-c-background);
  border:5px double var(--gx-c-enabled);
  padding:0px; overflow:hidden;
}

#sys-popup h3 {
  margin:0px;padding:2px 5px 7px 5px;
  background-color:var(--gx-c-contrast);
  color: white; font-weight:normal;
}

#sys-popup-body {
  margin:2px 2px 2px 2px; height:100%; overflow: auto;
}

#sys-popup-body p {margin:0.5em 1em 0.5em 1em}

/* --------------------- */


input[type="submit"] {	font-family: "Material Design Icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:var(--gx-c-enabled);
  font-size:24px;
  background-color:var(	--gx-c-surface); border:1px solid var(--gx-c-buttonborder);
  padding:0.2em 0.5em 0.2em 0.5em; width:160px; cursor:pointer;
  margin:0px; position:relative; top: 2px;
}

button {
  font-size:16px; background-color:var(	--gx-c-surface); border:1px solid var(--gx-c-buttonborder);
  padding:0.2em 0.5em 0.2em 0.5em; width:160px; cursor:pointer;
}

button:hover, input[type="submit"]:hover {border-color:var(--gx-c-buttonhover)}
button i  {color:var(--gx-c-enabled); margin-right:0.2em; font-size:24px;
  position:relative; top:2px;}
/* remove thick border around button upon active/clicked */
button:focus, input[type="submit"]  {outline:0;}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="number"], input[type="time"], select {
  font-size:14px; color:var( --gx-c-inputtext);
  border:0px; border-bottom:1px dotted var( --gx-c-inputtext);
  /*margin:0px 0.2em 0px 0.2em;*/
  padding-right:16px; /* reserve space for gx-clear-input bin*/
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="number"]:focus, input[type="time"]:focus, select:focus {
  outline:0; color:var(black); background-color:var(--gx-c-focus);
}

input + .gx-clear-input {position:relative;margin-left:-16px; cursor:pointer;opacity: 0.3;}
input + .gx-clear-input:hover {opacity: 1;}

input[type="checkbox"], input[type="radio"] {
  display:none;
}
input ~ br + label , label.below {font-size:80%;}
input:required ~ label {color:red;}  /* label following a required input field */

label.as-button {position:relative; display:inline-block; width:160px;}

label.as-radiobutton {
  display:inline-block; width:120px;
  text-align:center;
  border:1px solid var(--gx-c-buttonborder); border-radius:8px;
  cursor:pointer;
  margin:0px 6px 6px 0px;
}
label.as-radiobutton:hover {border-color:var(--gx-c-buttonhover)}
label.as-radiobutton.on {background-color:var(--gx-c-enabled); color:var(--gx-c-element);}

label.as-toggle {cursor:pointer;}
label.as-toggle > span {
    overflow:hidden; float:right;
    width: 48px; height:20px;
    vertical-align:middle;
    border:1px solid var(--gx-c-contour);
    background-color:var(--gx-c-surface);
    border-radius:16px; padding:1px;
    cursor:pointer;
}
label.as-toggle > span > span {
   display:inline-block;  width:16px; height:16px;
  border-radius:12px;
}
label.as-toggle.off > span > span {float:left;  background-color:var(--gx-c-disabled);}
label.as-toggle.on > span > span {float:right; background-color:var(--gx-c-enabled);}

label.as-check > span {
  overflow:hidden; float:right;
  width: 3em; height:1.5em;
  vertical-align:middle;
  cursor:pointer;}
label.as-check.off > span > b:first-child  {opacity: 0.3;color:var(--gx-c-text);}
label.as-check.off > span > b:nth-child(2) {display:none}
label.as-check.on > span > b:first-child  {display:none}
label.as-check.on > span > b:nth-child(2) {opacity: 1;color:var(--gx-c-enabled);}


label.as-radioicon {cursor:pointer; }
label.as-radioicon:hover {color:var(--gx-c-enabled);}
label.as-radioicon span {
  /*overflow:hidden;*/ display:inline-block;
  max-width:48px; /*48px;*/ height:1.5em; /* 24px; */ line-height:1.5em; /* 24px; */
  vertical-align: text-bottom;}
label.as-radioicon:hover span {opacity: 1 !important;}
label.as-radioicon.off span {opacity: 0.3; }
label.as-radioicon.on span {opacity: 1; }

/* styling mapped variabels - use whatever markup is used for surrouding text */
var {	font-style:inherit;
	font-weight: inherit;
	font-variant: inherit;}

/* mTree editor and display/presentation styling ----------------------------------------------------------- */

.mTreeEditor {
  display: grid;
  grid-template-columns: 90px auto 200px;
  grid-gap: 5px;
  padding: 8px;
  border:1px solid black;
}

.tree-cmds {
  text-align: center;
  padding:0px 8px 0px 0px;
  border-right: 1px solid black;
}

.tree-cmds fieldset {
  margin:0px; padding:5px;
}

.tree-cmds button {
border:1px solid blue; width:100%; margin-bottom:8px; padding:0.2em 0.5em 0.4em 0.5em; cursor:pointer;
border-radius: 5px;
}

.tree-cmds .refine-group.disabled {
	 cursor:not-allowed;
}

.tree-cmds .refine-group.disabled button{
  pointer-events: none;
}

.tree-cmds .extend-group.disabled {
	 cursor:not-allowed;
}

.tree-cmds .extend-group.disabled button{
  pointer-events: none;
}

.tree-cmds button i {font-size:16px !important}

.tree-structure {
    height:550px;
    overflow:auto;margin-left:5px;
}

.tree-props {
   text-align:left;
   padding:0px 8px 0px 8px;
   border-left:1px solid black;
}

.tree-structure ul {
  	list-style-type: none;
	  margin:0;
	  padding:0;
    font-size:14px;
}

.tree-structure li.rootselect > div {
  background-color:var(--gx-c-enabled);
  color: white;
}

.tree-structure li.node-expanded > ul {
  display: block;
}

.tree-structure li.node-collapsed > ul {
 display:none;
}

.tree-structure li ul {
  margin-left:1em;
}

.tree-structure li input{
  border:0px; color:inherit; font-size:14px; border-bottom:0px;
  width:calc( 100% - 80px);
  background-color:transparent; padding:0px; margin:0px 0px 4px 0px;
}

.tree-structure li input:focus{
  outline:0;
  background-color:var(--gx-c-background);
  color:var( --gx-c-inputtext);
}

/* tree node position modifiers */
.tree-structure li .cmd-node-position {
  float:right;
}

.tree-structure li:first-child > div i[data-cmd="move-node-up"] {
  display:none;
}

.tree-structure li:last-child > div i[data-cmd="move-node-down"] {
  display:none;
}

/* End Of mTree styling */

#JSP-diagram {
  position: relative; width:100%; height:350px; border:1px solid #000; overflow:auto;
}

.JSP-diagram-scale-small div.JSP-block {width:90px; height:72px; }
.JSP-diagram-scale-medium div.JSP-block {width:128px; height:72px; }
.JSP-diagram-scale-large div.JSP-block {width:160px; height:72px; }

div.JSP-block {
  position:absolute;
  border:1px solid #000;
}
div.JSP-block i {
  font-size:16px; float:right;
}


div.JSP-block .condition {
  float:right; font-size:14px; font-weight:bold;
}
div.JSP-block .qualifier {
  float:left; margin-left:4px;
}

div.JSP-block .caption {
  clear:both; position: relative; height: 48px;
  padding:0px 4px;
  word-break: break-all;
   display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}