@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
}
a {
	text-decoration: none;
}
.sc-aLink {
	text-decoration: none;
	color: black;
}
.sc-table {
	width: 100%;
}
.sc-tr {
	border: 1px solid black;
}
.sc-padding {
	padding: 2px 5px 2px 5px;
}
.sc-aCenter {
	text-align: center;
}
.sc-aRight {
	text-align: right;
}
.sc-td-left {
	float: left;
	width: 70%;
	padding: 2px 5px;
	cursor: pointer;
}
.sc-td-right {
	float: right;
	width: 29%;
	padding: 2px 5px;
	text-align: right;
}
#body {
	width: 380px;
	margin: 0 auto;
	height: 100vh;
}
.navBody {
	width: 380px;
	margin: 0 auto;
}
.navBody #navigation {
	width: 380px;
	height: 40px;
	display: block;
	position: absolute;
	top: 0;
	left: calc(50%-190px);
	background-color: crimson;
}
.navBody #navigation .menuButton {
	display: inline-block;
	width: 40px;
	height: 40px;
	color: white;
	background-color: transparent;
	font-weight: bold;
	float: right;
	font-size: 24px;
	text-align: center;
	border: 0px solid black;
}
.navBody #navigation .menuButton:hover {
	cursor: pointer;
}
.navBody #navigation #headTitle {
	display: inline-block;
	color: white;
	background-color: transparent;
	border: 0;
	padding: 10px;
	float: left;
	font-size: 14px;
	font-weight: 500;
}
.navBody .naviBlank {
	display: block;
	width: 380px;
	height: 45px;
}
.menu {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 101%;
	display: block;
	background-color: #E31E24;
	transition: 0.3s;
	z-index: 9999;
}
.menu a {
	width: 300px;
	display: block;
	margin: 15px auto;
	padding: 5px;
	text-align: center;
	background-color: white;
	color: black;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	box-shadow: 0px 3px 3px 1px rgba(0,0,0, 0.5);
}
.menu .hideMenu {
	width: 31px;
	padding: 0;
	display: block;
	background-color: transparent;
	color: white;
	font-size: 36px;
	margin: 15px auto;
	border: 0;
}
.menu .hideMenu:hover {
	cursor: pointer;
}
#billHead {
	width: 100%;
}
#billHead .deleveryNote {
	width: 100%;
	padding: 0px;
	background-color: black;
	color: white;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 3px;
}
#billBody .amountInWords {
	width: calc(100% - 3px);
	padding: 0 3px;
	margin: 2px 1px;
	text-align: left;
	font-weight: 500;
	margin-bottom: 3px;
	border: 1px solid black;
}
#billHead .dateBox {
	width: 100%;
	text-align: right;
	display: block;
}
#billHead .dateBox input {
	width: 70px;
	border: 0;
	text-align: right;
	font-weight: bold;
}
#billHead .dateBox input:focus {
	outline: none;
}
#billHead .numberBox {
	width: 100%;
	text-align: right;
	display: block;
}
#billHead .numberBox input {
	width: 30px;
	border: 0;
	font-weight: bold;
	text-align: right;
}
#billHead .numberBox input:focus {
	outline: none;
}
#billHead .toBox {
	display: block;
	padding-left: 2px;
}
#billHead .toBox input {
	width: 100%;
	display: block;
	padding: 3px;
	border: 1px solid gray;
	border-radius: 5px;
}
#billHead .toBox input:focus {
	outline: none;
}
#billHead .toBox button {
	width: 100px;
	display: block;
	margin: 10px auto;
	border: 0;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	background-color: #E31E24;
	color: white;
}
#billHead .toBox select {
	width: 100%;
	display: block;
	padding: 3px;
	border: 1px solid gray;
	border-radius: 5px;
}
#billHead .receiptTable {
	width: 100%;
}
#billHead .receiptTable a {
	width: 100%;
	display: block;
	text-decoration: none;
	color: black;
}
#billHead .receiptTable .tableBox {
	width: 100%;
	padding: 0;
}
#billHead .receiptTable .tableBox .thLeft {
	width: 250px;
	margin: 1px 0;
	padding: 3px;
	display: inline-block;
	border: 1px solid black;
}
#billHead .receiptTable .tableBox .date {
	width: 80px;
	margin: 1px 0;
	text-align: center;
	padding: 3px;
	display: inline-block;
	border: 1px solid black;
}
#billHead .receiptTable .tableBox .thRight {
	width: 40px;
	margin: 1px 0;
	text-align: center;
	padding: 3px;
	display: inline-block;
	border: 1px solid black;
}
#billBody {
	width: 100%;
	display: block;
	padding: 0;
}
#billBody .detailBox {
	width: 100%;
	min-height: 340px;
}
#billBody p {
	width: 100%;
	font-size: 12px;
	text-align: justify;
	text-indent: 50px;
}
#billBody .desc {
	width: 260px;
	display: inline-block;
	padding : 2px 5px;
	margin: 2px 0;
	background-color: black;
	color : white;
	text-align: center;
	border: 1px solid white;
}
#billBody .qty {
	width: 33px;
	display: inline-block;
	padding : 2px 3px;
	margin: 0;
	text-align: center;
	background-color: black;
	color : white;
	border: 1px solid white;
}
#billBody .rate {
	width: 80px;
	text-align: center;
	background-color: black;
	color : white;
	display: inline-block;
	padding : 2px 5px;
	margin: 0;
	border: 1px solid white;
}
#billBody .descV {
	width: 217px;
	display: inline-block;
	padding : 2px 5px;
	margin: 2px 0;
	background-color: black;
	color : white;
	text-align: center;
	border: 0px solid white;
}
#billBody .qtyV {
	width: 33px;
	display: inline-block;
	padding : 2px 3px;
	margin: 0 2px;
	text-align: center;
	background-color: black;
	color : white;
	border: 0px solid white;
}
#billBody .rateV {
	width: 50px;
	text-align: center;
	background-color: black;
	color : white;
	display: inline-block;
	padding : 2px 5px;
	margin: 0;
	margin-right: 2px;
	border: 0px solid white;
}
#billBody .amountV {
	width: 70px;
	text-align: center;
	background-color: black;
	color : white;
	display: inline-block;
	padding : 2px 5px;
	margin: 0;
	border: 0px solid white;
}
#billBody table {
	width: 100%;
	margin: 0;
	padding: 0;
}
#billBody table * {
	padding: 0;
	margin: 0;
}
#billBody .newDetail {
	width: 217px; 
	min-height: 24px;
	display: inline-block;
	padding : 2px 3px;
	margin: 0;
	color : black;
	font-weight: 400;
	border: 1px solid black;
	text-align: left;
}
#billBody .newQty {
	width: 33px;
	min-height: 24px;
	display: inline-block;
	padding : 2px 3px;
	margin: 0 2px;
	text-align: center;
	color : black;
	border: 1px solid black;
	font-weight: 400;
}
#billBody .newRate {
	width: 50px;
	min-height: 24px;
	text-align: center;
	color : black;
	border: 1px solid black;
	display: inline-block;
	padding : 2px 3px;
	margin: 0;
	margin-right: 2px;
	font-weight: 400;
}
#billBody .newAmount {
	width: 70px;
	min-height: 24px;
	text-align: right;
	color : black;
	border: 1px solid black;
	display: inline-block;
	padding : 2px 3px;
	margin: 0;
	font-weight: 400;
}
#billBody .descInput {
	width: 260px;
	display: inline-block;
	padding : 2px 5px;
	margin: 0;
	border: 1px solid gray;
	color : black;
}
#billBody .descInput:focus {
	outline: none;
}
#billBody .qtyInput {
	width: 33px;
	display: inline-block;
	padding : 2px 5px;
	margin: 1px 0px;
	text-align: center;
	border: 1px solid gray;
	color : black;
}
#billBody .qtyInput:focus {
	outline: none;
}
#billBody .rateInput {
	width: 80px;
	text-align: center;
	border: 1px solid gray;
	color : black;
	display: inline-block;
	padding : 2px 5px;
	margin: 0;
}
#billBody .rateInput:focus {
	outline: none;
}
.createBill {
	width: 100px;
	display: block;
	border: 0;
	background-color: red;
	color: white;
	font-size: 14px;
	text-align: center;
	padding: 5px;
	position: absolute;
	bottom: 30px;
	left: calc(50% - 50px);
	border-radius: 5px;
	
}
#billbody table * {
	font-size: 10px;
	font-weight: normal;
}
.tdBorder {
	border: 1px solid black;
	padding: 1px 5px;
}
.marginAMT {
	margin: 100px 0px;
}


/* cccc */
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 999;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}