/* 
==============================================================================================
Styles for Trident Accounts system


Colors:
		
	Greens
	------
	#92b558		146,181,88 		Green 53% Color of the year 2017
	#6f8e3e		111,142,62		Green 40%
	#f3f7ed							Green 95%
		
	
==============================================================================================
*/


/*
==============================================================================================
CSS Custom Properties (Variables)
 - retrieved using the var() function
 - cannot be used in @media statements
 - eg:
		--color1: DarkGray;
		background-color: var(--color1);
==============================================================================================
*/
:root {
	
	--main_color: #6f8e3e;   						/* darker green 40% */
	--main_color_light: #c5d8a6; 
	
	--background_color: white;
	--body_background_color: #f3f7ed;			/* green 95% */
	--button_shadow_color: gray;					/* #808080 gray 50% */
	--error_color: red;
	--info_box_color: #f60;							/* orange shade*/
	--input_border_color: lightgray;
	--menu_background_color: black;
	--menu_bck_hover_color: #6f8e3e; 			/* darker green 40% */
	--menu_dropdown_text_color: black;
	--menu_dropdown_bck_color: lightgray;
	--modal_shadow_color: #404040;				/* dark gray 25% */
	--pg_header_color: #6f8e3e;   				/* darker green 40% */
	--text_color: #262626; 							/* dark grey 15% */
	
	
}



/* 
==============================================================================================
Custom fonts
Using a custom font seems to solve the issue of standard web fonts displaying
at a different size in different browsers
thin		100
light 	300
normal 	400
medium 	500
bold 		700
black 	900
==============================================================================================
 */
 
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_300_light.woff2') format('woff2');
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_300_light_italic.woff2') format('woff2');
	font-style: italic;
	font-weight: 300;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_400_regular.woff2') format('woff2');
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_400_regular_italic.woff2') format('woff2');
	font-style: italic;
	font-weight: 400;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_400_regular_condensed.woff2') format('woff2');
	font-style: normal;
	font-weight: 400;
	font-stretch: condensed;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_400_regular_condensed_italic.woff2') format('woff2');
	font-style: italic;
	font-weight: 400;
	font-stretch: condensed;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_500_medium.woff2') format('woff2');
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_500_medium_italic.woff2') format('woff2');
	font-style: italic;
	font-weight: 500;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_700_bold.woff2') format('woff2');
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto_700_bold_italic.woff2') format('woff2');
	font-style: italic;
	font-weight: 700;
}




/*
 @font-face {
  font-display: swap;
  font-family: 'Robotom';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v32-latin-500.woff2') format('woff2');
}
 @font-face {
	font-family: "Robotom2";
	src: url("../fonts/Roboto-Medium.ttf");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Robotoc";
	src: url("../fonts/RobotoCondensed-Regular.ttf");
	font-weight: 400;
	font-style: normal;
	font-stretch: condensed;
}
 */
 



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

/* general page layout */
/* ------------------- */
body {
	padding: 10px 20px 20px 20px; 
	font-size: 100%;
   max-width: 1240px;
	color:  var(--text_color);
	background-color: var(--body_background_color);
	margin: auto;									/* centre horizontally */
	font-family: 'Roboto', sans-serif;
}

input, textarea, button, table { font-family: inherit; }

* {
   box-sizing: border-box;               /* elements should have padding and border included in size (but not margin) */
}

.outer_wrapper {
	border-radius: 10px;
	box-shadow: 10px 10px 5px var(--modal_shadow_color);
	padding: 10px 15px 5px 15px;
	background-color: var(--background_color);
	border: 1px solid gainsboro;
	height: 600px;
	overflow: auto;
}

.main_div {
	margin-top: 10px;
   margin-bottom: 5px;
   padding: 0px 5px 0px 5px;
   overflow: auto;
	min-height: 460px;
	width:100%;
}

.footer {
    padding: 5px;
    width: 100%;
	 font-size: 13px;
	 color: var(--main_color);
}


/* headers */
/* ------- */
.h1 {
	font-size: 26px;
	margin-bottom: 5px;
}
.h2 {
	color: var(--main_color);
	font-style: italic;
	font-weight: bold;
	font-size: 20px;
}
.h3 {
	font-weight: bold;
	font-style: italic;
	letter-spacing: 2px;
}


/* sundry tags */
/* ----------- */
fieldset{
   border: solid 1px var(--main_color);
   border-radius: 5px;
}
fieldset legend { color: var(--main_color); font-weight: 700;}

hr {                                     
   color: var(--main_color); 
	margin: 2px 0px 2px 0px;
}
.h3 + hr { margin: 0px 0px 5px 0px; }

div {
	word-break: break-word;
}

textarea {
  resize: none;
  font-size: 13px;
}


.li_indent {
	margin-left: 30px;
}


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


/* bar to hide/display div */
/* ----------------------- */
.toggle_display_bar {
	padding: 10px 16px;
	width: 90%;
	margin: 5px auto 10px auto;
	display: none;
}


/* info box, info text */
/* ------------------- */
.info_box {
	border: 1px solid; 
   padding: 5px 5px; 
   margin-bottom: 5px;
   border-radius: 5px;
   font-style: italic;
   font-size: 13px;
   color: var(--info_box_color);
}
.info {
	font-size: 13px;
	font-style: italic;
	color: var(--info_box_color);
	font-weight: normal;
	letter-spacing: normal;
}
.info2 {
	font-style: italic;
	font-weight: bold;
	color: var(--info_box_color);
}


/* search box */
/* ---------- */
.srch_box {
   background-image: url('../images/search.png');
   background-size: 25px 25px;
   background-position: left center;
   background-repeat: no-repeat;
   width: 200px;
   font-size: 16px; 
   padding: 5px 10px 5px 30px;
   border: 1px solid #ddd; 				/* Add a grey border */
   margin-bottom: 5px;
	margin-top: 2px;
	margin-right: 20px;
	margin-left: 2px;
}
.srch_box_float {
	float: left;
	margin-right:20px;
}


/* message box */
/* ----------- */
#message {
	z-index: 10;				/* make absolutely sure always on top */
	padding-top: 110px;
}
.message_box {
	overflow-wrap: break-word;
   max-width: 350px;
}


/* popups */
/* ------ */
.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: var(--main_color_light);
   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;
}


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


/* flex box */
/* -------- */
.flex_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


/* grids */
/* ----- */
/* 2 col grid table - right col right aligned */
.grid_table_2col {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	column-gap: 10px;
}
.grid_table_2col div:nth-child(even) { text-align:right; }

/* 4 col grid table - left col left aligned */
.grid_table_4col {
	display: grid;
	grid-template-columns: 31% 23% 23% 23%;
	justify-content: space-between;
}
.grid_table_4col div { text-align:right; }
.grid_table_4col div:nth-child(4n + 1) { text-align:left; }



/* mobiles, small screens - 0px to 1240px */
/* ------------------------------------- */
@media screen and (max-width: 1240px){
	
	body { padding: 0px; max-width: 1200px; }
	
	.outer_wrapper {
		height: unset;
		overflow: unset;
	}
	
}


/* mobiles, small screens - 0px to 1000px */
/* ------------------------------------- */
@media screen and (max-width: 1000px){
	
	.big_screen { display: none; }	
	
	.toggle_display_bar { display:block; }
	
	#menu_form input[type=text] { width: 100% }
	
	.main_div { padding: 0px; }
	
	.srch_box { width: 150px; }
	
	.srch_box_float {
		float: none;
	}

}


/* mobile phones 0-500px */
/* --------------------- */
@media only screen and (max-width: 500px) {
	
	/*body {padding: 0px;}*/
	
}


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

	/* hide elements which should only be displayed on small screens */
	.small_screen { display:none; }
	
}




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

button {
	display: inline-block;
	color: white;
	background-color: var(--text_color);
	padding: 5px 10px;                 /* top & Bottom, left & right */    
	font-size: 12px;
	font-weight: 500;
   cursor: pointer;
   box-shadow: 5px 5px 5px var(--button_shadow_color);
   outline: none;
   border: none;
   border-radius: 5px;
	margin: 2px 10px 10px 0;             /* top right bottom left */ 
}

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

button:active {
  box-shadow: 2px 2px 2px var(--button_shadow_color); 
  transform: translateY(4px);
}

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

.help_button {
  padding: 3px 5px;                 /* top & Bottom, left & right */    
  font-family: arial;
  font-size: 17px; 
  font-weight:bold;
  cursor: pointer;
  text-align: center;
  color: var(--background_color);
  border: none;
  box-shadow: 4px 4px 3px var(--modal_shadow_color);
  margin: 0px 5px 0px 5px;
  float: right;
}
.help_button:hover {background-color: var(--main_color_light);}



/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	button, input[type=submit], input[type=reset], input[type=button] {
		font-weight: bold;
	}
}




/*
==============================================================================================
Email form
==============================================================================================
*/
#email_modal .modal_wrapper {
	max-width: 700px;
}

.email_grid {
	display:	grid;									
	grid-template-columns: 70px auto;
	align-items: center;
	row-gap:	10px;
}
.email_grid button { margin-right: 0px; }


#email_modal input[type=text]  {
	width: 100%;
	max-width: 400px;
	padding: 5px 10px;
}

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

#email_modal input, #email_modal button {
	margin-bottom: 0px;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.email_grid {						
		grid-template-columns: auto;
		row-gap:	0px;
	}
	#email_modal input, #email_modal button {
		margin-bottom: 10px;
	}
	
}




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

input, select, textarea {
   padding: 3px 10px;
  	border: 1px solid var(--input_border_color);
	border-radius: 5px;
	color: blue;
	margin: 0px 5px 5px 0px;
	max-width: 100%;
}

input::placeholder {
  	color: gray;
}

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


/* form buttons */
input[type=submit], input[type=reset], input[type=button]{
	background-color: black;
   color: white;
   padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
   cursor: pointer;
   box-shadow: 5px 5px 5px var(--button_shadow_color);
   outline: none;
   border: none;
   border-radius: 5px;
	margin: 2px 10px 10px 0;             /* top right bottom left */ 
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover{
	 background-color: var(--main_color);
}
input[type=submit]:active, input[type=reset]:active, input[type=button]:active{
	box-shadow: 2px 2px 2px var(--button_shadow_color); 
	transform: translateY(4px);
}


/* labels */
.label_80 {
	display: inline-block;
	width: 80px;
}
.label_100 {
	display: inline-block;
	width: 100px;
}
.label_120 {
	display: inline-block;
	width: 120px;
}

/* text info for radio buttons */
.radio_info {
	font-size: 13px;
	font-style: italic;
	margin-left: 25px;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.input_small_scr {
		width: 95%;
	}
	
}




/*
==============================================================================================
Login screen - index.php
==============================================================================================
*/

.login_grid {
	display:	grid;										/* CSS grid layout */
	grid-template-columns: 35px auto auto;		/* 3 columns with width specified for 1st column */
	padding: 5px;
}

.login_logo {
	grid-column: 1;
	display: flex;										
	align-items: center;								/* center vertically */
}

.login_logo img {									
	height: 20px;
	width: auto;
}

.login_hdr1 {											/* system name */
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: left;
	font-size: 20px;
	letter-spacing: 4px;
	color: var(--main_color);
}

.login_hdr2 {											/* system name */
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: right;
	font-size: 20px;
}

.login_bar {
	grid-column: 1 / span 3;	
	border-top: 5px solid var(--main_color);
   margin-bottom:50px;
}

.login_form_container {											
	grid-column: 1 / span 3;	
	display: flex;
	justify-content: center;						/* horizontal align */
}

.login_div {
	background-color: var(--background_color);
   border-radius: 5px;
	box-shadow: 10px 10px 5px var(--modal_shadow_color);
	min-width: 300px;
	max-width: 350px;
}

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

.login_form_hdr {
   background-color: var(--main_color);
   text-align: center;
   font-size: 20px;
   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 var(--input_border_color);
}

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

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

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



/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.login_grid {
		grid-template-columns: 25px auto;		/* 2 columns with width specified for 1st column */
		padding: 2px;
	}
	.login_logo img {
		height: 15px;
	}
	.login_hdr1 {
		font-size: 15px;
		letter-spacing: 2px;
	}
	.login_hdr2 {
		grid-column: 1 /span 2 ;
		letter-spacing: 2px;
		font-size: 15px;
		justify-content: left;
	}
	.login_bar {
		grid-column: 1 / span 2;
	}
	.login_form_container {
		grid-column: 1 / span 2;
	}
	
	.login_div { min-width: 0px; }

}




/*
==============================================================================================
Menu navigation bar - load_page.php
==============================================================================================
*/

.menu_container {
   background-color: var(--menu_background_color);
	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 {				/* menu image displayed on small screens */
	display:none;
	background-color: var(--menu_background_color);
}

.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;		/* separater between top level menu items */
}

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

.menu_top_level a {
   color: white;								/* top level text colour */
   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: var(--menu_bck_hover_color);		/* Change background colour when hover on links */ 
}

.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);
	z-index: 1;													/* make sure appears on top of everything else */
}

.menu_level_1 > li {
    position: relative;   
}

.menu_level_1 a {
	color: var(--menu_dropdown_text_color);
   padding: 5px 10px;
   text-align: left;
   font-size: 90%;
	background-color: var(--menu_dropdown_bck_color);
	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 ...px 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: var(--menu_dropdown_bck_color);
   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;		
}

/* symbol for submenu menu level 2 */
.menu_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;
}



/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@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_1 a {
		padding: 0px 10px;
		line-height: 40px;				/* give more spacing for mobiles */
	}

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


}

/* medium screens - 0px to 1000px */
/* ------------------------------------- */
@media screen and (max-width: 1000px){
	.menu_top_level > li > a {
		font-size: 90%;
		padding: 0px 10px;
	}

}


/* 
==============================================================================================
Modal screens
==============================================================================================
*/


/* modal background */
.modal {
	display: none;				/* hidden by default */
   position: fixed; 			/* stay in place - even if page scrolled */
   z-index: 1; 				/* sit on top */
   padding-top: 100px; 		/* space from top of page to modal content */
   left: 0;						/* cover whole screen */
   top: 0;
   width: 100%; 
   height: 100%; 
   overflow: auto; 			/* enable scroll if needed */
   background-color: rgb(0,0,0); 			/* fallback color */
   background-color: rgba(0,0,0,0.4); 		/* black with 0.4 opacity - 0.0=fully transparent, 1.0=opaque */
}
.modal2 {
	padding-top: 110px; 		/* space from top of page to modal content */
	padding-left: 20px;
}
.modal2a {
	padding-top: 110px; 		/* space from top of page to modal content */
}


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

/* x icon (×) to close modal */
.modal_close {
	color: LightGray;
/*   float: right;*/
	font-weight: bold;
   font-size: 30px;
	position: absolute;
	right: 20px;
	top: 5px;
}
.modal_close:hover, .modal_close:focus {
   color: Black;
   cursor: pointer;
}

/* modal header */
.modal_header {
	background-color: var(--main_color);
   text-align: center;
   font-size: 1.2em;
   padding: 10px 30px;		/* need to leave space for X close */
   letter-spacing: 4px;
   font-variant: small-caps;
   color: white;
   margin-bottom: 0px;
	border-radius: 10px 10px 0px 0px;
}


.modal_content {
	padding: 10px 20px;
}
.modal_picklist {
	padding: 20px;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	.modal {
		padding-top: 0px;
	}
	.modal2 {
		padding-top: 0px;
		padding-left: 0px;
	}
	
	.modal_wrapper {
		width: 100%;
	}
	
	.modal_wrapper form {
		padding: 10px 10px;
   }
}




/* 
==============================================================================================
Help modal
==============================================================================================
*/

#help_modal { z-index: 2; }

#help_modal .modal_wrapper {
	max-width: 850px;
	padding-bottom: 20px;
}

#help_modal_content {
	height: 430px;
	overflow: auto;
	font-weight: 300;
}

#help_modal li > li{
	margin-left: 40px;
}

#help_modal button {
	font-size: 10pt;
	padding: 5px 10px;
	margin: 0px;
}

#help_modal li > button {
	font-size: 9pt;
	padding: 3px 7px;
	margin: 0px 5px 0px 2px;
	box-shadow: 3px 3px 3px var(--button_shadow_color);
}

#help_modal ol {
	padding:15px;
}
#help_modal ol li ul {
	padding:10px;
}

.help_stress {
	font-style: italic;
	font-weight: bold;
}
  
.help_modal_grid {
	display:	grid;										
	grid-template-columns: auto auto;
	gap: 20px;	
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.help_modal_grid {
		grid-template-columns: auto;		/* 1 column */
	}
	#help_modal ul {					/* ul elements which are a descendent of id=help_modal */
		padding-left: 20px;			/* reduce indent for small screens */
	}
}




/*
==============================================================================================
Page header - load_page.php
==============================================================================================
*/
.pg_hdr_grid {
	display:	grid;										/* CSS grid layout used for header */
	grid-template-columns: 35px auto auto;		/* 3 columns with width specified for 1st column */
}

.pg_hdr_item {
	padding: 5px;
   display: flex;										/* CSS flexbox layout used for grid items */
	align-items: center;								/* center vertically */
}

.pg_hdr_item1 {
	grid-column: 1;
	justify-content: left;
}

.pg_hdr_item1 img {									/* icon image */
	height: 20px;
	width: auto;
}

.pg_hdr_item2 {										/* system name ie Trident Accounts */
	grid-column: 2;
	letter-spacing: 5px;
	font-size: 20px;
	color: var(--main_color);
}

.pg_hdr_item3 {										/* co name */
	grid-column: 3 ;
	font-size: 20px;
	justify-content: right;
}


/* mobiles, small screens - 0px to 900px */
/* ------------------------------------- */
@media only screen and (max-width: 900px) {
	
	.pg_hdr_grid {
		grid-template-columns: 25px auto;		/* 2 columns with width specified for 1st column */
	}
	
	.pg_hdr_item {
		padding: 2px;
	}

	.pg_hdr_item1 img {
		height: 15px;
		width: auto;
	}
	
	.pg_hdr_item2 {
		letter-spacing: 3px;
	}
	
	.pg_hdr_item3 {
		grid-column: 1 /span 2 ;				/* spans 2 columns ie whole width */
		font-size: 15px;
		justify-content: left;
		display: none;
	}

}




/* 
==============================================================================================
Table styles
==============================================================================================
*/

table {
   border-collapse: collapse;
	cursor:default;
	font-size: 13px;
	/*width: 95%;*/
}
td { 
	word-wrap: break-word;
	word-break: break-word;
	padding-right: 10px;
}

.th_div {
   margin-bottom: 2px;
	overflow-y:auto;
	scrollbar-gutter: stable;
}
.th_div table {
   border-bottom: 2px solid black;
}

.tb_div {
   overflow-y:auto;
	overflow-x:hidden;
	scrollbar-gutter: stable;			/* reserve space for scrollbar */
}
.tb_div tr:hover {
	background-color: var(--main_color);
	color:white;
}

.tf_div {
	overflow-y:auto;
	scrollbar-gutter: stable;
   margin-top: 2px;
	margin-bottom: 12px;
	           /* in case their is a customised footer not in a table */
}
.tf_div table {
   border-top: 2px solid black;
}

.table_icon {								/* delete/edit icons etc used in table rows */
	background-color: var(--background_color);
	cursor: pointer;
	width: 20px;
	padding-right:0px;
}
.table_icon img:hover {
	transform: scale(1.4, 1.1);
}

.table_edit {								/* table row edits - eg allocations matchref */
	margin:0px; 
	padding:1px;
}

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

.table_col_stress {						/* used in config, config_text */
	color: blue;
}

.table_data_entry {
	font-weight:bold;
	color: var(--info_box_color);
}

.table_header {
	font-size: 20px;
	margin-bottom: 5px;
}

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

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


/* mobiles, small screens - 0px to 1000px */
/* ------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	table {
		width: 95%;
	}
	
	.table_media_95 table {
		width: 95%;							/* to allow room for scroll bar */
	}
	
	.tb_div td {							/* put border between rows and space out */
		padding-top:8px;
		padding-bottom:8px;
		border-bottom:1px solid Gray;
	}
	
}




/* 
==============================================================================================
								* * *   P A G E   S T Y L E S   * * *
==============================================================================================
*/



/*
==============================================================================================
Generic page styles
==============================================================================================
*/
.pg_2col_grid {
	display:	grid;										/* CSS grid layout used for header */
	grid-template-columns: 280px auto;			/* 2 columns with width specified for 1st column */
}

.pg_2col_grid_col1 {
	grid-column: 1;
}

.pg_2col_grid_col2 {									
	grid-column: 2;
	border-left: 1px solid black;
	padding-left: 20px;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.pg_2col_grid {
		grid-template-columns: auto;			/* 2 columns with width specified for 1st column */
	}
	.pg_2col_grid_col2 {									
		grid-column: 1;
		border: none;
		padding: 0px;
	}
	
}



/*
==============================================================================================
Documents
==============================================================================================
*/

.doc_img {
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
#doc_view_modal { z-index: 2; }


/* printing */
/* -------- */
@media print {
	
	.no_print, .modal_close {
		display: none;
	}
	
	.modal {
		padding-top: 0px !important;
	}
	
	.modal_wrapper {
		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; }	
	
}



/*
==============================================================================================
Master File Pages
==============================================================================================
*/

.mf_page {
	display: none;
	height: 350px;
}
.mf_page:first-child {
	display: block;
}
.mf_page label {
	display: inline-block;
	width: 100px;
}
.mf_page input { margin-bottom: 5px; }
.mf_page_desc { margin-left: 15px; }

.mf_grid {
	display:	grid;										
	grid-template-columns: auto auto;			/* 2 columns auto width */
}
.mf_col1 { grid-column: 1; }
.mf_col2 { grid-column: 2; }


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.mf_page label { display: block;	}
	.mf_page input {
		width: 95%;
		margin-bottom: 10px;
	}
	.mf_page_desc { margin-left: 0px; }
	
	.mf_grid { grid-template-columns: auto; }
	.mf_col2 { grid-column: 1; }
	
}



/*
==============================================================================================
Help - product information page
==============================================================================================
*/

.help_info_grid {
	display:	grid;										/* CSS grid layout */
	grid-template-columns: auto 125px auto;
}


.help_info_col1 {
	grid-column: 1;
	grid-row: 1 /span 4;
	padding-right: 20px;
}


.help_info_chart {
	grid-column: 2 / span 2;
	grid-row: 1;
	margin:auto;
}

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

.help_info_icon img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 50px;
}

.xhelp_info_icons img {
	
	margin: auto;
}

.help_info_icon_txt {
	display: flex;
	align-items: center;
	padding: 10px;
}


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

	.help_info_grid {
		grid-template-columns: 60px auto;
	}

	.help_info_col1 {
		grid-column: 1 / span 2;
	}
	.help_info_features_txt {
		grid-row: 2;
	}
	.help_info_chart {
		grid-column: 1 / span 2;
		grid-row: 3;
	}
	
	

	.help_info_img img {
		height: 30px;
		margin: 0px;
	}
}




/*
==============================================================================================
Home page - home.php
==============================================================================================
*/

.home_grid {
	display: grid;
	column-gap: 30px;
	row-gap: 10px;
	grid-template-columns: 350px auto;
	grid-template-rows: 40px auto;  
	height:380px;
}

.home_logo img{
	float: right;
}

.home_col1 { 
  grid-row: 1 / span 2;
  padding-right: 20px;
}

#home_bk_btn {
	padding: 50px 50px;
	font-size: 15pt;
	background-color: var(--main_color);
}
#home_bk_btn:hover {
	background-color: var(--text_color);
}


@media only screen and (max-width: 950px) {
	.home_grid {
		grid-template-columns: auto;
		grid-template-rows: auto;  		
		height: fit-content;
		grid-gap: 0px;
	}
	.home_logo {
		grid-row: 1;
	}
	.home_logo img {
		float:left;
		width: 120px;
	}
	.home_col1 {
		/*grid-row: 2;*/
	}
	.home_hdr {
		font-size: 13pt;
	}
	#home_bk_btn {
	padding: 30px 30px;
	
	}
}




/*
==============================================================================================
Menu access - menu_access.php
==============================================================================================
*/
.menu_access_grid {
	display:	grid;										/* CSS grid layout used for header */
	grid-template-columns: 300px auto;			/* 2 columns with width specified for 1st column */
}

.menu_access_col1 {
	grid-column: 1;
}

#menu_access_col2 {									
	grid-column: 2;
	border-left: 1px solid black;
	padding-left: 20px;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.menu_access_grid {
		grid-template-columns: auto;
	}
	#menu_access_col2 {									
		grid-column: 1;
		border: none;
		padding: 0px;
	}
	
	
}





/*
=========================================================================================
Sales Invoice - sl_inv.php
=========================================================================================
*/

/* inv header */
.sl_inv_grid {
	display:	grid;		
	grid-template-columns: 300px auto auto;
	column-gap: 15px;
	font-size: small;
	padding: 5px;
}
.sl_inv_grid div:nth-child(1) { border-right: 1px solid var(--main_color); }
.sl_inv_grid label { display: inline-block; width: 100px;}
#slt_invnote { width: 411px; }


/* inv items modal */
.sl_inv_modal_grid {
	display:	grid;		
	grid-template-columns: auto auto auto auto auto auto;
	column-gap: 15px;
	row-gap:	10px;
}

#sl_inv_info_modal label {
	display: inline-block; width: 130px;
}


/* tablets - 0px to 1150px */
/* ----------------------- */
@media only screen and (min-width: 0px) and (max-width: 1150px) {
	.sl_inv_grid {
		grid-template-columns: auto auto auto;
	}
	.sl_inv_grid label { display: none; }
}


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

	.sl_inv_grid {
		grid-template-columns: auto;
	}
	.sl_inv_grid div:nth-child(1) { border: none; }
	#slt_invnote { width: 100%; }
	
	.sl_inv_modal_grid {
		grid-template-columns: auto;
		row-gap:	0px;
	}
}



/*
=========================================================================================
Sales Order - sl_order.php
=========================================================================================
*/

/* order form */
.sl_order_grid {
	display:	grid;		
	grid-template-columns: 400px auto;
	column-gap: 15px;
	font-size: small;
	padding: 5px;
}
.sl_order_grid div:nth-child(1) { border-right: 1px solid var(--main_color); }
.sl_order_grid label { display: inline-block; width: 100px;}
#slo_note { width: 260px; }


/* order items modal */
.sl_order_modal_grid {
	display:	grid;		
	grid-template-columns: auto auto auto auto auto auto;
	column-gap: 15px;
	row-gap:	10px;
}

#sl_order_info_modal label {
	display: inline-block; width: 130px;
}


/* tablets - 0px to 1150px */
/* ----------------------- */
@media only screen and (min-width: 0px) and (max-width: 1150px) {
	.sl_order_grid {
		grid-template-columns: auto auto;
	}
	.sl_order_grid label { display: none; }
}


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

	.sl_order_grid {
		grid-template-columns: auto;
	}
	.sl_order_grid div:nth-child(1) { border: none; }
	#slo_note { width: 100%; }
	
	.sl_order_modal_grid {
		grid-template-columns: auto;
		row-gap:	0px;
	}
}



/*
==============================================================================================
Sales Transactions - sl_trans.php
==============================================================================================
*/
.sl_trans_grid {
	display:	grid;		
	grid-template-columns: auto auto auto auto auto;
	column-gap: 15px;
	row-gap:	10px;
}



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

	.sl_trans_grid {
		grid-template-columns: auto;
		row-gap:	0px;
	}
	/*.user_grid input {
		width: 100%;
	}*/
	
}



/*
==============================================================================================
Sales View - sl_view.php
==============================================================================================
*/

/* main grid */
.sl_view_grid {
	display:	grid;				
	grid-template-columns: 375px auto;
}
#sl_view_grid_col1 {
	grid-column: 1 ;
	grid-row: 1 / span 2;
	padding-right: 5px;
	border-right: 2px solid var(--main_color);
	margin-right: 10px;
}


/* for page control */
.sl_view_page {
	display: none;
	font-size: 13px;
	height: 395px;
	overflow: clip;		/* to make balance stats page work?? */
}
#sl_view_page1 { display: block; }


/* content page 1 - summary */
.sl_view_pg1_content {
	display: grid;
	grid-template-columns: 50% 30% 20%;
	grid-template-rows: auto auto auto;
	height: 100%;
}
/*.sl_view_pg1_content hr { margin-bottom: 2px; }*/

/* left col summary, mini-charts */
.sl_view_pg1_content > :first-child {
	grid-row: 1 / span 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sl_view_pg1_content > :first-child fieldset:first-of-type { margin-bottom: 10px; }

/* balances table */
.sl_view_pg1_content > :nth-child(2) {
	grid-column: 2 / span 2;
	margin-bottom: 10px;
}

/* sales chart */
.sl_view_pg1_content > :nth-child(3) { grid-row: 2 / span 2; }

/* stats table */
.sl_view_pg1_content > :nth-child(4) {	margin-bottom: 10px; }
.sl_view_pg1_content > :nth-child(4) div { font-size: 11px; }


/* content page 2 - other info */
.sl_view_pg2_content {
	display: grid;
	grid-template-columns: 50% 50%;
	height: 100%;
}
/*.sl_view_pg2_content hr { margin-bottom: 2px; }*/


/* content page 5 - stats */
.sl_view_pg5_content {
	display: grid;
	grid-template-columns: 57% 42%;
}
.sl_view_pg5_content > :first-child {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/* content page 6 - balance stats */
.sl_view_pg6_content {
	display: grid;
	grid-template-columns: 50% 50%;
	height: 355px;
}
.sl_view_pg6_content > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.sl_view_mini_charts {
    float: left;
    width: 33%;
}


/* tablets - 1001px to 1190px */
/* -------------------------- */
@media only screen and (min-width: 1001px) and (max-width: 1190px) {
	#sl_view_grid_col2 button { font-size: 11px; }
	.sl_view_grid { grid-template-columns: 300px auto; }
	.sl_view_page { font-size: 12px; }
	#sl_view_trans_table_div .big_screen { display: none; }
	#sl_view_trans_table_div .small_screen { display: table-cell; }
	table { font-size: 12px; }
}



/* mobiles, small screens - 0px to 1080px */
/* -------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	.sl_view_grid, .sl_view_pg1_content, .sl_view_pg5_content, .sl_view_pg6_content {
		grid-template-columns: auto;
		grid-template-rows: auto;
	}
	
	#sl_view_grid_col1 { 
		grid-column:auto;
		grid-row: auto; 
		padding: 0px;
		border: none;
		margin: 0px;
	}
	#sl_view_grid_col1 table { width: 95%; }
	
	.sl_view_pg1_content > :first-child { margin-bottom: 10px; }
	.sl_view_pg1_content > :nth-child(2) { grid-column: auto; grid-row: auto }
	.sl_view_pg1_content > :nth-child(3) { grid-column: auto; grid-row: auto; margin-bottom: 10px; }
	.sl_view_pg2_content { grid-template-columns: auto; }
	.sl_view_page fieldset { margin-bottom: 10px; }
	.sl_view_page, .sl_view_pg6_content { height:unset; }
	
	/* always display scroll bar to align table body with header/footer */
	#sl_view_inv_detail table { width: 95%; }
	#sl_view_inv_detail div { overflow-y: scroll; }
	#sl_view_trans_table_div table { width: 95%; }
	#sl_view_trans_table_div div { overflow-y: scroll; }
	#sl_prices_table_div table { width: 95%; }
	#sl_prices_table_div div { overflow-y: scroll; }
	#sl_view_display_order_detail table { width: 95%; }
	#sl_view_display_order_detail div { overflow-y: scroll; }
	#sl_view_mini_chart_drill table { width: 95%; }
	#sl_view_mini_chart_drill div { overflow-y: scroll; }
}



/*
=========================================================================================
Stock Master File - sk.php
=========================================================================================
*/
#sk_price_table input {text-align: right;}
#sk_price_table td:nth-child(1) {
	width: 150px;
}
#sk_price_table td:nth-child(2) {
	width: 150px;
	text-align:center;
}
#sk_price_table td:nth-child(3),  #sk_price_table td:nth-child(4) {
	width: 120px;
	text-align:center;
}



/*
==============================================================================================
Stock Adjustments - sk_adj.php
==============================================================================================
*/
.sk_adj_grid {
	display:	grid;		
	grid-template-columns: auto auto auto auto auto auto;
	column-gap: 15px;
	row-gap:	10px;
}


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

	.sk_adj_grid {
		grid-template-columns: auto;
		row-gap:	0px;
	}
		
}



/*
==============================================================================================
Stock View - sk_view.php
==============================================================================================
*/

/* main grid */
.sk_view_grid {
	display:	grid;				
	grid-template-columns: 375px auto;
}
#sk_view_grid_col1 {
	grid-column: 1 ;
	grid-row: 1 / span 2;
	padding-right: 5px;
	border-right: 2px solid var(--main_color);
	margin-right: 10px;
}


/* for page control */
.sk_view_page {
	display: none;
	font-size: 13px;
	height: 395px;
	overflow: clip;		/* to make balance stats page work?? */
}
#sk_view_page1 { display: block; }


/* content page 1 - summary */
.sk_view_pg1_content {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 50% 18% 30%;
	grid-template-rows: auto auto;
	height: 100%;
}
.sk_view_pg1_content > div:nth-child(1) { grid-column: 1; }
.sk_view_pg1_content > div:nth-child(2) { grid-column: 1 / span 2; }
.sk_view_pg1_content > div:nth-child(3) { grid-column: 2 / span 2; grid-row: 1; }
.sk_view_pg1_content > div:nth-child(4) { grid-column: 3; grid-row: 2; }


/* content page 2 - other info */
.sk_view_info_table td {
	padding-bottom: 2px;
	border-bottom: 1px solid LightGray;
}
.sk_view_info_table td:first-child { width: 200px; }
.sk_view_info_table td:last-child { text-align: right; }


/* tablets - 1001px to 1190px */
/* -------------------------- */
@media only screen and (min-width: 1001px) and (max-width: 1190px) {
	
	.sk_view_page { font-size: 12px; }
	#sk_view_display_trans_div_grn .big_screen { display: none; }
	#sk_view_display_trans_div_grn .small_screen { display: table-cell; }
	#sk_view_display_trans_div_inv .big_screen { display: none; }
	#sk_view_display_trans_div_inv .small_screen { display: table-cell; }
	table { font-size: 12px; }
}


/* mobiles, small screens - 0px to 1000px */
/* -------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	.sk_view_page { height: unset; }
	.sk_view_grid {
		grid-template-columns: auto;
		grid-template-rows: auto;
	}
	.sk_view_pg1_content { display: block; }
	.sk_view_pg1_content > div { max-width: 350px; }

}




/*
==============================================================================================
Stock Price Update Ad Hoc - sk_price_upd.php
==============================================================================================
*/

/* main grid */
.sk_price_upd_grid {
	display:	grid;				
	grid-template-columns: 375px auto;
}
#sk_price_upd_grid_col1 {
	grid-column: 1 ;
	grid-row: 1 / span 2;
	padding-right: 5px;
	border-right: 2px solid var(--main_color);
	margin-right: 10px;
}

/* content grid */
.sk_price_upd_content_grid {
	display:	grid;				
	grid-template-columns: 40% auto;
	font-size: 13px;
}
.sk_price_upd_content_grid > div:nth-child(1) { grid-column: 1; grid-row: 1; }
.sk_price_upd_content_grid > div:nth-child(2) { grid-column: 2; grid-row: 1; }
.sk_price_upd_content_grid > div:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.sk_price_upd_content_grid hr { margin:7px 0 7px 0; }
.sk_price_upd_content_grid input { text-align:right; margin: 0 0 3px 0; }

/* prices table */
#sk_price_upd_table2 td {
	width: 100px;
	text-align:center;
}
#sk_price_upd_table2 td:nth-child(1) {
	width: 120px;
	text-align:left;
}
#sk_price_upd_table2 td:nth-child(2) {
	width: 110px;
}


/* mobiles, small screens - 0px to 1000px */
/* -------------------------------------- */
@media only screen and (max-width: 1000px) {
	
	.sk_price_upd_grid {
		grid-template-columns: auto;
		grid-template-rows: auto;
	}
	.sk_price_upd_content_grid { display: block; }

	#sk_price_upd_table2 td:nth-child(n+4) {
		display: none;
	}
}



/*
==============================================================================================
Stock Price Update Planned - sk_pu.php
==============================================================================================
*/

.sk_pu_flex {
	display:flex;
	flex-wrap: wrap;
	font-size: small;
}
.sk_pu_flex ul {
	margin: 0px;
	padding-left: 20px;
}
.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;
	}
}



/*
==============================================================================================
Users - users.php
- grid is for add/edit modal
==============================================================================================
*/
.user_grid {
	display:	grid;		
	grid-template-columns: 100px 100px auto;
	column-gap: 15px;
	row-gap:	10px;
}

.user_name {
	grid-column: 1 / span 2;
}

.user_email {
	grid-column: 1 / span 3;
}

.user_note {
	grid-column: 1 / span 3;
}

.user_grp input[readonly] {
	background-color: transparent;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.user_grid {
		grid-template-columns: auto;
		row-gap:	0px;
	}
	.user_grid input {
		width: 100%;
	}
	.user_email, .user_name, .user_note {
		grid-column: 1;
	}
}






/*
==============================================================================================
Customer Users - cu_user.php
- grid is for add/edit modal
==============================================================================================
*/
.cu_user_grid {
	display:	grid;		
	grid-template-columns: 100px 100px auto;
	column-gap: 15px;
	row-gap:	10px;
}

.cu_user_cu_fullname {
	grid-column: 1 / span 3;
}

.cu_user_cu_email {
	grid-column: 1 / span 3;
}

.cu_user_sl_code input[readonly] {
	background-color: transparent;
}

.cu_user_sl_name {
	grid-column: 2 / span 2;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.cu_user_grid {
		grid-template-columns: auto;
		row-gap:	0px;
	}
	.cu_user_grid input {
		width: 100%;
	}
	.cu_user_cu_email, .cu_user_cu_fullname, .cu_user_sl_name {
		grid-column: 1;
	}
}






/*
==============================================================================================
Sales Rep Groups - sl_repgrp.php
==============================================================================================
*/

.sl_repgrp_grid {
	display:	grid;										/* CSS grid layout used for header */
	grid-template-columns: 350px auto;			/* 2 columns with width specified for 1st column */
}
.sl_repgrp_grid_col1 {
	grid-column: 1;
	padding-right: 10px;
}
.sl_repgrp_grid_col2 {									
	grid-column: 2;
	border-left: 1px solid black;
	padding-left: 20px;
}


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.sl_repgrp_grid {
		grid-template-columns: auto;
	}
	.sl_repgrp_grid_col2 {									
		grid-column: 1;
		border: none;
		padding: 0px;
	}
	.sl_repgrp_name input {
		width: 100%;
	}
	
}



/*
==============================================================================================
stock info modal (trident.php)
==============================================================================================
*/

.sk_info_col1 { float: left; }
.sk_info_col1 td:first-child { width: 120px; }
.sk_info_col1 td:last-child { text-align: right; }
.sk_info_col2 { float: right; }
.sk_info_col2 td:first-child { width: 120px; }
.sk_info_col2 td:last-child { text-align: right; }


/* mobiles, small screens - 0px to 950px */
/* ------------------------------------- */
@media only screen and (max-width: 950px) {
	
	.sk_info_col1 { float: none; }
	.sk_info_col2 { float: none; margin-top: 20px; }
	
}