/* Common properties to include in elements
  width: 20%;
  float: left;
  clear: both;
  margin: 0.4em 0.4em 0.4em 0.4em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border: 1px solid #006699;
  text-align: left;
  text-transform: none;
  font-family: "Libre Baskerville", Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  color: #061C37;
  background: #1c478e;
  background-image:url(../images/background.png);
  background-repeat:repeat-x; 
*/
/* Shadows, gradients, rounded corners, transitions
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: 1px 1px 8px rgba(0,0,0,0.25);
  background-image: linear-gradient(to bottom, orange 80%, yellow 100%);         
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  transition: all 1s ease;
*/
/* Common colors
  #cccccc: grey   #eeeeee: light grey  #333333: dark grey for field contents
  #ffffff: white
  #fafafa: light grey(field background)#E4E6E3 light grey (button background) 
  #006699: light blue (header background) #D1FAFF light blue (button hover)
  #86AEF9 darker blue for hovered links #1C478E blue for backgrounds
*/
/* Code to add a not full border ------
.na-panelwarning_header {
  position: relative;
}
.na-panelwarning_header:before { 
  content : "";
  position: absolute;
  left    : 0.7em;
  bottom  : 0;
  height  : 1px;
  width   : 95%;  
  border-bottom: 0.1em solid #ebccd1;
}
------------------------------------------  */
@font-face {
	/* Our user-created fonts */
	font-family: FontAwesome;
	src: url('../fonts/icomoon.woff') format('woff'),
	     url('../fonts/icomoon.ttf') format('truetype'),
	     url('../fonts/icomoon.eot');
	font-weight: normal;
	font-style: normal;  
}

/*** general styling start ***/
.na-icon_font_small {
  display: inline-block;
	font-family: "FontAwesome";
  font-size: 1em; 
  width: 1em;
  text-align: center;
  line-height: 1em;
  border-radius: 1em;  
  padding: 0.5em;
  background-color: #25506b;   /* #25506b;  /* #95CF68; */
  color: white;  /* black; */
  border: none;   /* 1px solid #0073f2; */
  box-shadow: none;  /* 2px 2px 4px 0 #454545; */
}
.na-icon_font_medium {
	display: inline-block;
	font-family: "FontAwesome";  
  font-size: 1.3em;
  width: 1.3em;
  text-align: center;
  line-height: 1.3em;
  border-radius: 0.85em;  
  padding: 0.2em;
  background-color: #25506b;  /* #25506b;  /* #95CF68; */
  color: white;   /* black; */
  border: none;   /* 1px solid #818284; */
  box-shadow: none;  /* 2px 2px 4px 0 #454545; */
}
.na-icon_font_large {
  display: inline-block;
	font-family: "FontAwesome";
  font-size: 1.5em;
  width: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 1.25em;  
  padding: 0.5em;
  background-color: #25506b; /* #95CF68;*/
  color: white;  /* black; */
  border:  none;  /* 1px solid #818284; */
  box-shadow: none;  /* 2px 2px 4px 0 #454545; */
}
ul.na-list_vertical {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
ul.na-list_vertical li {
  padding: 0.2em 0.2em 0.2em 0.2em;
  height: 1.5em;
}

ul.na-list_vertical li label {
  display: inline-block;  /* allows the inline label to have width/height */
  vertical-align: middle; /* align image so that it is centered in the row */
  text-align: right;
  margin-right: 0.6em;
  font-size: 0.85em;
}
a {
	cursor: pointer;
}
a.na-inactive {
 pointer-events: none;
 cursor: default;
}
/* styling for drag & drop operations */
.na-drag_item {   /* style the cursor on elements which can be dragged using a grab hand */
  cursor: pointer;   /* fall back if none of the below works */
  cursor: move;
/*	cursor: grab;
	cursor: -moz-grab;
  cursor: -webkit-grab; */
/*  -webkit-tap-highlight-color: rgba(255,0,0,0.5) !important;  /*does not work > Android 4.4 */
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* no default webkit outline */
  -webkit-tap-highlight-color: transparent;            /* no default webkit outline */
}
.na-drag_item.outline {
	outline: 2px groove rgba(255,0,0,0.5);
} 

.na-dragged_item {
	z-index: 4;
	opacity: .4;
	/*background: red; */
}
.na-dragged_item span.na-form_item {
  color: red;
} 
.na-dragged_clone {
	z-index: 4 !important;             /* for clone to appear in front of other elements */
  pointer-events: none !important;   /* making below elements accessible */
  position: fixed !important;
  opacity: 0.7 !important;
  box-shadow: none !important;
  transition: none !important;
  text-shadow: none !important;
  transform: none !important;
} 
span.circle {
	display: inline-block;
	border-radius: 50%;
	vertical-align: middle;
}
/*** general styling end ***/

html, body.na-body {
  box-sizing: border-box;
	width: 100%; /* occupy 100% of the browser window */
	height: 100%; /* occupy all height of the browser window */
  margin: 0 auto !important;
 	padding: 0em;  	
	font-family: Verdana, Arial, sans-serif;  /* browsers use Times New Roman as default */
	text-align: left;
  font-size: 1em; /* font size should not be reduced here, it spoils centering of website */
}
div.na-root {
	box-sizing: border-box;
	height: 100%;
	width: 100%;  
  font-size: 0.9em;
	margin: 0 auto;   /* top/bottom margins 0, left/right calculated for centering */
	position: relative;
	left: 0em;
	top: 0em;
	overflow: hidden;   
	
}
/*** header styling start ***/
header.na-header {
  box-sizing: border-box;
	padding: 0.3em 0 0.4em 0; /* padding at top and bottom */
	background-image: linear-gradient(#4280FC, #0055FF);
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); 
	height: 3em;   
	color: white;
	text-decoration: none;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-style: italic;
  font-size: 1.1em;
	border-bottom: 0.1em groove white;
}

header.na-header h1 {
	font-family: "Libre Baskerville", Arial, sans-serif;
	font-size: 1.2em;
	font-style: normal;
	padding: 0 0 0.2em; 
}
/*** header styling end ***/

/*** top navigation styling start ***/
nav.na-nav_top1 {
  box-sizing: border-box;
  display: block;
	height:2.8em;
	background-image: linear-gradient(#0055FF, #0036A1);
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
}

nav.na-nav_top ul {
	display: inline;
}

nav.na-nav_top li {
	margin-right: 2em;
	display: inline;
}

nav.na-nav_top li a:before { /* display icons before the links */
	font-family: "FontAwesome";
	font-size: 1.2em;
	position: relative; /* move icon font above link text */
	left: -0.1em;
	top: 0.2em;
}

nav.na-nav_top a, nav.na-nav_top a:visited {
	/* some browsers change color for visited pages */
  cursor: pointer;
  pointer-events: auto;
	font-size: 1em;
	color: white;
	text-decoration: none;
}

nav.na-nav_top a.na-inactive { /* link is inactive */
	color: grey; /* color to show inactive status */
	pointer-events: none; /* link is not operational */
}

nav.na-nav_top a:hover {
	color: #86AEF9; /* darker blue */
}
/*** top navigation styling end ***/

/*** main area general styling start ***/
div.na-main_area {
  box-sizing: border-box;
	clear: both;
  width: 100%;
  height: 100%;
  margin-bottom: -1.5em;  
  padding-bottom: 1.5em;
  margin-top: -5.8em;
  padding-top: 5.8em;  
  margin-left: auto;
  margin-right:auto;
}
/*** main area general styling end ***/

/*** left navigation styling start ***/
nav.na-nav_left {
  box-sizing: border-box;
	width: 20%;
	float: left;
	padding: 0 1% 0 0;
	margin-right: 2%; /* margin to separate from right section */
	background-color: #0055FF; /* blue */
	border-radius: 0.5em; /* round edges */
	box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.25);
	font-size: 0.9em;
}

nav.na-nav_left h3 {
	text-transform: none;
	font-weight: 600;
	color: white;
	padding: 1em 1em 0.4em 1em;
	border-bottom: 0.1em solid white;
	font-size: 1.1em;
}

nav.na-nav_left ul {
	list-style: none;
	display: block;
	padding: 0.3em 0 0 0;
}

nav.na-nav_left li {
	padding: 0.4em 1em 0.3em 1em;
	border-bottom: 0.1em dotted white;
}

nav.na-nav_left a, nav.na-nav_left a:visited {
	/* some browsers change color for visited pages */
	color: white;
	text-decoration: none;
}

nav.na-nav_left a:hover {
	color: #86AEF9; /* darker blue */
}
/*** left navigation styling end ***/

/*** Alternative left work area styling start ***/
div.na-workarea_left {
  box-sizing: border-box;
	width: 17%;
  height: 90%;
  float: left;
  padding: 0 1% 0 0;
  border: 1px solid #c0c0c0;
  /* 1% right padding to separate from right section */
  margin-right: 1%; /* margin to separate from right section */
  background-color: #fffff4; /* light yellow */
  border-radius: 0.5em; /* round edges */
  box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.25);
  font-size: 0.9em;
  overflow-y: scroll;   
}
/*** left work area styling end ***/

/*** form styling start ***/
div.na-form_area {
  box-sizing: border-box;
	float: left;          /* float form to appear next to the left navigation block */	
	position: relative;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;          /* This may change when there is left navigation section */
  margin: 0 auto;
}

div.na-form_body {
  box-sizing: border-box;
	padding: 1em;
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0 auto;
	height: 100%; /* should be 94% in case the height needs to be fixed */
	overflow: auto;  	
}
div#mainScreen_container {
  box-sizing: border-box;
	height: 98%;  /* 1Reduced from 100% to avoid a vertical scrollbar */
}
div.na-form_divleft {
	  box-sizing: border-box;
	  height: 100%;
	  float: left;
}
div.na-form_divright {
    box-sizing: border-box;
    height: 100%;
    float: right;
}
div.na-form_grid_div {
    box-sizing: border-box;
    /* background-color: red; */
    display: inline-block;
    overflow: auto;
}
ul.na-form_grid_head {
    /* background-color: red; */
}
ul.na-form_grid_detail {
    /* background-color: blue; */
}
div.na-form_message {
  box-sizing: border-box;
	position: absolute;  /* position from nearest positioned ancestor */
	/* fix message area at bottom */
	bottom: 0em; /*1.2 2.2em; 0.5*/
	left: 0em;
	clear: both;
	padding: 0.3em;
	margin-top: 0 1em;
	margin-left: 2%;
  width: 96%;
	height: 2.8em;
	line-height: 1.2em;
	color: red;
	background-color: #F5F5FA; /* light grey */
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	font-size: 0.9em;
	overflow: hidden;	
}


/* styling for message popups */ 
.na-panel.na-panelpopup {
	margin: 0em;
}
div.na-popup_message {
  margin: 1em 1em 1em 0em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  color: #aa0000;  /* bordeau */
  font-size: 1em;
	font-weight: 700;
	overflow: hidden;   /* to force content on next line */
}
div.na-popup_icon {
	float: left;
  margin: 1em;
  padding: 0.5em;
  width: 2em;
}
div.na-popup_icon > span:before {
	font-family: "FontAwesome";
	content: "\f071";
	color: #FFA500;
	font-size: 3em;
  font-weight: 700;
}
div.na-popup_icon > span {
}
div.na-validation_msg {    /* styling for non-native validation message area */
	position: relative; 
	color: red;
  font-size: 0.9em;
  /*display: inline-block;*/
  display: block;
	padding: 0.2em 0em;
}
span.na-screen_msg {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	font-size: 1.1em;
	font-weight: 700;
	z-index: 21;
}

/* form fieldset {
	display: table;
	padding: 2em;
	margin-bottom: 2em;
} */

fieldset.na-tabular {
	display: table; /* adopt table-like styling */
	border-collapse: collapse; /* for table cells */
  border: none;
	padding: 0.25em;
  width: auto;
  table-layout: fixed;
	/*box-shadow: 4px 4px 8px rgba(0,0,0,0.25);  /* light bottom / right shadow */
	/*background-color: #FAFBFC; /*light grey */
}
/*fieldset.na-tabular ol, fieldset.na_tabular ul { */
fieldset ol, fieldset ul {
	/* use <ol> or <ul> depending on whether the label is inline or not */
	list-style-type: none; /* no bullets */
	display: table-row;
	/*  margin: 0 1% 0 1%; */
}
fieldset.na-tabular ol.na-not_table, fieldset.na-tabular ul.na-not_table {
  /* use <ol> or <ul> depending on whether the label is inline or not */
  list-style-type: none; /* no bullets */
  display: block;   /* changed 4/9/2017; was inline-block; */
}

fieldset.na-tabular ol li, fieldset.na-tabular ul li {
  display: table-cell;
	padding: 0.2em 0.2em 0.2em 0.2em;
}
fieldset.na-tabular ol li:first-child, fieldset.na-tabular ul li:first-child {
  /* border-left: none;    /* no left border for first column */
}  
fieldset.na-tabular ol li:nth-child(even), fieldset.na-tabular ul li:nth-child(even)  {
  /*background-color: yellow; */
}
fieldset.na-tabular ol li:nth-child(odd), fieldset.na-tabular ul li:nth-child(odd) {
    /*background-color: green; */
}

fieldset.na-tabular ol.na-column, fieldset.na-tabular ul.na-column {  /* add colgroup support */
  /* use <ol> or <ul> depending on whether the label is inline or not */
  list-style-type: none; /* no bullets */
  display: table-column-group;
  /*  margin: 0 1% 0 1%; */
}
fieldset.na-tabular ul li.na-column {    /* for colgroup support */
  display: table-column;
  /*width: 34em; */
  /*width: 40%; */
  background-color: green; 
}

fieldset.na-tabular ol li.na-not_table, fieldset.na-tabular ul li.na-not_table {
  display: block;    /* ATTENTION: changed by NK from inline-block on 22/5/18*/
  padding: 0.1em;
  /*background-color: red; */
}
fieldset ul li.na-li_extra_info {
  padding: 0.6em 0.2em 0.6em 0.2em !important;
  background-image: linear-gradient(#525E52, #525E52); 
  border: 1px solid #525E52;  
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  transition: height 1s;
  -webkit-transition: height 1s;
}

/* ----  L A B E L S  ---- */
fieldset.na-tabular li label {
	font-size: 0.85em;
	font-weight: 700;
	color: black; /*#0036A1;   /* dark blue */
	width: 7em;
}

fieldset.na-tabular ol li label {
	display: block;
	/* display label as block level on separate line with field */
}

fieldset.na-tabular ul li label {
	display: inline-block;  /* allows the inline label to behave like a block element with width/height */
	vertical-align: middle;	/* align image so that it is centered in the row */
	text-align: right;
	margin-right: 0.6em;
}

/* ----  UI I/O CONTROLS  ---- */
.na-form_item {
	font-size: 0.9em; /* 0.85em reduce somewhat the content font */
	font-weight: 600;
	font-family: Arial, Verdana, sans-serif;	
	color: black; /*#333333;   /* dark grey */
	border: 1px solid #9BBBFA; /* light blue for grey use #333333;  */
	border-radius: 4px;
	padding: 0.3em;  /*0.3em */
	margin: 0em;           /* 0em */
	background-color: #F2F7FA; /* very light blue */
	/*background-image: linear-gradient(white, #f2f2f2);   /* from white to light grey */
}

.na-grid_content .na-form_item {
	/* special styling for form items in grids */
	font-size: 0.8em; /* reduce somewhat the content font */
	color: white;
	background-image: linear-gradient(#4280FC, #0055FF);
	/* from light to darker blue #0055FF*/
}

fieldset li span { /* basic style for <span> elements */
	/* to add code flexibility avoid the specification for: width, height */
	display: inline-block;
	/* allows the inline span to behave like a block element with width/height */
	vertical-align: middle;
	/* align image so that it is centered in the row */
	padding: 0.4em;
}

fieldset li input[type="text"] { /* basic style for text elements */
	padding: 0.3em;
	text-align: left;
}
fieldset li textarea {    /* basic style for textarea */
	display:inline-block; 
	vertical-align:middle; 
}

fieldset li input[type="number"], fieldset li input[type="tel"],
	fieldset li input[type="email"], fieldset li input[type="password"],
	fieldset li input[type="url"], fieldset li input[type="file"], fieldset li select
	{
	padding: 0.3em;  /*0.2em 0.2%;*/
}

fieldset li input[type="checkbox"] {
	/* basic style for check box elements */
	cursor: pointer;
  display:inline-block; 
  vertical-align:middle;
}

fieldset.na-tabular input[type="date"].na-form_item,
fieldset.na-tabular input[type="month"].na-form_item
  {
/*	 font-size: 1.03em; /* increase font for date field */
  }
/* ----  B U T T O N S  ---- */
/*fieldset li input[type="submit"], input[type="button"] {
	background-color: #E4E6E3; 
	color: black;
	padding: 0.4em 1%;
	font-size: 0.9em;
	font-weight: 600;
	border: 1px double #333333; 
	cursor: pointer;
	border-radius: 6px;
	margin-left: 5%;
	margin-bottom: 2em;
	transition: all 1s ease;  animates a color transition in 1s 
}

fieldset li input[type="submit"]:hover, input[type="button"]:hover {
	background-color: #D1FAFF; 
}
*/
.na-icon_button_textright:before { /* icon button with text on the right */
	font-family: "FontAwesome";
	content: attr(data-icon_symbol);
	font-size: 1.4em;
	font-weight: 700;
	color: #002C85; /* very dark blue */
	position: relative; /* move icon font vs. link text */
	left: -0.2em;
	top: 0.1em;
	user-select: none;  
}

a.na-icon_button_textright { /* icon button with text on the right */
	cursor: pointer;
	font-size: 1em;
	color: #002C85; /* very dark blue */
	font-weight: 700;
	border: none;
	background: none;
	margin-right: 5%;
	user-select: none;
/*	-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;       /* IE/Edge */
}

.na-icon_button_textbelow:before { /* icon button with text below */
	font-family: "FontAwesome";
	content: attr(data-icon_symbol);
	font-size: 1.6em;
	font-weight: 700;
	color: #002C85; /* very dark blue */
	position: relative; /* move text to the left so that it end below icon */
	left: 1.2em;
	top: -0.8em;
	user-select: none;
}

a.na-icon_button_textbelow { /* icon button with text below */
	cursor: pointer;
	font-size: 0.9em;
	padding: 0em 0.2em 0em 0.2em;
	/* add some left and right padding around each icon */
	color: #002C85; /* very dark blue */
	font-weight: 700;
	border: none;
	background: none;
	position: relative; /* move icon font above link text */
	left: 0em;
	top: 1.5em;
	user-select: none;
	-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;       /* IE/Edge */
}

.na-icon_button_notext:before { /* style icon of ribbon button */
  font-family: "FontAwesome";
  content: attr(data-icon_symbol);
  display: inline-block;
  position: relative; 
  left: 0em;
  top: 0em; 
  font-size: 1.7em;
  font-weight: 550;
  width: 1.7em;
  height: 1.7em; 
  text-align: center;
  line-height: 1.8em; /* 1.9em a higher line-height than height makes the icon more symmetric */
  border-radius: 50%;    
  padding: 0em; 
  margin: 0em;
  background-color: #525E52;   
  color: white;
  border: 1px solid #454545;
  box-shadow: 2px 2px 4px 0 #454545; 
  user-select: none;
  -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;       /* IE/Edge */
}
.na-icon_button_notext.awesome_solid:before { 
  font: var(--fa-font-solid);
  font-size: 1.45em;
}
.na-icon_button_notext.awesome_brands:before { 
  font: var(--fa-font-brands);
  font-size: 1.45em;
}
.na-icon_button_notext.awesome_regular:before { 
  font: var(--fa-font-regular);
  font-size: 1.45em;
}
.na-icon_button_notext {    /* icon button with no text */
  position: relative; 
  cursor: pointer;
  font-size: 0.9em;
  padding: 0em;
  margin: 0em;
  color: #002C85;   
  font-weight: 700;
  border: none;
  background: none;
  user-select: none;
}

.na-icon_button_floating:before { /* style floating icon button */
  display: inline-block;
  position: absolute; 
  left: 0em;
  top: 0em;
  padding: 0em;
  margin: 0em;
  font-family: "FontAwesome";
  content: attr(data-icon_symbol);
  font-size: 1.7em;
  font-weight: 550;
  color: black;
  background-color: transparent;
  border: none;
  user-select: none;
  -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;       /* IE/Edge */
}

.na-icon_button_border:before {
	/* use icon font on anchor styled as button */
	font-family: "FontAwesome";
	content: attr(data-icon_symbol); 
	position: relative; /* move icon font above link text */
	left: -0.4em;
	top: 0em;
	margin-left: 0.4em;
	font-size: 1em;
	font-weight: 550;
  color: black;
  background-color: #95CF68;
  border: 1px solid #818284; 
  border-radius: 50%;
  box-shadow: 2px 2px 4px 0 #4d4d4d;
	padding: 0.2em;	
	user-select: none;
}
.na-icon_button_border:after {
  /* use icon font on anchor styled as button */
  font-family: "FontAwesome";
  content: attr(after_data-icon_symbol);
  font-size: 1em;
  font-weight: 550;
  color: white;
  position: relative; /* move icon font above link text */
  right: -0.8em;
  top: 0em;
  user-select: none; 
}

.na-icon_button_border { /* style anchor as icon button with border */
  border: 1px solid #9DA2B3;
  border-radius: 0px;   /*6px;*/
  color: black;
  display: inline-block;
  height: 1.5em;
  vertical-align: middle;
  line-height: 1.6em;
  font-size: 0.85em;
  font-weight: 600;
  background-image: linear-gradient(#FAFBFC, #FAFBFC);
  box-shadow: 2px 2px 1px 0 #454545;  /*#818284;*/
  cursor: pointer;
	padding: 0.2em 0.4em 0.3em 0.4em; 
	margin-left: 0.6em; 
	user-select: none; 
	-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;       /* IE/Edge */
}
.na-icon_button_border.clicked {
  background-image: linear-gradient(#8A8E9C,#8A8E9C);
}

/* ************BELOW NEEDED?? */
.na-grid a.na-icon_button_border {
	/* special styling of anchor as icon button in grid data */
	vertical-align: middle;
	margin: 0.1em 0.2em 0 0;
	/* aligns better fast buttons with other elements */
	font-size: 0.75em;
	color: white;
	background-image: linear-gradient(#8f8f8f, #333333);
	/* from light to darker grey */
}

.na-grid_head a.na-icon_button {
	/* special styling of anchor as icon button in grid heading */
	padding-right: 0.5em;
	font-size: 0.85em;
	font-weight: 700;
	color: #0036A1; /* dark blue */
	border: none;
}
/* END OF BELOW NEEDED?? */


/* INSPIRE OBJECTS */
.na-object { /* styling of object container div */
  display: inline-block;
  position: relative;
  top: 0em;  /* 0 */
  left: 0em;  /* 0 */
  margin: 0.75em; /* 0.5em margin around objects */
  font-size: 0.8em;
  font-weight: 500;
  color: white;
  width: 55px;   /* 55px 63px */
  height: 67px;  /* 67px */
  transition: all .25s ease-in-out;
}
.na-object.product {
	width: 61px;
}
.na-object_del {  /* styling for del buttons */
  display: block;
  position: absolute;
  z-index: 11;
  top: -4px;   /* -0.5em; */
  left: -4px;  /* -0.5em; */
  width: 20px;   /* 2em; */
  height: 20px;  /* 2em; */
  border: 1px solid #b0b0b0; 
  border-radius: 50%;  	
  color: #292929;
  background-color: #dddddd;
  cursor: pointer;
  transition: all .25s ease-in-out;
}
.na-object_del:before { 
  position: absolute;
  top: 2.5px;  /* 0.26em; */
  left: 4.5px;   /* 0.38em; */ 
  content: "\f00d"; 
  font-family: "FontAwesome";
  font-size: 13px;  /* 1.3em; */
  font-weight: 700;  
}
.na-object_inq {  /* styling for inqury buttons */
  display: block;
  position: absolute;
/*  z-index: 11;  */
  top: -5px;   /* -0.5em; */
  right: -5px; /* -0.5em; */
  width: 25px;   /* 2em; */
  height: 25px;  /* 2em; */
  border: 1px solid #b0b0b0; 
  border-radius: 50%;   
  color: white;  /* #292929; */
  background-color: #003895;  /* #dddddd; */
  cursor: pointer;
  transition: all .25s ease-in-out;
}
.na-object_inq:before { 
  position: absolute;
  top: 5px;  /* 0.3em; */
  left: 10px;  /* 0.6em; */  
  content: "\f129"; 
  font-family: "FontAwesome";
  font-size: 13px;  /* 1.3em; */
  font-weight: 500;  
}
.na-object_center {
	z-index: 11;
/*	opacity: 1; */
}
.na-object_center.fussy {
  z-index: auto;
/*  opacity: 0.3; */
}

.na-object_body {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* no default webkit outline */
  -webkit-tap-highlight-color: transparent;            /* no default webkit outline */  
  background-size: 100% 100%;   /* **** */
}
.na-object_body.outline {
  outline: 2px groove rgba(255,0,0,0.5);
} 
.na-object_body { /* styling of object body */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%; /* remaining 20% is for the object mnemonic */
}
.na-object_body.beneficiary:before {
  content: "\f007"; 
  font-family: "FontAwesome";
  font-size: 5em;
  font-weight: 700;  
  font-color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  display: block;  
  line-height: 53.6px;  /* so that icon font covers entire body */
}
.na-object_symbol {  /* style span that hosts the object symbol */
  display: inline-block;
  position: absolute; 
  top: 24px;
  left: 20px;
  width: 15px;
  height: 15px;
  border: 1px solid #b0b0b0; 
  border-radius: 50%;   
  color: #292929;
  background-color: #f3f3f3;  
  font-family: "FontAwesome";
  text-align: center;
  line-height: 15px; 
  vertical-align: middle;
  font-size: 12px;
  font-weight: 700;
}
.na-object_text { /* style object text e.g. balance  */
  display: inline-block;
  position: absolute;
  top: 37px;    /* 53%; */ /* allow some space from the top of the object */
  left: 0px;
  width: 95%;
  margin: 0;
  vertical-align: middle;
  text-align: right;
  font-size: 7.8px;  /* 7.4px; */  /* 0.82em;  */
  font-weight: 600;
  overflow: hidden;
  color: black;
  /*  word-wrap: normal;    /*break word at allowed break points or "break-word" to break unbreakable words*/
  white-space: nowrap;
  /* do not wrap to the next line, contents will roll as ticker */
  padding: 0.75em 0.1em 0.5em 0.1em;
  /* make text not selectable by user */
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}
.na-object_mnem {
  display: block;
  position: absolute;
  top: 52px; /* allow some space from the top of the object */
  left: 0;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 9px;  /* 0.9em; */        /* 0.75em */
  font-weight: 600;
  color: black;
  overflow-x: visible; /* allow some greater text for id */
  /*break word at allowed break points or "break-word" to break unbreakable words*/
  /*word-wrap: normal;*/ 
  word-wrap: normal;  /* break-word; */
  padding: 0.5em 0.1em 0.1em 0.1em;
}
a.na-object_link { /* clickable link that occupies the entire object */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none; /* ensures that link does not get underlined */
}


/* FAVOURITE TRANSACTIONS */
.na-favtrx { /* styling of object container div */
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  top: 0em;  /* 0 */
  left: 0em;  /* 0 */
  margin: 0.9em 0.5em 0.2em 0.8em; /* margin around objects */
  font-size: 0.8em;
  font-weight: 500;
  color: black;   
  width: 7.8em;     /* 80px;*/
  height: 6em;  /* 60px;*/
/*  border: 1px solid #9DA2B3;   /* #818284; */
  /*border: 2px solid #A94164;   /*#d325c2; */
  border-radius: 4px;
  background-image: linear-gradient(to right, #F0597F, #c66887);
  box-shadow: 2px 2px 2px 0 #454545;
  transition: all .25s ease-in-out;
}
.na-favtrx_del {  /* styling for del buttons */
  display: block;
  position: absolute;
  z-index: 2; 
  top: -0.7em;
  left: -0.7em;
  width: 2.5em;
  height: 2.5em;
  border: 1px solid #F0597F; 
  border-radius: 50%;   
  color: #292929;
  background-color: #fceffa;
  cursor: pointer;
  transition: all .25s ease-in-out;
}
.na-favtrx_del:before {   /* delete icon */
  position: absolute;
  top: 0.33em;
  left: 0.5em;  
  content: "\f00d"; 
  font-family: "FontAwesome";
  font-size: 1.4em;
  font-weight: 700;  
}
.na-favtrx_icon { 
  box-sizing: border-box;
/*  position: relative; 
  left: 0em;
  top: 0em; */
  display: inline-block;
  width: 100%;
  height: 35%;
  vertical-align: middle;
  text-align: center;
  font-family: "FontAwesome";
/*  content: attr(data-icon_symbol);  */
  font-size: 1.8em;  /* 1.7em */
  font-weight: 600;  /*550;*/
 /* color: #4280FC; /*#002C85; /* very dark blue */
/*  color: blue;  
  background-color: #f9ddf5; */
  padding: 0.2em; 
}
.na-favtrx_mnem {
  box-sizing: border-box;
	display: inline-block;
  width: 100%;
  height: 65%;
  vertical-align: middle;
  text-align: center;
  font-size: 1.05em;  /* 0.95em;  */
  font-weight: 700;
/*  color: #0000cc;
  background-color: #fceffa; */
  /*break word at allowed break points or "break-word" to break unbreakable words*/
  /*word-wrap: normal;*/ 
  word-wrap: break-word;
  padding: 0.8em 0.2em 0.2em 0.2em; 
}
a.na-favtrx_link { /* clickable link that occupies the entire object */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none; /* ensures that link does not get underlined */
}


/*** form styling end ***/

/*** Bottom navigation styling start ***/
nav.na-nav_bottom { /* shown instead of footer if smartphone */
  box-sizing: border-box;
	clear: both;
	height: 1.5em;  /*1%; */
	margin: 0 0 0 0;
	padding: 0.2em 3% 0.8em 3%;
	border-top: 1px solid #666666; /* dark grey */
	display: none; /* hide by default */
}

nav.na-nav_bottom ul {
	display: inline;
}

nav.na-nav_bottom li {
	margin-right: 2em;
	display: inline;
}

nav.na-nav_bottom li a:before { /* display icons above the links */
	font-family: "FontAwesome";
	font-size: 1.3em;
	position: relative; /* move icon font above link text */
	left: 2em;
	bottom: 0.8em;
}

nav.na-nav_bottom  li:nth-child(1) a:before {
	content: "\6E"; /* "\6E list \65 wifi \f0e9  "\&#0073" */
}

nav.na-nav_bottom a, nav.na-nav_bottom a:visited {
	/* some browsers change color for visited pages */
	font-size: 1em;
	color: #333333; /* grey */
	text-decoration: none;
}

nav.na-nav_bottom a:hover {
	color: #cccccc; /* lighter grey */
}
/*** Bottom navigation styling end ***/

/*** Footer styling start ***/
footer.na-footer { /* shown if not smartphone */
  box-sizing: border-box;
	clear: both;
	padding: 0.25em 0.5em;
	height: 1.5em;
	margin: 0 0 0 0;
	/*  border-top: 1px solid #666666;  /* dark grey !!shown even if footer is not*/
	color: black;  /*#cc0000; /* red */
	font-family: "Courgette", Verdana, sans-serif;
	font-size: 0.8em;
	text-align: center;
}
/*** Footer styling end ***/

/*** Modal content popup styling ***/
div.na-content_modal {
	position: fixed;
	background-color: white;
	border: 6px solid #424242; /* dark grey border */
	border-radius: 10px;
	/*  box-shadow: 0px 0px 8px 16px rgba(0,0,0,0.30);  /*(0,0,0,0.25); */
	top: 15%;
	left: 8%;
	width: 85%;
	height: 65%;
	z-index: 3;
	visibility: hidden;
	transform: scale(0.1);
}

div.na-title_modal {
	position: relative;
	top: 0;
	left: 0;
	margin: 0% 0% 0 0%;
	padding: 2%;
	height: 8%;
	border-radius: 6px 6px 0 0;
	background-color: #D1E1F0; /* grey - blue */
	border-bottom: 1px solid #9BBBFA; /* dark blue border */
}

div.na-title_text_modal {
	position: absolute;
	top: 35%; /* allow some space from the top of the object */
	left: 0;
	width: 95%;
	font-size: 1.1em;
	font-weight: 900;
	color: #002C85; /* very dark blue */
	text-align: center;
	vertical-align: middle;
}

a.na-bt_close_modal:before {
	/* use icon font on anchor styled as button */
	position: relative; /* move icon font left of link text */
	left: -0.2em;
	top: 0.1em;
	font-family: "FontAwesome";
	content: attr(data-icon_symbol);
	font-size: 1.5em;
	font-weight: 700;
	color: #002C85; /* very dark blue */
}

a.na-bt_close_modal { /* style anchor as icon button */
	position: absolute;
	top: 30%; /* allow some space from the top of the object */
	left: 88%;
	cursor: pointer;
	font-size: 1em;
	color: #002C85; /* very dark blue */
	font-weight: 700;
	border: none;
	background: none;
}

div.na-body_modal {
	margin: 0% 0% 0 0%;
	height: 65%;
	background-color: #FAFBFC; /* light grey */
}

div.na-buttons_modal {
	padding: 2% 3% 1% 2%;
	margin: 0 0% 0 0%;
	height: 7%;
	background-color: #FAFBFC; /* light grey */
	border-top: 1px solid #9BBBFA; /* light blue border */
	/*box-shadow: 4px 4px 8px rgba(0,0,0,0.25);  /* light bottom / right shadow */
}

div.na-message_modal {
	padding: 0% 2% 1% 2%;
	margin: 0 0% 0 0%;
	height: 5%;
	border-radius: 0 0 6px 6px;
	background-color: #FAFBFC; /* #F5F5FA;  /* light grey */
	/*box-shadow: 4px 4px 8px rgba(0,0,0,0.25);  /* light bottom / right shadow */
	font-size: 0.9em;
	color: red;
}

div.na-overlay {
	/* overlay div that disables all elements when showing modal */
	position: fixed;
	width: 100%;
	height: 100%;
  display: none;
	top: 0;
	left: 0;
  background: rgba(255,255,255,0.9);   
/*	background-color: grey;
	opacity: 0.9; /* makes background fussy */
	z-index: 5;
}
div.na-overlay_lowfussy {
  /* overlay div that disables all elements when showing modal */
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.8);   
/*  background-color: grey;
  opacity: 0.5; /* makes background fussy */
  z-index: 5;
}
div.na-overlay_nofussy {
  /* overlay div that disables all elements when showing modal */
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0);   
/*  background-color: grey;
  opacity: 0.5; /* makes background fussy */
  z-index: 5;
}
div.na-overlay_mediumfussy {
  /* overlay div that disables all elements when showing modal */
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.7);   
/*  background-color: grey;
  opacity: 0.7; /* makes background fussy */
  z-index: 5;
}
div.na-show_modal {
	visibility: visible;
	transform: scale(1);
	transition: all 0.3s;
}
/*** Modal content popup styling end ***/

/*** Grid styling start ***/
fieldset.na-grid {
	display: table; /* adopt table-like styling */
	border-collapse: collapse; /* for table cells */
	border: 1% solid #333333;
	padding: 1% 1% 2% 1%;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
	/* light bottom / right shadow */
	background-color: #eeeeee; /*light grey */
}

fieldset.na-grid_popup {
	display: table; /* adopt table-like styling */
	margin: 1% 0 1% 0;
	border-collapse: collapse; /* for table cells */
	border: 1% solid #333333;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
	/* light bottom / right shadow */
	padding: 2%;
	background-color: #eeeeee; /*light grey */
}

ul.na-grid_head {
	display: table-header-group;
}

ul.na-grid_content {
	display: table-row;
}

ul.na-grid_head li, ul.na-grid_content li {
	display: table-cell;
	margin: 0.4em 0.1em 0 0;
	/* have some top margin between the grid rows*/
}

ul.na-grid_head li span { /* grid style headings */
	padding-right: 0.5em;
	font-size: 0.85em;
	font-weight: 700;
	color: #0036A1; /* dark blue */
	border: none;
}
/*** Grid styling end ***/

/*** Chart styling start ***/


/*** Temporaries styling start ***/

/* B U S Y    I N D I C A T O R S - change class of chosen to .loading */
/* classes for showing the busy indicator OPTION 1*/
.loadingNO {
  border-bottom: 6px solid rgba(2, 7, 219, .2);
  border-left: 6px solid rgba(2, 7, 219, .2);
  border-right: 6px solid rgba(2, 7, 219, .2);
  border-top: 6px solid rgba(2, 7, 219, .7);
  border-radius: 100%;
  height: 2em;
  width: 2em; 

  transform-origin: 50% 50%;
  margin: auto;
  position: absolute;
  top: 50%;
  margin-top: -1em;
  left: 50%;
  margin-left: -1em;

  animation: rot 6s infinite linear;  
/*  position: fixed; */
  z-index: 101;  
}
@keyframes rot {
/*  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}*/
  0% {transform: rotate(0deg);
      border: 6px solid rgba(2, 7, 219, .4); border-top: 6px solid rgba(2, 7, 219, 1);}
  33% {transform: rotate(720deg); 
      border: 6px solid rgba(2, 219, 106, .4); border-top: 6px solid rgba(2, 219, 106, 1);}
  66% {transform: rotate(1440deg); 
      border: 6px solid rgba(255, 0, 4, .4); border-top: 6px solid rgba(255, 0, 4, 1);}   
  100% {transform: rotate(2159deg); 
      border: 6px solid rgba(255, 0, 4, .4); border-top: 6px solid rgba(255, 0, 4, 1);}   
}

/* classes for showing the busy indicator OPTION 2*/
.loading {
  transform-origin: 50% 50%;
  margin: auto;
  position: absolute;
  top: 50%;
  margin-top: -1em;
  left: 50%;
  margin-left: -1em;
  z-index: 101;  
	
/*	display:block;
  position:absolute;
  left:50%;
  margin-top:-2em;
  margin-left:-2em;  */
  
  height:4em;width:4em;    
  background-color:rgb(51,136,153);
  border-radius:2.5em 2.5em 2.5em 2.5em;
    -o-border-radius:2.5em 2.5em 2.5em 2.5em;
    -ms-border-radius:2.5em 2.5em 2.5em 2.5em;
    -webkit-border-radius:2.5em 2.5em 2.5em 2.5em;
    -moz-border-radius:2.5em 2.5em 2.5em 2.5em;
  box-shadow:inset 0 0 0 0.5em rgb(236,234,224);
    -o-box-shadow:inset 0 0 0 0.5em rgb(236,234,224);
    -ms-box-shadow:inset 0 0 0 0.5em rgb(236,234,224);
    -webkit-box-shadow:inset 0 0 0 0.5em rgb(236,234,224);
    -moz-box-shadow:inset 0 0 0 0.5em rgb(236,234,224);
  background: linear-gradient(-45deg, rgb(0,153,0), rgb(0,153,0) 50%, rgb(204,204,0) 50%, rgb(204,204,0));
    background: -o-linear-gradient(-45deg, rgb(0,153,0), rgb(0,153,0) 50%, rgb(204,204,0) 50%, rgb(204,204,0));
    background: -ms-linear-gradient(-45deg, rgb(0,153,0), rgb(0,153,0) 50%, rgb(204,204,0) 50%, rgb(204,204,0));
    background: -webkit-linear-gradient(-45deg, rgb(0,153,0), rgb(0,153,0) 50%, rgb(204,204,0) 50%, rgb(204,204,0));
    background: -moz-linear-gradient(-45deg, rgb(0,153,0), rgb(0,153,0) 50%, rgb(204,204,0) 50%, rgb(204,204,0));
  background-blend-mode: multiply;
  border-top:5px solid rgb(0,153,0);
  border-left:5px solid rgb(0,153,0);
  border-bottom:5px solid rgb(204,204,0);
  border-right:5px solid rgb(204,204,0);
  animation:cssload-roto 1.15s infinite linear;
    -o-animation:cssload-roto 1.15s infinite linear;
    -ms-animation:cssload-roto 1.15s infinite linear;
    -webkit-animation:cssload-roto 1.15s infinite linear;
    -moz-animation:cssload-roto 1.15s infinite linear;
}
@keyframes cssload-roto {
  0%{transform:rotateZ(0deg);}
  100%{transform:rotateZ(360deg);}
}
@-o-keyframes cssload-roto {
  0%{-o-transform:rotateZ(0deg);}
  100%{-o-transform:rotateZ(360deg);}
}
@-ms-keyframes cssload-roto {
  0%{-ms-transform:rotateZ(0deg);}
  100%{-ms-transform:rotateZ(360deg);}
}
@-webkit-keyframes cssload-roto {
  0%{-webkit-transform:rotateZ(0deg);}
  100%{-webkit-transform:rotateZ(360deg);}
}
@-moz-keyframes cssload-roto {
  0%{-moz-transform:rotateZ(0deg);}
  100%{-moz-transform:rotateZ(360deg);}
}

/* E N D   O F   B U S Y    I N D I C A T O R S */

/*   Commented out on 6/3/2018 in order not to impact the fullCalendar
table {
	width: 100%;
	border-collapse: separate;
	empty-cells: show;
	table-layout: fixed;
}
tr {
  height: 3em;
}
tr:nth-child(even) {
	background: #f0fce9;
}
tr:nth-child(odd) {
    background: #f0fbff;
}
td {
	border: 1px solid #ccc;
  font-size: 0.85em;
	width: 4em;
	text-align: center;
	word-wrap: break-word;
}
*/
div#util-table_grid {
/*	width: 100%; */
}

.na-tab {
  background-color: #FAFBFC;   /*#eeeeee; /*light grey */
  border: 1px solid #c0c0c0;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);  
  position: relative;
  left: 0em;
  top: 0em;
  margin: 0.5em;
  padding: 0em;       /* padding should be zero for the panel size calculations to be right */
  border-radius: 0.4em;
}
.na-setSelect {
  background-color: #FAFBFC;   /*#eeeeee; /*light grey */
  border: 1px solid #c0c0c0;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);  
  position: relative;
  left: 0em;
  top: 0em;
  margin: 0.5em;
  padding: 0em;       /* padding should be zero for the panel size calculations to be right */
  border-radius: 0.4em;
}
.na-tab .na-setSelect {
/*  background-color: red;   /*#eeeeee; /*light grey */
  border: none;
  box-shadow: none;   
  position: relative;
  left: 0em;
  top: 0em;
  margin: 0.5em;
  padding: 0em;       /* padding should be zero for the panel size calculations to be right */
  /*border-radius: 0.4em; */
}

.na-panel {
  box-sizing: border-box;
	background-color: #FAFBFC;   /*light grey */
  border: 1px solid #c0c0c0;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);  
  position: relative;
  left: 0em;
  top: 0em;
  margin: 0.5em;
  padding: 0em;       /* padding should be zero for the panel size calculations to be right */
  border-radius: 0.4em;
  overflow: hidden;
/*  transition: max-height 0.4s ease-in-out; */
}
.na-tab .na-panel {   /* remove margin in case the panel is part of a tabs */
  margin-top: 0em;
  margin-bottom: 0.4em;
  margin-right: 1em;
  margin-left: 1em;
}
.na-panel_header {
	height: 2.8em;   /* used when a panel is in CSS sizes mode */
	overflow-y: hidden;
  box-sizing: border-box;
	background-color: #D1E1F0; /* grey - blue */
  border-bottom: 0.1em solid #9BBBFA; /* dark blue border */  
  padding: 0em;       /* padding should be zero for the panel size calculations to be right */
}
.na-panel_header_title {
	display: inline-block;
	float: left;
	padding: 0.25em; 
	margin-left: 0.25em;
	margin-top: 0.5em; 
	font-weight: 600;
	font-size: 1em; 
	color: #003fbf;
}
.na-panel_header_buttons {
  display: inline-block;
  vertical-align: middle; 
  float: right;
  margin-top: 0.2em;
  padding: 0.25em 0.10em 0.25em 0.25em;
}
.na-panel_body {
  box-sizing: border-box;
  position: relative;
  left: 0em;
  top: 0em;
	padding: 0em;    /* padding should be zero for right panel size calculations */
	/* overflow-y: scroll; */ 
	overflow: auto;	
}
.na-tab .na-panel_body {
	overflow: hidden;  /* no scroll bars for tabs container panel */
}
.na-panel_contents {
  box-sizing: border-box;
	padding: 0.5em;
  height: 100%	
}
.na-panel_message {
  box-sizing: border-box;
  position: absolute;  /* position from nearest positioned ancestor */
  /* fix message area below the displayed form contents */
  bottom: 0.5em; /*1.2 2.2em; */
  left: 0em;
  clear: both;
  padding: 0.3em;
  margin-top: 0 1em;
  margin-left: 2%;
  width: 96%;
  height: 2.8em;  /* 2.2 */
  line-height: 1.2em;
  color: red;
  background-color: #F5F5FA;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  font-size: 0.9em;
  overflow: hidden;
}
.na-panel_footer {
  box-sizing: border-box;
  height: 2.8em;   /* used when a panel is in CSS sizes mode */
	background-color: #D1E1F0; /* grey - blue */
  border-top: 0.1em solid #9BBBFA; /* dark blue border */  
  padding: 0em;       /* padding should be zero for the panel size calculations to be right */
}
.na-panel_footer_buttons {
  display: inline-block;
  width: 100%;
  vertical-align: middle; 
  padding: 0.4em 0.5em 0.4em 0.5em;    /* was 0.7em   for buttons 0.35em; */
}

/* standard CSS sizes for the standard message popup panel */
div#message {
  width: 45em;  
  height: 14em;
  max-width: 45em;
  max-height: 14em;
}
div#message_body {
  height: 8.4em;
}
div#message .na-panel_footer {
  height: 2.8em;
}
/* SetSelect widget */
.na-setSelect_body {
  box-sizing: border-box;
	padding: 0em;       /* padding should be zero for the panel size calculations to be right */
  overflow-y: auto;   
}
.na-setSelect_body .na-panel_body {
  overflow-y: auto;   
}
.na-setSelect_contents_area {
  padding: 1.5em;       /* padding should be zero for the panel size calculations to be right */
  overflow: hidden;   
}
.na-setSelect_central_buttons {
	margin-top: 0.5em;
}
.na-setSelect_central_buttons button {
	display: block;
	width: 12em;
	height: 2.2em;
	margin-top: 0.5em;
	margin-left: 1em;
	padding-top: 0.1em;
  padding-bottom: 0.1em;
	font-size: 0.85em;
	font-weight: 500;
}
.na-tab .na-panel_labels {
  box-sizing: border-box;
	margin-top: 1em;
  margin-right: 1em;
  margin-left: 1em;
  margin-bottom: 0em;
  height: 1.2em;  
}
.na-tab .na-panel_labels ul {
	list-style-type: none;
	display: inline-block;
	margin-left: 0.6em;
}
.na-tab .na-panel_labels ul li {
	display: inline-block;
	/* margin-left: 0.4em */
}
a.na-tab_button {          /* style anchor as a tab button */
  cursor: pointer;
  font-size: 0.85em;
  display: inline-block;
  padding: 0.2em 0.6em 0.3em 0.6em; 
  margin-right: 0.1em;
  font-weight: 600;
  border: 1px solid #c0c0c0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: black;
  background-image: linear-gradient(#d7d7d7, #bcbcbc);
}
a.na-tab_button_active {       /* style anchor as a tab button */
  display: inline-block;
  position: relative;
  /*top: 0.2em; */
  pointer-events: none; /* link is not operational */
  cursor: pointer;
  font-size: 0.85em;
  padding: 0.2em 0.6em 0.3em 0.6em; 
  margin-right: 0.1em;
  font-weight: 600;
  border: 1px solid #c0c0c0;
  border-bottom: 0px solid #c0c0c0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: black;
  background-color: #FAFBFC;   /*light grey */
  z-index: 2;
  transform: scale(1, 1.2) translate(0em, -0.2em);  
  -webkit-transform: scale(1, 1.2) translate(0em, -0.2em); 
}

/* RADIAL MENU STYLING */
.na-circular_menu {   /* initially radial menu is closed - scale(0) */
  display: block;
  z-index: 10; 
  position: absolute;
  left: 10em;
  top: 10em;
  /*background: rgba(255,255,255,0.7); */
  border-radius: 50%;
  overflow: hidden;  
  width: 20em;
  height: 20em;
  overflow: visible;   /* for larger menu item text to show */
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -transform: scale(0); 
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: transform 0.4s ease-out; 
  -webkit-tap-highlight-color: rgba(0,0,0,0);}  /* avoid iPad highlight when option selected*/
.na-circular_menu.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -transform: scale(1);
}
.na-circular_menu li {  /* menu item text */
  font-size: 0.85em;
  font-weight: 600;   /* 550 */
	text-decoration: none;
  color: black;   /*#0000ff;*/
  display: block;
  height: 3.2em;  /* 3em */
  width: 3.2em;
  margin-left: -1.6em;  /*-1.5 em */  
  margin-top: -1.6em;
  padding: 0.3em;
  position: absolute;
  text-align: center;   
}
.na-circular_menu.open.fussy li {
	opacity: 0.3;
}
.na-circular_menu.open.fussy li.na-object_center {
  opacity: 1;
} 
.na-circular_menu li a span {  /* for icon embedded in menu item text span */
  font-family: "FontAwesome";
	font-size: 1.4em;  
	font-weight: 500;
	display: inline-block;
	padding: 0.5em;   /* padding-bottom: 0.2em; */
	margin-bottom: 0.2em;
	background-color: #E3779F; 
	color: black;
  border-radius: 50%;
  box-shadow: 2px 2px 4px 0 #727272;
}	
.na-circular_menu.open li.menu a span {
/*  border: 2px ridge black; */
  border: 4px double black;
}
.na-circular_menu li:hover {
  /*color: #ffff80;*/
  /*padding: 1em;*/
  transform: scale(1.15); 
  /*background: #ffff00;*/
  /*border-radius: 50%;*/
  /*box-shadow: 0 0 2px 0.5em #ffff00;*/
}

/* Radial menu styling end */


/* T R A D I T I O N A L   M E N U    S T Y L I N G  */
nav.na-nav_top1 {
  background-image: linear-gradient(#787B88, #787B88); 
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); 
  position: relative;
  top: 0;
  left: 0;
}
.na-menu_container {
  display : inline-block;  /* so that meny has width just to contain its options */
  background-image: linear-gradient(#787B88, #787B88); 
/*  padding-left: 2em;  */
}
.na-menu_container.na-menuVertical {
  z-index  : 6;  
}
.na-menu,
.na-menu ul,
.na-menu li {
  margin  : 0;
  padding : 0;   
}
.na-menu {
	height: 2.5em;
}
.na-menu ul {  /* for all sub-menus */   
  display  : none;
  position : absolute;
  top      : 100%;
  left     : 0;
  z-index  : 6;
}
.na-menu ul ul {    /* third level menus open to the right */
  top  : 0;
  left : 100%;
}
.na-menu li {     /* all menu options */
  position        : relative;
  top: 0;
  left: 0;
  display         : block;
  list-style-type : none;  
  height: 2.5em;
  z-index: 6;
}
.na-menu ul li {
	background-image: linear-gradient(#0055FF, #0036A1); /* from light to darker blue */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);  /* light bottom / right shadow */ 	
}
.na-menu > li {   /* first level menu options */
  display : inline-block;
}
.na-menu > li.menu > a:after {  /* first level menu options down arrow */
  font-family: "FontAwesome";
  content: "\f0d7";  
  font-size: 1em;
  font-weight: 550;
  color: black;
  padding: 0.1em 0.3em 0em 0.3em;
  position: relative; 
  right: -0.2em; 
  top: 0.1em;
  background-color: #95CF68;
  border-radius: 50%;
  border: 1px solid #454545;    
  box-shadow: 2px 2px 4px 0 #303030;  
}
.na-menu ul li.menu > a:after {   /* other level menu options right arrow */
  font-family: "FontAwesome";
  content: "\f0da";  
  font-size: 1em;
  font-weight: 550;
  color: black;
  padding: 0em 0.25em;
  position: relative; 
  right: -0.2em; 
  top: 0.1em;
  background-color: #95CF68;
  border-radius: 50%;
  border: 1px solid #454545;    
  box-shadow: 2px 2px 4px 0 #303030;  
}
.na-menu li.na-hover {  
	color: black;
  background-image: linear-gradient(#9DA2B3, #9DA2B3); 
}
.na-menu li.na-hover > a, .na-menu li.na-hover > span {
	color: black;
}
.na-menu a, .na-menu span {   /* styling of menu item content */
  display         : block;
  text-decoration : none;
 /* white-space     : pre;  */
  padding: 0.1em 1em;
  font-weight: 550; 
  font-size: 1.05em;  
  color       : white;
  line-height : 2em;
  text-shadow : 0 0 0.125em rgba(0,0,0,0.25);
  cursor      : pointer;
  transition  : background 0.2s;
  white-space: nowrap; 
}

.na-menu ul .na-menuRightToLeft ul {   /* other level menus open to the left */
  left  : auto;
  right : 100%; 
}

.na-menuVertical {
  display :inline-block; 
}

.na-menuVertical > li {
  display : block;
}

.na-menuVertical ul {
  top  : 0;
  left : 100%;
}
.na-menu.na-menuVertical {
	position: absolute;
	top: 100%;
	left: 0;
	height: 13em; 
  max-height: 0em; 
  background-image: linear-gradient(#787B88, #787B88); 
  border: 1px solid #787B88;
  border-top: 0px solid #787B88;
/*  box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.25);  /* light right shadow */   
  z-index  : 6;  
  transition: max-height 0.5s ease-out; 
/*  overflow: hidden; implemented in javascript na.ui for the animation to work */
}
.na-menu.na-menuVertical.expanded {
  max-height: 12em;
  /* overflow: visible; implemented in javascript na.ui for the animation to work */
  transition: max-height 0.5s ease-out;
}
.na-menu.na-menuVertical ul {
  border-left: 2px inset #ffffff;   /*rgba(255, 255, 255, 0.20);*/ 
  box-shadow: -1px -3px 3px -2px rgba(145, 145, 145, 1); 	
}
.na-menu.na-menuVertical.expanded > li {
  /* display : block;*/
}
.na-menu ul li, ul.na-menuVertical > li {
  background-image: linear-gradient(#787B88, #787B88); 
}
ul.na-menuVertical > li, ul.na-menuVertical ul > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
	height: 2.8em;   /* 2.5em; */
}
ul.na-menuVertical > li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.20); 
}
ul.na-menuVertical ul li:first-child {
 /* border-top: 1px solid rgba(255, 255, 255, 0.20); */
/*  border-top: 1px inset #ffffff;   */
}
.na-menu.na-menuVertical > li.menu > a:after { /* vertical menu, first level right arrow */
	content: "\f0da";
  padding: 0.05em 0.35em 0em 0.45em;
  right: -0.3em; 
}	
.na-menu.na-menuVertical a, .na-menu.na-menuVertical span {
	/* white-space: normal;
	line-height : 1.2em;
	vertical-align: middle; */
  padding: 0.1em 0.4em 0.1em 0.3em;
  font-size: 1.1em;
}
.na-menu_icon:before { 
  font-family: "FontAwesome";
  content: "\f00d";
  font-size: 1.1em;
  font-weight: 550;
  color: black;
  padding: 0.5em 0.6em 0.5em 0.5em;
  position: relative; 
  right: 0em;    /* -0.2em; */ 
  top: 0em;      /* 0.1em; */    
  background-color: #95CF68;
  border-radius: 50%;
  border: 1px solid #454545;    
  box-shadow: 2px 2px 4px 0 #303030;  
}
.na-menu_icon.collapsed:before { 
  content: "\f0ca";  
}
.na-menu_icon { /* collapsed menu icon */
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0em 0.9em;
  vertical-align: middle;
  line-height: 2.5em; 
  position: relative; /* move icon font for any adjustments */
  left: 0em;
  top: 0em;
  width: 1.5em;
}
.na-menu_container.na-menuVertical > .na-menu_icon {
  display: block;	
}

/* END OF TRADITIONAL MENU STYLING */






/* M E S S A G E   A R E A    S T Y L I N G  */
div.na-form_message, .na-panel_message {
  margin-left: 1.5em;  /* NK 04/04/2024 was: 1.5%;*/
  width: calc(100% - 5em);         /* NK 04/04/2024 was: 96%;*/
  color: white;
  background-color: #8A8E9C;   /*#9DA2B3; #EDEDED;*/ 
  font-size: 0.95em;
}
.na-form_message_copy {
	position: absolute;
  bottom: 0.5em;
  left: calc(100% - 1.8em);
  line-height: 1.2em;
  font-size: 1.5em;
  color: grey;
}
.na-panel_message {
	color: #FFFF19; 
	border-radius: 0px;
	font-weight: 800;
	background-color: #525E52;
}
.na-panel_message_copy {
	position: absolute;
  bottom: 0.75em;
  left: calc(100% - 1.8em);
  line-height: 1.2em;
  font-size: 1.5em;
  color: grey;
}
div.na-validation_msg {    /* styling for non-native validation message area */
  color: #FFFF19;
  font-size: 1em;  /* 0.9em; */
}




div#map { /* style Google geolocation display area */
	width: 80%;
	height: 250px;
	float: left;
	display: none;
}

div#chartContainer { /* style business chart display area */
	width: 80%;
	height: 250px;
	float: left;
	display: none;
}

div#svgArea { /* style SVG display area */
	width: 80%;
	height: 600px;
	float: left;
	display: none;
}

span#message {
	display: inline-block;
	padding: 0.2em 1em 0.2em 1em;
	font-size: 1em;
	font-weight: 500;
	color: #333333; /* dark grey */
	border: 1px double #333333;
	background-color: yellow;
	margin-bottom: 2em;
}

.na-non_drop_zone {
	width: 200px;
	height: 20px;
	background: red;
	margin-bottom: 10px;
	padding: 10px;
}


.na-ticker_animation { /* general syntax  for ticker animation */
	animation-name: ticker;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	/* syntax for Chrome, Safari, Opera ticker animation */
	-webkit-animation-name: ticker;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
}

@keyframes ticker { /* general syntax for ticker animation */ 
  0% {text-indent: 95%; } /* style change at start (0%) of animation */
  100% {text-indent: -150%; } /* style change at end of animation */
}
@-webkit-keyframes ticker {	/* syntax for Chrome, Safari, Opera ticker animation */ 
  0% {text-indent: 95%; }
  100% {text-indent: -150%; }
}

.na-chart_canvas {
  /*max-width: 85%; */
/*  width: 100% !important; */
  width: 100%; 
  max-width: 32em; 
  height: auto; 
  max-height: 21.5em;
  /*background: yellow; */
  margin: 0em;
  padding: 0.5em;    
}
div.na-chart_legend {  /* brief top legend */
  height: 1em;
  max-height: 1em;
}
.na-chart_legend ul {
  list-style-type: none; /* no bullets */
  display: inline-block;  
}
.na-chart_legend ul li {
  display: inline-block; 
  margin-left: 1em; 
}
.na-chart-main_legend {   /* main legend e.g. 10% [coloured bullet] Restaurants */
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top : 1.5em;  
}
.na-chart-main_legend li {
  margin-bottom : 0.24em;
}
.na-chart-main_legend li:first-letter {
  text-transform: capitalize;
}
.na-chart-main_legend_value {                  /* % value */
  display: inline-block;
  position: relative;
  top: 0em;
  left: 0em;
  color : #979797;
  width : 4.5em;
  text-align: right;
}
.na-chart-main_legend li span {  /* coloured bullet */
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  margin: 0em 0.5em 0em 0.5em;
  position: relative;
  left: 0em;
  top: 0em;
}

/*** Chart styling end ***/

/**** smartphone effects e.g. wiggle  ******/
@-webkit-keyframes na-shake {
    0%, 100% {-webkit-transform: translateX(0) rotate(0deg) translateY(0);}
    5%, 15%, 35%, 55%, 75%, 95% {-webkit-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-webkit-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-webkit-transform: translateY(-1px); }
}
@-moz-keyframes na-shake {
    0%, 100% {-moz-transform: translateX(0) rotate(0deg) translateY(0);}
    5%, 15%, 35%, 55%, 75%, 95% {-moz-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-moz-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-moz-transform: translateY(-1px); }  
}

@-o-keyframes na-shake {
     0%, 100% {-o-transform: translateX(0) rotate(0deg) translateY(0);}
    5%, 15%, 35%, 55%, 75%, 95% {-o-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-o-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-o-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-o-transform: translateY(-1px); }  
}

@keyframes na-shake {
    0%, 100% {transform: translateX(0) rotate(0deg) translateY(0);}
    5%, 15%, 35%, 55%, 75%, 95% {transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {transform: translateY(1px);}    
    20%, 40%, 60%, 80% {transform: translateY(-1px); }  
}
.na-shake {
    -webkit-animation-name: na-shake;
    -moz-animation-name: na-shake;
    -o-animation-name: na-shake;
    animation-name: na-shake;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;    
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition-timing-function:linear;    
}

/* checkbox on-off switch */

/*
<div class="onoffswitch"><input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked><label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
*/
.onoffswitch {
	  display: inline-block; 
    position: relative; 
    width: 2.3em;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
fieldset li input[type="checkbox"].onoffswitch-checkbox {
	display: none;
}
fieldset.na-tabular ul li label.onoffswitch-label {  /* the switch base */
    display: inline-block; overflow: hidden; cursor: pointer;
    height: 1.45em; padding: 0; line-height: 1.45em;
    border: 2px solid #CCCCCC; border-radius: 1.45em;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease-in;   
    width: 2.3em;
    margin: 0em;
    color: white;
    font-weight: 500;
    font-size: 1.2em;
}
fieldset.na-tabular ul li label.onoffswitch-label:before,
fieldset.na-transaction ul li label.onoffswitch-label:before {  /* the switch which slides */  
    content: "";
    display: inline-block; width: 1.2em; margin: 0em;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 0.72em;  /* 0.92 */
    border: 2px solid #CCCCCC; border-radius: 1.2em;
    transition: all 0.3s ease-in 0s;     
    height: 1.4em;
}
fieldset li input[type="checkbox"].onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: #49E845;
}
fieldset li input[type="checkbox"].onoffswitch-checkbox:checked + .onoffswitch-label, 
fieldset li input[type="checkbox"].onoffswitch-checkbox:checked + .onoffswitch-label:before {
	border-color: #49E845;
}
fieldset li input[type="checkbox"].onoffswitch-checkbox:checked + .onoffswitch-label:before { 	right: -0.2em; 
}

/* R A D I O   G R O U P   B U T T O N   B A R */
div.na-button_bar {
	box-sizing: border-box;
	display: inline-block;
	background-color: #95CF68;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.50); 
  border: 1px solid #787B88;  
	border-radius: 0.4em;
	margin-left: 4em;
}
fieldset li div.na-button_bar input[type="radio"] {
  display: none;
}
fieldset.na-transaction ul li div.na-button_bar > label {
  box-sizing: border-box;
  display: table-cell;  /* to allow vertical align if multi-line */
  padding: 0em;  /* 0.4em; */
  font-weight: 600; 
  text-align: center;
  vertical-align: middle;
  color: black;	
  border-right: 1px solid #787B88;
  margin: 0em;
  width: auto;  /* width of each bar as per content */
  height: 1.5em;
  cursor: pointer;
  user-select: none;
}
fieldset.na-transaction ul li div.na-button_bar > label:last-of-type {
  border-right: 0px solid #787B88;
}  
fieldset.na-transaction ul li div.na-button_bar > input[type="radio"]:checked + label {
  background-color: #4b7b28;  /* #525E52; */ 
	color: white;
}	
fieldset.na-transaction ul li div.na-button_bar label > input[type="radio"]:checked + span {
  background-color: #4b7b28;   
  color: white;
}
fieldset.na-transaction ul li div.na-button_bar label > input[type="radio"] + span {
  box-sizing: border-box;
}

/*  C A R O U S E L    S T Y L I N G    */
.carousel {
  position: relative;
  margin-bottom: 2em;    /* 20px; */
  line-height: 1;
  
 height: 100%;        
 top: 0;
 left: 0; 
}
.carousel-inner {     /* wrapper for slides */
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%;        
}
.carousel-inner > .item {   /* individual slides */
  position: relative;
  display: none;
  height: 100%;   
  background-repeat: no-repeat;  
  background-size: cover;   /* 100% 100%; */ 
}
.carousel-inner > .active,  /* animate slide out - in */
.carousel-inner > .prev,
.carousel-inner > .next {
  -webkit-transition: left 1s ease-in-out;
     -moz-transition: left 1s ease-in-out;
       -o-transition: left 1s ease-in-out;
          transition: left 1s ease-in-out;          	
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  line-height: 1;
  width: 100%; 
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 40%;
  font-size: 2em;
  font-weight: 100;
  color: #ffffff;
  text-align: center;
  opacity: 0.4;
}
.carousel-control.right {
  left: auto;    /* necessary for right to work */
  right: 1.5em;   /* 0.5em; */
}
.carousel-control.left {
  left: 0.5em;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.carousel-indicators {
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  list-style: none;
}
.carousel-indicators li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  text-indent: -999px;
  /*background-color: black;   /* #ccc; */
/*  background-color: rgba(255, 255, 255, 0.25);*/
  border: 1px double white;
  border-radius: 5px;
}
.carousel-indicators .active {
  background-color: white;   /* #fff; */
}
.carousel-caption {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 7.5em;
  left: 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.1); 
}
.carousel-caption h3,
.carousel-caption p {
  line-height: 20px;
  color: #ffffff;
}
.carousel-caption h3 {
  margin: 0 0 5px;
}
.carousel-caption p {
  margin-bottom: 0;
}


/* WEB LIKE B U T T O N  */
.na-web_button:before { 
	position: relative;
	left: -0.4em;
	top: 0.1em;
  font-family: "FontAwesome";
  content: attr(data-icon_symbol);
  font-size: 1.6em;
  font-weight: 550;
  color: #95CF68;
}
.na-web_button { /* style anchor as web button */
  position: absolute;
  top: auto;
  bottom: 0.5em;
  left: auto;
  right: 1em;
  height: 2em;
  width: 5em;
  display:inline-block; 
  margin-left: 1em;
  padding: 0.1em 0.4em 0.3em 0.4em; 
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  vertical-align: middle;
  line-height: 2em;   /* set this equal to height for vertical alignment */
  text-align: center;
  text-decoration: none;
  border: 1px double #333333;
  border-radius: 6px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
/*  background-image: linear-gradient(#4280FC, #0055FF); */
}
.na-web_button:hover { 
  transform: scale(1.1); 
} 

/* QR CODE */
div.na-qr_code {
	position: relative;
	top: 0em;
	left: 0em;
	width: 144px;   /*144px;*/
	height: 144px;
	margin: 2em auto;
	padding: 8px;
	background-color: white;
}

/* P R O G R E S S   B A R    S T Y L I N G  */
progress[value] {
  width: 15em;
  height: 1.5em;
  display: inline-block;
  -webkit-appearance: none;   /* reset the browser default styling */
  border: none;
}
progress::-webkit-progress-bar {  /* Style the background bar */
  background: black;
  border-radius: 50px;
  padding: 2px;
  box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
  
  color: #55BA48;
  color: #3FC42D;
}
progress::-webkit-progress-value {  /* Style the value part */
  border-radius: 50px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
  background:
    -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
    -webkit-linear-gradient(left, #107FFF, #107FFF);  
/*    -webkit-linear-gradient(left, #55BA48, #3FC42D);  */
}
fieldset li.na-progress_bar {   /* style <li> containg progress bar */
  position: relative;
  margin-left: 5em;
}
fieldset p.title {    /* style title of prgress bar */
  width: 30em;   
  text-align: center; 
}
fieldset li.na-progress_bar > span.budget {   /* style budget figure <span> */
  display: inline-block;
  position: relative;
  top: -0.3em;
  left: 0em;
  color: #6b2925;  /* #FFFF19; */
}  
fieldset li.na-progress_bar > span.actual {    /* style actual figure <span> */
  display: inline-block;
	position: absolute;
  left: 0.2em;
  top: -1.5em;  
  color: #6b2925;  
}  

/* I N P U T   F I L E   -  P H O T O   T A K I N G      S T Y L I N G  */
fieldset.na-transaction .na-form_item.na-inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;	
}

fieldset.na-transaction .na-form_item.na-inputfile + label {
  margin-left: 4em;
  border: 1px solid #b92024;
  box-shadow: 2px 2px 4px 0 #454545;     
  border-radius: 6px;
  height: 2em;
  width: auto;  
  padding: 0.25em 0.5em;
  line-height: 2em;
  font-family: "FontAwesome";
  font-size: 1.25em;
  font-weight: 700;
  color: white;
  background-color: #b92024;   /* #525E52; */
  display: inline-block;
  cursor: pointer;
}
fieldset.na-transaction .na-form_item.na-inputfile:focus + label,
fieldset.na-transaction .na-form_item.na-inputfile + label:hover {
  background-color: #e80000;
}

/* S L I D E R     W I D G E T   */
div.na-slider {
	display: inline-block;
	width: 40em;
	margin-left: 8em;
	margin-bottom: 1em;
}
div.na-slider_handle_value {
	display: inline-block;
	margin-left: 1em;
	color: white;
}


/*** Temporaries stylings end ***/

/*  S P E C I F I C     M O B I L E   B R O W S E R   S T Y L I N G    */

/* Show a visible scrollbar in webkit browsers */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;  /* 5px; */
    height: 10px;    /* for horizontal bar */
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
/* Avoid iOS greying out of disabled fields */
textarea:disabled, input:disabled {
  -webkit-text-fill-color: blck; /* Override iOS / Android font color change */
  -webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
  color: black; /* Override IE font color change */
  opacity: 1;
}
/* Avoid Android Chrome pull to refresh action */
body.na-body {
  overflow-y: hidden; 
  overscroll-behavior: contain;
}
html {
	overscroll-behavior: contain;
}
/*  -webkit-overflow-scrolling: touch;  */

/* Search matching */
.na-match_highlight {
	background-color: lightyellow !important;
}



/* F O R M   S T Y L I N G    DUPLICATE?*********/
form.na-transaction {
  box-sizing: border-box;
	margin: 0em auto;
  height: 100%;
  width:100%;
  background-color: #787B88;   /* #EDEDED; /*#f2f4f7; /*light grey */
/*  overflow: auto; */
}

/* FORM DIVs   */
div.na-form_divcore {
  box-sizing: border-box;
	min-height: 100%; 
	height: 100%;
  float: left;
}
div.na-form_divtop {
  box-sizing: border-box;
	width: 100%;
  padding: 0.25em 0.25em 1em 0.25em;  /* 1em 0.5em 1em 1em */
  float: left;
  overflow-y: auto; /* auto */
  overflow-x: hidden;
  padding-bottom: 1em;
}
div.na-form_divleft {
  box-sizing: border-box;
	min-height: 100%; 
	height: 100%;
	width: 34em;
  padding: 0.25em 0.25em 1em 0.25em;  /* 1em 0.5em 1em 1em */
  clear: both;
  float: left;
  overflow-y: auto; /* auto */
  overflow-x: hidden;
  padding-bottom: 1em;
}
div.na-form_divright {
  box-sizing: border-box;
	border-left: 1px solid #c0c0c0;
  min-height: 100%;
	height: 100%;
  width: 34em;
  padding: 0.25em 0.25em 1em 0.25em;    /* 0.5em 0.5em 0.5em 0.5em; */
  float: right;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1em;
}
div.na-form_divxright {
  box-sizing: border-box;
	border-left: 1px solid #c0c0c0;
  min-height: 100%;
  width: 34em;
  padding: 0.5em 0.5em 0.5em 0.5em;  
  float: right;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1em;
}
div.na-form_divbottom {
  box-sizing: border-box;
  border-left: 0px solid #c0c0c0;
  min-height: 100%;
  width: 68em;
  padding: 0.5em 0.5em 0.5em 0.5em;  
  clear: both;
  float: left;
  overflow-y: auto;
  padding-bottom: 1em;
}
div.na-form_divwide {
  box-sizing: border-box;
/*  position: relative; */
  min-height: 100%;
  width: 68em;
  padding: 0.25em;  /* 1em 0.5em 1em 1em */
  float: left;
  overflow-y: auto;
}

/* FORM FIELDSETS */
fieldset.na-transaction {
  box-sizing: border-box;
  width: 32.5em;   /* 31em */
  margin: 0em auto;
}
fieldset.na-fieldset_wide {
  width: auto;  /* 62 em; */
}

/* FIELD LABELS */
fieldset.na-transaction ul li label { 
  text-align: left;
  margin-left: 0.2em;  /* 0.6em */
  margin-right: 0.2em;
  width: 11em;
  color: white;
  font-weight: 500;
  font-size: 1.1em;  /*0.95em */
}
fieldset.na-transaction ul.na-not_table li label {
  margin-left: 0em;  
  margin-right: 0em;
}	
fieldset.na-transaction ul li label.na-label_with_icon {
  box-sizing: border-box;
	width: 8.8em; 
  margin-right: 0.4em;
}
fieldset.na-transaction ul li label.na-label_radio_h {
  box-sizing: border-box;
  width: auto; 
  margin-right: 0.5em;
}
fieldset.na-transaction ul li label.na-label_radio_h.na-vertical {
  display: block;
}
fieldset.na-transaction ul li.na-centerline_icon { /* centered icon in own line */
  width: 30em;   
  text-align: center; 
  padding: 0.4em 0em;
}
fieldset.na-transaction ul li.na-centerline_icon label.na-label_icon {
  width: auto;  
}
fieldset.na-transaction ul li.na-centerline_title { /* centered title in own line */
  width: 34em;   
  text-align: center; 
  color: #6b2925;   /* #FFFF19; */
  font-weight: 500;
  font-size: 1.3em;
}
fieldset.na-transaction ul li.na-centerline_title span { /* centered title in own line */
/*  text-decoration: underline;  */
}
fieldset.na-tabular.na-headings ul li label { 
	font-size: 0.9em;
  text-align: center;
  width: 100%; 
}
.na-panel.na-panelin fieldset.na-tabular.na-headings ul li label { /* for internal panels */
  font-size: 1em;  /* 0.9em; */
  text-align: center;
  width: 100%; 
}
fieldset.na-transaction ul li label.na-form_instructions {
  font-size:1.2em; 
  font-style: italic; 
  font-weight: 550; 
  color:#FFFF19;  
}
fieldset.na-transaction ul li label.na-currency {
	width:0.4em; 
	margin: 0em; 
	margin-left: 0.1em;
}

/* F I E L D  S T Y L I N G */
fieldset.na-transaction .na-form_item {
  box-sizing: border-box;
	font-size: 1.1em; /* 0.9em */
  font-weight: 600;
  color: black; /*#333333;   /* dark grey */
  border: 1px solid #b7b7b7; /* #9BBBFA; /* light blue for grey use #333333;  */
  border-radius: 0;   /* 4px; */
  padding: 0.3em;  /*0.3em */
  margin: 0em;           /* 0em */
  background-color: #FAFAFA;  /*#d9e8f0; /* very light blue */
  /* background-image: linear-gradient(white, #f2f2f2);   /* from white to light grey */
  box-shadow: inset 1px 1px 2px 0 #c9c9c9;   /* #707070;*/
  /* transition: box-shadow 0.3s; */ 
  width: 15em;
  text-align: left;
}
fieldset.na-transaction .na-form_item.na-field_bt { /* field with button */
	width: 12.75em;
	margin-right: 0.25em;
}
fieldset.na-transaction .na-form_item.na-favourite_name {
  margin-left: 1.2em;  
  width: 11.5em;
  font-style: italic;
}
fieldset.na-transaction .na-form_item.na-field_checkdigit {
	width: 13em;
}
fieldset.na-transaction .na-form_item.na-field_checkdigit.na-field_prefix {
  width: 11em;
}
fieldset.na-transaction .na-form_item.na-checkdigit {
  width: 2em;
}
fieldset.na-transaction .na-form_item.na-prefix {
  width: 2em;
}
/* fieldset.na-transaction input[type="checkbox"].na-form_item  {
	width: 1em;  
  transform: scaleY(1.2);
  -webkit-transform: scaleY(1.2);
}	*/
fieldset li input[type="text"].na-form_item { /* basic style for text elements */
  padding: 0.3em;
  text-align: left;
}
fieldset li input[type="range"].na-form_item { /* basic style for range */
  width: 13em;
  box-shadow: none;   
}
fieldset li input[type="range"].na-form_item + output { /* range meter */
  padding: 0.5em;
  font-size: 1.1em; 
  font-weight: 600;
  color: white; 
}
fieldset li input[type="color"].na-form_item { /* basic style for color */
  width: 2em;
}
fieldset li input[type="radio"].na-form_item { /* basic style for color */
  width: 1em;
  box-shadow: none; 
}
fieldset li input.na-form_item:focus,
fieldset li select.na-form_item:focus,
fieldset li textarea.na-form_item:focus
{
	/* box-shadow: inset 1px 1px 2px 0 #c9c9c9;	*/
	/* box-shadow: inset 0 2px 1px rgba(0,0,0,0.075);*/
	/* outline: 1px solid #fd5162; */
}
fieldset li input.na-form_item:disabled,
fieldset li select.na-form_item:disabled,
fieldset li textarea.na-form_item:disabled
{
	background-color: #DCDAD1;	
}
.na-panel.na-panelin fieldset.na-transaction.na-rows .na-form_item {  /* fields in internal panels */
  font-size: 1em;
}	
/* fieldset li input.na-form_item:focus, 
fieldset li textarea.na-form_item:focus,
fieldset li select.na-form_item:focus {
	outline: 1px solid #fd5162;
} */
fieldset ul li.na-li_extra_info_grey {   /* Extra info fields */
  padding: 0.6em 0.2em 0.6em 0.2em !important;
/*  background-image: linear-gradient(#9DA2B3, #9DA2B3); */
/*  background-image: linear-gradient(#868996, #868996); */
/*    background-image: linear-gradient(#8A8E9C, #8A8E9C); */
  background-image: linear-gradient(#525E52, #525E52); 
  border: 1px solid #525E52;  
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  transition: height 1s;
  -webkit-transition: height 1s;
}
fieldset ul li.na-li_extra_info_gold .na-form_item,
fieldset ul li.na-li_extra_info_green .na-form_item {
  background-color: initial;
}
fieldset ul li.na-li_extra_info_gold .na-field_major,
fieldset ul li.na-li_extra_info_green .na-field_major {
/*  font-weight: 700;
  font-size: 1em; */
}
/* E N D    O F   F I E L D  S T Y L I N G */

/* S T A N D A R D   P A N E L   S T Y L E  */
.na-panel {
  border: 1px solid #787B88;   /* #c0c0c0; */	
}
.na-panel.na-transaction {
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.50);  
	margin: 0em;
}  

.na-panel_header {
  background-color: #95CF68; 
  border-bottom: 0.1em solid #6bb138;  
}
.na-panel_header_title {
  display: inline-block;
  font-size: 1.1em; 
  font-weight: 600;
  color: black;    /*#003fbf; */
}
.na-panel_header_buttons {
  padding: 0em 0.10em 0em 0.25em;
  margin-top: 0.15em;
}
.na-panel_body {
  background-color: #9DA2B3;   
}
.na-panel.na-transaction .na-panel_body {
  background-color: #787B88;   
}
.na-panel.na-charts {
	margin: 0em auto;
}
.na-panel.na-charts .na-panel_body {
  background-color: #f7f7f7;   /*light grey */
}
.na-tab  > .na-panel_body {
  background-color: #9DA2B3;
  /*margin: 0em 1.5em 1.5em 1.5em; */
}
.na-tab  > .na-panel_body .na-panel_body {  /* tab content panel */
  background-color: #FAFBFC;
  box-shadow: 2px -3px 1px 0 #9DA2B3;  /*#454545;  /*#818284;*/
}
.na-panel_contents {
	padding: 0em;
}
.na-panel_footer {
  background-color: #9DA2B3; 
  border-top: 0.1em solid #9DA2B3; 
}
.na-panel.na-transaction .na-panel_footer {
  background-color: #787B88; 
  border-top: 0em solid #787B88; 
}
.na-panel.na-transaction .na-panel_footer_buttons {
  padding: 0.4em 0.5em 0.4em 1.3em;    /* for buttons 0.35em; */
}
.na-panel_side_icon {
  padding: 0.6em 0.7em 0.6em 0.6em;
  margin: 0em;
  border: 1px solid #454545;
  border-radius: 50%;
  box-shadow: 2px 2px 4px 0 #454545;  
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateX(-100%); 
  background-color: rgba(240, 89, 127,1);
  color: white;
}
.na-panel_side_icon_otherContainer.na-icon_button_notext:before {
  margin: 0em 0em 0em 0.5em;
  top: 0.12em;  
  background-color: rgba(240, 89, 127,1);
}

/* S T A N D A R D   T A B S   S T Y L E    C H A N G E S */
.na-tab .na-panel_labels {
  border: 1px solid #9DA2B3;  
	margin-top: 0.5em;  /* 0.7em */
  margin-right: 1em;
  margin-left: 1em;
  margin-bottom: 0em;
  height: 2.6em;     /* 1.6em */ 
}
.na-tab .na-panel_labels ul {
  margin-left: 0em;
}
.na-tab .na-panel_labels ul li {
  display: inline-block;
}
a.na-tab_button {          /* style anchor as a tab button */
  display: inline-block;
  cursor: pointer;
  font-size: 1em;
  height: 2.4em;  /* 2.2em */
  min-width: 5em;
  text-align: center;
  padding: 0.4em 0.6em 0.3em 0.6em; 
  margin-right: 0em; 
  font-weight: 600;
  border: 1px solid #b1b1b1; 
  border-right: 1px solid #0f280f;   /* #c0c0c0; */
  border-left: 0px solid #97d06c;   /* #c0c0c0; */
  border-bottom: 0px solid #c0c0c0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  color: #0f280f; /* black; */
  /*background-image: linear-gradient(#FAFBFC, #FAFBFC);*/
  /*background-image: linear-gradient(#EDEDED, #d7d7d7);  /* #bcbcbc;*/
  background-image: none;
  background-color: #c1e3a8;   /* #e39db3; #b7ffb7; #c1e3a8; */
/*  box-shadow: 3px -3px 1px -1px #454545 inset;    */
}
a.na-tab_button_active {       /* style anchor as a tab button */
  display: inline-block;
  height: 2.4em;  /* 1.4 */
  min-width: 5em;
  text-align: center;
  position: relative;
  top: 0em; 
  pointer-events: none; /* link is not operational */
  cursor: pointer;
  font-size: 1em;
  padding: 0.5em 0.6em 0.3em 0.6em; 
  margin-right: 0em; 
  font-weight: 600;
  border: 0px solid #0f280f;  /* #c0c0c0; */
  border-left: 0px solid #0f280f;
  border-right: 0px solid #0f280f;
  border-bottom: 0px solid #c0c0c0;  
  color: #0f280f;   /* black; */
  /*box-shadow: 4px 0 1px -1px #454545;  /*#818284;*/    
  background-color: #FAFBFC;   /*light grey */
  z-index: 2;
  transform: scale(1, 1.05) translate(0em, -0.2em);  
  -webkit-transform: scale(1, 1.05) translate(0em, -0.2em);
}
a.na-tab_button.na-tab_button_next {  /* next to active tab */
	 border-left: 1px solid #0f280f;   /* #c0c0c0; */
}	

/* S T Y L I N G   F O R   I N T E R N A L    P A N E L S */
.na-panel.na-panelin {
  background-color: #EDEDED;   /* #FAFBFC;   /*light grey */
  border: 1px solid #9DA2B3;
  margin: 0.5em 0em 0em 0em;
  padding: 0em;      /* padding is zero for the panel size calculations to be right */
  border-radius: 0em;
}
.na-panel.na-panelin .na-panel_header {
  background-color: #9DA2B3;    
  border-bottom: 0.1em solid #9DA2B3;  
}
.na-panel.na-panelin .na-panel_header_title {
  color: black;   /* #003fbf; */
}
.na-panel.na-panelin .na-panel_header_buttons {
  padding: 0em 0.10em 0em 0.25em;
  margin-top: 0em;
}
.na-panel.na-panelin .na-panel_body {
	background-color: #EDEDED;
  overflow-y: auto; 
  overflow-x: hidden; 
}
.na-panel.na-panelin .na-panel_contents {
  margin: 0.5em;
  padding: 0.5em;
}
.na-panel.na-panelin .na-panel_footer {
  background-color: #787B88;   
  border-top: 0.1em solid #9BBBFA; /* dark blue border */  
}
.na-panel.na-panelin .na-panel_footer_buttons {
}

/* S T Y L I N G   F O R   W A R N I N G   P O P U P    P A N E L S   &   M E S S A G E S  */
.na-panel.na-panelpopup .na-panel_header {
 /* background-color: #ff8c8c;    
  border-bottom: 0.1em solid #ff8c8c;  */
}
.na-panel.na-panelpopup .na-panel_body {
  background-color: #787B88;
  color: white;
}
.na-panel.na-panelpopup .na-panel_footer {
  background-color: #787B88; 
  border-top: 0em solid #787B88; 
}
div.na-popup_message {
  color: white; 
  font-size: 1em;
  font-weight: 700;
}

.na-blink {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* C S S   F O R   L O A D I N G   T H E    L O G O  */
div.na-logo_overlay {
  /* overlay div that disables all elements when showing modal */
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: 0;
  background-color: black;
  opacity: 1; /* makes background black */
  z-index: 7;
}
.logoloading {
  background-repeat: no-repeat;   
  height: 216px;     /* 15em */
  width: 288px; 
  transform-origin: 50% 50%;
  margin: auto;
  position: absolute;
  top: 50%;
  margin-top: -108px;
  left: 50%;
  margin-left: -144px;
  transform: scale(1.2);
  animation-name: rot1;
  animation-duration: 3s;
  animation-timing-function: linear;    /* ease-in-out; */
  animation-iteration-count: 1; 
  z-index: 8;  
}
@keyframes rot1 {
  from {transform: scale(0.4) rotate(0deg);}
  to {transform: scale(1.2) rotate(360deg);}
}

/*  F R E E   B L O C K S   &   C O N T A I N E R S  */
div.na-free_container {
	display: inline-block;
	overflow-y: auto;
}

/* QTIP */
.na-qtip { 
	max-width: none !important; 
}
.qtip-content .na-icon_button_notext:before {   /* NK 21/3/2018 */
	background-color: transparent;
	color: #002C85;
}

/* D A T A T A B L E S     V I E W S */
fieldset.na-transaction ul li label.na-label_radio_h.na-vertical {
  color: #1496d6;
  font-weight: bold;
} 

button.dt-button.active {    /* Default Datatables styling */
    background: #abffa6 !important;
}   
div.dt-button-collection .dt-button.ui-state-active {   /* JQuery Datatables styling */
	background: #abffa6 !important;
}
.dataTables_scrollHead {
	text-align: center;
}
.dataTables_wrapper .dataTables_info {
	clear: none !important;
	margin-left: 2em !important;  
}  
.dataTables_wrapper .dataTables_length {
  margin-top: 0.5em !important;
}  
.na-view_column {
	white-space: initial;
	vertical-align: top !important;
}
.na-pre_formatted {
	white-space: pre;
}
.na-emphasized {
	color: blue !important;
}
.na-clickable {
	cursor: pointer !important;
}

/*   D O C U M E N T S      L I B R A R Y  (na.ui2.doc)  */
div#panel_doc_metadata {
  width: 34.25em;  
  height: 60em;
  max-width: 34.25em;
  max-height: 60em;
}
div#panel_doc_metadata.wide {
	width: 102.75em;
	max-width: 102.75em;
}	
div#panel_doc_metadata.narrow {
	width: 68.5em;
	max-width: 68.5em;
}	
div#panel_doc_metadata.edithtml {
	width: 86.75em;
	max-width: 86.75em;
}	
 div#panel_doc_metadata_body {
  height: 54.4em;
}

div#panel_doc_metadata_contents {
  height: 50.6em;
}
div#doc_metadata_div_left {
	width: 100%;   /*34em;*/
	height: 100%;   /* 50.6em; */
}
div.doc_preview_area {
	width: 68em;
	height: 100%;   /* 50.6em; */
	float: left;
}
div#panel_doc_metadata.narrow div.doc_preview_area {
	width: 33.8em;
	height: 100%;   /* 50.6em; */
}
div.edit_area_html {  /* edit area for content next to the metadata */
	height: calc(100% - 1.5em);   /* 50em; */
	width: 51.5em; 
	overflow-x: hidden; 
	overflow-y: auto; 
	margin-left: 0em;
	margin-top: 1em;
	padding-right: 0.5em;
	display: inline-block;
	float: right; 
}
form#doc_metadata_form {
	height: 100%;   /* 50.6em; */
	width:	34em;
	float:	left;
	display: inline-block;
}

a.na-doc_icon {
    width: 7em;
    height: 3em;
    position: relative;
    display: inline-block;
    padding: 0.25em;
    border: 1px solid #0072ff;
    margin: 0.3em;
    overflow: hidden;
    font-size: 0.8em;
    background-color: #287aca;
    color: white !important;
    word-break: break-word;
    text-decoration: none !important;
}
a.na-doc_icon.even {
	background-color: #d5d6d2;
  color: black;
  border: 1px solid grey;	
}
a.na-doc_icon_add {
  width: 7em;
  height: 3em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.3em;
  border: 1px solid #0072ff;
  overflow: hidden;
  font-size: 0.8em;
  word-break: break-word;
  /*text-decoration: none; !important */
	background-color: white;
  color: black !important;
  text-align: center;
  line-height: 1.5em;
  font-style: italic;
}
span.na-doc_icon_select {	
	display: inline-block;
	
	top: -0.7em;
  background-color: lightgrey;
  left: 5.8em;
  text-align: center;
/* NK 030821
  left: 6em;
  top: 0em;
  background-color: lightyellow;
*/	
  width: 2em;
  height: 1em;
  position: absolute;
  color: black;
  font-family: "FontAwesome";  
}
div.na-doc_icon_copy_div {
	display: inline-block;
  vertical-align: top;
  height: 3em;
  margin-top: 0.15em;
}
a.na-doc_icon_copy {
  width: 7em;
  height: 1.4em;
  display: block;
  padding: 0.1em;
  margin: 0.1em;
  border: 1px solid #0072ff;
  overflow: hidden;
  font-size: 0.8em;
  word-break: break-word;
  /*text-decoration: none; !important */
	background-color: aliceblue;
  color: black !important;
  text-align: center;
  line-height: 1.5em;
  /* font-style: italic; */
  text-decoration: none;
}
a#attachment_icon_paste {
	background-color: gainsboro;
}
a.na-doc_icon_add span {
	font-size: 1em;
}
a.na-doc_icon_copy span {
	font-size: 1em;
}
a.na-doc_icon {
    /* NK 03082021  */
    overflow: visible;
    vertical-align: top;
    margin-top: 0.4em;

    /*overflow: hidden;*/
    
    width: 7em;
    height: 3em;
    display: inline-block;
    padding: 0.25em;
    border: 1px solid #0072ff;
    margin: 0.3em;
    font-size: 0.8em;
    background-color: #287aca;
    color: white !important;
    word-break: break-word;
    text-decoration: none !important;
}

div#panel_docs_iconic {
  width : "34.25em";
	height : "30em";
  max-width: 34.25em;
  max-height: 30em;
}
 div#panel_docs_iconic_body {
  height: 24.4em;
}
div#panel_docs_iconic_contents {
  height: 21.6em;
  padding: 0.3em;
}
div#adddocument_div_left {
	height: 20em;
}
div#add_composite_document_div_left {
    height: 20em;
}
div#add_recipient_adv_div_left {
	height: 28em;
}



fieldset.na-transaction ul.ul-new_line {
	display: block;  /* will not work because of generated display: inline-block*/
	width: 100%;
}

fieldset.na-transaction ul.ul-clear_both {
	clear: both;  
}

/****************************************************/
/* The below was moved from crm.css on Jan 27, 2020 */
/****************************************************/
.na-inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

fieldset.na-transaction ul li .na-inputfile + label.na-inputfile_label {
    font-weight: 700;
    display: inline-block;    
    font-size: 0.9em;
    color: black;
    margin-left: -6.9em;
    margin-top: -1em;
    background-color: #cccccc;
    width: 6.7em;
}
.na-inputfile + label.na-inputfile_label {
	cursor: pointer; /* "hand" cursor */
}

.na-inputfile + label.na-inputfile_label * {
	pointer-events: none;
}

fieldset.na-transaction .na-form_item.na-inputfile.plain {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

fieldset.na-transaction ul li label.na-inputfile_label.plain {
	  border-radius: 10px;
		font-weight: 700;
    font-style: normal;
    padding-top: 0.25em;
    font-size: 1.1em;
		font-family: "FontAwesome";
    color: #fafbfce8;
    margin-left: 0em;
    text-align: center;
    margin-top: 0em;
    background-color: #44a3e9;
    width: 9em;
    height: 1.3em;
}

fieldset.na-transaction ul li label.na-inputfile_label.plain {
	cursor: pointer; /* "hand" cursor */
}

fieldset.na-transaction ul li label.na-inputfile_label.plain * {
	pointer-events: none;
}

fieldset.na-transaction ul li label.na-inputfile_label.plain.afterUpload {
		font-weight: 100; 
		font-size: 1.05em; 
		margin-bottom: 1em; 
		background: transparent; 
		color: #44a3e9; 
		width:15em;						
	  border-radius: 10px;		
    font-style: italic;
    padding-top: 0.25em;
		font-family: "FontAwesome";
    margin-left: 0em;
    text-align: left;
    margin-top: 0em;
    height: 1.3em;
}

fieldset.na-transaction .na-form_item.na-inputfile.simple {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
fieldset.na-transaction ul li label.na-inputfile_label.simple {
/*fieldset.na-transaction .na-form_item.na-inputfile + label.na-inputfile_label.simple {*/
		font-family: FontAwesome;
    border: none;
    box-shadow: none;
    font-size: 0.95em;
    width: 1em;
    background-color: transparent;
    color: gray;
    margin: 0em;
    padding: 0em;
}

fieldset.na-transaction ul li label.na-inputfile_label.simple {
	cursor: pointer; /* "hand" cursor */
}

fieldset.na-transaction ul li label.na-inputfile_label.simple * {
	pointer-events: none;
}

fieldset.na-transaction ul li label.na-inputfile_label.simple:hover {
	text-decoration: underline;
}	
fieldset li input[type="text"].na-form_item.na-smallerFieldSize {
	font-size : 0.9em;
}
fieldset.na-transaction ul li label.na-form_instructions.na-smallerFieldSize {
		font-size : 0.9em;
}
a.na-icon_button_textright.na-smallerFieldSize{
	font-size : 0.9em;
}

.na-narrow_div {
	width:22em;
	display : inline-block;
}

fieldset.na-transaction ul li div.na-narrow_div label.na-form_instructions {
	  margin-left: 0.3em;
    width: 10em;
    color: #544e55;
    font-size: 0.85em;
    font-style: normal;
}
fieldset.na-transaction ul li div.na-narrow_div a.na-block_button.grey {
	  width: 6.5em;
    margin-top: 0.3em;
    margin-left: 6em;
    font-size: 0.8em;
}

fieldset li span.circle.deleted {
	color : red;
	font-weight: 700;
	border-radius : 0%;
}

/* ENUMS moved from crm.css on 27/1/2020 */
div#panel_enums {
  width: 35em;  
  height: 52em;
  max-width: 35em;
  max-height: 52em;
}
 div#panel_enums_body {
  height: 46.4em;
}
div#panel_enums_contents {
  height: 43.6em;
} 
div#enums_div_left {
  height: 100%;  /* height on divs needed for scrollbars to work */
  width: 100%;
} 
div#enums_grid_group_list {
  /* width: 34em;    /* -2  */  
  height: 22em;  /* -7.8 */
 /* max-width: 34em; */
  max-height: 22em;
}


/* SEND MESSAGE moved from crm.css and crm-phable.css on 29/1/2020 */

div#panel_sendmsgs {
  width: 53em;  
  height: 55em;
  max-width: 53em;
  max-height: 55em;
}
div#panel_sendmsgs_body {
  height: 49.4em;
  width: 100%;
}
div#panel_sendmsgs_contents {
  height: 46em;    /* 23em; */
  padding-left: 0.25em;
  padding-right: 0.25em;
  overflow-y: auto;
}
div#sendmsg_div_bottom {
	width: 99%;   /* 52em; */
	height: 23em;
} 
form#sendmsg_form {
	height: 23em;
}
fieldset#sendmsg_fieldset_bottom > ul {
	padding-left: 0em;
}
div#emailattachment_div_left {
	height: 8em;
	width: 12em;
}

fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="delivery_method"]  {
	 color: #1496d6;
   vertical-align: super;
}
fieldset#sendmsg_fieldset_bottom ul li div.na-button_bar {
	margin-left: 0em;
  margin-right: 10em;
  font-family: FontAwesome;
}
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="from"]  {
	  width: 8.5em;
    font-style: italic;
    font-weight: bold;
    color: #1496d6;
    margin-left: 0em;
    margin-top: 0.3em;
    margin-bottom: 1.2em;
    font-size: 1em;
}
fieldset#sendmsg_fieldset_bottom li input[id="sendmsg_from"] {
	margin-left: 0.3em; 
  margin-top: 0.3em;
  margin-bottom: 1.2em;
	width: 20em;   /* 32em; */
}
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="to"] {
	  width: 10.5em;
    font-style: italic;
    font-weight: bold;
    color: #1496d6;
    margin-left: 0em;
    margin-top: 0.5em;
}
fieldset#sendmsg_fieldset_bottom ul li a[id="sendmsg_add_recipient_new"].na-block_button.white {
	  margin-left: 48em;
    width: 6.5em;
    margin-top: -1.9em;
}
fieldset#sendmsg_fieldset_bottom ul .na-not_table.na-form_grid_head {
	width:50em; 
	margin-top:0.5em;
}
div#sendmsg_grid_email_list {
	height: 13em;
  width: 50em;
  margin-bottom: 1em;
}
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="name"] {
   width:15em; 
   margin-left:0.3em; 
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="name"] {
	width:16em; 
	padding-right:0.3em; 
	font-size:1em; 
	margin-right:0.3em;
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="role"] {
    width: 8em;
    padding-right: 0.3em;
    font-size: 1em;
    margin-right: 0.3em;
}
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="email_tel"] {
   width : 15em;   
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="email_tel"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="mobile"] {
  width:16em; 
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="mobile"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="username"] {
   width:15em; 
   display:none;
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="username"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="mobile"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li input[data-label_id="select"] {
	margin-left:1.8em; 
	margin-right: 0.5em; 
	width: 1em;
}  
fieldset#sendmsg_fieldset_bottom div#sendmsg_grid_email_list ul li a.na-icon_button_notext.no_background {
	margin-left:1.2em; 
	margin-right:0.2em; 
}  
/*    
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="subject"]  {
   font-style: italic; 
   font-weight: bold; 
   color: #1496d6; 
   margin-left: 0em; 
}
fieldset#sendmsg_fieldset_bottom li input[id="sendmsg_subject"] {
	margin-left: 0.3em; 
	margin-top: 0.3em; 
	width: 33.5em;
}
*/
fieldset#sendmsg_fieldset_bottom ul li label[data-label_id="subject"]  {
	  width: 8.5em;
    font-style: italic;
    font-weight: bold;
    color: #1496d6;
    margin-left: 0em;
    margin-top: 1em;
    font-size: 1em;
}
fieldset#sendmsg_fieldset_bottom li input[id="sendmsg_subject"] {
	margin-left: 0.3em; 
	margin-top: 1em;
	width: calc(100% - 10em);  /* 36.5em;*/
}
fieldset#sendmsg_fieldset_bottom li textarea[id="sendmsg_subject"] {
	margin-left: 0.3em; 
	margin-top: 0.25em;
	width: calc(100% - 10em);   /* 36.5em; */
}
fieldset#sendmsg_fieldset_bottom ul li  textarea[id="sendmsg_compose_message"] {
	height: 18em; 
	width: 45em; 
	resize:vertical;  
	overflow-x: hidden; 
	overflow-y: auto; 
	margin-left: 0em;
	margin-top: 1em;
}
div#sendmsg_free_compose_message_html {
	height: 18em; 
	width: 47.5em; 
	overflow-x: hidden; 
	overflow-y: auto; 
	margin-left: 0em;
	margin-top: 1em;
	border: 1px solid #CCCCCC;
	padding: 1em;
}

div#sendmsg_free_attachments_container {
	min-height: 3.4em;   
	width: 95%; 
	overflow-x: hidden; 
	overflow-y: auto; 
	margin-left: 0em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border: 1px solid #CCCCCC;
	padding: 0.5em;
}
a.na-button_circular {
	line-height: 2.5em;
  background-color: lightblue;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  display: inline-block;
  text-align: center;
}
a.na-button_circular.selected {
  /* background-color: #1ac7ff; */
  /* background-color: black; */
  background-color: #0075e8;
  color: white;
}
div#on_behalf_div_left {
	height: 25em;
}
div.na-mail_preview_summary {
	font-family: Arial;
  font-size: 11pt;
  line-height: 1.1em;
  padding-left: 0.5em
}


/* E M A I L   P R E V I E W   F O R M */
div#sendmsgP_div_bottom {
	width: 99%;   /* 52em; */
	height: 23em;
} 
form#sendmsgP_form {
	height: 23em;
}
fieldset#sendmsgP_fieldset_bottom > ul {
	padding-left: 0em;
}
div#emailattachment_div_left {
	height: 8em;
	width: 12em;
}

fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="delivery_method"]  {
	 color: #1496d6;
   vertical-align: super;
}
fieldset#sendmsgP_fieldset_bottom ul li div.na-button_bar {
	margin-left: 0em;
  margin-right: 10em;
  font-family: FontAwesome;
}
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="from"]  {
	  width: 8.5em;
    font-style: italic;
    font-weight: bold;
    color: #1496d6;
    margin-left: 0em;
    margin-top: 0.3em;
    margin-bottom: 1.2em;
    font-size: 1em;
}
fieldset#sendmsgP_fieldset_bottom li input[id="sendmsgP_from"] {
	margin-left: 0.3em; 
  margin-top: 0.3em;
  margin-bottom: 1.2em;
	width: 20em;   /* 32em; */
}
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="to"] {
	  width: 10.5em;
    font-style: italic;
    font-weight: bold;
    color: #1496d6;
    margin-left: 0em;
    margin-top: 0.5em;
}
fieldset#sendmsgP_fieldset_bottom ul li a[id="sendmsgP_add_recipient_new"].na-block_button.white {
	  margin-left: 48em;
    width: 6.5em;
    margin-top: -1.9em;
}
fieldset#sendmsgP_fieldset_bottom ul .na-not_table.na-form_grid_head {
	width:50em; 
	margin-top:0.5em;
}
div#sendmsgP_grid_email_list {
	height: 13em;
  width: 50em;
  margin-bottom: 1em;
}
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="name"] {
   width:15em; 
   margin-left:0.3em; 
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="name"] {
	width:16em; 
	padding-right:0.3em; 
	font-size:1em; 
	margin-right:0.3em;
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="role"] {
    width: 8em;
    padding-right: 0.3em;
    font-size: 1em;
    margin-right: 0.3em;
}
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="email_tel"] {
   width : 15em;   
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="email_tel"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="mobile"] {
  width:16em; 
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="mobile"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="username"] {
   width:15em; 
   display:none;
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="username"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="mobile"] {
	width:17em; 
	padding-left:0.2em; 
	font-size:1em; 
	margin-left:0.5em;
}
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li input[data-label_id="select"] {
	margin-left:1.8em; 
	margin-right: 0.5em; 
	width: 1em;
}  
fieldset#sendmsgP_fieldset_bottom div#sendmsgP_grid_email_list ul li a.na-icon_button_notext.no_background {
	margin-left:1.2em; 
	margin-right:0.2em; 
}  
/*    
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="subject"]  {
   font-style: italic; 
   font-weight: bold; 
   color: #1496d6; 
   margin-left: 0em; 
}
fieldset#sendmsgP_fieldset_bottom li input[id="sendmsgP_subject"] {
	margin-left: 0.3em; 
	margin-top: 0.3em; 
	width: 33.5em;
}
*/
fieldset#sendmsgP_fieldset_bottom ul li label[data-label_id="subject"]  {
	  width: 8.5em;
    font-style: italic;
    font-weight: bold;
    color: #1496d6;
    margin-left: 0em;
    margin-top: 1em;
    font-size: 1em;
}
fieldset#sendmsgP_fieldset_bottom li input[id="sendmsgP_subject"] {
	margin-left: 0.3em; 
	margin-top: 1em;
	width: 36.5em;
}
fieldset#sendmsgP_fieldset_bottom li textarea[id="sendmsgP_subject"] {
	margin-left: 0.3em; 
	margin-top: 1em;
	width: 36.5em;   /* 25em; */
}
fieldset#sendmsgP_fieldset_bottom ul li  textarea[id="sendmsgP_compose_message"] {
	height: 18em; 
	width: 45em; 
	resize:vertical;  
	overflow-x: hidden; 
	overflow-y: auto; 
	margin-left: 0em;
	margin-top: 1em;
}
div#sendmsgP_free_compose_message_html {
	height: 18em; 
	width: 47.5em; 
	overflow-x: hidden; 
	/*overflow-y: auto; */
	overflow-y: clip;
  overflow-clip-margin: 0.7em;
	margin-left: 0em;
	margin-top: 1em;
	border: 1px solid #CCCCCC;
	padding: 1em;
}

div#sendmsgP_free_attachments_container {
	min-height: 3.4em;   
	width: 95%; 
	overflow-x: hidden; 
	/*overflow-y: auto;*/ 
	overflow-y: clip;
  overflow-clip-margin: 0.7em;
	margin-left: 0em;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid #CCCCCC;
	padding: 0.5em;
}

/* End of SEND MESSAGE */

/* Debug Info Panel */
div#panel_debug_info{
	width: 99%;
	height: 84em;
	max-width: 99%;
	max-height: 84em;
}