ul.na-not_table.na-form_grid_detail.na-dragged_item {
	opacity: 1; 
	background-color: #88c4f0; 
}
div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail.na-dragged_item > li.na-not_table {
	background-color: inherit; 
}

html, body.na-body {
/*  width: 77em; 
  min-width: 77em; */
  max-width: 100%;    /* 77em = 13.44 = 1035 */
  overflow-x: hidden;
}
div.na-root {
  font-size: 0.84em;
}
div.na-main_area {
  margin-bottom: -5.5em;
  padding-bottom: 5.5em;
  margin-top: -2.8em;
  padding-top: 2.8em;
}
div.na-form_body {
  box-sizing: border-box;
	overflow: hidden;   /* auto;  /*hidden; */ 
 padding: 0.5em 0.5em 2.5em 0.5em;
}

/*** header styling start ***/
header.na-header {
/*  background-image: linear-gradient(to right, #95CF68, #638B45); */
  position: relative;
  background-image: linear-gradient(to right, #4793c0, #25506b);
  color: white;
  border-bottom: 0.1em groove #4793c0;
  font-size: 0.84em;  
}
h1#app_title {
	position: relative;
	pointer-events: none;
	top: -1.8em;
}
p#app_subsystem {
	position: relative;
	pointer-events: none;
	top: -2.2em;
}
span#header_username {
	position: relative;
	float: right;
	top: -1em;
	margin-right: 2em;
}
a#view_clipboard {
	position: relative;
	left: -4em;
	top: -0.75em
}
span#view_clipboard_text {
	font-size: 1.7em;
	font-style: normal;
}
a#user_quick {
	position: relative;
  left: -3.5em;
  top: -0.65em;
  color: white;
  font-size: 1.5em;
}
a#user_preferences {
	position: relative;
	left: -4em;
	top: -0.8em
}
span#user_preferences_text {
	font-size: 1.7em;
	font-style: normal;
}
a#new_session {
	position: relative;
	left: -2.5em;
	top: -0.8em
}
span#new_session_text {
	font-size: 1.7em;
	font-style: normal;
}
a#header_logout {
	position: relative;
	left: -1em;
	top: -0.8em
}
span#header_logout_text {
	font-size: 1.8em;
	font-style: normal;
}

/*** header styling end ***/

/*** Specific buttons in Top Menu ***/
.na-button_logout.na-icon_button_notext:before {
  font-size: 1.8em;
  font-weight: 550;  
	background-color: transparent;
  color: white;
  border: none;
  color: white;
}	
.na-button_logout.na-icon_button_notext {
  position: absolute;
  top: -0.2em;   
  left: auto;    /* necessary for right to work */
  right: 0.5em;
}
.na-button_settings.na-icon_button_notext:before {
  position: absolute;
  top: 0.14em;   
  left: auto;    /* necessary for right to work */
  right: 3em;
  background-color: #95CF68;  
  color: black; 
}
.na-menu_icon:before,
.na-icon_button_notext.na-panel_side_icon_otherContainer:before { 
  font-weight: 550;  
	color: white;
  background-color: transparent;
  border: none;    
  box-shadow: none;  
}
.na-menu_icon:before {
  font-size: 1.4em;
  top: 0.14em;  
}
.na-panel_side_icon_otherContainer.na-icon_button_notext:before {
  font-size: 1.4em;
  margin: 0em 0em 0em 0.5em;
  top: 0.12em;  
}
header.na-header p#username {
    position: absolute;
    float: right;
    top: 1.5em;
    margin-right: 0em;
    z-index: 1;
    right: 2em;
}
header.na-header span#system_msg_no {
    position: relative;
    font-size: 0.8em;
    width: 1em;
    top: -0.7em;
    background-color: #fa3e3e;
    border-radius: 2px;
    color: white;
    z-index: 1;
    padding-left: 0.1em;
    margin-left: -0.2em;
    padding-right: 0.25em;
    margin-right: 0.5em;
    opacity: 0;
}
header.na-header span#system_msg_icon {
	font-family: FontAwesome;
	cursor: pointer;
  opacity: 0;
}


/*** Top menu specific buttons end ***/

/* S P E C I F I C    M A I N    S C R E E N    D I V S */
div#eba-favtrxs {
  position: relative;
  top: 0;
  left: 0;
/*  width: 16em;
  height: 56em; */
	margin: 1em;
  float: left;  
  transition: max-width 0.4s ease-in-out;
}
div#productsGridTabs {
  margin: 1em 0.5em;
  float: left;    
}

div#eba-workarea {
  margin: 0em 0.5em 1em 0.5em;
  float: left;  
}
div#eba-workanchor {
  margin: 0em;
  box-sizing: border-box;
  padding: 0.5em 0.25em 0.25em 0.25em;
  float: left;  
  background-color: #9DA2B3;
 /*background-color: #787B88; */
}
div#eba-workbench {
  margin: 0em;
  box-sizing: border-box;
  padding: 0.5em 0.25em 0.25em 0.25em;
  overflow: auto;   /* any value other than visible causes div to take the remaining width */  
  background-color: white;   /* #EDEDED; */
}
div#eba-workaccts {
  margin: 0em;
  box-sizing: border-box;
  padding: 0.5em 0.25em 0.25em 0.25em;
  float: left;  
  background-color:  white; 
}
div#eba-workcards {
  margin: 0em;
  box-sizing: border-box;
  padding: 0.5em 0.25em 0.25em 0.25em;
  float: left;  
  background-color:  white; 
}
div#eba-workbenef {
  margin: 0em;
  box-sizing: border-box;
  padding: 0.5em 0.25em 0.25em 0.25em;
  float: left;  
  background-color:  white; 
}
div#eba-workbills {
  margin: 0em;
  box-sizing: border-box;
  padding: 0.5em 0.25em 0.25em 0.25em;
  float: left;  
  background-color:  white; 
}
/* E N D   O F    S P E C I F I C    M A I N    S C R E E N    D I V S */

/* T R A D I T I O N A L   M E N U    S T Y L I N G   A D J U S T M E N T S */
nav.na-nav_top1 {
  /* background-image: linear-gradient(#787B88, #787B88); */
  background-color: #162d3d;   /* #122634 */
  background-image: none;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25); 
}
.na-menu_container {
  /* background-image: linear-gradient(#787B88, #787B88); */
  background-color: #162d3d;  /* #122634; */ 
  background-image: none;
}
.na-menu.na-menuVertical {
 	/* background-image: linear-gradient(#787B88, #787B88); */
  background-color: #162d3d;  /* #122634; */
  background-image: none;
  border: 1px solid #787B88;
  border-top: 0px solid #787B88;
}
.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 ul li, ul.na-menuVertical > li {
  /* background-image: linear-gradient(#787B88, #787B88); */
  background-color: #162d3d;  /* #122634; */ 
  background-image: none;
}
ul.na-menuVertical > li, ul.na-menuVertical ul > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);  
}
ul.na-menuVertical > li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.20); 
}
.na-menu li.na-hover {  
  /* background-image: linear-gradient(#787B88, #787B88); */
  background-color: #abbecb;   /* #97aebd; */
  background-image: none;
}
.na-menu > li.menu > a:after {  /* first level menu options down arrow */
  color: white;
  background-color: #162D3D;
  border: none;    
  box-shadow: none;  
}
/* M E S S A G E   A R E A    S T Y L I N G   A D J U S T M E N T S */
div.na-form_message, .na-panel_message {
  color: black;
  background-color: #e9e9e9; /* #8A8E9C; */    
  font-size: 0.95em;
  /* border: none; */
  /* border: 1px solid #16eaeaea; */
  box-shadow: none;
}
div.na-form_message.normal, .na-panel_message.normal {
  color: #3c763d;
  background-color: #DFF0D8; /* #8A8E9C; */    
  font-size: 0.95em;
}
div.na-form_message.critical, .na-panel_message.critical {
  color: #B94A48;
  background-color: #F2DEDE; /* #8A8E9C; */    
  font-size: 0.95em;
}
div.na-form_message.warning, .na-panel_message.warning {
  color: #919100;
  background-color: #ffffcc; /* #8A8E9C; */    
  font-size: 0.95em;
}
/* .na-panel_message {
	color: #FFFF19; 
	background-color: #525E52;
} */
div.na-validation_msg {    /* styling for non-native validation message area */
  color: #ff0000;
  font-size: 0.9em;  /* 0.9em; */
 /* font-style: italic; */
}

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

/* F O R M  D I Vs  L E F T  &  R I G H T    A D J U S T M E N T S */

#trx_history_div {
  box-sizing: border-box;
	overflow: auto;
}
div#trx_history_canvas_div {
  box-sizing: border-box;
  overflow-y: auto;
  background-color: #FFFFF0; /*#f7fcf3;  */
  margin: 0em 1em 1.5em 1.5em;
  border-radius: 4px;
  font-size: 0.95em;
}


/* F I E L D S E T   S T Y L I N G    A D J U S T M E N T S */
fieldset.na-rows {
  padding: 0.25em;	
}
.products_grid fieldset.na-tabular {
	box-sizing: border-box;
}
.products_grid  fieldset.na-headings {
	background-color: #787B88;
}
.products_grid  div.products_grid_divhead {   /* productdetail headings div */
  margin: 1em auto 0em auto;
  padding: 0.25em;
} 
.products_grid  div.products_grid_divdetail {   /* productdetail rows div */
  margin: 0em auto 1em auto;
}	
#trx_history_fieldset {
	background-color: #FFFFF0; /*#f7fcf3;  */
	margin: 0em 1em 1.5em 1.5em;
	border-radius: 4px;
	font-size: 0.95em;
}
#trx_history_fieldsethead {
  font-size: 0.95em;
}

/* F I E L D  L A B E L  S T Y L I N G    A D J U S T M E N T S */
fieldset.na-transaction ul li label { 
  width: 11em;
  color: #484a55;
  font-weight: 500;
  font-size: 1.1em;  /*0.95em */
  user-select: none;
}
fieldset.na-transaction ul li label.na-label_with_icon {
	width: 9em;	
}
fieldset.na-transaction ul li label.na-form_instructions { 
  font-size:1.1em; 
  font-style: italic; 
  font-weight: bold; 
  color:black;  
}

/* SPECIFIC FIELD / LABEL STYLING */
#trx_history_from_date_label {
	margin-left: 9em;
	width: 5.5em;
}
#trx_history_to_date_label {
  margin-left: 2em;
  width: 4em;
}
textarea[name="description"] {
  width: 22em;
}
#trx_history_fieldset ul li input[type="text"][name="value_date"] {
  width: 7em;
}
#trx_history_fieldset ul li input[type="text"][name="amount"] {
  width: 5em;
}


/* B U T T O N  S T Y L I N G    A D J U S T M E N T S */
.na-icon_button_notext:before { 
  font-size: 1.65em; 
  font-weight: 500; 
  width: 1.8em;
  height: 1.8em; 
  line-height: 1.9em; /* 1.9em a higher line-height than height makes the icon more symmetric */
  background-color: #122634;   
  color: white;  
  border: 0px solid #454545;
  box-shadow: none; /* 2px 2px 8px -1px #25506b; */
}

.na-icon_button_notext_plain: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;
    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;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.na-icon_button_notext_plain {    /* icon button with no text */
  position: relative; 
  cursor: pointer;
  font-size: 0.9em;
  padding: 0em;
  margin: 0em;
  color: #7d889c; /*color: #002C85;*/   
  font-weight: 700;
  border: none;
  background: none;
  user-select: none;
}

.qtip-content .na-icon_button_notext:before {   /* NK 21/3/2018 */
	background-color: transparent;
	color: #002C85;
}
fieldset.na-transaction .na-icon_button_notext:before {
	width: 1.8em;
  height: 1.8em; 
  line-height: 1.9em; /* 1.9em a higher line-height than height makes the icon more symmetric */background-color: #25506b;
  font-size: 1.2em;
  border: 1px solid #818284;
  color: white;
  box-shadow: 2px 2px 8px -1px #25506b;  
  /* background-color: black;  /* #3d8d41; */ 
}
fieldset.na-transaction .na-icon_button_notext.no_background:before {
  border: none;
  color: black;
  background-color: transparent;
  box-shadow: none;   
}


.na-icon_button_border:before {
  font-size: 1em;
  font-weight: 550;
  color: black;
  background-color: #95CF68;
  border: 1px solid #818284;  
  box-shadow: 2px 2px 4px 0 #4d4d4d; 
}
.na-icon_button_border { /* style anchor as icon button with border */
  border: 1px solid #9DA2B3;
  color: black;
  font-size: 0.85em;
  font-weight: 600;
  background-image: linear-gradient(#FAFBFC, #FAFBFC);
  box-shadow: 2px 2px 1px 0 #454545;  /*#818284;*/
}
.na-icon_button_border.clicked {
  background-image: linear-gradient(#8A8E9C,#8A8E9C);
}
.na-icon_button_border.streaming {
  background-image: linear-gradient(red,red);
}
/* WEB LIKE B U T T O N  */
.na-block_button:before { /* style icon of ribbon button */
  font-family: "FontAwesome";
  content: attr(data-icon_symbol);
  display: inline-block;
  position: absolute; 
  left: auto;
  right: 0.5em; 
  top: 0.2em; 
  font-size: 1.1em;
  font-weight: 550;
  width: 1.1em;
  height: 1.1em; 
  line-height: 1.1em; /* 1.9em a higher line-height than height makes the icon more symmetric */
  border-radius: 50%;    
  padding: 0em; 
  margin: 0em;
  background-color: none;   
  color: #1496d6;   /*color: white*/
  border: none;
  box-shadow: none; 
  user-select: none;
}
.na-block_button { /* style block begin button */
  position: relative;
  font-size: 1.1em;
  font-weight: 600;
  box-shadow: none; /* 2px 2px 1px 0 #454545;  /*#818284;*/  
  color: #1496d6;  /* color: white; */
 /* background-color: white;  #bbbcc4; */ 
  border: 1px solid #bbbcc4; 
  width: auto;
  width: 25.5em;
  display:inline-block; 
  /* margin-left: 0.5em; */
  padding: 0.2em 0.4em; 
  cursor: pointer;
  vertical-align: left;
  line-height: 1.3em;   /* set this equal to height for vertical alignment */
  text-align: left;
  text-decoration: none;
  border-radius: 4px;
}
ul.na-block_first { 
	background-color: #ebf4fa40;
	/*background-color: #f0f0f0;*/ 
}
ul.na-block_first.close {
	background-color: white;
}

ul.na-block_first ~ ul.na-block {
	background-color: #88c0e12b;   /* #f0f0f0; */	
	display: none;
}
ul.na-block_first.close ~ ul.na-block {
/*	 display: none;  */
}

.na-web_button1 { /* style anchor as web button */
  font-size: 1.1em;
  font-weight: 600;
  box-shadow: none; /* 2px 2px 1px 0 #454545;  /*#818284;*/  
  color: white !important;
  background-color: #122634;  
  border: 1px solid #bbbcc4; 
  width: auto;
  min-width: 5em;
  display:inline-block; 
  margin-left: 0.5em;
  padding: 0.2em 0.4em; 
  cursor: pointer;
  vertical-align: middle;
  line-height: 1.3em;   /* set this equal to height for vertical alignment */
  text-align: center;
  text-decoration: none !important;
  border-radius: 4px;
}
.na-web_button1:hover { 
  transform: scale(1.1); 
  background-color:#040a0d; 
  color: white;
} 
.na-web_button1.clicked {
  background-image: linear-gradient(#8A8E9C,#8A8E9C);
}
.na-web_button1.green {
	background-color: #2AAF00;  /* #4CAF50; */
}
.na-web_button1.green:hover {
	background-color: #3d8d41;
  color: white;
}
.na-web_button1.red {
	background-color: #f41f00/* #B94A48; */
}
.na-web_button1.red:hover {
	background-color: #bf1800;
  color: white;
}
.na-web_button1.blue {
	background-color: #107FFF  /* #2574a3; */
}
.na-web_button1.blue:hover {
	background-color: #0057b7;
  color: white;
}
.na-web_button1.gold {
	background-color: #c6c600; /* #888800; */
}
.na-web_button1.gold:hover {
	background-color: #a6a600;
  color: white;
}
.na-web_button1.lightblue {
	background-color: #349CE7; 
}
.na-web_button1.lightblue:hover {
	background-color: #1e8fe3; 
  color: white;
}
.na-web_button1.white {
	background-color: #ededed45; 
	border: 1px solid black;
	color: black;
}
.na-web_button1.white:hover {
	background-color: #827d7d45;
  color: black;
}
.na-web_button1.black {
	background-color: black; 
	color: white;
}
.na-web_button1.black:hover {
	background-color: grey;
}
.na-web_button1.bordo {
	background-color: #a33c3e; 
  color: white;
}
.na-web_button1.bordo:hover {
	background-color: #701e1f;
  color: white;
}

/* F I E L D  S T Y L I N G    A D J U S T M E N T S */
fieldset.na-transaction .na-form_item { 
	font-size: 1.1em; /* 0.9em */
  font-weight: 500;
  color: #555555; 
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
  background-color: #FFFFFF;  
  width: 15em;
  text-align: left;
  user-select: none;
}  
fieldset.na-transaction textarea.na-form_item {
	resize: none;
	min-height: 1.6em;
	padding-bottom: 0.6em;
}	

fieldset.na-transaction .na-form_item.na-field_bt { /* field with right 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 li input[type="text"].na-form_item { /* basic style for text elements */
  padding: 0.3em;
}
fieldset li input[type="range"].na-form_item { /* basic style for range */
  width: 13em;
}
fieldset li input[type="range"].na-form_item + output { /* range meter */
  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;
}

/* Specific field styling */ 

.products_grid fieldset.na-stmt textarea.na-form_item {    /* remove all styling from textarea */
  display: inline-block; 
  vertical-align: top; 
  font-size: 1em;
/*  font-family: inherit; */
  font-weight: 600;
  border: none; 
  overflow: auto;
  outline: none;
  resize: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
  padding-top: 0.3em; 
  padding-bottom: 0.3em;
}
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 select.na-form_item:disabled
{
	background-color: #cfcfcf;	
	color: #707070;
}
fieldset li input.na-form_item.na-field_extrainfo:disabled {
	background-color: white;
}

.na-panel.na-panelin fieldset.na-transaction.na-rows .na-form_item {  /* fields in internal panels */
  font-size: 1em;
}	
.products_grid .na-form_item {    /* special styling for form items in grids */  
  font-size: 1em; /* 0.9em */
  font-weight: 600;
  color: black;   
  border: 1px solid #b7b7b7; 
  border-radius: 0;   /* 4px; */
  padding-top: 0.4em;
  padding-bottom: 0.4em;
/*  background-image: linear-gradient(#4280FC, #0055FF); */
  background-color: #EDEDED;        /* elena #9DA2B3; */   
}

.products_grid .na-stmt .na-form_item {    /* special styling for form items in grids */  
  font-size: 1em; /* 0.9em */
  font-weight: 600;
  color: black;  
  border: 0px solid #b7b7b7; 
  border-radius: 0;   /* 4px; */
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  background-color: #FFFFF0;  /* #f7fcf3;  */  
  vertical-align: top;
}

.products_grid .na-stmt ul {
  border-bottom: 1px solid #b7b7b7; 	
  height: 3.2em;
} 
.products_grid fieldset.na-stmt ol li, .products_grid fieldset.na-stmt ul li {
  padding-left: 0.25em;  
  padding-right: 0.25em;  
}

.products_grid fieldset.na-tabular ol li, .products_grid fieldset.na-tabular ul li {
  padding: 0.1em;  
}
.products_grid  fieldset.na-tabular.na-headings li label {
  color: white;
  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 {
	background-image: linear-gradient(#416078bd, #416078bd);
	/*#5e7d95d4*/
 /* background-image: linear-gradient(#6888a0d1, #2c4152d1); */
  /* background-image: linear-gradient(#e0e0e0, #e0e0e0); */
  border: 1px solid #e0e0e0;  
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
fieldset ul li.na-li_extra_info > label {
	color: white;
}
fieldset ul li.na-li_extra_info_grey {
  background-image: linear-gradient(#525E52, #525E52); 
  border: 1px solid #525E52;  
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
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;
}
/* 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     A D J U S T M E N T S  */
.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: #122634; 
  border-bottom: 0.1em solid grey;  
}
.na-panel_header_title {
  font-size: 1.1em; 
  font-weight: 600;
  color: white;    /*#003fbf; */
}
.na-panel_header_buttons {
  padding: 0em 0.10em 0em 0.25em;
  margin-top: 0em;
}
.na-panel_body {
  background-color: #FFFFFF;  /* #9DA2B3; */   
}
.na-panel.na-transaction .na-panel_body {
  background-color: #FFFFFF;   
}
div.na-chart_area {
	box-sizing: border-box;
	width: 76em;
	height: 100%;
	margin: 0em auto;
}
.na-panel.na-charts {
	float: left;
	margin: 1em;
}
.na-panel.na-charts .na-panel_header {
  background-color: #25506b;   /*light grey */
}
.na-panel.na-charts .na-panel_body {
  background-color: #f7f7f7;   /*light grey */
}
.na-panel_contents {
	padding: 0em;
}
.na-panel_footer {
  background-color: white; /* #9DA2B3; */ 
  border-top: none; /* 0.1em solid #c0c0c0; */
}
.na-panel.na-transaction .na-panel_footer {
  background-color: white; /* #122634; */ 
  border-top: none ; /* 0.1em solid #f0f0f0; */ 
}
.na-panel.na-transaction .na-panel_footer_buttons {
  padding: 0.25em 0.5em 0.25em 1.3em;    /* for buttons 0.35em; */
}
.na-panel_side_icon {
  box-shadow: 2px 2px 4px 0 #454545;  
  background-color: rgba(240, 89, 127,1);
  color: white;
}


/* S T A N D A R D   T A B S   S T Y L E    A D J U S T M E N T S  */
.na-tab  > .na-panel_body {
  background-color: #FFFFFF;  /* #9DA2B3; */
}
.na-tab  > .na-panel_body .na-panel_body {  /* tab content panel */
  background-color: #FFFFFF;  /* #FAFBFC; */
  box-shadow: none;  /* 2px -3px 1px 0 #9DA2B3;  /*#454545;  /*#818284;*/
  border: none;  
}
.na-tab .na-panel {
	border: none;
	box-shadow: none;
}	
.na-tab .na-panel_labels {
	border: none;
}
a.na-tab_button {          /* style anchor as a tab button */
	height: 1.3em;
	min-width: 2.5em;
  padding: 0em;
  margin-right: 1em;
  margin-top: 0.4em;
  font-size: 1.1em;
  font-weight: 600;
  border: none;  /* border: 1px solid #b1b1b1; */
  border-right: none;  /* 1px solid #0f280f; */  
  border-left: none;  /* 0px solid #97d06c; */   
  border-bottom: none;  /* 0px solid #c0c0c0; */
  color: black; /* black; */
  /*background-image: linear-gradient(#FAFBFC, #FAFBFC);*/
  background-image: none;
  background-color: transparent; /* #c1e3a8; */   
/*  box-shadow: 3px -3px 1px -1px #454545 inset;    */
}
a.na-tab_button_active {       /* style anchor as a tab button */
	height: 1.3em;
	min-width: 2.5em;
  padding: 0em;
  margin-right: 1em;
  font-size: 1.1em;
  font-weight: 600;
  border: 0px solid #0f280f;  /* #c0c0c0; */
  border-left: 0px solid #0f280f;
  border-right: 0px solid #0f280f;
  border-bottom: 1px solid blue;  
  color: blue;   /* black; */
  /*box-shadow: 4px 0 1px -1px #454545;  /*#818284;*/    
  background-color: transparent;  /* #FAFBFC; */
  transform: none;
  -webkit-transform: none;
}
a.na-tab_button.na-tab_button_next {  /* next to active tab */
	 border-left: none;  /*border-left: 1px solid #0f280f;   /* #c0c0c0; */
}	

/* I N T E R N A L    P A N E L S    S T Y L E   A D J U S T M E N T S */
.na-panel.na-panelin {
  background-color: #EDEDED;   /* #FAFBFC;   /*light grey */
  border: 1px solid #9DA2B3;
  box-shadow: none;
}
.na-panel.na-panelin .na-panel_header {
  background-color: #c4c6d0;    
  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;
}
.na-panel.na-panelin .na-panel_body {
	background-color: #EDEDED;
}
.na-panel.na-panelin .na-panel_contents {
  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_header_buttons .na-icon_button_notext:before { 
  font-size: 1.65em; 
  font-weight: 500; 
  width: 1.8em;
  height: 1.8em; 
  line-height: 1.9em; /* 1.9em a higher line-height than height makes the icon more symmetric */
  background-color: transparent; /* #525E52;*/   
  color: black;
  border: 0px solid #454545;
  box-shadow: none; /* 2px 2px 8px -1px #25506b; */
}
.na-panel.na-panelin .na-panel_footer_buttons {
}

/* W A R N I N G   P O P U P    P A N E L   &   M E S S A G E   S T Y L I N G  A D J U S T M E N T S */
.na-panel.na-panelpopup .na-panel_header {
}
.na-panel.na-panelpopup .na-panel_body {
  background-color: white;
  color: #484a55;
}
.na-panel.na-panelpopup .na-panel_footer {
/*  background-color: #787B88; 
  border-top: 0em solid #787B88; */
  background-color: white; /* #9DA2B3; */ 
  border-top: none; /* 0.1em solid #c0c0c0; */}
div.na-popup_message {
  color: #484a55; 
  font-size: 1em;
  font-weight: 700;
}
div.na-popup_icon > span:before {
	font-family: "FontAwesome";
	content: "\f071";
	color: #FFA500;
	font-size: 3em;
  font-weight: 700;
}
div.na-popup_icon > span {
}
/* S P E C I A L    W I D G E T S   */
div.na-button_bar {
	background-color: #eff5fa;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.50); 
  border: 1px solid #bbbcc4;  
}
fieldset.na-transaction ul li div.na-button_bar > label {
  color: black;	
  border-right: 1px solid #787B88;
}
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: #25506b;  /* #525E52; */ 
	color: white;
}	
fieldset.na-transaction ul li div.na-button_bar label > input[type="radio"]:checked + span {
  background-color: #25506b;   
  box-shadow: 0px 2px 1px #25506b; 
  color: white;
}
.onoffswitch {
	  display: inline-block; 
    position: relative; 
    width: 2.3em;
    height: 2.1em;
    -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.25em; 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: 1em;
}
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: 1em;
    transition: all 0.3s ease-in 0s;     
    height: 1.2em;
}
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; 
}



/* STYLING FOR SPECIFIC BUTTON BAR WIDGETS */
div#beneficiary_bank_type, div#trf_funds_other_bank_type {
  margin-left: 0em;
}
/* fieldset.na-transaction ul li div#beneficiary_bank_type > label,
fieldset.na-transaction ul li div#trf_funds_other_bank_type > label {
  width: 9em;   
  height: 1.3em;
  font-size: 1em;   
} */

img#login_logo {
	display: none;
  margin: 0 auto;
}
fieldset li span.login_span:before {
	font-family: "FontAwesome";
	content: attr(data-icon_symbol);
}
fieldset li span.login_span {
  width: 1em;
  margin: 0em;
  margin-right: 0.25em;
  padding: 0em;	
  font-size: 1.5em;
  font-weight: 550;
}

div#mainScreen_container {
 overflow-y:auto;
 overflow-x: hidden;
 font-size: 1.1em;
}

/* 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;
	
/*	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(37,80,107), rgb(37,80,107) 50%, #4793c0 50%, #4793c0);
    background: -o-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #4793c0 50%, #4793c0);
    background: -ms-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #4793c0 50%, #4793c0);
    background: -webkit-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #4793c0 50%, #4793c0);
    background: -moz-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #4793c0 50%, #4793c0);
*/  
  background: linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #1e57dbf2 50%, #1e57dbf2);
    background: -o-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #1e57dbf2 50%, #1e57dbf2);
    background: -ms-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #1e57dbf2 50%, #1e57dbf2);
    background: -webkit-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #1e57dbf2 50%, #1e57dbf2);
    background: -moz-linear-gradient(-45deg, rgb(37,80,107), rgb(37,80,107) 50%, #1e57dbf2 50%, #1e57dbf2);
    
  background-blend-mode: multiply;
  border-top:5px solid #162D3D;
  border-left:5px solid #162D3D;
  border-bottom:5px solid #1e57dbf2;
  border-right:5px solid #1e57dbf2;
    
/*  background-blend-mode: multiply;
  border-top:5px solid rgb(37,80,107);
  border-left:5px solid rgb(37,80,107);
  border-bottom:5px solid #4793c0;
  border-right:5px solid #4793c0;
    */
 /*   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 */

div.na-form_grid_div.na-grid_select ul.na-not_table.na-form_grid_detail:hover 
{
	background-color : #a2a5ac; 
} 

div.na-form_grid_div.na-grid_select.multi ul.na-not_table.na-form_grid_detail li.na-not_table {
	border: 1px solid rgba(143, 147, 156, 0.83); 	
}

ul.na-not_table.na-form_grid_head {
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	margin-top: 0.5em;   /*margin-top:1em;*/
	background-color: rgba(143, 147, 156, 0.58);
}

ul.na-not_table.na-form_grid_head > li > label {
	color : rgb(9, 9, 9);
} 

ul.na-not_table.na-form_grid_detail
{
	background-color : rgba(240, 240, 240, 0.5);                /* #d8d8d8; */
} 

ul.na-not_table.na-form_grid_detail .na-form_item {
	background-color : inherit;
	border : none;
	box-shadow : none;
	color: rgba(13, 13, 13, 0.91); 
}

div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail li.na-not_table.na-element_highlight{
	box-shadow : none;
	background-color: #def0fe;
}

div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail li.na-not_table.na-element_highlight .na-form_item:focus{
	box-shadow : none;
	background-color: #ffffff;
}

div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail li.na-not_table.na-element_highlight_sel {
	box-shadow : none;
	background-color: #def0fe;
}

form.na_transaction fieldset.na-tabular ul li.na-field_attention {
	/*border: 1px solid #ffff8c;  #f5ff82;*/
	background-color: rgba(255, 255, 25, 0.46);
}
form.na_transaction fieldset.na-tabular ul li.na-field_attention_green {
	/*border: 1px solid #ffff8c;  #f5ff82;*/
	background-color: rgba(128, 255, 128, 0.46);
	/* color: green; */
}
form.na_transaction fieldset.na-tabular ul li.na-field_attention_red {
	/*border: 1px solid #ffff8c;  #f5ff82;*/
	background-color: rgba(255, 0, 0, 0.46);
	/* color: red; */
}

div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail li.na-not_table {
	border: 1px solid rgba(143, 147, 156, 0.83); 	
	background-color : white;  /*rgba(240, 240, 240, 0.5); */
} 

div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail.na-grid_highlight_deleted 
{
	background-color : #bdbdbd59; 
} 
div.na-form_grid_div.na-grid_normal ul.na-not_table.na-form_grid_detail li.na-not_table.na-grid_highlight_deleted 
{
	background-color : initial;   
}
.na-block_button.white:before { /* style icon of ribbon button */
  left: auto;
  right: 0.1em; 
  top: 0.2em;    
  color: black;
}
.na-block_button.white { /* style block begin button */
  font-size: 0.9em;
  font-weight: 400;
  color: black;
  background-color: white;  
  padding: 0.2em; 
  padding-left: 0.4em;
}

.na-block_button.blue {
	background-color: #107FFF; 
}
.na-block_button.blue:hover {
	background-color: #0055b3; 
}

.na-block_button.green {
	background-color: #3d8d41; 
}
.na-block_button.green:before {
  left: auto;
  right: 0.1em; 
  top: 0.2em;    
	color: white; 
}

fieldset.na-transaction .na-icon_button_notext.no_background:before {
  border: none;
  color: #919191;
  background-color: transparent;
  box-shadow: none;   
}

fieldset.na-transaction .na-icon_button_notext.no_background.top {
	vertical-align: top;
}	
fieldset.na-transaction .na-icon_button_notext.no_background.top:before {
	vertical-align: top;
}	

fieldset.na-transaction .na-icon_button_notext.no_background:hover:before {
  color: #424242;
}

fieldset.na-transaction .na-icon_button_notext.no_background.na-element_sel:before {
  /*color: #424242;*/
  color : #107FFF;
}

/********** N E W ***********/
.na-icon_button_textright:before {
	color : gray;	
}
	
a.na-icon_button_textright:hover {
	text-decoration: underline;
	color : blue;
}	

a.na-icon_button_textright {
	color: gray;
}	

.na-icon_button_textright.gold:before {
	color : #e0e01b;	
}

.na-icon_button_textright.blue:before {
	color : #4793c08f;	
}

.na-icon_button_textright.green:before {
	color : #2ba93fc9;	
}

.na-icon_button_textbelow.gold:before {
	color : #e0e01b;	
	left: 2.2em;
}

.na-icon_button_textbelow.red:before {
	color : #f41f00;	
	left: 2.2em;
}

.na-icon_button_textbelow.gold.selected:before {
	color : #4793c0;	
}

.na-icon_button_textbelow.red.selected:before {
	color : #4793c0;	
}

.na-block_button.grey:before { /* style icon of ribbon button */
  left: auto;
  right: 0.1em; 
  top: 0.2em;    
  color: #6c6c6c;
}
.na-block_button.grey { /* style block begin button */
  font-size: 0.9em;
  font-weight: 400;
  color: #6c6c6c;
  background-color: white;  
  padding: 0.2em; 
  padding-left: 0.4em;
}

	fieldset.na-tabular ul.na-not_table.na-form_grid_head {
		width: 50em;
	}
	
ul.na-not_table.na-form_grid_detail .na-gridFieldUnderline {
	color : inherit;
}

ul.na-not_table.na-form_grid_detail .na-gridFieldUnderlin:before {
	color : inherit;	
}
	
ul.na-not_table.na-form_grid_detail .na-gridFieldUnderline:hover {
	text-decoration: underline;
	color : blue;
	cursor: pointer;
}





/**************************************/
/* The below must be moved to na-main */
/**************************************/

/* D I C T I O N A R Y */
div#dictionary_basic_div_top {
	padding-bottom: 0em;
}

/* F O R M   G E N E R A T O R  */
/* The belpow are to overcome an empty line in drids from bootstrap.css */
div#generatorsave_grid_form_access ul {
	margin-bottom: 0em;
}
div#generatorsave_grid_submission_form_access ul {
	margin-bottom: 0em;
}
div#formsearchresults_grid_form_search_results_grid ul {
	margin-top: 0.2em;
	margin-bottom: 0em;
}

div#builder ol, div#builder ul, div#builder li {
  padding-left: 1em; 
	/* with no margin it makes the bullets from lists invisible */
}
div#renderer ol, div#renderer ul, div#renderer li {
  padding-left: 1em; 
	/* with no margin it makes the bullets from lists invisible */
}

div#builder {
	overflow-x: hidden;
}
div#builder > .builder,
div#builder > .builder > div.formcomponents,
div#builder > .builder > div.formarea {
	height: 100%;
}

.na-generator_inline, .na-generator_inline_small, .na-generator_inline_large {
	display: inline-block !important;
	height: 3em;
	float: left;
}
.na-generator_inline input {
	width: 10em;
  margin-left: 1em;  
}
.na-generator_inline_small input {
	width: 5em;
  margin-left: 1em;  
}
.na-generator_inline_large input {
	width: 15em;
  margin-left: 1em;  
}

.na-generator_inline.na-genarator_newline {
	display: block !important;
	clear: both;
}
.na-generator_inline label {
	font-size: 0.8rem;
}

.na-generator_width_5 {
	width: 5em;  
	margin-left: 1em;  
}
.na-generator_width_10 {
	width: 10em; 
	margin-left: 1em;   
}
.na-generator_width_15 {
	width: 15em;  
	margin-left: 1em;  
}
.na-generator_width_20 {
	width: 20em;  
	margin-left: 1em;  
}
.na-generator_width_25 {
	width: 25em;  
	margin-left: 1em;  
}
.na-generator_width_35 {
	width: 35em;  
	margin-left: 1em;  
}
.na-generator_width_50 {
	width: 50em;  
	margin-left: 1em;  
}

/*cg 30/09/2022 - start*/
div.formio-form .table td div.formio-component-textarea textarea{
	border:none;
}
div.formio-form .table td div.formio-component-textfield input{
	border:none;
}
div.formio-form div.formio-component-textarea label{
	font-size: 0.8rem;
}
div.formio-form div.formio-component-checkbox label{
	font-size: 0.8rem;
}
div.formio-form div.formio-component-datetime label{
	font-size: 0.8rem;
}
div.formio-form div.panel-body div.formio-component-checkbox span{
	margin-left : -1rem;
}
div.formio-form div.panel-body div.formio-component-htmlelement p{
	margin-left : 2rem;
}
div.formio-form .table tr{
	background: rgb(233 236 239);
}
.na-generator_marginLeft_4 {
	margin-left: 4em;  
}
/*cg 30/09/2022 - end*/

.na-generator_pagebreak {
	page-break-before: always;
	break-before: page;
	
}

@media print {
  @page {
   	/* Reference: https://www.tutorialspoint.com/css/css_paged_media.htm */
   	size: auto;   /* A4, 8.5in 11in, portrait, landscape */
   	/* margin: 1.5cm 1cm;  /* large value shows default browser header & footer */
   	margin: 1.5cm 0.8cm;  /* large value shows default browser header & footer */
   	orphans: unset; /* 4 minimum number of lines of a paragraph that must be 
   	              left at the bottom of a page */
   	widows: unset;  /* 2 minimum number of lines of a paragraph that must be 
   	              left at the top of a page */
	}
  /* The below can be used with above page margin set 0 to hide browser header & footer */
  /*body {
	  padding: 1.5cm 1cm;
  } */
  /* Can have multiple page layouts and can be named in order to be referenced
     by other elements e.g. tp print a table in landscape layout 
     @page rotated { size : landscape }
     table { page : rotated }
  */
  .na-generator_pagebreak {
  	page-break-before: always;
	  break-before: break;
  }
  .na-generator_pagebreak_inside_avoid {
  	break-inside: avoid;  
  }
  /* There is also:
  	break-after: always;    and other values
  */
  
  /* The below relates to a failed attempt to print a panel na.util.printPageN */
/*  * :not(.na-print_page_not, .na-print_page_not *, .na-print_page_not + *, .na-print_page_not ~ *) {
	 	overflow: visible !important;
	  position: static !important;
  }  */
		
}

div#renderer {  /* Full width & full height panel */
  height: 50em;
  max-height: 50em; 
  width: 99%;   
  max-width: 99%; 
}

form#rendererFormIcon_form {  
	display: inline-block;
	width: 16em;
  height: 100%;
}
div#rendererFormIcon_div_left {
	padding-top: 0em;  /* was 3em */
}
div#rendererFormIcon_div_right {
	border-left: none;
}
div#panel_renderer_comments {
	width : 68.5em;
	height: 50em;
}
div#panel_renderer_comments_body {
	height: 44.4em;
}
form#renderer_add_comments_form ul {
	margin-bottom: 0em;
}
div#renderer_add_comments_div_core{
	width: 100%;
}
form#renderer_add_comments_form {
	width: 100%;
	display: inline-block;
	height: 100%;
}
div#renderer_add_comments_div_left {
	height: 100%;
	width: 100%;
}
fieldset#renderer_add_comments_fieldset_left {
	height: 100%;
	width: 100%;
} 
div#renderer_add_comments_grid_comments ul {
	padding-left: 0em;
}

/* F O R M    G E N E R A T O R    E N D */
   
   
/* C R M   V I E W S */

/* table.dataTable {
  word-wrap:break-word;
} */
/*table#documents_view {
  word-break:break-word;
}*/
table#documents_view td.na-view_column.na-view_email_preview {
  font-size: 1em;;
}
table.dataTable td.na-view_column {
  font-size: 1.2em;
}
table.dataTable th.na-view_column {
  font-size: 1.2em;
}
table.dataTable td.na-view_column.na-view_print {
  font-family: Arial;
  font-size: 11px;
}
table.dataTable th.na-view_column.na-view_print {
  font-family: Arial;
	font-size: 11px;
}
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;
}

.na-view_column {
	white-space: initial;
	vertical-align: top !important;
}
.na-pre_formatted {
	white-space: pre;
}
.na-emphasized {
	color: blue !important;
}

.na-view_highlight {
  color: blue !important;  /* background-color: whitesmoke !important; */
}

.na-view_background {
  background-color: lightyellow !important;
}

.na-clickable {
	cursor: pointer !important;
}
.na-iconfont {
	font-family: FontAwesome;
}
/* Sophia CSS*/
div#class_definition_grid_class_grid li.selected {
	background-color: cornflowerblue;
}

div#formlog_grid_entity_log ul.na-not_table.na-form_grid_detail{
	display : inline;
}

/* Generated project task screen */
fieldset#task_preview_project_fieldset_left > ul > li > .na-form_item,
fieldset#task_preview_project_fieldset_left > ul > li > label,
fieldset#task_preview_project_fieldset_left > ul > li > div.onoffswitch,
fieldset#task_preview_project_fieldset_left > ul > li > div.na-radio_vertical,
fieldset#task_preview_fieldset_left > ul > li > .na-form_item,
fieldset#task_preview_fieldset_left > ul > li > label,
fieldset#task_preview_fieldset_left > ul > li > div.onoffswitch,
fieldset#task_preview_fieldset_left > ul > li > div.na-radio_vertical
{
	margin-bottom: 5px;
}

div.na-overlay {
	position: absolute;
}
div.na-overlay_lowfussy {
	position: absolute;
}
div.na-overlay_nofussy {
	position: absolute;
}	
div.na-overlay_mediumfussy {
	position: absolute;
}	

/*   D O C U M E N T S      L I B R A R Y  (na.ui2.doc)  */

div#sendmsg_div_bottom {
	height: auto;
} 
form#sendmsg_form {
	height: auto;
}
div#sendmsgP_div_bottom {
	width: 99%;   /* 52em; */
	height: auto;
} 
form#sendmsgP_form {
	height: auto;
}

div#panel_doc_metadata.edithtml {
	width: 99%;
	max-width: 99%;
}	
div#panel_doc_metadata_contents {
	width: 99%;
}
div.edit_area_html {  /* edit area for content next to the metadata */
	width: calc(100% - 34.5em); 
}
div.edit_area_html.email_preview_area {
	box-sizing: border-box;
	width: 50%;
  height: calc(100% - 11em);
  margin-top: 0em;
  border-left: 1px solid #c0c0c0;
  padding-left: 0.5em;
}
div.doc_preview_area {
	width: calc(100% - 34.5em); 
}

div#panel_compositedocument {
	width: 99%;
	max-width: 99%;
}	
div#panel_compositedocument_body {
	overflow-y: hidden;
}	

form#composite_document_form {
	width: 100%;
	height:100%; 
}
fieldset#composite_document_fieldset_left {
	height:100%;
}
fieldset#composite_document_fieldset_right {
	height:100%;
}


form#doc_metadata_form label.approval_heading {
	font-size: 0.95em;
}

/* TRY */
form#doc_metadata_form.email_metadata_top input#doc_metadata_document_status_display {
	width: calc(100% - 50em);
}	
form#doc_metadata_form.email_metadata_top {
	width: 100%;
	height: 3.25em;
	overflow-y: hidden;	
}
form#doc_metadata_form.email_metadata_top div.na-form_divleft {
	overflow-y: hidden;
}
div.edit_area_html.email_metadata_top {
	width: 100%;
	margin-top: 0em;
	height: calc(100% - 3.25em);	
}

form#doc_metadata_form.email_metadata_left {
	width: 34em;
	height: 100%;
	overflow-y: auto;
}
/*form#doc_metadata_form.email_metadata_left div.na-form_divleft {
	overflow-y: auto;
}*/
div.edit_area_html.email_metadata_left {
	width: calc(100% - 34.5em);
	height: 100%;	
}
/* TRY END */


div.na-panel.na-transaction form.na_transaction {
  width: 100%;   
}

div.na-panel.na-transaction.na-full_width {
  width: 99%;   
  max-width: 99%;   
}
div.na-panel.na-transaction.na-full_width div.na-panel_body {
  width: 100%;   
}
div.na-panel.na-transaction.na-full_width div.na-panel_contents {
  width: 100%; 
}
div.na-panel.na-transaction.na-full_width form.na_transaction {
  width: 100%;   
}
div.na-panel.na-transaction.na-full_width div.na-form_divtop {
  width: 100%;   
}
div.na-panel.na-transaction.na-full_width div.na-form_divbottom {
  width: 100%;   
}
div.na-panel.na-transaction.na-full_width div.na-form_divcore {
  width: 100%;   
}
div.na-panel.na-transaction.na-full_width div.na-form_divleft {
  width: 50%;   
}
div.na-panel.na-transaction.na-full_width div.na-form_divright {
  width: 50%;   
}
div.na-panel.na-transaction.na-full_width fieldset.na-tabular.na-transaction {
  width: 100%;
  height: 91%;   
}

/* L I B R A R Y */


/* T O   M O V E    T O    P H A B L E T   */
div#portalbar_div_left {
    width: 100%;
    display: block;
    float: left;
}

/* END - T O   M O V E    T O    P H A B L E T   */

/* */

.tox .tox-tbtn {
    transform: scale(0.8) !important; 
    height: unset !important;
    width: unset !important;
}
.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    width: unset !important;
}
div.na-mail_preview_summary {
    font-size: 10pt;
}


/* M A I N   S C R E E N    D A S H B O A R D */
div.dashboard_pending {
  box-sizing: border-box;
	height: auto;
	width: 50%;
	padding: 1em;
  padding-left: 3.5em;
  float: left;
}
div.dashboard_pending span.na-my_work {
	display: inline-block;
  color: black;
  font-weight: 600;
  writing-mode: horizontal-tb;
  background-color: transparent;
  margin-left: 0.6em;
  margin-bottom: 1em;
}
a#my_work_save_bt {
	display: inline-block;
  color: green;
  font-size: 1.2em;
  font-weight: 600;
  background-color: transparent;
  margin-left: 1em;
}
a#my_work_delete_bt {
	display: inline-block;
  color: #ff0000c2;
  font-size: 1.2em;
  font-weight: 600;
  background-color: transparent;
  margin-left: 0.5em;
}
div.dashboard_pending a {
	display: block;
	margin-left: 0.6em;
	margin-top: 0.5em;
	color: #1e57dbf2;
	text-decoration: none;	
}
div#dashboard_pending a > i{
	margin-right: 0.6em;
}
div#dashboard_pending a > span{
	font-weight: 600;
}


/* FRAPPE GANTT CHART - MOVE TO na-main.css */
/* The Gantt chart Frappe Gantt constructs is an SVG, so changing the color 
involves changing the fill and stroke properties of the bars, and not color 
or background-color as you might expect. To change the color of all the bars, 
you need to overwrite the following CSS classes:
.bar for the background color of each bar
.bar-progress for the progress indicator of the bars
.bar-label for the text labels of the tasks
*/
.gantt-container {
	height: calc(100% - 5em) !important;
	margin: 0 auto !important;
}
.gantt .readonly {
	pointer-events: none;
}
/*.gantt .bar-wrapper.green rect.bar  {
    fill: #75ff75 !important;
}
.gantt .bar-wrapper.green rect.bar-progress  {
    fill: #00d700 !important;
}*/
.gantt .bar-wrapper.green rect  {
	fill:#008f005e !important;
}
.gantt .bar-wrapper.red rect  {
    fill: #ff1b005e !important;
}
.gantt .bar-wrapper.gold rect  {
    fill: #ffea005e !important;
}
.gantt .bar-wrapper.black rect.bar  {
    fill: #c5c1c1 !important;
}
.gantt .bar-wrapper.black rect.bar-progress  {
    fill: #b0b0b0 !important;
}
.gantt .bar-wrapper.blue rect  {
    fill: #0239ff5e !important;
}
/*.gantt-container .popup-wrapper {
  width: 20em !important;
  padding: 0.5em 0.5em !important;
}*/
.popup-wrapper {
  background-color: #fff !important;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* S C R E E N   D E S I G N    P A L E T T E */
i.na-palette_icon {
	  font-size: 1.5em;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;
}
span.na-palette_icon_text {
	margin-left: 0.2em;
  font-style: italic;
  vertical-align: super;
}