/* 
==============================================================================================
Styles for Trident Web Accounts


Colors:
	green=#19c589, dark 20%=#0c5a3f, light 80%=#a5f3d8, light 95%=#e8fcf5
	red=#e6693e
	violet=#6B5B95
	gold=#FFD662
==============================================================================================
*/


/*
==============================================================================================
CSS Custom Properties (Variables)
 - retrieved using the var() function
 - cannot be used in @media statements
 - eg:
		--color1: DarkGray;
		background-color: var(--color1);
==============================================================================================
*/
:root {
	--text_color:	black;
	--main_color: #19c589;				/* green */
	--background_color: Snow;			/* off white */
	--error_color: red;
	--test: red;
}





/* 
==============================================================================================
Custom fonts
Uusing a custom font seems to solve the issue of standard web fonts displaying
at a different size in Chrome & Firefox
==============================================================================================
 */
@font-face {
	font-family: "roboto";
	/*src: url("../fonts/Roboto-Regular.ttf");*/
	src: url("../fonts/RobotoCondensed-Regular.ttf");
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-Italic.ttf");
	font-style: italic;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-Light.ttf");
	font-weight: 200;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-LightItalic.ttf");
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-Thin.ttf");
	font-weight: 100;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-ThinItalic.ttf");
	font-weight: 100;
	font-style: italic;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-Bold.ttf");
	font-weight: bold;
}
@font-face {
	font-family: "roboto";
	src: url("../fonts/Roboto-BoldItalic.ttf");
	font-weight: bold;
	font-style: italic;
}



/*
==============================================================================================
General Styles
==============================================================================================
*/

body {
   margin: 5px 10px 10px 10px;  				/*top right bottom left*/
	font-size: 100%;
   max-width: 1200px;
	/*zoom: 100%;*/
	background-color: Snow;
	line-height: 1.1;					/* because Firefox updaet increased line spacing */
}

* {
    box-sizing: border-box;               /* elements should have padding and border included in size (but not margin) */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* horizontal line tag */
hr {                                     
   color: var(--main_color); 
	margin: 0px 0px 5px 0px;
}
.hr5 {
	margin: 5px 0px;
}

/* grouping of fields in forms etc*/
fieldset{
   border: solid 1px var(--main_color);
   border-radius: 5px;
   font-size: small;
}


textarea {
	resize: none;
	font-size: small;
	max-width: 95%;
	border: 1px solid gray;
	border-radius: 5px;
}

textarea::read-only {
	background-color: AliceBlue;
}
textarea:-moz-read-only { /* For Firefox */
	background-color: AliceBlue;
}


.caret_down {
	display:inline-block;
	margin-left:2px;
	vertical-align:middle;
	border-top:4px dashed;
	border-right:4px solid transparent;
	border-left: 4px solid transparent;
}

.caret_right {
	display:inline-block;
	margin-left:10px;
	vertical-align:middle;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	border-left: 4px solid;
}


.traffic_light_red {
	background-color: red;
	border-radius:50%;
	width:10px;
	height:10px;
}

.traffic_light_green {
	background-color: #19c589;
	border-radius:50%;
	width:10px;
	height:10px;
}


/* pcs, large screens - 1001px + */
/* ----------------------------- */
@media only screen and (min-width: 1001px) {

	/* hide elements which should only be displayed on small screens */
	.small_screen {
		display:none;
	}
	/* changes from float left on big screens to width 100% on small screens */
	.float_left_to_100 {
		float:left;
	}
}


/* mobiles, small screens - 0px to 1000px
----------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	/* hide elements which should only be displayed on big screens */
	.big_screen {
		display:none;
	}
	/* changes from float left on big screens to width 100% on small screens */
	.float_left_to_100 {
		width:100%;
	}

}




/*
==============================================================================================
Popups

- enclose popup in a div with position:relative
==============================================================================================
*/

.popup {
	display: none; 		/* Hidden by default */
	z-index: 1; 			/* Sit on top */
   position: absolute; 	/* positioned relative to the nearest positioned ancestor */
   top: 100px;
	left: 60px;
	min-width: 200px;
	background-color: MintCream;
   border-radius: 15px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 15px;
	font-size: 10pt;
	border: 1px solid black;
}

.popup td:first-child {
	padding-right: 15px;
}

.popup caption {
	font-style: italic;
	font-weight: bold;
}




/* page navigation
   --------------- */
	
/* The dots/bullets/indicators */
.page {
}

.page_dot {
	cursor: pointer;
	height: 20px;
	width: 20px;
	margin: 0 10px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.page_dot_active, .page_dot:hover {
	background-color: #19c589; /*#717171;*/
}

.page_dot:hover {
	background-color: #717171;
}

.page_button {
	background-color: #bbb;
	transition: background-color 0.6s ease;
}
.page_button_active {
	background-color: #19c589;
}





/* hack to fix when an element is taller than the element containing it, */
/* and it is floated, it will overflow outside of its container */
.row::after {
    content: "";
    clear: both;
    display: table;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* information boxes*/
.info {
	font-size: small;
	font-style: italic;
	color: red;
	font-weight: normal;
	letter-spacing:normal;
}

/* icon for drilling to modal popup */
.drill_popup {
	position:absolute;
	top:-12px; 
	right:-15px; 
	width:25px;
	height:25px;
	background-image: url('../images/popup.png');
	background-size: 25px 25px;
	background-color: white;
	box-shadow: 3px 3px 3px black;
	padding: 5px 10px;
}
.drill_popup_mini {
	position:absolute;
	top:-18px; 
	right:-10px; 
	width:20px;
	height:20px;
	background-image: url('../images/popup.png');
	background-size: 20px 20px;
	background-color: white; 
	box-shadow: 3px 3px 3px black;
	padding: 5px 10px;
}

.srch_popup {
	width:20px;
	height:20px;
	background-image: url('../images/search.png');
	background-size: 20px 20px;
	background-color: white; 
	box-shadow: 3px 3px 3px black;
	padding: 5px 10px;
}





/*
==============================================================================================
Form styles
==============================================================================================
*/

input[type=number] {
	padding: 3px 1px 3px 10px;
}

input, select, .input_form textarea {
   padding: 3px 10px;
  /* display: block;*/
   border: 1px solid Gray;
	border-radius: 5px;
	color: blue;
	margin-bottom:8px;
}

input[type=radio] {
   display: inline-block;	
}

input::placeholder {
  	color: gray;
}

input[readonly], :disabled {
	background-color: AliceBlue;
}

input[type=text]:focus {
  /* border: 2px solid gray; */
/*	color: red;*/
}

input[type=submit], input[type=reset], input[type=button]{
	background-color: black;
   color: white;
   padding: 5px 15px;		/* top & Bottom, left & right */    
   cursor: pointer;
   box-shadow: 5px 5px 5px gray;
   outline: none;
   border: none;
   border-radius: 5px;
	margin-right: 10px;
	display: inline-block;
}

input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover{
	 background-color: #19c589;
}

input[type=submit]:active, input[type=reset]:active, input[type=button]:active{
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	background-color: var(--main_color); 
}

select {
	max-width:100%;
}

.input_20 {
	width: 200px;
}
.input_30 {
	width: 300px;
}
.input_40 {
	width: 350px;
}
.input_50 {
	width: 395px;
}
.input_div_float_left {
	float:left;
	margin-right:10px;
}
.input_div_float_left_m30 {
	float:left;
	margin-right:30px;
}

.blank_input {
	display:inline-block;
	vertical-align:bottom;
	height:32px;
}


.align-right input[type=text] {
	text-align:right;
}

label {
	display: inline-block;		/* cannot set width on default which is display:inline */
	width: 100px;
}

#sk_prices label {
	width:150px;
}

#procedures input {
	margin-bottom: 4px;
}

/* Modal forms
   ----------------- */
.modal_form {
	background-color: #fefefe;   	/* off white */
	margin: auto;						/* centre */
   position: relative;
   max-width: 500px;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	animation-name: animatetop;
   animation-duration: 0.6s;
}

.modal_form form {
   padding: 15px 25px;
   font-size: small;
}

.modal_form_hdr {
   background-color: var(--main_color); 
   text-align: center;
   font-size: 1.2em;
   padding: 10px;
   letter-spacing: 4px;
   font-variant: small-caps;
   color: white;
   margin-bottom: 0px;
	border-radius: 10px 10px 0px 0px;
}

.modal_form input[type=submit], .modal_form input[type=reset], .modal_form input[type=button]{
   background-color: var(--main_color); 
}

.modal_form input[type=submit]:hover, .modal_form input[type=reset]:hover, .modal_form input[type=button]:hover{
	background-color: black;
}

/* indent 2nd modal screen */
#modal_wrapper2 {
	padding-top: 110px;
	padding-left: 10px;
}
#modal_wrapper3 {
	padding-top: 120px;
	padding-left: 20px;
}


/* mobiles, small screens 0px to 1000px 
   ------------------------------------*/
@media only screen and (max-width: 1000px) {
	
	.input_20 {
		width: 100%;
		max-width: 200px;
	}
	.input_30 {
		width: 100%;
		max-width: 300px;
	}
	.input_40 {
		width: 100%;
		max-width: 350px;
	}
	.input_50 {
		width: 100%;
		max-width: 395px;
	}
	.input_div_float_left, .input_div_float_left_m30 {
		float:none;
	}
	
	
	
	
}





/*
==============================================================
Document printing
==============================================================
*/

.doc_img {
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
}




/* printing */
/* -------- */
@media print {
	
	.no_print, .close {
		display: none;
	}
	
	.modal {
		padding-top: 0px !important;
	}
	
	.modal-content {
		border: none !important;
		border-radius: 0px !important;
		box-shadow: none !important;
		padding: 50px !important;
	}
	
	
	/* set page margins to 0 to prevent printing of url etc */
	@page { margin: 0; }	
	
}








/*
==============================================================
Header styles
==============================================================
*/
.header {
   margin: 0px;                             /*all margins*/
   letter-spacing: 8px;
	font-variant: small-caps;
   font-size: 1.2em;
}

.logo {
   float: left;
   height: 1.2em;
	width: 1.5em;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   background-color: var(--main_color); 
   margin-right: 10px;
   color: #19c589;
   border-radius: 5px;
   text-align: center;
   transition: width 2s, height 2s;
   -webkit-transition: width 3s, height 1s; 
   overflow: hidden;
   white-space: nowrap;
}

.logo span {
   text-transform:capitalize;
   padding-right: 5px;
}

.logo:hover {
   width: 300px;
   height: 3.0em;
   color: white;
   padding: 1.0em;
}

.header_co_name {
	float:right;
	letter-spacing: 1px;
}

/* mobiles, small screens */
@media only screen and (max-width: 1000px) {
	
	.header {
   letter-spacing: 4px;
	font-size: 1.2em;
	}
	

}



/*
==============================================================
Footer styles
==============================================================
*/
.footer {
    border-top: 2px solid black;
    margin-top: 20px;
    padding: 5px;
    width: 100%;
	 font-size:small;
}


/*
==============================================================
Login screen
==============================================================
*/
.loginbar {
   border-top: 5px solid black;
   width: 100%;
}
.logindiv {
   position: relative;
   width: 270px;
   left: 50%;
   margin: 25px 0 0 -130px;
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.logindiv form {
   padding: 15px 25px;
   font-size: 100%;
}

.loginhdr {
   background-color: var(--main_color);
   text-align: center;
   font-size: 1.2em;
   padding: 15px;
   letter-spacing: 4px;
   font-variant: small-caps;
   color: white;
   margin-bottom: 0px;
	border-radius: 5px 5px 0px 0px;
}

.login_input {
    width: 100%;
    padding: 5px 10px;
    display: inline-block;
    border: 1px solid #ccc;
}

.logindiv input[type=submit] {
   background-color: var(--main_color);
   color: white;
   padding: 5px 20px;
   cursor: pointer;
   box-shadow: 5px 5px 5px lightgrey;
   outline: none;
   border: none;
   border-radius: 5px;
}

.logindiv input[type=submit]:hover {
    opacity: 0.8;
}

.login_errors {
	color: var(--error_color);
}

.logindiv label {
	width: 100%;
}



/*
==============================================================
Button styles
==============================================================
*/

button {
  display: inline-block;
  padding: 5px 15px;                 /* top & Bottom, left & right */    
  font-size: small; 
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white;
  background-color: black;
  border: none;
  border-radius: 5px;
  box-shadow: 5px 5px 5px gray;
  margin: 2px 10px 10px 0;             /* top right bottom left */ 
}

button:hover {background-color: var(--main_color);}

button:active {
  background-color: var(--main_color);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

form button {
	background-color: var(--main_color);
}

form button:hover {
	background-color: black;
}

td button {
	font-size: 8pt; 
	padding: 2px 6px;    
	margin: 0px;
	background-color: black;
}
td button:hover {background-color: red;}


.button {
  display: inline-block;
  padding: 5px 15px;                 /* top & Bottom, left & right */    
  font-size: small; 
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: black;
  border: none;
  border-radius: 5px;
  box-shadow: 5px 5px 5px gray;
  margin: 2px 10px 10px 0;         /* top right bottom left */ 
}

.button:hover {background-color: #19c589}

.button:active {
  background-color: var(--main_color);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.main_buttons {
   width: 100%;
}



/*
==============================================================
Search box
==============================================================
*/
#sl_srch, .srch_box {
    background-image: url('../images/search.png'); /* Add a search icon to input */
    background-size: 25px 25px;
    background-position: left center; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 200px;
    font-size: 16px; /* Increase font-size */
    padding: 5px 10px 5px 30px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 5px; /* Add some space below the input */
}



/*
====================================================================
Menu Navigation Bar
====================================================================
*/

.menu_container {
   background-color: black;
	border-radius: 5px;						/* gives rounded edges to navbar */
	margin: 0 0 10px 0;						/* make some space below navbar */
	height: 40px;								/* must be same as .menu_top_level a line-height */
}

.menu_container .menu_icon {
	display:none;
	background-color: black;
}

.menu_top_level {
   list-style-type: none;            	/* no bullets or numbering in list */
   padding: 0;
	margin: 0;
}

.menu_top_level > li {
   position: relative;
   float: left;
	border-right: 1px solid white;
}

.menu_top_level li:hover > ul {
   display: inline;							/* On hover, display the next level's menu */
}

.menu_top_level a {
   color: white;
   text-decoration: none;
	padding: 0px 16px;                	/* top&bottom  right&left */
   display: block; 
	line-height: 40px;						/* must be same as menu_container height */
}

.menu_top_level a:hover { 
	background: #19c589;						/* Change background colour when hover on links */ 
}

.menu_top_level .menu_icon {
	display:none;
	background-color: black;
}


.menu_level_1 {
   position: absolute;  
   left: 0;
   list-style: none;
   padding: 0;
   display: none;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	/* nice shadow effect */
	z-index: 1;													/* make sure appears on top of everything else */
}

.menu_level_1 > li {
    position: relative;   
}

.menu_level_1 a {
	color: black;
   padding: 5px 10px;
   text-align: left;
   font-size: 90%;
	/*background-color: #f9f9f9;								/* light grey colour */ 
	background-color: LightGray;
	white-space: nowrap;										/* prevent text wrapping to the next line */
	line-height: normal;										/* remove 40px line height */ 
}

.menu_level_2 {
   top: 0;
   right: -210px;												/* set right edge 150px to right edge of 2nd level menu */
   width: 210px;												/* must set width to minus same value as right */
   list-style: none;											/* hide bullets */
   padding: 5px 0px;
	background-color: LightGray;
   display: none;												/* hide until hover on parent */
   position: absolute;										/* to prevent whole screen shifting down */
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	/* nice shadow effect */
   z-index: 1;		
}


/* Responsive Styles */
/* Change navbar design for small screens/mobiles */
/* ---------------------------------------------- */
@media screen and (max-width: 900px){
	
	/* make menu stay within container */
	.menu_container::after {
    content: "";
    clear: both;
    display: table;
	}
	
	/* disable height as now verticaly stacked */
	.menu_container {
		height: unset;
	}
	
	/* Make all menu links full width and vertically stacked */
   .menu_top_level li {
		width: 100%;
		display: block;
		}
	
	/* Now show a horizontal divider and center text */
	.menu_top_level li a {	
		text-align: center;
      border-bottom: 1px solid white;
	}
		
   .menu_level_1 {
      width: 100%;
      display: block;
		display: none;						/* hide until hover on parent */
		position: relative;		     	/* makes lower links shift down rather than overlaying them */		
   }

	.menu_level_2 {
		width: 100%;
		right: 0px;
      display: block;
		position: relative;		     	/* makes lower links shift down rather than overlaying them */	
	}

	.menu_level_2 a {
		background-color: #a5f3d8;		/* light green 80% */
	}


	/* display menu icon - used to toggle menu display */
	.menu_container a.menu_icon {display:block;}
	
	/* to toggle menu display */
	.menu_container li a {display:none;}
	.menu_container.responsive li a {display:block;}


}



/*
===========================================================================
Main body column styles
col_1 - wrapper for picklist
col_2 - wrapper for content

CSS wildcard examples:
[class*="col_"] - contains the string "col_"
[class^="col_"] - starts with the string "col_"
div[class^="col_"] - div element with class starting with the string "col_"
[id*="pl_"] - all ids that contain "pl_"
===========================================================================
*/

/* For all screen types */
[class^="col_"] {
   margin-bottom: 10px;
   float: left;
   padding: 2px 10px 10px 10px;
   border-radius: 5px;
   border: 1px solid var(--main_color);
   overflow: auto;
	/*font-size: small;*/
	height: 500px;
	width:100%;
}

.toggle_display_bar {
	padding: 10px 16px;
	width: 100%;
	text-align: center;
	background-color: black;
	color: white;
	border-radius: 5px;
	margin: 5px 0px;
}

.toggle_display_bar:hover {
	background: var(--main_color);
}


/* mobiles, small screens */
@media only screen and (max-width: 1000px) {

	[class^="col_"] {
      width: 100%;
		height: auto;
		min-height:500px;
   }
	
	/* make table more finger friendly for mobiles */
	.tb_div td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	.col_1 {
    	/*display: none;*/
   }
	.toggle_display_bar {
		display:block;
	}
	
}


/* desktops, laptops, large screens */
@media only screen and (min-width: 1001px) {
	.col_1 {
		margin-right: 5px;
	}
	.toggle_display_bar {
		display:none;
	}
	
}




/* OLD DO NOT USE */
/* For all screen types */
[class*="col-"] {
   margin-bottom: 10px;
   float: left;
   padding: 2px 10px 10px 10px;
   border-radius: 5px;
   border: 1px solid #19c589;
   overflow: auto;
}
.col-1 {
   height: 500px;
}
/* For mobile phones remove columns by setting width to 100% */
@media only screen and (max-width: 767px) {
   [class*="col-"] {
      width: 100%;
   }
}
/* for desktops set columns widths */
@media only screen and (min-width: 768px) {
    .col-1 {
      width: 375px;
     /* font-size: small;*/
      margin-right: 5px;
		/*padding-top: 5px;*/
     }
   .col-2 {
      width: calc(100% - 380px);
      min-width: 350px; 
      height: 500px;
     }
	.col-3 {
		width: 420px;
		margin-right: 5px;
		height: 500px;
	}
	.col-4 {
		width: calc(100% - 425px);
      min-width: 350px; 
      height: 500px;
	}
}





/* wrapper for main_hdr, main_col1, main_col2 */
.main_content {
   width: 100%;
  /* height: calc(100% - 80px);*/
}

.main_hdr {
   width: 100%;
   font-size: 1.2em;
	letter-spacing: 3px;
}

.main_subhdr {
   font-size: 1.1em;
	letter-spacing: 2px;
}


.main_col1 {
   float: left;
   width: 48%;
   min-width: 250px;
   margin: 0 10px 0 0;
   overflow: auto;
}

.main_col2 {
   float: left;
   width: 48%;
   min-width: 280px;
   margin: 0px;
   overflow: auto;
}



/*
.sl_stats_col1 {
   float: left;
   width: 57%;
   min-width: 300px;
   margin: 0 10px 0 0;
   overflow: auto;
}

.sl_stats_col2 {
   float: left;
   width: 41%;
   min-width: 240px;
   margin: 0px;
   overflow: auto;
}
*/

.sl_analysis_col1 {
   float: left;
   width: 75%;
   min-width: 330px;
   margin: 0 10px 0 0;
   overflow: auto;
}

.sl_analysis_col2 {
   float: left;
   width: 23%;
   min-width: 225px;
   margin: 0px;
   overflow: auto;
}


.chart_legend {
   /*float: left;*/
	display: inline-block;
   height: 1.0em;
	width: 1.2em;
   /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
   /*background-color: #19c589;*/
	/*color: #19c589;*/
	margin-left: 20px;
   margin-right: 5px;
   
   border-radius: 5px;
}

.main_table_left_col {
   float:left;
   padding-right:10px
}

.main_table_right_col {
   text-align:right;
   padding-left:20px;
}


.info_box {
  /* float: right; */
	display:inline-block;
   border: 1px solid; 
   padding: 5px 5px; 
   margin-bottom: 5px;
   border-radius: 5px;
   font-style: italic;
   font-size: small;
   color: #f60;
}



/*
==============================================================
Email form
==============================================================
*/
#email_modal input[type=text]  {
	width: 100%;
	max-width: 390px;
	padding: 5px 10px;
}

#email_modal textarea {
	width: 100%;
	max-width: 100%;
	padding: 5px 10px;
}

#email_modal .input_form {
	max-width: 500px;
}

#email_modal label {
	width: 60px;
}






/*
==============================================================
Help screen
==============================================================
*/

#help_modal {
	z-index: 3;
}

.help {
	font-size: small;
	overflow: auto; 
	height: 350px;
}


.help_button {
  display: inline-block;
  padding: 4px 8px;                 /* top & Bottom, left & right */    
  font-size: small; 
  font-weight:bold;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: black;
  border: none;
  border-radius: 5px;
  box-shadow: 5px 5px 5px gray;
  margin: 0px;
  float: right;
	
}

.help_button:hover {background-color: #19c589}

.help_button:active {
  background-color: var(--main_color);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.help_main_hdr {
	font-size: large;
	color: var(--main_color);
	letter-spacing: 3px;
}

.help_sub_hdr {
	font-weight: bold;
	font-style: italic;
	font-size: medium;
}

.help_stress {
	font-style: italic;
	font-weight: bold;
}



/*
==============================================================
Release notes
==============================================================
*/
.relnotes_main_hdr {
	font-size: medium;
	color: var(--main_color);
	letter-spacing: 2px;
}

.relnotes_sub_hdr {
	font-weight: bold;
	font-style: italic;
	font-size: small;
}





/*
==============================================================
Home Page
==============================================================
*/

.home_col1 {
	width:350px;
	font-size:small;
	display:block;
}
.home_col2 {
	width: calc(100% - 355px);
}
.home_col2 fieldset {
	margin-bottom:5px;
}
.home_col2_1 {
	float:left;
	width:65%;
	margin-right:2px;
}
.home_col2_2 {
	float:left;
	width:33%;
}
.home_col2_1_1, .home_col2_1_2 {
	float:left;
	width:50%;
}
.home_chart_div {
	position:relative; 
	width:98%; 
	height:185px;
}
.home_textarea {
	resize: none;
	height: 220px;
	width: 100%;
	font-size: medium;
	font-style: italic;
	color: blue;
	border: none;	
}
.home_textarea:-moz-read-only {
	background-color: var(--background_color); 
}
.home_textarea::read-only {
	background-color: var(--background_color); 
}
.home_textarea input[readonly] {
	background-color: var(--background_color); 
}



/* mobiles, small screens */
@media only screen and (max-width: 800px) {
	.home_col1 {
		display: none;
		width: 100%;
	}
	.home_col2, .home_col2_1, .home_col2_2, .home_col2_1_1,  .home_col2_1_2 {
		width: 100%;
	}

}

/* tablets, medium screens */
@media only screen and (min-width:801px) and (max-width: 1000px) {
	.home_col1 {
		display: none;
		width:100%
	}
	.home_col2 {
		width: 100%;
	}

	
}



/*
==============================================================
Cash book
==============================================================
*/
.cb_trans_hdr {
	background-color: var(--main_color);
	text-align: center; 
	font-size: 10pt;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 2px;
	padding: 3px 0px;
	color: white;
}



/*
==============================================================
Stock
==============================================================
*/

.sk_col1 {
	width: 400px;
	display: block;
}
.sk_col2 {
	width: calc(100% - 405px);
}

.sk_summary_fieldset {
	height: 160px;
}
.sk_summary_col1 {
   float: left;
   width: 48%;
   margin: 0 10px 5px 0;
   overflow: auto;
}

.sk_summary_col2 {
   float: left;
   width: 48%;
   margin: 0px;
   overflow: auto;
}
.sk_summary_col2 table {
	width:100%;
}
.sk_summary_col2 tr:nth-child(1) {
	border-bottom: 1px solid black;
}
.sk_summary_col2 td:nth-child(1) {
	width: 40%;
}
.sk_summary_col2 td:nth-child(2) {
	width: 20%;
	text-align:right;
}
.sk_summary_col2 td:nth-child(3) {
	width: 20%;
	text-align:right;
}
.sk_summary_col2 td:nth-child(4) {
	width: 20%;
	text-align:right;
}

.sk_chart1_div {
   float: left;
   width: 68%;
   margin: 0 10px 0 0;
   overflow: auto;
}
.sk_chart2_div {
   float: left;
   width: 28%;
   margin: 0px;
   overflow: auto;
}

#sk_trans .popup {
	top: 50px;
	left: 60px;
}

#sk_wh_qty:hover {
	background-color: #19c589;
	color:white;
}

.sk_info_table {
	width: 400px;
}
.sk_info_table td {
	padding-top:2px;
	padding-bottom:2px;
	border-bottom:1px solid LightGray;
}
.sk_info_table td:nth-child(2) {
	text-align:right;
}

#sk_master_table td:nth-child(1) {
	width: 150px;
	
}
#sk_master_table td:nth-child(2) {
	width: 150px;
	text-align:center;
}
#sk_master_table td:nth-child(3),  #sk_master_table td:nth-child(4) {
	width: 120px;
	text-align:center;
}

#sk_master_table input {
	/*text-align: right;*/
}



#sk_adj_detail_modal table input {
	margin-bottom:0px;
}
#sk_adj_detail_modal td {
	padding-right:20px;
}


/* sk_grp, sk_grp2, sk_grp3 */
.sk_input_div {
	float:left;
	margin-right:10px;
}


/* sk_price_upd.php
------------------- */
#sk_price_upd_table td {
	width: 100px;
	text-align:center;
}
#sk_price_upd_table td:nth-child(1) {
	width: 120px;
	text-align:left;
}
#sk_price_upd_table td:nth-child(2) {
	width: 110px;
}


#sk_price_upd_table input {
	text-align: right;
}



/* sk_wh.php
--------------- */
.sk_wh_form {
	max-width:950px;
	min-height:520px;
}
#sk_wh_modal {
	padding-top:80px;
}



/* sk_order.php
--------------- */
#sk_order_input_form input {
	margin-top: 3px;
}



/* pcs, large screens */
@media only screen and (min-width: 1001px) {

	/* hide specific table columns which should only be displayed on small screens */
	.sk_small_screen {
		display:none;
	}
	
	#sk_trans .th_div, #sk_trans .tb_div, #sk-trans .tf_div {
		width: 770px;
	}
	
}



/* tablets */
@media only screen and (max-width: 1150px) {
	
	.sk_tablets {
		display:none;
	}	
	#sk_view_picklist td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	.sk_col1 {
		width: 300px;
	}
	.sk_col2 {
		width: calc(100% - 305px);
	}
	
}




/* mobiles, small screens - 0px to 1000px
----------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	/* make picklist and content cols full width ie no longer display side by side */
	 .sk_col1 table, .sk_col2 table {
		width:95%		/* to allow room for scroll bar */
	}
	.sk_col1, .sk_col2, .sk_chart1_div, .sk_chart2_div, .sk_summary_col1, .sk_summary_col2 {
		width: 100%;
		padding-bottom: 10px;
	}
	
	/* make table more finger friendly for mobiles */
	.sk_col1 .tb_div td, .sk_col2 .tb_div td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	
	/* hide specific table columns which should only be displayed on large screens */
	.sk_big_screen {
		display:none;
	}
	
	#sk_trans .th_div, #sk_trans .tb_div, #sk_trans .tf_div {
		width: 100%;
	}
}



/*
=============================================================================
Stock price update files
=============================================================================
*/

.sk_pu_flex {
	display:flex;
	flex-wrap: wrap;
}
.sk_pu_flex ul {
	margin: 0px;
	padding-left: 30px;
}
.sk_pu_flex table {
	margin-right: 100px;
}
#sk_pu_cost_change {
	margin-right: 30px;
}

.sk_pu_wrapper {
	overflow: auto;
}

.sk_pu_grid {
	display: grid;
	grid-template-columns: 85px 100px 100px 100px 200px 100px;
	grid-gap: 5px;
	padding: 5px;
	max-width: 800px;
	min-width: 300px;
}

.sk_pu_grid_hdr {
	text-align:right;
	padding-right:10px;
}

.sk_pu_grid_label {
	display: flex;
	align-items: center;
	justify-content: left;
}

.sk_pu_grid_content {
	display: flex;
	align-items: center;
	justify-content: right;
}

.sk_pu_grid input {
	text-align: right;
	width: 80px;
	margin-bottom:0px;
}


/* mobiles, small screens - 0px to 1000px
----------------------------------------- */
@media only screen and (max-width: 1000px) {
	.sk_pu_grid {
		grid-template-columns:  85px auto auto auto;
	}
	
	/* divs with classes big_screen and sk_pu_grid_content set
		big_screen does not work on its own as display:flex overrides it */
	.big_screen.sk_pu_grid_content {
		display: none;
	}
	
	#sk_pu_modal_form {
		padding: 15px 5px;
	}
	
	.sk_pu_grid input {
		width: 70px;
		padding: 3px;
	}
	.sk_pu_flex table {
		margin-right: 0px;
	}
}
	





/*
==============================================================
Purchases
==============================================================
*/

.pl_col1 {
	width: 400px;
	display: block;
}

.pl_col2 {
	width: calc(100% - 405px);
}

.pl_summary_col1 {
   float: left;
   width: 48%;
   margin: 0 10px 0 0;
   overflow: auto;
}

.pl_summary_col2 {
   float: left;
   width: 48%;
   margin: 0px;
   overflow: auto;
}

.pl_contact_col1 {
	float: left;
	width: 150px;
	padding-right:10px;
	line-height: 1.8;
}

.pl_contact_col2 {
	padding-left: 10px;
	line-height: 1.8;
}


#plo_sk_input_form td {
	padding-right:20px;
}

#plo_sk_input_form table input {
	margin-bottom:0px;
}

.pl_inv_label {
	display:inline-block;
	width:90px;
}

#pl_inv_form input {
	margin-bottom:5px;
	display:inline;
}
#pl_inv_form select {
	margin-bottom:5px;
	display:inline;
}


#pl_inv button {
	margin-bottom:2px;
}

#pl_inv_trantype {
	margin-left: 40px;
	color: red;
	display:none;
}


#pl_alloc button {
	margin-bottom:2px;
}


/* tablets */
@media only screen and (max-width: 1150px) {
	
	.pl_tablets {
		display:none;
	}	
	#pl_view_picklist td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	.pl_col1 {
		width: 300px;
	}
	.pl_col2 {
		width: calc(100% - 305px);
	}
	
}




/* mobiles, small screens */
@media only screen and (max-width: 1000px) {
	
	/* reverse tablet css set above */
	.pl_tablets {
		display: unset;
	}
	
	
	/* make picklist and content cols full width ie no longer display side by side */
	 .pl_col1 table, .pl_col2 table {
		width:95%		/* to allow room for scroll bar */
	}
	.pl_col1, .pl_col2, .pl_summary_col1, .pl_summary_col2 {
		width: 100%;
		padding-bottom: 10px;
	}
	
	/* make table more finger friendly for mobiles */
	.pl_col1 .tb_div td, .pl_col2 .tb_div td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	
	/* hide specific table columns which should not be displayed on small screens */
	#pl_stats_modal td:nth-child(1), #pl_stats_modal td:nth-child(3), #pl_stats_modal td:nth-child(4), #pl_stats_modal td:nth-child(5){
			display:none;
	}
	#pl_trans_os td:nth-child(2), #pl_trans_os td:nth-child(3), #pl_trans_os td:nth-child(4), #pl_trans_os td:nth-child(5), #pl_trans_os td:nth-child(6), #pl_trans_os td:nth-child(10), #pl_trans_os td:nth-child(11), #pl_trans_os td:nth-child(12), #pl_trans_os td:nth-child(13), #pl_trans_os td:nth-child(14), #pl_trans_os td:nth-child(15) {
			display:none;
	}
	#pl_trans_all td:nth-child(2), #pl_trans_all td:nth-child(3), #pl_trans_all td:nth-child(4), #pl_trans_all td:nth-child(5), #pl_trans_all td:nth-child(6), #pl_trans_all td:nth-child(10), #pl_trans_all td:nth-child(11), #pl_trans_all td:nth-child(12), #pl_trans_all td:nth-child(13), #pl_trans_all td:nth-child(14), #pl_trans_all td:nth-child(15) {
			display:none;
	}
	

}


/* pcs, large screens */
@media only screen and (min-width: 1001px) {

	/* hide specific table columns which should only be displayed on small screens */
	#pl_trans_os td:nth-child(7), #pl_trans_all td:nth-child(7) {
		display:none;
	}
	
}



/*
==============================================================================================
Accounts
==============================================================================================
*/

/* nl.php
--------- */
.nl_col1 {
	width: 400px;
	display: block;
}
.nl_col2 {
	width: calc(100% - 405px);
}
.nl_col2_1 {
   float: left;
   width: 48%;
   margin: 0 10px 0 0;
   overflow: auto;
}
.nl_col2_2 {
   float: left;
   width: 50%;
   margin: 0px;
}
.nl_col2_1 tr:nth-child(1) {
	border-bottom: 2px solid var(--main_color);
	font-style: italic;
	font-weight:bold;
}
.nl_col2_1 tr:nth-child(15) {
	border-top: 2px solid var(--main_color);
	font-style: italic;
	font-weight:bold;
}
.nl_col2_1 td:nth-child(1) {
	width: 60px;
}
.nl_col2_1 td:nth-child(2) {
	width: 130px;
	text-align:right;
}
.nl_col2_1 td:nth-child(3) {
	width: 130px;
	text-align:right;
}




/* mobiles, small screens - 0px to 1000px
----------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	/* make picklist and content cols full width ie no longer display side by side */
	 .nl_col1 table, .nl_col2 table {
		width:95%		/* to allow room for scroll bar */
	}

	.nl_col1, .nl_col2, .nl_col2_1, .nl_col2_2 {
		width: 100%;
		padding-bottom: 10px;
	}
	
}



/*
==============================================================
Config screens
==============================================================
*/

.config_lists_col1 {
	width: 250px;
	display: block;
}
.config_lists_col2 {
	width: calc(100% - 255px);
}


/* mobiles, small screens - 0px to 1000px */
/* -------------------------------------- */
@media only screen and (max-width: 1000px) {
		
	/* make picklist and content cols full width ie no longer display side by side */
	 .config_lists_col1 table, .config_lists_col2 table {
		width:95%		/* to allow room for scroll bar */
	}
	.config_lists_col1, .config_lists_col2 {
		width: 100%;
		padding-bottom: 10px;
	}

}



/*
==============================================================
Sales
==============================================================
*/

/* sl.php
--------- */
.sl_col1 {
	width: 400px;
	display: block;
}
.sl_col2 {
	width: calc(100% - 405px);
}
.sl_col2_1 {
   float: left;
   width: 48%;
   margin: 0 10px 0 0;
   overflow: auto;
	word-break: break-all;
}
.sl_col2_2 {
   float: left;
   width: 50%;
   margin: 0px;
   overflow: auto;
}
#sl_chart1_wrapper {
	float:left;
	margin-right:2px;
	width:55%;
}
.sl_bal_trend {
	float:left;
	width:44%;
}
.sl_mini_charts {
	float:left;
	width:33%;
}
.sl_mini_chart_drill_hdr {
	float:left;
	width:140px;
}
.sl_stats_col1 {
	float: left;
   width: 57%;
   margin: 0px 10px 0px 0px;
   overflow: auto;
}
.sl_stats_col2 {
   float: left;
   width: 41%;
   margin: 0px;
   overflow: auto;
}



/* sl_master.php
---------------- */
.sl_master_form {
	max-width:950px;
	min-height:500px;
}
.sl_master_form #page2 label {
	width:110px;
}


/* sl_branch.php
---------------- */
.sl_branch_form {
	max-width:950px;
	min-height:520px;
}
#sl_branch_modal {
	padding-top:80px;
}



/* sl_trans.php
---------------*/
.sl_trans_sl_name {
	width:350px;
}


/* sl_inv.php
---------------*/
.sl_inv_hdr_col1 {
	float:left;
	width:350px;
}
.sl_inv_hdr_col2, .sk_info_col1 {
	float:left;
}
.sl_inv_buttons, .sk_info_col2 {
	float:right;
}
.sk_info_col2 table td:nth-child(1) {
	width:100px;
}
.sk_info_col2 table td:nth-child(2) {
	text-align:right;
}


/* sl_prices.php
----------------*/
.sl_prices_buttons {
	float: right;
}


/* sl_order.php
----------------*/
.sl_order_buttons {
	margin: 0px 10px 0px 0px;
}
.sl_order_buttons_right {
	float: right;
}
.sl_order_note {
	float: right;
}
#sl_order_input_form input {
	margin-top:3px;
}


/* sl_alloc.php
----------------*/
#sl_alloc button {
	margin-bottom:2px;
}


/* pcs, large screens - 1001px + */
/* ----------------------------- */
@media only screen and (min-width: 1001px) {

	/* hide specific table columns which should only be displayed on small screens */
	.sl_small_screen {
		display:none;
	}
}
	

/* tablets */
@media only screen and (max-width: 1150px) {
	
	.sl_tablets {
		display:none;
	}	
	#sl_view_picklist td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	.sl_col1 {
		width: 300px;
	}
	.sl_col2 {
		width: calc(100% - 305px);
	}
	.sl_order_note {
		margin-left:0px;
	}
	
}


/* mobiles, small screens - 0px to 1000px */
/* -------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	/* reverse tablet css set above */
	.sl_tablets {
		display: unset;
	}
		
	
	/* make picklist and content cols full width ie no longer display side by side */
	 .sl_col1 table, .sl_col2 table {
		width:95%		/* to allow room for scroll bar */
	}
	#sl_trans_table_div table {
		width: unset;
	}
	.sl_col1, .sl_col2, .sl_col2_1, .sl_col2_2, #sl_chart1_wrapper, .sl_stats_col1, .sl_stats_col2, .sl_bal_trend, .sl_trans_sl_name {
		width: 100%;
		padding-bottom: 10px;
	}
	.sl_inv_hdr_col1, .sl_inv_hdr_col2{
		width: 100%;
	}
	.sl_inv_sk_info_col1, .sl_inv_sk_info_col2 {
		float:none;
		margin-top:5px;
	}
	.sl_inv_buttons, .sl_order_buttons {
		float:none;
		margin-top:10px;
	}
	.sl_prices_buttons, .sl_order_buttons_right {
		float: none;
	}
	
	
	/* make table more finger friendly for mobiles */
	#sl_mini_chart_drill td, #sl_inv_detail_table td, #sl_prices_table td {
		padding-top:5px;
		padding-bottom:5px;
		border-bottom:1px solid LightGray;
	}
	
	/* hide specific table columns which should only be displayed on large screens */
	.sl_big_screen {
		display:none;
	}
	.sl_mini_chart_drill_hdr {
		float:none;
	}
	

}





/*
==============================================================
sl_quote
==============================================================
*/

.sl_quote_button button {
	margin: 0px 15px 0px 0px;
}


/* mobiles, small screens - 0px to 1000px */
/* -------------------------------------- */
@media only screen and (max-width: 1000px) {
	#slq_picklist, #sl_quote table {
		width: 95%;
	}
	.sl_quote_button button:first-child, .sl_quote_button button:nth-child(4) {
		margin-bottom: 10px;
	}
}



/*
==============================================================
sl_gp_analysis
==============================================================
*/

.sl_gp_analysis fieldset:first-child {
	
}
	
.sl_gp_analysis > fieldset{
	float:left;
	margin:5px;
}

.sl_gp_analysis table {
	margin-top:2px;
	width:350px;
}

.sl_gp_analysis caption {
	font-size:15pt;
	padding:5px;
}

.sl_gp_analysis th  {
	border-bottom: 1px solid black;
}

.sl_gp_analysis td,  .sl_gp_analysis th  {
	padding:10px;
	text-align:right;
	font-size:12pt;
	background-color:#e8fcf5;
}

.chart_div {
	width:250px;
	Height:98%;
}



/* 
==============================================================
Standard settings for all tables
==============================================================
*/

table {
   border-collapse: collapse;
	cursor:default;
}

.th_div {
   border-bottom: 2px solid black;
   margin-bottom: 2px;
	font-size: 10pt;
}

.tb_div {
   overflow-y:auto;
	overflow-x:hidden;
	font-size: 10pt;
}

.tb_div tr:hover {
	background-color: #19c589;
	color:white;
	}

.tb_div2 tr:hover {background-color: #19c589;}

.tf_div {
   border-top: 2px solid black;
   margin-top: 2px;
	font-size: 10pt;                /* in case their is a customised footer not in a table */
}

.table_icon {
	background-color: var(--background_color);
	cursor: pointer;
}

.table_icon_hover:hover {
	transform: scale(1.4, 1.1);
}


.table_edit {
	margin:0px; 
	padding:1px;
}

.table_row_border .tb_div td {
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:1px solid Gray;
}

.table_col_stress {
	/*font-weight:bold;*/
	color: blue;
}


/* table tooltips
   -------------- */
/* tooltip cell wrapper */
table .tooltip {
	position: relative;
	background-color: snow;
}

/* tooltip text */
table .tooltiptext {
	display:none;				/* hidden unless hover over cell */
	z-index: 1; 				/* sit on top */
	position:absolute; 		/* position within relative positioned wrapper*/
	top: -1px;					/* display above row */
	right: 30px;				/* display to the left of cell */
	width: 350px;
	background-color: MintCream;
	color: black;
	text-align: center;
	padding: 1px;
	border-radius: 5px 40px 40px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: 1px solid black;
}


/* display the tooltip when hover over cell */
table .tooltip:hover .tooltiptext {
	display:block;
}





/* Responsive Styles */
/* Change navbar design for small screens/mobiles */
/* ---------------------------------------------- */
@media screen and (max-width: 900px){
	
	
   
	.chart_container {
		width: 98%;
	}
	
	 .main_col1, .main_col2 {
		width: 98%;
	}
	
	
	
	
}


 /* For mobile phones: */
@media only screen and (max-width: 500px) {
    [class="table"] {
        width: 95%;
    }
}

.active {
    background-color: #4CAF50;
}




/* 
==============================================================
The Modal Screen
==============================================================
*/

/* mobiles/small screens */
@media only screen and (max-width: 600px) {
	
	.modal_content_wrapper {
		width:90%;
	}
	
}


/* background */
.modal {
	display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.modal_content_wrapper {
	background-color: #fefefe;   	/* off white */
	margin: auto;						/* centre */
   position: relative;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	animation-name: animatetop;
   animation-duration: 0.6s;
}


.modal_content {
	padding: 20px;
}


/* Modal Content */
.modal-content {
   background-color: #fefefe;
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.modal_header {
	background-color: #19c589;
   text-align: center;
   font-size: 1.2em;
   padding: 10px;
   letter-spacing: 4px;
   font-variant: small-caps;
   color: white;
   margin-bottom: 0px;
	border-radius: 10px 10px 0px 0px;
}


/* modal wrapper - used by sk_wg1 etc*/
.modal_wrapper {
	background-color: #fefefe;   	/* off white */
	margin: auto;						/* centre */
   position: relative;
   border-radius: 10px;
   box-shadow: 10px 10px 5px var(--box_shadow_color);
	animation-name: animatetop;
   animation-duration: 0.6s;
}
.modal_wrapper form {
   padding: 15px 25px;
   font-size: small;
}



/* The Close Button */
.close {
	color: LightGray;
   float: right;
   font-size: 28px;
   font-weight: bold;
}

.close:hover,
.close:focus {
    color: Black;
    text-decoration: none;
    cursor: pointer;
}


/* Modal input forms */
.input_form {
	background-color: #fefefe;   	/* off white */
	margin: auto;						/* centre */
   position: relative;
   /*max-width: 500px;*/
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	animation-name: animatetop;
    animation-duration: 0.6s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


.input_form form {
   padding: 15px 25px;
   font-size: small;
}

.input_form_hdr {
   background-color: #19c589;
   text-align: center;
   font-size: 1.2em;
   padding: 10px;
   letter-spacing: 4px;
   font-variant: small-caps;
   color: white;
   margin-bottom: 0px;
	border-radius: 10px 10px 0px 0px;
}

/*
.input_form input[type=text], .input_form textarea {
   padding: 5px 10px;
   display: inline-block;
   border: 1px solid #ccc;
	color: blue;
}
*/
.input_form input[type=text]::-webkit-input-placeholder {color: grey;}	/* Chrome/Opera/Safari */
/*.input_form input[type=text]::-moz-placeholder {color: grey;}				/* Firefox 19+ */
.input_form input[type=text]:-moz-placeholder {color: grey;}				/* Firefox 18- */

.input_form input[type=text]:-ms-input-placeholder {color: grey;}			/* IE 10+ */


.input_form input[type=submit], .input_form input[type=reset], .input_form input[type=button]{
   background-color: #19c589;
   color: white;
   padding: 5px 20px;
   cursor: pointer;
   box-shadow: 5px 5px 5px gray;
   outline: none;
   border: none;
   border-radius: 5px;
	margin-right: 10px;
}

.input_form input[type=submit]:hover, .input_form input[type=reset]:hover, .input_form input[type=button]:hover{
 /*   opacity: 0.8;*/
	 background-color: black;
}


.inline-label input, .inline-label select {
	display: inline-block;
}

.inline-label label {
	display: inline-block;
	width: 100px;
}



.input_inline select, .input_inline input {
	display:inline-block;
}
.input_inline span, .input_inline label {
	display:inline-block;
	width:90px;
}


/* Modal message box */
.message_box {
	overflow-wrap: break-word;
	background-color: #fefefe;
	margin: auto;
   position: relative;
   width: 350px;
   border-radius: 7px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#message {
	z-index: 10;
	padding-top: 110px;
}

#message_hdr {
   background-color: #19c589;
   text-align: center;
   font-size: 1.2em;
   padding: 10px;
   letter-spacing: 4px;
   font-variant: small-caps;
   color: white;
	border-radius: 7px 7px 0 0;
}

#message_content {
	padding: 25px;
}


.message_box button {
	background-color: #19c589;
 	margin: 0px 0px 20px 25px;
}

.message_box button:hover {background-color: black}


/* Nominal Ledger */
.modal_picklist {
	background-color: #fefefe;
	margin: auto;
   position: relative;
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 20px;
	animation-name: animatetop;
   animation-duration: 0.6s;
}


.delete_icon:hover {
	background-color: white;
	transform: scale(1.4, 1.1);
}

.info_label {
	background-color:red;
	color:white;
	border-radius: 5px;
	font-size:0.9em; padding:2px;
	font-weight: bold
}


/* Labels */
label {
	font-size: small;
}