/* This is the sidebar code */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: #f0f0f0; /* standard colour 5B2C6F
color: white;
overflow-x: hidden;
transition: 0.5s;
/* padding-top: 60px; */
}

.sidebar div {
padding: 8px 8px 8px 30px;
font-size: 12px;
color: white;
display: block;
transition: 0.5s;
cursor: pointer;
}

.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 12px;
}

.openbtn {
font-size: 12px;
cursor: pointer;
background-color: lightblue;
}

#main {
transition: margin-left .5s;
}

.sidenav .active { 
	background-color:  #5B2C6F;	/*this is the Home button color originally #2196F3*/
	color: white;				/*this is the Home button text color*/
	font-size: 12px;			/* This sets the size of the font used in the HOME button in the Side Nav bar */
} 

.sidenav {                      /* This section sets the sidebar  */
	height: 100%;				/* determines the bar height WORKS FINE */
	width: 140px;				/* determines the bar width WORKS FINE */
	position: fixed;			/* determines if the bar is fixed to left of screen - float will set it to the left margin of                         main text WORKS FINE */
	z-index: 1;				    /* sets image in either background position [-] or foreground position [+] */
	top: 38px;					/* This sets the height of the Side Nav bar from the top of the screen WORKS FINE */
	left: 0;					/* determines the bar distance from left of screen WORKS FINE */
	background-color: #5B2C6F;	/* This sets the colour of the Side Nav bar */
	overflow-x: hidden;		    /* overflow-x property specifies scroll, hidden, auto or visible whether to clip the content, add                         a scroll bar, or display overflow content of a                          block-level element, when it overflows at the                           left and right edges. */
	padding-top: 20px;			/* to generate space around an element's content inside of any defined borders - top, right,                             bottom, left in that order in px */
	color: white;               /* This controls the colour of "Predictive Accounting" at the top of the sidnav WORKS FINE                            */
}
.p2 {
  	text-align: right;          /* Sets the alignment right, left or center WORKS FINE */
}

.sidenav a {
	padding: 6px 8px 6px 16px;	/* sets the space above, from right, below, left WORKS FINE */
	text-decoration: none;		/* Set different text decorations for <h1>, <h2 >, and <h3> param = overline, line-through,                             underline, underline overline */
	text-align: right;          /* Sets the alignment right, left or center WORKS FINE */
	font-size: 12px;			/* This sets the size of the font used in the Side Nav bar */
	color: #F8F9F9;			    /* This sets the colour #F8F9F9 turquiose of the font used for the Side Nav bar WORKS FINE */
	display: block;			    /* specifies the display behavior (the type of rendering box) of an element. Displays an                               element as a block element (like <p>). It starts                         on a new line, and takes up the whole width */
}

.sidenav a:hover {  	/* used to select elements when you mouse over them. */
	color: #f1f1f1; 	/* This sets the colour #f1f1f1 [off white] of the hover used in the Side Nav bar */
}

.main {
	margin-left: 10px;		/* sets the margin area on the left side of an element. */
	font-size: 8px;		/* Increased text to enable scrolling */
	padding: 0px 10px;
}

@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 12px;}
} /* used in media queries to apply different styles for different media types and devices.
	width and height of the viewport, device, orientation, resolution */