html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -webkit-tap-highlight-color: transparent;
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */ }
body {
	font-family:Arial;
}
h2 {
	font-size:1.4em;
	font-weight:bold;
	margin-bottom:20px;
}
h3 {
	font-size:1.1em;
	font-weight:bold;
	margin-bottom:40px;
}
p {
	margin-bottom:20px;
}
a {
	
}
header{
	height:64px;
 	background:#0775d3; 
/* 	background:#800000; */
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:10;
	color:#fff;
}
header p{
	margin:0 0 0 16px;
	font-weight:bold;
	line-height:64px;
}
header p span{
	font-weight:normal;
}
header .left{
	float:left;
}
header .right{
	float:right;
}
header .button{
	padding:12px 20px !important;
	margin:12px 12px 0 0 !important;
}
nav{
	margin-top:64px;
	width:275px;
	background:#A9A9A9;
	height:100%;
	top:0;
	bottom:0;
	position:absolute;
	z-index:2;
	color:#fff;
	display:block;
}
nav div{
	text-align:center;
	width:275px;
	padding:20px 0;
	display:block;
}
nav a{
	color:#fff;
	position:relative;
	display:block;
	text-decoration: none;
}
nav ul{
	width:275px;
	background:#3d6dae;
}
nav ul li{
	border-bottom:1px solid #fff;
	margin:0 0 0 0;
	width:259px;
	position:relative;
	padding:0 0 0 16px;
}
nav ul li a{
	padding:16px 0 16px 0;
	cursor:pointer;
}
nav ul li.selected, nav ul li:hover{
	background:#557eb5;
}
.selected > a, a.selected, nav ul li:hover > a{
	color:#221b44;
}
nav ul li ul{
	width:243px;
	background:#557eb5;
	padding:0 0 0 16px;
	display:none;
}
nav ul li ul li{
	border-bottom:none;
	padding:0 0 0 0;
	font-size:0.8em;
	width:243px !important;
}
nav ul li ul li:last-child a{
	padding:7px 0 16px 0;
}
nav ul li ul li a{
	padding:7px 0;
	width:227px;
}
section#main{
	margin:134px 0 0 345px;
	padding-right:60px;
}
textarea{
	background:#ebf2f5;
	width:500px;
	height:300px;
	resize:none;
	border:none;
	outline;none;
	padding:30px;
	margin:0 0 30px 0;
}
input{
	background:#ebf2f5;
	padding:10px 10px;
	margin:0 0 30px 0;
	border:none;
	outline:0 none;
}
td{
	
}
b{
	font-weight: bold;
    display: block;
    margin: 0 0 16px 0;
}

button {
	border: 1px solid #666; 
	border-radius: 5px; 
	padding: 15px; 
	font-size: 12px;
	font-weight: bold;
	width: auto;
	margin:0 10px 0 0;
	background: #cccccc;
}

select{
	margin:0 0 30px 0;
}
button:hover, .button.white:hover, input[type=button]:hover, input[type=submit]:hover{
	background:#191970;
	color:#fff;
}
.button.white{
	background:#fff;
	color:#221b44;
}
button.cancel, input[type=reset]{
	background:#a5a8a9;
}
button.cancel:hover, input[type=reset]:hover{
	background:#d62a2a;
	color:#fff;
}
.clearline{
	clear:both;
}

.siteName{
	margin-left:20px;	
	color:#333;
}
.deviceName{
	margin-left:40px;	
	color:#666;
}
.codeFont{
	font-family: monospace;
}

#logoDiv {
	margin-top:30px; 
	margin-bottom:30px
}
#logoDiv {
	margin-top:30px; 
	margin-bottom:30px
}
#companyNameDiv{
	margin-left:30px;
}

@media screen and (max-width:922px) and (min-width: 661px) {
	header{
		position:relative;
		width:auto;
	}
	nav div{
		display:none;
	}
	section#main{
		margin:64px 0 0 295px !important;
	}
	nav{
		width:225px;
		display:block;
	}
	nav div{
		display:block;
		width:225px;
	}
	nav ul{
		width:225px;
	}
	nav ul li{
		width:209px;
	}
	nav ul li ul{
		width:193px;
	}
	nav ul li ul li{
		width:193px !important;
	}
	nav ul li ul li a{
		width:177px;
	}
}
@media screen and (max-width:992px) and (min-width: 700px){
	textarea{
		width:330px !important;
	}
}
@media screen and (max-width:700px) and (min-width: 661px){
	textarea{
		width:300px !important;
	}
}
@media screen and (max-width:660px) and (min-width: 320px){
	h2{
		margin-bottom:20px;
	}
		header .left p span{
		display:none !important;
	}
	header{
		position:relative;
		width:auto;
	}
	header .left{
		float:none;
		width:auto;
		text-align:center;
/* 		background:url('../img/menu.png') 16px 22px no-repeat; */
	}
	header .right{
		display:none;
	}
	nav div{
		display:none;
	}
	nav{
		margin-top:0;
		width:auto;
		height:auto;
		position:relative;
		display:none;
	}
	section#main{
		margin:30px 0 0 0 !important;
		width:auto;
		padding:0 30px 30px;
	}
	textarea{
		width:260px;
		height:200px;
	}
	nav ul{
		width:auto;
	}
	nav ul li{
		width:auto;
	}
	nav ul li ul{
		width:auto;
	}
	nav ul li ul li{
		width:auto !important;
	}
	nav ul li ul li a{
		width:auto;
	}
}

#receiptsTable table{
	border-collapse: collapse;
}
#receiptsTable td,th{
	padding: 6px;
}
#receiptsTable tr{
	cursor: pointer;
}
#receiptsTable tbody tr:hover{
    background: #eee !important;
}
#receiptsTable th{
	text-align:left
}

:disabled{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
table.reportTable thead {
	background: #25528e;
	background: #3d6dae;
	color: white;
}
table.reportTable tbody{
	cellspacing: 10px;
	background: #3d6dae;
	background: #ebf2f5;
	color: black;
	font-size: 0.8em;
}

table.reportTable tbody td {
	text-align: center !important;
}
table.reportTable thead td {
	text-align: center !important;
}
table.reportTable tr td:first-child {
    min-width: 200px;
	max-width: 200px;
	text-align: left !important;
}
table.reportTable td, table.reportTable th {
	border: none;
	padding: 10px 20px;
}
table.reportTable td:first-child {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.reportTable tbody tr:hover {
	background-color: #dceff7;
}
table.reportTable tbody td.dollarTd {
	text-align: right !important;
    min-width: 60px;
	max-width: 60px;
}


/* my new css below*/
form {
	margin-top: 10px;
}

label {
	font-size: 16px; 
	width: 100px; 
	display: block; 
	text-align: right;
	margin-right: 10px;
	margin-top: 8px;
	margin-bottom: 8px;
}

input {
	width: 250px;
	border: 1px solid #666; 
	border-radius: 5px; 
	padding: 4px; 
	font-size: 16px;
}

.save {
	font-weight: bold;
	width: 130px; 
	padding: 5px 10px; 
	margin-top: 30px;
	background: #cccccc;
}

table {   
	border-style:none;
	width:50%;
}

tr:nth-child(even) {background: #FFFFFF}
tr:nth-child(odd) {background: #FFFFFF}

tr {
	border-style:none;
	text-align:left;	
}



 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #eae7e7; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px; /* Place content 60px from the top */
    transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
    border-top-right-radius: 20px;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 28px;
    text-decoration: none;
    font-size: 21px;
    color: #000000;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    /*color: #808080;*/
    background-color: white;
    border-radius: 15px;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    border-radius: 15px;
    font-size: 36px !important;
    margin-left: 50px;
}