*{
	margin:0;
	padding:0;
	box-sizing: borer-box;
	
	
}

main{	 
	margin:10px 25px;	
	font-family: 'Arial';
	display:flex;
	flex-direction:column;
	color:black;
	position:relative;
	padding: 0 10px;

}

.date-boxchange {	
	width:150px;
	height:80px;
	border:black 2px solid;
	background-color:#E8E8E8;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position: absolute;
    bottom: 50%;
    right: 50%;
	z-index:1000;
	display:flex;
	

	
}
.date-boxchange a {
	color:red;
	margin-bottom:3px;
	 
}



.div1{background-color:white;
			grid-column:1/-1;  
			font-weight: bold; 
			display: flex;
			justify-content:space-between;
			color:black;
			padding:4px;
			height:13px;
			
		}
.div2{/* background-color:blue; 
			grid-row:2/5; 
			padding:10px 5px;*/
			grid-column:1/-1;  
			font-weight: bold; 
			display: flex;
			justify-content:space-between;
			color:black;
			padding: 3px 0px;		
			background-color: #d0f0c0;
			height:115px;
align-items: flex-start;			
		}
		
.div3{/* background-color:#228B22; */		 
		background-color: #d0f0c0;
		height: 31.5vh;
		}
		
		
.div4{/* background-color:yellow; */
		    background-color: lightgreen;
			height: 15px;			
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 3px 0px;
		}
.div5{
			 background-color: #d0f0c0;
			display: flex; 
			justify-content: space-between;
			align-items: center;
			padding: 3px 0px;	
			height:100px;						 
			}
.div6{    			 
			background-color: #8CEEE7;
			width: 100%;
			padding: 3px 0px;
			color:black;
			font-weight: 550;
			height:20px;			
		}
.div7{/*background-color:green;
			color:white;
			grid-column:1/-1;*/
			 background-color: #d0f0c0;
			display: flex; 
			justify-content: space-between;
			align-items: center;
			padding: 3px 0px;
	
		}
		
	.inputBlackSale{
		outline:none;
		border:none;
		background-color:#ccffee;
		padding:3px;
		
	    padding:2px 5px;
    font-size: 14px;
    font-weight: 400;
    color: #333;	
    border-radius: 3px;
    border: 1px solid #aaa;
    
		
	}
	.inputBlackSaleh{
		outline:none;
		border:none;
		background-color:#e6fff7;
		padding:3px;
		height:16px;
	    padding:2px 5px;
    font-size: 12px;
    font-weight: 400;
    color: #333;	
    border-radius: 3px;
    border: 1px solid #aaa;
    
		
	}
	.inputBlackSale:focus {
		background-color:black;
		color:white;
	}

	.inputBlackSaleh:focus {
		background-color:black;
		color:white;
	}	
.btnRefreshAction {
		background-color: #2FC332;
		padding: 2px 5px;
		font-size:15px;
		color: #FFF;
		text-decoration: none;
		border-style:none;		 
		
	}

.btnBottom {
  background-color: #4CAF50; /* Green */
  
		line-height: 1.0;
		border-radius: 0.25rem; 
		border:none;
  color: white;
   
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 1px 1px;
  cursor: pointer;
  height:25px;
  width:140px;
}

.btnBottom:hover {
	background-color:limegreen;
	border-color: #da7600;
    color: #fff;
}


	
   #mytable {
	   table-layout:fixed; !important
   }

	table {

	  width: 100%;

	  text-align:right;
	  table-layout:auto;

	}

	th  {
		
	  text-align: center;
	  padding: 2px;
	  background-color:#4dffc3;
	  color:black;
	  font-size:12px;			
	  position: sticky;
	  top: 0;
	 /*box-shadow: 0px 0px 0 2px #ffff4d; */
	 border-bottom:1px solid black;
	}
		
	td {
	  text-align: left;
	  color:black;
	  font-size:12px;
	  
	}


	tr:nth-child(even) {
		background-color: #ccffee;
		 
	}





	.table-heading {
		width:100%;
		position:relative;
		border-top:2px black solid;
		border-bottom:1px black solid;
		background-color:none;
		
	}
	.table-body {
		width:100%;

		/* overflow:scroll; */
	}
	
/* Set a fixed scrollable wrapper */
.tableWrap {
	background-color:#ccffee;
  height: 31.5vh;
  border: 1px solid black;
  overflow-x: auto;
  overflow-y: auto;
}

.summaryItem {
	display:flex;
	justify-content:left;
	align-items:center;
	margin-bottom:5px;
	height:20px;
}
.summaryItem2 {
	display:flex;
	justify-content:left;
	align-items:center;
	margin-bottom:5px;
	height:15px;
}
.invoiceSummary {
	width:250px;
}
.middleContainer {
	border:1px black solid;
	width:430px;
	height:100px;
	margin:10px;
}
			
.rightIconTopBar {
	display:flex;
	justify-content:center;
	align-items:center;
}

		 .leftContainer {
			 margin: 0 0 2px 0;
		 
		 justify-content:space-between;
		 align-items:flex-end;}

		
		.topVoucher {
			display:flex;
			justify-content:space-between;
			align-items:center;
		}

		.addBtn {
			border-radius:3px;
			padding:3px 7px;
			border-style:none;
			background-color:green;
			color:white;
		}
		
		.addBtn:hover {
			background-color:limegreen;
			color:black;
		}
#yesquit{
	outline:none;
	border:none;
}		
				
		.removeBtn {
			color:red;
			padding: 3px 7px;
		}
		

	
		#narration {
			width:250px;
			height:40px;
			
		}
				
		.valueTotal {
			align-self:center;
			height:15px;
			width:100%;
			padding:2px;
			background-color:#4dffc3;
			color:black;
			
			text-align:right;
			outline:none;
			border:none;
			font-size:14px;
			font-weight:bold;
		}

		
		.input-total-borders {
			/*border-top:2px solid black;*/
			border-bottom:1px solid black;
		}
		
		

		 
		 .narrationText {
			 text-align:left;
		 }
		 

		
		
		
		
		



		

.btnAddAction:hover {
	background-color:limegreen;
}

	.btnAddAction {
		font-size:12px;
		margin:0;
		background-color: green;
		padding: 2px 5px;
		color: #FFF;
		margin-right:5px;
		text-decoration: none;
	}



	.btnDeleteAction {
		background-color: #D60202;
		padding: 2px 5px;
		font-size:10px;
		color: #FFF;
		text-decoration: none;
	}
		.div55{    			 
			display:flex;
			justify-content:space-between;			
			color:red;
		}

	.btnEditAction {
		background-color: #2FC332;
		padding: 2px 5px;
		font-size:10px;
		color: #FFF;
		text-decoration: none;
	}
		
fieldset { 
border:none;

} 

fieldset legend { 
color:Black;
padding: 1px; 
font-size:16px;
font-weight: bold; 
margin:3px;	
}



label {
text-align:right;
padding-right:5px;
color:black;
font-size:15px;
display:block; 
}

.label_b{
	width:70px;
}
.label_c{
	width:60px;
}
.label_d{
	width:130px;
}
.label_80{
	width:80px;
}
.label_100{
	width:100px;
}

label:after { content: ": " } 



input {
color:#2f3542;
display:block;

}


.input_60{
	width:70px;
}

.input_a{
	width:390px;
}
.input_b{
	width:140px;
}
.input_c{
	width:55px;
}
.input_d{
	width:180px;
}
.input_300{
	width:100%;
}
.input_150{
	width:150px;
}


.labelInputClass {
display:flex;
align-items:center;
padding: 5px 0;
}



.sendBtn{
	border-style:none;
	border:0;
	background:#3CB371	;
	color:white;
	border-radius:5px;
	width:auto;
	margin-left:10px;
	padding:5px 10px;
	cursor:pointer;
	
}

.sendBtn:hover{
		background:green;
	}
	
	
	.leftTopDiv1 {
		display:flex;
		
		padding: 10px 10px 10px 0;
	}
	
	.labelVrNo80 {
		text-align:left;
		padding:0;
	}
	
	.labelClassInput {
		padding:0;
		margin-left:5px;
		outline:none;
	}
	
	.receiptTitle {
		background-color:#800000;
		color:white;
		weight:bold;
		padding: 0 35px;
	}
	
	.InputVr60 {
		outline:none;
		border:none;
		background-color:#ccffee;
		text-align:left;
	}
	
	.rightIconTopBar {
		flex-direction:column;
		align-items:flex-end;
	}
	
	.dayClass {
		font-size:12px;
	}
	
	.inputBlack{
		outline:none;
		border:none;
		background-color:#ccffee;
		padding:3px;
	}
	
	.inputBlack:focus {
		background-color:black;
		color:white;
	}
	
	.tableInputBlack {
		outline:none;
		border:none;
		background-color:#ccffee;
		padding:3px;
	}
	
.middiv1 {
		outline:none;
		border:none;
		background-color:#ccffee;
		padding:3px;
		width:100%;
		height:15px;
		left:100px;
	}	
	
	.tableInputBlack:focus {
		background-color:black;
		color:white;
	}
	
	.inputBlack::selection {
	  background: white; /* WebKit/Blink Browsers */
	}
	.inputBlack::-moz-selection {
	  background: white; /* Gecko Browsers */
	}

	.narration-text-area {
		outline:none;
		border:none;
		background-color:#ccffee;
	}
	
	.narration-text-area:focus {
		background-color:black;
		color:white;
	}
	
	.delete_btn {
		border-style:none;
		width:100%;
		height:auto;
		font-weight:bolder;
		color:red;
		background-color:#ccffee;
	}
	
  ::selection {
  color: white;
  background-color: black;
}

	.add_btn {
		border-style:none;
		width:100%;
		height:auto;
		font-weight:bold;
		color:green;
		background-color:#ccffee;		
        font-size: 15px; /* Set a font size */
	}

	
	.account-balance-class {
				display:flex;
		flex-direction:column;
				font-size:14px;
		width:100%;
		padding-left:10px;
		justify-content:space-between;
				}

		.current-balance-class {
		padding-right:15px;
		}
	
.labelLeftAlign {
text-align:left;
}
.table-scroll {
/* 	overflow:auto; */
	height:235px;
}

.accept-box {
	
	width:100px;
	height:60px;
	border:black 2px solid;
	background-color:#E8E8E8;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position: absolute;
    bottom: 0px;
    right: 0px;
	z-index:1000;
	display:flex;
	
}
.delet-box {	
	width:100px;
	height:60px;
	border:black 2px solid;
	background-color:#E8E8E8;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position: absolute;
    bottom: 50%;
    right: 50%;
	z-index:1000;
	display:flex;
}

.date-box {	
	width:100px;
	height:60px;
	border:black 2px solid;
	background-color:#E8E8E8;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position: absolute;
    bottom: 50%;
    right: 50%;
	z-index:1000;
	display:flex;
}


.accept-box a {
	color:black;
	margin-bottom:7px;
	margin-top:5px;
}

.delet-box a {
	color:black;
	margin-bottom:7px;
	margin-top:5px;
}

.paraAccept {
	display:flex;
	align-items:center;
}
.paraDelet {
	display:flex;
	align-items:center;
}

.paraAccept a{
	margin-right:3px;
	color:red;
}

.paraDelet a{
	margin-right:3px;
	color:red;
}



.options{
	position:absolute;
	width: 100%;
	bottom: 0;
	left:0;
}




.cover{
	width:100%;
	height:100%;
	position:absolute;
	display:none;
	z-index:999;
	background-color: rgba(0,0,0,0.15);
	top:0;
	left:0;
}





/* Set header to stick to the top of the container. */


/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */


/* Basic Demo styling */
.addressDetails  {
	width:350px;
	display:flex;
	justify-content:space-between;
	flex-direction:column;
}

.mobMaster {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	width:350px;
}

.gstMaster {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	width:350px;
}
.mobDetails {

	display:flex;
	justify-content:space-between;
	align-items:center;
}
 .cityDetails {

	display:flex;
	justify-content:space-between;
	align-items:center;
}

.addressMaster {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}
.addressInfo {

	display:flex;
	justify-content:space-between;
	flex-direction:column;
	padding:5px;

}

.addressDetailstop {
	display:flex;
	
}

.inputAddress {
		background-color:#4dffc3;
		color:black;
		font-weight:bold;
		margin-bottom:3px;
		    height: 10px !important;
			margin-left:5px;
			width:350px ;
			margin-left:5px;
}

.addressDetailsTwo {
	display:flex;
	justify-content:space-between;
	align-items:center;
	
}



.inputSum {
	height:10px !important;
	text-align:right;
	width:100px;
}





.tableContentBottom:last-child {
	display:none;
}



.saveContainer {
	display:flex;
	margin-right:20px;
	 
}

.checkContainer {
	 display:block;
	margin-right:20px;
	 
}




.invalid {
	color: black;
	background-color:red;	
	z-index: 99;
}
.invalid:focus{
	outline: none;
	z-index: 2:
}
.invalidcyan {
	color: black;
	background-color:cyan;	
	z-index: 99;
}
.invalidcyan:focus{
	outline: none;
	z-index: 2:
}

.master-body {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}

.sidebar {
	height:100%;
	width:8%;
	display:flex;
	align-items:center;
	justify-content:space-around;
	flex-direction:column;
	
}

.btn-sidebar {
	padding:2px;
	text-align:center;
	border-color:white;
	color:black;
	width:100%;
	Height:30px;
	background-color:#DCDCDC;
}
.inputBlackWhite {
	outline:1px solid black;
		border:none;
		background-color:white;
		padding:3px;
		
	
}

.inputBlackWhite:focus {
		background-color:black;
		color:white;
	}
	
.btnGreen:focus {
		
		outline:none !important;
		 padding: 2px 13px;
   
    border-radius: 5px;
   border:2px green solid;
    background-color: white !important;
    color: green;
	outline:none;
	}
	
.flex { 
display:flex;
align-items:center;
justify-content:flex-start;
margin-bottom:10px;
}
.h3 {
	background-color:#40d940 !important;
	 padding: 8px 20px; 
	color:white;
	 
}
	.btnSearch {
		padding: 5px;
		color:black;
		border-style:none;
		border-radius: 5px;
		margin: 0px 5px;
		background-color:#40d940;
		float:right;
		 margin-top:5px;
		margin-right:20px;
	 font-weight: bold;
	 width:100px !important;
	  cursor: pointer;
	 
	}
	
.container2{
    position: relative;
    max-width: 1600px;
    width: 100%;
    border-radius: 6px;
    padding: 5px;
    background-color: #fff;
  /*  box-shadow: 0 5px 10px rgba(0,0,0,0.1);	*/
	box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
.container3{
    position: absolute;
    max-width: 900px;
    width: 30%;
    border-radius: 6px;
    padding: 15px 20px;
    margin: 0 15px;
    background-color: #e6ffc1;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	margin-left: 300px !important;
	margin-top:150px !important;
	 z-index: 9700 !important;	
}

.container{
    position: absolute;
    max-width: 750px;
    width: 100%;
    border-radius: 6px;
    padding: 15px 20px;
    margin: 0 15px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	margin-left: 200px !important;
	 z-index: 9700 !important;	
}

.container3 form .fields{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container3 form .fields .input-field{
    display: flex;
    width: 600px;
    flex-direction: column;
    margin: 4px 0;
}
.container3 img {
    width: 20px;
	margin-top: 7px !important;	
	background-color:transparent;
	margin-right: 5px !important;
	float:right;
	color:Green !important;
	
}
.container3 img:hover{
    background-color: #265df2;
}
.container3 header{
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.h33 {
	background-color:#ADFF2F !important;
	 padding: 8px 20px; 
	color:black;	 
}
.container header{
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.container header::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 100%;
    border-radius: 8px;
    background-color: #4070f4;
}
.container form{
    position: relative;
    margin-top: 16px;
    min-height: 390px !important;
    background-color: #fff;
    overflow: hidden;
	
}
.container form .form{
    position: absolute;
    background-color: #fff;
    transition: 0.3s ease;
}
.container form .form.second{
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
}
form.secActive .form.second{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
form.secActive .form.first{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
}
.container form .title{
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold !important;
    margin: 6px 0;
    color: Red;
}
.container form .fields{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
form .fields .input-field{
    display: flex;
    width: calc(100% / 3 - 15px);
    flex-direction: column;
    margin: 4px 0;
}

.input-field label{
    font-size: 14px;    
    color: #2e2e2e;
	font-weight: bold !important;
text-align:left;
padding-right:5px;
color:black;
display:block; 
	
	
}
.input-field input, select{    
    font-size: 14px;
    font-weight: 400;
    color: #333;	
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 0 15px;
    height: 25px;
    margin: 8px 0;	
	background-color:#ccffee;
}
.container input[type=text]:focus, .container input[type=password]:focus {
  background-color: #F8F8F8;
  outline: none;
}
.input-field input :focus,
.input-field select:focus{
    box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field select,
.input-field input[type="date"]{
    color: #707070;
}
.input-field input[type="date"]:valid{
    color: #333;
}

.container form .btnText{
    font-size: 14px;
    font-weight: 400;
}
form button:hover{
    background-color: #265df2;
}
form button i,
form .backBtn i{
    margin: 0 6px;
}
form .backBtn i{
    transform: rotate(180deg);
}
form .buttons{
    display: flex;
    align-items: center;
}
form .buttons button , .backBtn{
    margin-right: 14px;
}
.container img {
    width: 20px;
	margin-top: 7px !important;	
	background-color:transparent;
	margin-right: 5px !important;
	float:right;
	color:Green !important;
	
}
.container img:hover{
    background-color: #265df2;
}

@media (max-width: 750px) {
    .container form{
        overflow-y: scroll;
    }
    .container form::-webkit-scrollbar{
       display: none;
    }
    form .fields .input-field{
        width: calc(100% / 2 - 15px);
    }
}

@media (max-width: 550px) {
    form .fields .input-field{
        width: 100%;
    }
}