/*========================================================================================*/
/* WEBPAGE BASE */
/*-------------------------------*/

/* default styling for the body of the webpage (not the actual content, but the webpage "base" that the navbar and main content sit on top of */
body {
	margin: 0;
	/*this adds padding to the bottom of the webpage, to prevents buttons being directly against the bottom of the page*/
	padding: 0 0 20px 0;
	/* test so you can see the radial position */
	background-image: radial-gradient(circle farthest-corner at 5% 50%, rgb(255, 255, 255), rgb(190, 190, 212));
	/*background-image: radial-gradient(circle farthest-corner at 10% 50%, rgb(255, 255, 255), rgb(255, 255, 255));*/
	/*background-image: radial-gradient(circle farthest-corner at 10% 50%, rgb(255, 0, 0), rgb(0, 0, 255));*/
	background-attachment: fixed; /* locks the background image in place, and the content scrolls over it. Useful to prevent problems bg wrap scroll problems with very wide webpage content */
	/* TEMP: set the height of the webpage to be larger, to force scrolling */
	/*height: 200vh;*/
}

/*========================================================================================*/
/* COMMON ELEMENTS */
/*-----------------*/

/* removes the eye icon for password fields, so they can't be seen */
input[type=password]::-ms-reveal, input[type=password]::-ms-clear {
	display: none;
}

/* allegedly, this works with Safari */
input[type=password]::-webkit-contacts-auto-fill-button,
input[type=password]::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	height: 0;
	width: 0;
	margin: 0;
}


/* example on how to change the input box color for invalid fields*/
/*input:invalid {
	background-color:rgb(255, 100, 100);
}

input:valid {
	background-color: rgb(100, 255, 100);
}
*/

.debug {
	background-color: rgb(100,100,255) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: white !important;
}

/* Debug text without the font change */
.debug-no-font-change {
	background-color: rgb(100,100,255) !important;
	color: white !important;
}

/* font adjustment for text in heading when developer mode on*/
.developer-mode {
	font-size: 2rem !important;
}


/* centering of element contents */
.center {
	text-align: center;
}


/* right alignment */
.align-right {
	text-align: right;
}


.strikethrough {
	text-decoration: line-through;
}


/* aligns table headers and fields vertically*/
.table th.table-vertical-align-middle, .table td.table-vertical-align-middle {
	vertical-align: middle;
}


/* used on text, so the icons appear on the same line */
.display-inline {
	display: inline-flex;
}


/* positions the collapsible icon for navbar headings */
.card-collapse-icon {
	font-size: 1.4rem;
	float: right;
}

	.card-collapse-icon:hover {
		cursor: pointer;
	}


.card-heading {
	float: left;
	text-align: left;
}


.page-heading-wrapper {
	background-image: radial-gradient(ellipse farthest-corner at 30% 70%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.65), rgba(204, 204, 221, 0.0), rgba(190, 190, 212, 0.0));
	/*text-align: center;*/
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 0; /* padding underneath heading, but before border*/
	border-bottom: 1px solid rgb(50,50,80);
	margin-bottom: 14px; /* margin after border, and before next element*/
}


/* webpage title text*/
h1 {
	font-size: 28px;
	/*text-shadow: 10px 0 17px rgba(89, 89, 100, 0.7);*/
	color: rgb(50,50,80);
	line-height: 1.0;
}

/* used for the (e.g.) bar underneath the webpage title*/
.sectionSeparator {
	border-width: 7px;
	/*box-shadow: 10px 0 20px 1px rgba(89, 89, 100, 0.7);*/
	border-top: 1px solid rgb(50,50,80);
	border-bottom: 0;
	border-radius: 10px;
}

/* generally used for buttons which appear in tables */
.btn-sm {
	margin-bottom: 2px;
}


/* generally used for buttons which appear at the bottom of a webpage, for navigation */
.btn-lg {
	margin-bottom: 8px;
	margin-right: 6px;
}


.btn-warning {
	background-color: rgb(255, 220, 7);
	border-color: rgb(255, 220, 7);
}

	.btn-warning:hover {
		background-color: rgb(255, 200, 7);
		border-color: rgb(255, 200, 7);
	}


/* sets the colour for the datatables dark theme*/
.table .thead-dark th {
	background-color: rgb(128, 128, 150);
	color: white;
}


/* sets the colour for the html table header row */
#html_table_id thead {
	background-color: rgb(128, 128, 150);
	color: white;
}

/* All custom switches will turn the mouse to a finger pointer, when hovered over*/
.custom-control-label:hover {
	cursor: pointer;
}


/* make the text in all card headers, a bit thicker */
.card-header {
	font-weight: 600;
}

.btn-lg {
	font-weight: 400;
}

.card {
	box-shadow: 10px 0 20px 1px rgba(89, 89, 100, 0.7);
}

	/* turn off box shadow for cards within cards */
	.card .card {
		box-shadow: none;
	}

/* make the bootstrap 'danger' alert, more red */
.alert-danger {
	background-color: #ffb0b0;
}


/* fixes a bug whereby vertical scrollbars would appear due to the margin-bottom being set to 1rem (or 16pixels). For some reason,
	making this margin a bit bigger, removes the scroll bars when they shouldn't be appearing, i.e. for tables with heights shorter than that
	needed for vertical bars to appear.
*/
.table {
	margin-bottom: 17px; /* overwrite the default 1rem, which causes bug */
}


/* custom switches which are disabled. Normally, the difference between an enabled and disabled
	switch is too small to be noticable. This styling accentuates this difference.
*/
.custom-control-input:disabled ~ .custom-control-label {
	/*background-color: rgb(210,210,210);*/
	opacity: 0.50;
	cursor: not-allowed;
}


/* fixes a problem whereby double clicking an element (e.g. a custom switch) will result in selecting
	the text on a row, which is an unwanted effect
*/
.double-click-fix {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}


/* apply to anything disabled*/
:disabled {
	cursor: not-allowed;
}


/* any placeholder elements, including those in datatables */
::-webkit-input-placeholder {
	opacity: 0.4 !important;
}


/* e.g. for the dashboard table of remittances for elements with no corresponding remittance data, 
	or region dropdown with no value set yet
*/
.data-not-found {
	color: red;
	font-weight: 600;
}


/* for user and client admin and displaying (e.g) "Existing User's data", when saving a user which 
	conflicts with an existing record.*/
.existing-data {
	color: red;
	font-weight: 500;
}


.margin-bottom-0 {
	margin-bottom: 0;
}
/*-------------------------------------------------------*/
/* Datatables*/
/* buttons on searchpanes are too light. This darkens them*/
.btn-light {
	border-color: rgb(190, 190, 212);
	background-color: rgb(190, 190, 212);
	color: rgb(33,37,41);
}

/* for the magnifier button, which is linked to the text box*/
.dtsp-searchPanes div.dtsp-topRow button.dtsp-searchIcon {
	background-size: unset; /* makes the magnifier icon on searchPanes larger*/
	margin-right: 5px; /* put spacing between magnifier button, and other icons to its right */
}

/* puts spacing between the icons in searchPanes*/
.dtsp-searchPanes div.dtsp-subRow2 button.btn {
	margin-left: 1px;
	margin-right: 1px;
}

/* turn off searchpanes border */
div.dtsp-panes {
	border: none;
}


/* restores the curved buttons in searchpanes*/
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn {
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

/* restores the curved buttons in searchpanes*/
.btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn {
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
}

/* makes the 'sort alphabatical' icon wider */
.dtsp-searchPanes div.dtsp-topRow button.dtsp-nameButton {
	width: 32px
}

/* makes the 'sort numerical' icon wider */
.dtsp-searchPanes div.dtsp-topRow button.dtsp-countButton {
	width: 30px
}


.datatables-plus-button-wrapper {
	position: relative;
	display: inline-block; /* allows text to follow before and after the icon */
	width: 24px;
}


/*table .dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before*/
/* Simulates the datatables "+" button */
.datatables-plus-button::before {
	top: 50%;
	left: 2px;
	height: 1em;
	width: 1em;
	margin-top: -16px;
	/* display: block; */
	position: absolute;
	color: white;
	border: .15em solid white;
	border-radius: 1em;
	box-shadow: 0 0 .2em #444;
	box-sizing: content-box;
	text-align: center;
	text-indent: 0 !important;
	font-family: "Courier New",Courier,monospace;
	line-height: 1em;
	content: "+";
	background-color: #0275d8;
}

/* displays error messages input tables as red text */
/* NOTE: this is used for other error messages too, so not just for tables */
.table-error-text {
	color: rgb(255, 0, 0);
	font-weight: 500;
}


/* Changes child rows in datatables so the row extends to the full length of the row. Without this, then
	the row is only as long as the largest child column, which affects all other child columns
*/
.dataTable>tbody>tr.child ul.dtr-details {
	width:99.8%;
}

/*----------------------------------------------------------------------*/
/* Full page spinner. Used for loading, saving, filters, etc */
.spinner-wrapper-fullpage {
	height: calc(100vh - 50px - 40px); /* specifies the height of the whole page, minus the header bar, and half the spinner box (81 pix)*/
	position: relative; /* responds to header and sidebar elements, thus making it relative to #main */
	margin: 0; /* remove any margins so positioning can be calculated exactly */
}

	/* applied to additional div that surrounds the .spinner-border, */
	.spinner-wrapper-fullpage .spinner-wrapper-spinner {
		overflow: visible; /* when the browser window is small, it prevents scrollbars appearing when rotating. Could also be set to  */
		padding-top: 1px; /* bug fix for overflow:hidden, to move the spinner down so the top line is not cut off */
		position: absolute; /* allow positioning to be from the content of the encapsulating box (and allows vertical positioning) */
		top: 50%; /* moves it to the centre of the line */
		left: 50%; /* moves it to the centre, vertically */
		transform: translate(-50%, -50%); /* shifts the elements origin to its centre, from the top-left */
	}

	/* the base definition of a spinner. NOTE: the spinner box seems to be set from some other mechanism. The width and
		height defined here, set the size of the spinner icon, and not the size of the encapsulating box. It is best
		to leave the encapsulating box calculation to bootstrap.*/
	.spinner-wrapper-fullpage .spinner-border {
		/* ----------------------------------------*/
		/* default spinner effect */
		/* the height and width here are removed, to prevent them being overridden in the subsequent classes*/
		/*height: 12rem;
		width: 12rem;*/
		/*border: .6em solid currentColor;*/
		/*border: .6em solid rgb(220, 220, 220);*/
		border-right-color: transparent;
		border-left-color: transparent;
		/* ----------------------------------------
		/* these are in addition, to create my custom spinner effect */
		/*border-top-color: transparent;
		border-bottom-color:transparent;*/
	}


/* used to position the "Processing" message in the middle of the spinner */
.spinner-text-centre {
	position: absolute; /* allow positioning to be from the content of the encapsulating box (and allows vertical positioning) */
	top: 50%; /* moves it below the header bar  */
	left: 50%; /* moves it to the horizontal centre of #main */
	transform: translate(-50%, -50%); /* shifts the elements origin to its centre, from the top-left */
	font-weight: 700;
	font-size: 30px;
	color: rgb(170, 170, 230);
	color: rgba(170, 170, 230, 0.5);
}


#progressBarWrapper {
	position: absolute; /* allow positioning to be from the content of the encapsulating box (and allows vertical positioning) */
	top: calc(50% + 45px); /* moves it below the header bar  */
	left: 50%; /* moves it to the horizontal centre of #main */
	transform: translate(-50%, -50%); /* shifts the elements origin to its centre, from the top-left */
	width: 148px; /* width of 'Processing' text */
	/*    font-weight: 700;
	font-size: 30px;
	color: rgb(170, 170, 230);
	color: rgba(170, 170, 230, 0.5);
*/
}

/* #progressBarWrapper */
.progress {
	/* sets the unfilled bar colour */
	background-color: rgb(235,235,235); /* */
}

/* #progressBarWrapper */
.progress-bar {
	color: rgba(25, 25, 25, 0.8);
	font-weight: 800;
	/*background-color: rgb(170,0,255);*/ /* bar color*/
	/*background-image: linear-gradient(120deg, rgb(235, 235, 235), rgb(190, 190, 212));*/
	background-image: linear-gradient(120deg, rgb(120, 255, 120), rgb(64, 200, 64));
	border-radius: 0.25rem;
}

/*UNUSED*/
/* used to position a message box (e.g. BSAlert() )on the same page as the spinner */
.spinner-message {
	position: absolute; /* allow positioning to be from the content of the encapsulating box (and allows vertical positioning) */
	top: 50px; /* moves it below the header bar  */
	left: 50%; /* moves it to the horizontal centre of #main */
	width: 100%; /* makes it use the entire width of #main */
	transform: translate(-50%, -50%); /* shifts the elements origin to its centre, from the top-left */
}


.spinner-1 {
	animation-duration: 1s;
	height: 47vh;
	width: 47vh;
	border: .2rem solid rgb(230, 230, 230);
	border: .2rem solid rgba(230, 230, 230, 0.9);
}


.spinner-2 {
	animation-duration: 1.8s;
	height: 47vh;
	width: 47vh;
	border: .2rem solid rgb(215, 215, 230);
	border: .2rem solid rgba(215, 215, 230, 0.9);
}

/*.spinner-3 {
	animation-duration: 1.5s;
	height: 8rem;
	width: 8rem;
}*/


/*-------------------------------------------------------*/
/* 'Key' for child clients list*/

/* NOTE: the following child_??? selectors MUST use a _ rather than a '-' because these
	names are used as Enum's in code, and converted to a string.
*/
/* the "!important" flag is required, otherwise it is overridden by datatables.css*/
.child_ok {
	background-color: rgb(128, 255, 128) !important;
	background-color: rgba(128, 255, 128, 0.3) !important;
}

	.child_ok:hover {
		background-color: rgb(128, 255, 128) !important;
		background-color: rgba(128, 255, 128, 0.5) !important;
	}

.child_no_users {
	background-color: rgb(255, 255, 0) !important;
	background-color: rgba(255, 255, 0, 0.3) !important;
}

	.child_no_users:hover {
		background-color: rgb(255, 255, 0) !important;
		background-color: rgba(255, 255, 0, 0.5) !important;
	}


.child_deleted {
	background-color: rgb(255, 0, 0) !important;
	background-color: rgba(255, 0, 0, 0.3) !important;
}

	.child_deleted:hover {
		background-color: rgb(255, 0, 0) !important;
		background-color: rgba(255, 0, 0, 0.4) !important;
	}

/*------------------------------------------------------------------------------*/
/* drag-and-drop areas */

/* dropzone drag-and-drop area */
.dz-clickable {
	background-image: radial-gradient(ellipse farthest-corner at 50% 50%, rgb(100, 255, 0), rgb(0, 160, 160));
}

/* dropzone text message */
.dz-message {
	font-size: 20px;
	font-weight: 500;
}


/*========================================================================================*/
/* HEADER, NAVIGATION SIDEBAR AND MAIN CONTENT AREA */
/*--------------------------------------------------*/

/*
	NOTES: if you have a problem with (e.g.) an "icon" not registering a click, then check the width/height of the
	surrounding elements, as the icon may be overlapped by other larger elements which have a higher priority
	than the icon. For example, the header navbar button stopped working, but it was because the header
	'text' items were set to width:inherit, which made them 100% and overlapped the icon, causing it to not
	recognize when the mouse was over the icon.
*/

/*------------------------------------------*/
/* HEADER BAR */

/* top line containing burger icon and other stuff that will always be on screen */
#myheader {
	position: fixed; /* ensures the header stays on screen at the top of the webpage */
	/*display: block;         /* makes the header area span the entire with of the webpage */
	width: 100%; /* span the width of the webpage*/
	height: 50px; /* height of header. Must be same as (1) */
	top: 0; /* prevents the header being pushed down by the margin-top in main */
	/*background-color: rgb(50,50,80);*/
	background-color: rgb(250,250,250);
	z-index: 9999; /* ensure this is higher than the main content and sidebar (because main content can overlap when scrolling webpage). 
		This is set to 9999, to ensure it goes over any dropzone icons that appear after uploading a file (they are around 20).
	*/
}


/* sets up the navbar icon (hamburger icon) */
.myheader-navbar-icon {
	margin: 10px 10px 10px 30px; /* positioning of icon within header */
	color: rgb(200,200,200); /* make darker, so that when the mouse hovers over it, it gets brighter */
	cursor: pointer;
	font-size: 2rem;
}

	/* make the icon as bright as possible when the mouse is over it*/
	.myheader-navbar-icon:hover {
		color: rgb(140,140, 140);
	}


/* contains header text directly to the right of the navbar icon. Note it must be positioned absolutely, and doesn't naturally
	move around the sidebar icon
*/
.myheader-egps-logo {
	/* contains settings which must be inherited from .myheader, in order for this header text to appear in the header */
	position: inherit; /* ensures the header stays on screen at the top of the webpage */
	display: inherit; /* if this is ever set, it needs to be the same as .myheader */
	height: inherit; /* height of header */
	top: inherit; /* prevents the header being pushed down by the margin-top in main */
	/*-----------------------*/
	/* moves the logo to the right, past the navbar icon */
	margin-top: 0;
	margin-left: 100px;
	padding-top: 5px;
	/*-----------------------*/
	/* specific settings for the text */
	/*font-size: 2rem;*/ /* this is set in navbar.vb*/
	font-weight: 500;
	color: rgb(230,230,230);
}


/* remove the underline link from the logo */
a.myheader-egps-logo:link {
	text-decoration: none;
}


/* contains header text at the right */
.myheader-user-account {
	/* contains settings which must be inherited from .myheader, in order for this to appear in the header */
	position: inherit; /* ensures the header stays on screen at the top of the webpage */
	display: inherit; /* if this is ever set, it needs to be the same as .myheader */
	height: inherit; /* height of header */
	top: inherit; /* prevents the header being pushed down by the margin-top in main */
	/*-----------------------*/
	/* moves to the correct pos */
	/*margin-top: 10px;*/
	margin-right: 20px;
	right: 0; /* this puts the text at the right */
	/*-----------------------*/
	/* specific settings for the text */
	font-size: 2rem;
	/*font-weight: 500;*/ /* thickness */
	color: rgb(140,140,140);
	cursor: pointer;
}






/* contains header text at the right, including the company logo (if uploaded) */
.myheader-user-account-position {
	/* contains settings which must be inherited from .myheader, in order for this to appear in the header */
	position: inherit; /* ensures the header stays on screen at the top of the webpage */
	/*display: inherit;*/ /* if this is ever set, it needs to be the same as .myheader */
	height: inherit; /* height of header */
	top: inherit; /* prevents the header being pushed down by the margin-top in main */
	display:inline-flex;		/* the only thing which seems to work and put the logo and icon inline*/
	/*-----------------------*/
	/* moves to the correct pos */
	/*margin-top: 10px;*/
	margin-right: 20px;
	right: 0; /* this puts the text at the right */

}

/* specifically */
.myheader-user-account-icon {
	/*-----------------------*/
	/* specific settings for the text */
	font-size: 2rem;
	/*font-weight: 500;*/ /* thickness */
	color: rgb(140,140,140);
	cursor: pointer;
}

	/* make the icon as bright as possible when the mouse is over it*/
	.myheader-user-account-icon:hover {
		color: rgb(50,50,50);
	}


/* font adjustment for text in heading when developer mode on*/
.myheader-client-logo-wrapper {
	
}


/* font adjustment for text in heading when developer mode on*/
.myheader-client-logo {
	vertical-align:inherit;
	height:50px;
	padding-right:10px;
}

/*------------------------------------------*/
/* SIDEBAR */

/* sets the dimensions of the sidebar */
#mysidebar {
	position: fixed; /* puts the sidebar to a fixed position on screen */
	/*height: 100%;*/ /* ensures the height goes to the bottom of the webpage */
	height: calc(100% - 50px); /* -50 for the header*/
	width: 230px; /* set dimension of sidebar */
	transition: left .35s; /* how quickly the left transition moves from one value to another */
	left: 0; /* matches the value in JS for opening the navbar */
	/*-----------------------------------------*/
	/* background */
	/*background-image: radial-gradient(circle closest-corner at 0% 50%, rgb(250, 250, 250) 30%, rgb(137, 223, 255));*/
	/*background-image: radial-gradient(circle farthest-corner at 5% 50%, rgb(250, 250, 250), rgb(250, 250, 250), rgb(137, 223, 255));*/
	/*background-attachment: fixed;*/ /* locks the background image in place, and the content scrolls over it. Useful to prevent problems bg wrap scroll problems with very wide webpage content */
	/*background-image: linear-gradient(120deg, rgb(137, 223, 255), rgb(192, 224, 245), rgb(250, 250, 250), rgb(250, 250, 250), rgb(219, 242, 250), rgb(137, 223, 255));*/
	/*background-image: linear-gradient(120deg, rgb(137, 223, 255), rgb(192, 224, 245), rgb(250, 250, 250), rgb(219, 242, 250), rgb(255, 255, 255));*/
	background-image: linear-gradient(120deg, rgb(191, 238, 255), rgb(199, 224, 249), rgb(250, 250, 250));
	background-repeat: repeat;
	z-index: 9; /* ensure this is higher than the main content (especially when scrolling webpage) */
	/*-----------------------------------------*/
	/* prevent text being selected when double clicking toggle icon*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	/* note the collapsible icon is the width of the sidebar, and so when the vertical scrollbar is turned on,
		then the collapsible icons are overwritten by the vertical scrollbar, which triggers horizontal scrollbars
		to appear. But in this case, we don't care about the horizontal overflow, and instead turn off the horiz
		scrollbar
	*/
	/*-----------------------------------------*/
	/* control scrollbars */
	overflow-x: hidden; /* always off, as we control the entire contents of the navbar and arrange it ourselves */
	overflow-y: auto; /* turn on when necessary*/
}


	#mysidebar.navbar-open {
		left: 0;
	}

	#mysidebar.navbar-closed {
		left: -230px;
	}


	/* general list styling */
	#mysidebar ul {
		list-style-type: none; /* gets rid of the bullet point at the start of the line*/
		padding-left: 0; /* pushes the start of all content to the right */
	}


	/* navbar section headers */
	#mysidebar .dropdown-header {
		color: rgb(0, 0, 0); /* navbar section header color*/
		font-weight: 500;
		font-size: 16px;
	}

	/* divider between sections of the navbar */
	#mysidebar .dropdown-divider {
		border-width: 1px;
		border-color: rgb(9,84,152);
	}


	/* navbar links */
	#mysidebar .my-nav-link {
		color: rgb(20, 20, 20); /* text color for navbar items */
		font-weight: 400;
		padding-left: 40px;
		padding-right: 0; /* provides the max space for any notification badges */
	}

	/* currently active navbar item (class assigned in aspx files, to the respective navbar item) */
	#mysidebar .curNav {
		/*background-color: rgb(120,20,135);*/
		background-color: rgb(133,198,236);
	}


	/* when mouse hovers over a navbar item */
	#mysidebar .my-nav-link:hover {
		background-color: rgb(253, 231, 136);
		/*border: 2px;
			border-style:outset;
			border-color: rgb(220,180,180);*/
		color: rgb(20,20,20);
		font-weight: 600;
	}

	/* set the width of the navbar scrollbar*/
	#mysidebar::-webkit-scrollbar {
		width: 10px;
	}

	/* base colour of the track that the navbar scrollbar occupies */
	#mysidebar::-webkit-scrollbar-track {
		/*background-image: linear-gradient(120deg, rgb(40, 40, 120), rgb(180, 50, 50));*/
		background-color: rgb(0,113,179);
	}

	/* set the navbar 'handle' colour */
	#mysidebar::-webkit-scrollbar-thumb {
		background-image: linear-gradient(120deg, rgb(126, 202, 234), rgb(208, 250, 255));
	}


/* makes the version number appear at the bottom right of the sidebar */
#version {
	color: rgb(0,0,0);
	/*position: fixed;*/
	bottom: 0;
	width: 230px;
	text-align: right;
	font-size: 0.9rem;
	padding-right: 14px;
	/*z-index: 9;*/ /* ensure this is higher than the main content (especially when scrolling webpage) */
	transform: translate(0, -16px);
}


/* positions the collapsible icon for navbar headings */
.navbar-collapse-icon {
	margin: 10px 0 0 0;
	color: rgb(170,170,180);
	font-size: 1.4rem;
	position: absolute;
	width: 230px;
	text-align: right;
	padding-right: 18px;
}

	.navbar-collapse-icon:hover {
		cursor: pointer;
	}

/* removes the default of hiding the badge, if the 'innerHTML' is blank */
.badge:empty {
	display: initial;
}

/* for 'number of payees/funding/payments waiting for approval' badge */
.badge-navbar {
	background: rgb(233, 60, 60);
	/*position: relative;*/
	margin-left: 10px;
	/*top: -14px;*/
	/*left: 8px;*/
	color: rgb(240,240,240);
	font-size: 85%;
	font-weight: 500;
}

/*------------------------------------------*/
/* MAIN CONTENT */
#main {
	transition: margin-left .35s;
	width: auto; /* this ensures the main content scales with the browser window */
	height: auto;
	z-index: 0; /* ensures all main content is beneath the sidebar and header (especially when scrolling webpage)*/
	/*-----------------------------------------------------*/
	/* set padding between the header, navbar and browser edges */
	padding-top: 20px; /* amount of space between the top of the header, and the main content */
	padding-left: 2%; /* amount of space between the right of the sidebar, and the main content */
	padding-right: 2%; /* amount of space between the right edge of browser, and content */
	margin-right: auto;
	/*-----------------------------------------------------*/
	/* separates header bar and main content */
	margin-top: 50px; /* pushes both the main content (and sidebar if not explictly set) down. Must be same as (1) */
	/*-----------------------------------------------------*/
	/* values adjusted in JS when navbar opens/closes*/
	margin-left: 230px; /* matches the value in JS for opening the navbar */
}

	/* set position of #main area, when navbar is open*/
	#main.navbar-open {
		margin-left: 230px;
	}


	/* set position of #main area, when navbar is closed*/
	#main.navbar-closed {
		margin-left: 0;
	}


/* used for displaying error messages which occur outside of the normal page processing (i.e. have no navbar or header displayed) */
#mainNoNavbar {
	padding: 2%;
}


/*-----------------------------------------------------------------------*/
/* defines the colours for the types of AFEX error message */
.AFEXError {
	background-color: rgb(255, 0, 0);
	background-color: rgba(255, 0, 0, 0.3);
	margin-bottom: 2px;
	font-weight: 500;
	padding-left: 20px;
}

/* UNUSED */
/*.AFEXSaved {
	background-color: rgb(0, 255, 0);
	background-color: rgba(0, 255, 0, 0.3);
	margin-bottom: 2px;
	font-weight: 500;
	padding-left: 20px;
}


.AFEXWarning {
	background-color: rgb(255, 255, 0);
	background-color: rgba(255, 255, 0, 0.3);
	margin-bottom: 2px;
	font-weight: 500;
	padding-left: 20px;
}*/

/* shape of "Messages from AFEX" card */
.afex-messages {
	max-width: 700px; /* default width all form components*/
	margin: auto; /* generate scroll boxes when browser width small*/
}


/*====================================================================================*/
/* INVOICE ICONS*/
/*---------------*/

/* common styling used for funding and remittance icons, which shows a tick when the remittance is paid */

.invoice-outer {
	/*text-align: initial;*/ /* removes any conflicting text-align that could alter the positioning of the $ */
	position: relative; /* so the inner absolute elements will be based on this position*/
	display: inline-block; /* allows text to follow before and after the icon */
	/*width: 68px;*/ /* set the width of the box we want to encapsulate the icon */
	height: 42px; /* changes the height of the line, and how text wraps under it*/
	/*vertical-align: -50%;*/
	line-height: initial; /* removes any conflicting line height that could alter the positioning of the $ */
}

.invoice-mask {
	position: absolute;
	color: white;
	background-color: white;
	font-size: 1.4em;
	left: 19px;
	top: -2px;
}

.invoice-tick {
	position: absolute;
	color: rgb(0, 200, 0);
	top: -10px;
	left: 11px;
	font-size: 1.25em;
}


/*====================================================================================*/
/* DATE PICKER   */
/*---------------*/

/* ensures the title spans the entire width of the date picker which is underneath it. This
	allows centering of the title
*/
.datepicker-title {
	display: block;
	background-color: rgb(255, 251, 150);
	font-weight: 500;
	font-size: 1.2em;
	line-height: 1.2em;
}

/* sets colour of disabled (i.e. non-selectable) dates*/
.datepicker table tbody tr td.disabled {
	background-color: rgb(255 128 128);
	color: black;
}


/*====================================================================================*/
/* TABS   */
/*---------------*/

/* tab when active*/
.nav-tabs .nav-link.active {
	border-top-color: rgba(0,0,0,0.5);
	border-left-color: rgba(0,0,0,0.5);
	border-right-color: rgba(0,0,0,0.5);
	/* doesn't work for some reason*/
	/*	border-color: rgba(0,0,0,0.5);
	border-bottom-none;*/
}

/* tab when mouse over it*/
.nav-tabs .nav-link:hover {
	border-color: rgba(0,0,0,0.25);
}

/* separator between tabs and content*/
.nav-tabs {
	margin-top: 10px; /* add spacing between top of tabs and content above it */
	border-bottom: 1px solid rgba(0,0,0,0.5); /* defines border line between tabs and content*/
	margin-bottom: 10px; /* add a bit of spacing between border line and content*/
}


	/* background tab colour*/
	.nav-tabs .nav-link {
		background-color: rgba(128,128,128,.2);
	}

	/* Changes the text colour of the tab text */
	.nav-tabs a.nav-link {
		color: #495057; /* same colour as the selected tab */
	}


/*====================================================================================*/
/* PAYMENTS TABLE   */
/*---------------*/

/* used on at least the dashboard and approve payments ad-hoc table */
.amount-highlight {
	background-color: rgba(180,180,180, 0.5);
}

/*====================================================================================*/
/* TOOLTIPS */
/*----------*/


/* to ensure tooltips stay inside code area
	https://stackoverflow.com/questions/40905372/how-to-ensure-a-tooltip-stays-within-the-browser-visible-area
*/

/* These are used instead of Bootstrap's version, because I want more control over them, including
	their placement. With BS tooltips, they appear too near icons, causing an overlap with the trigger
	area and the tooltop, causing them to quickly flicker on and off.
*/


/* Main Tooltip container */
.egp-tooltip {
	position: relative;
	/* don't use because it shortens the dropdown box. You could use width:100% but
		its unnecessary to have both when you can just remove the inline-block */
	/*display: inline-block;*/
	/*border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
}


/* additional CSS */
.egp-tooltip-dropdown {
	/* nothing yet*/
}


/* additional CSS */
.egp-tooltip-button, .egp-tooltip-icon {
	display: inline-block;
	/*border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
}


	/* Tooltip text */
	.egp-tooltip .egp-tooltiptext {
		/*visibility: hidden;*/ /* needed, to reduce the size of the hitbox when not hovering over it */
		/*width: 100px;*/	/* not needed because its oerwritten by a direction */
		background-color: white;
		color: black;
		text-align: center;
		padding: 0 5px; /* how tight the border box is around the tooltip */
		/*border-radius: 6px;*/ /* curves the edges of the tooltip box*/
		/* Position the tooltip text - see examples below! */
		position: absolute;
		z-index: 1;
		border: 1px solid black;
		/* fade in*/
		opacity: 0;
		transition: opacity 0.5s;
		pointer-events: none; /* to prevent the tooltip staying on when the pointer is over it*/
	}

	/* Show the tooltip text when you mouse over the tooltip container */
	.egp-tooltip:hover .egp-tooltiptext {
		/*visibility: visible;*/
		opacity: 1;
		pointer-events: none;
	}


	.egp-tooltip .egp-tooltiptext.egp-tooltip-left {
		top: -5px;
		right: 105%;
	}


	/* tooltip arrow NOTE: for some reason, removing common elements doesn't work. Might be to do with how the ::after works? */
/*	.egp-tooltip .egp-tooltiptext.egp-tooltip-bottom::after {
		content: " ";
		position: absolute;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent transparent black;
	}*/


		.egp-tooltip .egp-tooltiptext.egp-tooltip-left::after {
			content: " ";
			position: absolute;
			top: 50%;
			left: 100%; /* To the right of the tooltip */
			margin-top: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent transparent black;
		}


	.egp-tooltip .egp-tooltiptext.egp-tooltip-right {
		top: -5px;
		left: 105%;
	}

		.egp-tooltip .egp-tooltiptext.egp-tooltip-right::after {
			content: " ";
			position: absolute;
			top: 50%;
			right: 100%; /* To the left of the tooltip */
			margin-top: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent black transparent transparent;
		}


	.egp-tooltip .egp-tooltiptext.egp-tooltip-top {
		/*width: 100px;*/
		bottom: 100%;
		left: 50%;
		margin-left: -50px; /* Use half of the width to center the tooltip */
	}

		.egp-tooltip .egp-tooltiptext.egp-tooltip-top::after {
			content: " ";
			position: absolute;
			top: 100%; /* At the bottom of the tooltip */
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: black transparent transparent transparent;
		}


	.egp-tooltip .egp-tooltiptext.egp-tooltip-bottom {
		/* width: 100px; */
		top: 100%;
		left: 50%;
		margin-left: -50px; /* Use half of the width to center the tooltip */
	}

		.egp-tooltip .egp-tooltiptext.egp-tooltip-bottom::after {
			content: " ";
			position: absolute;
			bottom: 100%; /* At the top of the tooltip */
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent black transparent;
		}