/*<!--===========================================
=            css for bill form        =
=============================================-->*/

table.billTable thead th.sr1, table.billTable thead th.qu1,
table.billTable thead th.ar1 {
	width: 5%;
}

table.billTable thead th.de1 {
	width: 30%;
}

table.billTable thead th.pr1, table.billTable thead th.pe1 {
	width: 15%;
}

/*<!--===========================================
=            css for Net Total        =
=============================================-->*/
@media screen and (min-width: 769px){

	.secTotal{
	  height: 100%;
	  display: grid;
	  grid-gap: 7px;
	  grid-template-columns: repeat(12,1fr);
	  grid-template-rows:  repeat(2,1fr);
	  grid-template-areas:
	  ". . . . . . . n n n n n"
	  ". . . . . . . n n n n n";

	}

}


/* @media screen and (max-width: 426px){

	.secTotal{
	  height: 100%;
	  display: grid;
	  grid-gap: 7px;
	  grid-template-columns: repeat(1,1fr);
	  grid-template-rows:  repeat(1,1fr);
	  grid-template-areas:
	  "n"
	  "n";

	} */

.netTotalBill{
  grid-area: n;
}

/*===========================*/
@media screen and (min-width: 769px){

	.secTotal2{
	  height: 100%;
	  display: grid;
	  grid-gap: 7px;
	  grid-template-columns: repeat(12,1fr);
	  grid-template-rows:  repeat(2,1fr);
	  grid-template-areas:
	  "ch ch cc cc qr qr nb nb nt nt nt nt"
	  "ch ch cc cc qr qr nb nb nt nt nt nt";

	}

}


/* @media screen and (max-width: 426px){

	.secTotal2{
	  height: 100%;
	  display: grid;
	  grid-gap: 7px;
	  grid-template-columns: repeat(1,1fr);
	  grid-template-rows:  repeat(1,1fr);
	  grid-template-areas:
	  "nt"
	  "nt";

	} */

}
.netTotaChlBill{
  grid-area: ch;
}

.netTotalccBill{
  grid-area: cc;
}

.netTotalqrBill{
  grid-area: qr;
}

.netTotalNbBill{
  grid-area: nb;
}

.netTotalBill2{
  grid-area: nt;
}


/*<!--===========================================
=            css for bill info       =
=============================================-->*/
/*<!-Mobile >*/
@media screen and (max-width:425px){

	#billboxbody{
	  height: 100%;
	  display: grid;
	  grid-gap: 1px;
	  grid-template-columns: repeat(5,1fr);
	  grid-template-rows:  repeat(4,1fr);
	  grid-template-areas:
	  "d d d d d"
		"n n n n n"
	  "c c c c c"
		"c c c c c";

	}
}
/*<!-tab and laptop >*/
@media screen and (min-width:426px){
	#billboxbody{
	  height: 100%;
	  display: grid;
	  grid-gap: 7px;
	  grid-template-columns: repeat(4,1fr);
	  grid-template-rows:  repeat(2,1fr);
	  grid-template-areas:
	  "d c c c"
	  "n c c c";

	}
}


.dateinfo{
  grid-area: d;
}

.noinfo{
  grid-area: n;
}

.custinfo{
  grid-area: c;
}

div.custinfo div.btn-group{
	margin-top: 6px;
}

div.noinfo{
	margin-top: -15px;
}

/*<!--===========================================
=            css for Product details      =
=============================================-->*/
/*<!-Mobile >*//*
@media screen and (max-width:425px){

	#tbody2{
	  height: 100%;
	  display: grid;
	  grid-gap: 7px;
	  grid-template-columns: repeat(4,1fr);
	  grid-template-rows:  repeat(3,1fr);
	  grid-template-areas:
	  "s p p p"
	  "d d q q"
		"p p a a";

	}
}



.sr1{
  grid-area: s;
}

.pr1{
  grid-area: p;
}

.de1{
  grid-area: d;
}

.qu1{
  grid-area: q;
}

.pe1{
  grid-area: p;
}

.ar1{
  grid-area: a;
}
*/


/*<!--===========================================
=            css for PAYMENT info       =
=============================================-->*/
@media screen and (min-width:769px){

	table.bill_paymentTable thead th.p_amt, table.bill_paymentTable thead th.p_arr {
		width: 15%;
	}

	table.bill_paymentTable thead th.p_mop {
		width: 20%;
	}

	table.bill_paymentTable thead th.p_not{
		width: 50%;
	}

}

/*<!--===========================================
=            css for PAYMENT info Mobile      =
=============================================-->*/

table.table123{
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption.caption123 {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr.tr123 {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th.th123,
table td.td123 {
  padding: .625em;
  text-align: center;
}

table th.th123 {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  table.table123 {
    border: 0;
  }

  table caption.caption123 {
    font-size: 1.3em;
  }

  table thead.thead123 {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr.tr123 {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table td.td123 {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table td.td123::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td.td123:last-child {
    border-bottom: 0;
  }
}


/* general styling */
table.table123 {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}