/* 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       : #000000;
	--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    : #FC7307;
	--gx-c-proceed    : #009933;
	--gx-c-selection  : #ffff66;
  }

::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:100; }
.gx-contrast { color:var(--gx-c-contrast)!important; z-index:100; }
.gx-emphasize { color:var(--gx-c-emphasize) !important;z-index:100; }
.gx-proceed { color:var(--gx-c-proceed) !important;z-index:100; }
.gx-abort 	{ color:var(--gx-c-abort) !important; z-index:100;}
.gx-warning { color:var(--gx-c-warning) !important;z-index:100; }
.gx-disabled { color:var(--gx-c-disabled) !important; z-index:100;}
.gx-unchecked { opacity: 0.3; }
.gx-checked { opacity: 1;}
.gx-softtext {color:#4F4F4F;}


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

html{overflow-x:auto}
body {margin:0 0.5em;}

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

blockquote {
	margin: 20px 0;
	padding-left: 1.5em;
	border-left: 5px solid var(--gx-c-emphasize);
}

blockquote p::before,
blockquote p::after {
   content: "“";
   font-family: Georgia;
   font-size: 8rem;
   margin: -2rem 0 0 -4rem;
   position: absolute;
   opacity: 0.5;
}

i {
	font-family: "Material Design Icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	position:relative;
}

/* css apperance modification on second icon  NOTE <b> is used in combination with i
   to merge standard characters with icons */

b {
	position:relative; font-weight:900;
}
i ~ i, i ~ b {
	margin-left:-0.5em;
}

i.super, b.super {vertical-align:super;font-size:0.5em;left:-5px;}
i.upper, b.upper {top:-0.25em; font-size:0.75em;}
i.lower {top:0.2em; font-size:0.6em;}
i.overlay, b.overlay  {left:-0.6em; top:-0.3em}
i.smaller, b.smaller {font-size:0.6em; }

#page-frame {
	position:relative;
  	max-width: 1360px; /* corresponds to 85em @ 16px fontsize*/
	min-width:948px;
	height:100%;
	margin: 1em auto;
	padding: 1em 0;

}

#kill_session {
	position:absolute; top:0px; right:1em; cursor:pointer;
}

#site_logo {
	position:absolute; top:-10px; left:0em; cursor:pointer; font-size:40px;
}
/* -- intro / channel / start specifics ---------------------------------------------------------------- */

.gx-intro {position:relative;}
.gx-intro img {margin-top:3em;}

.gx-overlay-top-left {
	position: absolute;
	top: -10px;
	left: 0px;
	width:100%;
}

.gx-overlay-bottom-right {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width:100%;
}
.gx-overlay-center {
	position:absolute;
	top: 46%; left:53%;
}

.site-title {
	margin-left:5%;
}
.site-subtitle {
	text-align:right;
	margin-right:5%;
}

.credits {
	font-size:12px; font-style:oblique;
}
/* ----------------------------------------------------------------------------------------------------- */
/*
.gx-show, .on  {display:block}
.gx-hide, .off {display:none}
*/
.gx-hide, .off { display: none; }
.gx-show, .on { display: run-in; }
/* common content blocks - initial settings ------------------------------------------------------------ */

.gx-page-heading {}
.gx-container {}
.gx-container:after {content:"";clear:both;display:table}
.gx-narrative {}
.gx-summary {}
.gx-excerpt {font-size:1.2em; font-weight:500}

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

.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;
}

.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);
}
a, a.gx-narrative {
    color:var(--gx-c-reference);
    text-decoration:none;
}

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

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

fieldset legend {
  color: var(--gx-c-emphasize);
  font-variant: small-caps;
  vertical-align:baseline;
  position:relative;top:-0.3em; left:-0.5em;
  cursor: pointer;
}

fieldset.gx-folded {
  height:2em; overflow:hidden;
}
fieldset.gx-unfolded {
  height:auto; overflow:auto;
}
fieldset.gx-folded legend::before {
  content:"\f84e";
  font-variant:normal;position:relative; top:0.3em;
  font-family: "Material Design Icons"; margin-right: 0.0em; font-size:1.5em;
}

fieldset.gx-unfolded legend::before {
  content:"\f84c";
  font-variant:normal;  position:relative; top:0.3em;
  font-family: "Material Design Icons"; margin-right: 0.0em; font-size:1.5em;
}
p.footer {
	text-align: right;
	font-size: 0.75em;
	border-top: 1px solid var(--gx-c-contour);
	line-height: 2em;
	padding: 0.5em 0;
	margin: 1.5em 0 0 0;
	vertical-align:baseline;
	height:auto;
}

p.footer i {position:relative; margin-right:0.3em; font-size:1.5em; top:2px;}

/* treelist -------------------------------------------------------------------------------------------- */

ol.gx-treelist {list-style-type: none; margin-left:0; padding:0; line-height:1.5em;}
ol.gx-treelist li ol {list-style-type: none; margin-left:-1em; }
ol.gx-treelist li.gx-unfolded ol {display:block}
ol.gx-treelist li.gx-folded ol {display:none}
ol.gx-treelist li.leaf:before {
	font: normal normal normal 24px/1 "Material Design Icons" !important;
	content:"\F9A8";
	float: left; margin-right: 0.2em;
}
ol.gx-treelist li.gx-folded:before {
	font: normal normal normal 24px/1 "Material Design Icons" !important;
	content: "\f24b";
	float: left; margin-right: 0.2em;
}
ol.gx-treelist li.gx-unfolded:before {
	font: normal normal normal 24px/1 "Material Design Icons" !important;
	content:"\F76F";
	float: left; margin-right: 0.2em;
}

/* menubar --------------------------------------------------------------------------------------------- */

ol.gx-menubar {
	list-style-type: none;
	margin-left:0;
	padding:0;
	line-height:1.5em;
	border-bottom:0.1em solid var(--gx-c-contour);
}
ol.gx-menubar li {
	float:right;
	/* display:inline-block; */
	padding:0.3em 0.5em 0.4em 0.3em;
	margin-left:0.2em;
	margin-top:0.2em;
	min-width:8em;
	background-color:var(--gx-c-element);
	cursor:pointer;
}
/*
ol.gx-menubar li i {
	font-family:"Material Icons";
	font-style: normal;
	position:relative;
	top:5px;
	font-size:24px;
	padding-right:0.3em;
}
*/
/* allow for double icon with partial overlap on tab*/
/* ol.gx-menubar li i ~ i {margin-left:-20px} */ /* correct for right padding on preceding i */

/*  Simple grid support ================================================================================  */
.gx-basicgrid3 {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-gap: 5%;
}


.gx-grid-wrapper:after {
  content: "";
  display: table;
  clear: both;
  margin-bottom:1em;
}
.gx-grid-50 {width:50%; float:left; margin:0 0 0.5em 0; }
.gx-grid-20 {width:20%; float:left; margin:0 0 0.5em 0; }
.gx-grid-80 {width:80%; float:left; margin:0 0 0.5em 0; }
.gx-grid-25 {width:25%; float:left; margin:0 0 0.5em 0; }
.gx-grid-33 {width:33%; float:left; margin:0 0 0.5em 0; }
.gx-grid-66 {width:66%; float:left; margin:0 0 0.5em 0; }
.gx-grid-75 {width:75%; float:left; margin:0 0 0.5em 0; }

.gx-splitscreen-left		{float:left; width:40%; }
.gx-splitscreen-right		{float:left; width:60%; }

.gx-split-screen {
  display:grid;
  grid-gap: 1em;
  grid-template-columns: 45em 39em;  /* matches gx-form-grid */
}

.gx-column-right {
  width: 46.1em;  /* matches gx-form-grid */
	float:right;
}
.gx-column-center {
  width: 46.1em;  /* matches gx-form-grid */
	margin-left: auto;
	margin-right: auto;
}
.gx-column-right:after {
	content: "";
  display: table;
  clear: both;
  margin-bottom:1em;
}
/* form grid 3 column styling ----------------------------------------------------------------------------------- */

.gx-form-grid {
  display:grid;
  grid-template-columns: 11em 17em 17em;
  grid-gap: 0em;
}
.gx-form-grid > div {
  padding:0.2em 0.5em; position:relative;
}
.gx-grid-span-2 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.gx-grid-seperator {
  grid-column-start: 1;
  grid-column-end: 4;
  border-top:1px solid var(--gx-c-contour);
}
.gx-grid-subheading {
  grid-column-start: 1;
  grid-column-end: 4;
  background-color:var(--gx-c-emphasize);
  color:#fff;
}

/* grid layouts --------------------------------------------------------------------------------------------- */

/* prefered grid layout for block forms */
.gx-wide-grid { /* width 52.5em */
	display: grid;
	padding: 0.0em;
	grid-template-columns: 15em 10em 10em 10em 10em 5em;
  }

.gx-wide-grid > div {
	padding:0.2em 0.5em; position:relative;
}

/* prefered grid layout for MPR demo/simulation  */
.contact-details-grid {     /* width 83em */
	font-size:16px;
	display:grid;
	grid-template-columns: 67em 16em;
}

/* prefered grid layout for MPR demo/simulation  */
.gx-contact-log-grid {     /* width 83em */
	font-size:16px;
	display:grid;
	grid-template-columns: 75em 10em;
}

.gx-contact-log-header {
	grid-column-start:1; grid-column-end:3;
	background-color:var(--gx-c-contrast);
	color:white;
	margin-bottom:0.3em;
	font-size:1.5em;
	padding:0.1em 0.5em;
}

.gx-contact-log-footer {
	grid-column-start:1; grid-column-end:3;
	background-color:var(--gx-c-contrast);
	color:white;
	margin-top:0.3em;
	font-size:1em;
	padding:0.1em 0.5em;
}


  .gx-mpr-grid {      /* width 75em */
	display: grid;
	grid-template-columns: 10em 10em 15em 15em 20em  5em;
  }

  .gx-mpr-grid > div {
	padding:0.2em 0.5em; position:relative;
  }


  .gx-log-record > div:not(.gx-log-body) {
	  background-color:#ccc;
  }

  .gx-log-record-title {
	grid-column-start:5; grid-column-end:6;
  }

  .gx-log-body {
	  grid-column-start:1; grid-column-end:6;
	  /* border-bottom:1px solid; */
  }

  .gx-log-body-header {
	display: grid;
	grid-template-columns: auto auto auto;
	font-weight: bold;
  }

  .gx-log-status-done {border-left:3px solid var(--gx-c-proceed);}
  .gx-log-status-open {border-left:3px solid var(--gx-c-warning);}

  /* classes to group / identify but having no css declarations */
  /*

  gx-group  {}  intended to group one or more gridrows for dynamic processing / event handling
  gx-log-record {}  inner structure class for gx-mpr-grid, used to identify the log record heading div's
  gx-log-body {}    inner structure class for gx-mpr-grid, used to


  */

/* form and input elements -------------------------------------------------------------- */


input {
    border:0;
    border-bottom:1px dotted var(--gx-c-contrast);
    font-size:1.0em; line-height:1.5em;
    padding:0em;
    margin:0px;
    width:100%;
}

select {
	width:100%;
	border:0;
	border-bottom:1px dotted var(--gx-c-contrast);
	font-size:1.0em; line-height:1.5em;
	padding:0em;
	margin:0px;
}

textarea {
	border:0;
	border-bottom:1px dotted var(--gx-c-contrast);
	border-left:1px dotted var(--gx-c-contrast);
	font-size:1.0em;
	padding:0em;
	margin:0px;
	width:100%; height:3.5em;
	resize: vertical;
}

input:focus {outline:none; background-color:var(--gx-c-surface );}
input[type="checkbox"] {display:none;}
input[type="radio"] {display:none;}



input ~ label {font-size:0.8em;}
div.gx-radio-group ~ label {font-size:0.8em}

/* default input styling ------------------------------------------------------------------------------- */

label   {cursor:pointer; }
var 	{font-style:normal; color:var(--gx-c-emphasize)}

/* user entry input text and switches ------------------------------------------------------------------ */

button[type='submit'],
input[type='submit'] {
    position:relative; font: normal normal normal 24px/1 "Material Design Icons" !important;
    font-size:1.5em !important;
    width:5em; height:1.5em;
    border:0;
    background-color:var(--gx-c-element);
    color:var(--gx-c-enabled) ;
	top:0.2em;
	border:1px solid var(--gx-c-enabled);
	cursor:pointer;
}

span.gx-clear-input {
	position:absolute;
	right:-4px;top:0px;
	cursor:pointer;
	color:var(--gx-c-abort);
}
span.gx-clear-input i {font-size:16px !important;} /* overrule default icon size of i element */


/* span to position currency or measurement over an input field
<span class='gx-overlay-left'>€</span><input class='gx-valuta' type='text'><label>bedrag</label>
*/
form input[type="text"].gx-number {text-align:right; padding-right:2.2em}
form input[type="text"].gx-valuta {text-align:right; padding-left:1em}
form input[type="text"].gx-prefix {text-align:left; padding-left:1.5em}

/* progress bar */
div.gx-progress-bar {
	height:1em; width:0%; border:1px solid var(--gx-c-enabled); background-color:var(--gx-c-enabled);
}

span.gx-overlay-left {position:absolute;left:8px; font-size:0.8em;}
span.gx-overlay-right {position:absolute;right:12px; font-size:0.8em;}

/* span to highlight a action/function trigger like:
<span class="gx-func-trigger" data-action="log-details-toggle">&#9776;</span>
classname is linked automatically to handler while data-action defines which action should be performed
*/
.gx-func-trigger {color:var(--gx-c-enabled); cursor:pointer;}


span.gx-switch {
    overflow:auto; display:inline-block;
    width: 4em; height:auto;
    vertical-align:middle;
    border:1px solid var(--gx-c-contour);
    background-color:var(--gx-c-surface);
    border-radius:16px;
}
span.gx-switch i.off {float:left; color:var(--gx-c-disabled); display:block !important}
span.gx-switch i.on {float:right; color:var(--gx-c-enabled);}


input.gx-if-else, input.gx-if, input.gx-case {display:none;}

/* 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}
/*
div.gx-tile i:nth-child(2) {position:absolute;right:1.0em; font-size:2.0em;  color:var(--gx-c-contrast);}
div.gx-tile i.subscript {position:absolute;right:1.4em; top:0.5em; font-size:2.0em;  color:var(--gx-c-contrast);}
*/
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;}

/* 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.15em}
div.gx-large-icon i:nth-child(2) {position:absolute;right:0.2em; top:0.7em;  color:var(--gx-c-contrast);font-size: 3em;}

/*  double/duo icon ---------------------------------------------------------------------------------- */
div.gx-small-icon { display:inline-block; top:4px;
  position:relative; font-family: "Material Icons";
}
div.gx-small-icon i {position:relative;font-style:normal !important; font-size:24px !important;}
div.gx-small-icon i ~ i {margin-left:-14px}
/* NOTE top & margin-top are required to get the same positioning as with material icons */
div.gx-small-icon .fa {position:relative; top:-4px; margin-top:3px; font-style:normal !important; font-size:24px !important;}

/*  Large double/duo icon ---------------------------------------------------------------------------------- */
div.gx-medium-icon { display:inline-block; top:8px;
  position:relative; font-family: "Material Icons";
}
div.gx-medium-icon i {position:relative;font-style:normal !important; font-size:36px !important;}
div.gx-medium-icon i ~ i {margin-left:-18px}
div.gx-medium-icon .fa {top:-5px}

/* button -------------------------------------------------------------------------------------------- */

button.gx-button {
	/*width:5em; height:3em;*/ border:0; background-color:var(--gx-c-element);
  }

button[title]:hover:after {
	content: attr(title);
	position: absolute;
	padding:0.4em; font-size:1em;
	background-color:var(--gx-c-contrast); color:var(--gx-c-background);
  }

button[aria-label]:hover:after {
	content: attr(aria-label);
	position: absolute;
	padding:0.4em; font-size:1em;
	background-color:var(--gx-c-contrast); color:var(--gx-c-background);
}


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;
}

/* adjust td padding for nested tables */
td > table {
	position:relative; left:-0.5rem; top:-0.25rem;
}

#aht-stats-table tr:nth-child(even) {background-color: #f2f2f2;}
.striped tr:nth-child(even) {background-color: #f2f2f2;}

.aht-col1 {width:15%;}
.aht-col2 {width:10%}
.aht-col3 {width:10%; text-align: right !important;}
.aht-col4 {width:10%}
.aht-col5 {width:15%}
.aht-col6 {width:30%}
.aht_col7 {width:10%}

#userError {color:red; font-weight:bold; text-align:center}

#signonResult, #signonDialog   {display:none;}

#signonBody {
  position:relative;
  width:100%;
  background-image: url("/inc/data/gx/Gambit-splash.jpg");
  background-repeat:no-repeat;
  height:380px;
}


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