/* Model Power */
label.salesla{
  color: #595656;
  font-size: 15px;
  font-weight: normal;
}

/* title & header */
.titleh3, h1.sales{
  /*background-color:#e57f5e;
  height: auto*/
  color: #1f5dac;
  text-align: left;
  font-family: "Times New Roman", Times, serif	;
}

/* main body of the sale */
#mainboxbody{
  background-color: #e7e4e4  ;
}
/** =======================
=  Css For FR/SG =
======================== **/
/* table#tableSaleFrSg tbody tr {

  background-color: rgb(186, 217, 246);
  /* color:white; */
/* } */


/********************************
 Responsive for main Content
*********************************/
/** =======================
=  Css For Sale Tab =
======================== **/

/*mobile tab pad screen ratio*/
@media screen and (max-width:900px){
  #Saletab{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto ;
    grid-template-areas:
    "o o"
    "r r"
    "p p"
    "s s";

  }
}


/*deshtop and laptop screen ratio*/
@media screen and (min-width:900px) {
  #Saletab{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto  ;
    grid-template-areas:
    "o o o o o o p p p p p p"
    "o o o o o o p p p p p p"
    "r r r r r r r r r r r r"
    "r r r r r r r r r r r r"
    "s s s s s s s s s s s s"
    "s s s s s s s s s s s s";

  }
  #modaladdFrSg{
    width:850px;
  }
  /* #powerbox1{
    height: 348px;
  } */
}


.orderinfo{
  grid-area: o;
}

.productinfo{
  grid-area: r;
}

.powerinfo{
  grid-area: p;
}

.paymentinfo{
  grid-area: s;
}


/** ====================================
=      Css For Power Modal     =
====================================== **/
/*deshtop and laptop screen ratio*/
@media screen and (min-width:1100px){
  .powerinfomain{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    "n n n c c c"
    "p p o o i i"
    "a a s s d d"
    "f f g g h h"
    "j j k k l l"
    "q q w w e e"
    "en en en en en en";

  }

  .prescription, .prescriptionadd,  .prescriptionvn,
  .prescriptionPD, .prescriptionPRISM{
    text-align: right;
  }

}

/*mobile tab pad screen ratio*/
@media screen and (max-width:1100px) {
  .powerinfomain{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    "n n n n n n"
    "c c c c c c"
    "p p . . . ."
    "o o o i i i"
    "a a . . . ."
    "s s s d d d"
    "f f . . . ."
    "g g g h h h"
    "j j . . . ."
    "k k k l l l"
    "q q . . . ."
    "w w w e e e"
    "en en en en en en";

  }

  .prescription, .prescriptionadd,  .prescriptionvn,
  .prescriptionPD, .prescriptionPRISM{
    text-align: left;
  }
}



.named{
  grid-area:n;
}
.checked{
  grid-area:c;
}

.prescription{
  grid-area:p;
}
.PWprescriptionre{
  grid-area:o;
}
.PWprescriptionle{
  grid-area: i;
}

.prescriptionadd{
  grid-area: a;
}
.PWprescriptionaddre{
  grid-area: s;
}
.PWprescriptionaddle{
  grid-area: d;
}

.prescriptionvn{
  grid-area: f;
}
.PWprescriptionVNre{
  grid-area: g;
}
.PWprescriptionVNle{
  grid-area: h;
}

.prescriptionPD{
  grid-area: j;
}
.PWprescriptionPDre{
  grid-area: k;
}
.PWprescriptionPDle{
  grid-area: l;
}

.prescriptionPRISM{
  grid-area: q;
}
.PWprescriptionPRISMre{
  grid-area: w;
}
.PWprescriptionPRISMle{
  grid-area: e;
}

.extranotes{
  grid-area: en;
}

/* ================================
=   css for product Details    =
================================== */

/********  1ST ROW = PRODUCT 1 ******/
/*deshtop and laptop and tab and pad screen ratio*/
@media screen and (min-width:700px){
  #prod1{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    "pc1 pc1 pc1 pd1 pd1 pd1 pd1 pq1 pq1 pp1 pp1 pp1"
    "pc1 pc1 pc1 pd1 pd1 pd1 pd1 pq1 pq1 pp1 pp1 pp1";

  }
}

/*mobile screen ratio*/
@media screen and (max-width:700px){
  #prod1{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    "pc1 pc1 pc1 pq1 pp1 pp1"
    "pd1 pd1 pd1 pd1 . .";

  }
}

.prodCat1{
  grid-area: pc1;
}

.prodDescrip1{
  grid-area: pd1;
}

.prodQty1{
  grid-area: pq1;
}

.prodPrice1{
  grid-area: pp1;
}


/********  2nd ROW = PRODUCT 2 ******/
/*deshtop and laptop and tab and pad screen ratio*/
@media screen and (min-width:700px){
  #prod2{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    "pc2 pc2 pc2 pd2 pd2 pd2 pd2 pq2 pq2 pp2 pp2 pp2"
    "pc2 pc2 pc2 pd2 pd2 pd2 pd2 pq2 pq2 pp2 pp2 pp2";

  }
}

/*mobile screen ratio*/
@media screen and (max-width:700px){
  #prod2{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    "pc2 pc2 pc2 pq2 pp2 pp2"
    "pd2 pd2 pd2 pd2 . .";

  }
}
.prodCat2{
  grid-area: pc2;
}

.prodDescrip2{
  grid-area: pd2;
}

.prodQty2{
  grid-area: pq2;
}

.prodPrice2{
  grid-area: pp2;
}


/****** 3RD ROW = MAIN CALCULUS   *****/
/*deshtop and laptop and tab and pad screen ratio*/
@media screen and (min-width:700px){
  #Maincalculus{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  repeat(2,1fr);
    grid-template-areas:
    "ts ts ps ps . . . . ds ds ds ds"
    "as as as as gs gs gs gs ns ns ns ns";

  }
  .totalAmountSale2{
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

/*mobile screen ratio*/
@media screen and (max-width:700px){
  #Maincalculus{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows:  auto;
    grid-template-areas:
    ". . . ds ds ds ds ds ds ds"
    ". . . ns ns ns ns ns ns ns"
    "ts ts . . . . ps ps ps ps"
    "as as as as as as as as . ."
    "gs gs gs gs gs gs gs gs . ."
    "ns2 ns2 ns2 ns2 ns2 ns2 ns2 ns2 . .";


  }
}

.taxselectradioSale{
  grid-area: ts;
}

.taxpercentageSale{
  grid-area: ps;

}

.amountSale{
  grid-area: as;

}

.gstAmountSale{
  grid-area: gs;

}

.totalAmountSale2{
  grid-area: ns2;

}

.discountamountSale{
  grid-area: ds;
}

.totalAmountSale{
  grid-area: ns;
}

.hrline{
  grid-area: hs;
}

.hidcls{
  display: none;
}

/* =====================================
=    CSS FOR NET AMOUNT SECTION & PAYMENT SECTION   =
======================================== */

/*deshtop screen ratio*/
@media screen and (min-width:1000px){
  #MainNetsection1{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  repeat(2,1fr);
    grid-template-areas:
    "amtd amtd amtd amtd disd disd disd disd natd natd natd natd"
    "amtd amtd amtd amtd disd disd disd disd natd natd natd natd";

  }

  #MainNetsection2{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  repeat(2,1fr);
    grid-template-areas:
    "amtt amtt amtt cgstt cgstt cgstt sgstt sgstt sgstt natt natt natt"
    "amtt amtt amtt cgstt cgstt cgstt sgstt sgstt sgstt natt natt natt";

  }

  #MainPaymentsection{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  repeat(3,1fr);
    grid-template-areas:
    "pbn pbn pbn pbn . . . . . . . ."
    "rad rad rad rad bad bad bad bad nad nad nad nad"
    "rad rad rad rad bad bad bad bad nad nad nad nad";

  }
}

/*tab and pad screen ratio*/
@media screen and (min-width:500px) and (max-width:1000px) {
  #MainNetsection1{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows:  repeat(3,1fr);
    grid-template-areas:
    ". amtd amtd amtd amtd amtd amtd ."
    ". disd disd disd disd disd disd ."
    ". natd natd natd natd natd natd .";

  }

  #MainNetsection2{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  repeat(3,1fr);
    grid-template-areas:
    "amtt amtt amtt . . ."
    "cgstt cgstt cgstt sgstt sgstt sgstt"
    "natt natt natt . . .";

  }

  #MainPaymentsection{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows:  repeat(4,1fr);
    grid-template-areas:
    "pbn pbn pbn pbn . . . . . . . ."
    ". rad rad rad rad rad rad rad rad rad rad ."
    ". bad bad bad bad bad bad bad bad bad bad ."
    ". nad nad nad nad nad nad nad nad nad nad .";

  }

}

/*mobile screen ratio*/
@media screen and (min-width:250px) and (max-width:500px) {
  #MainNetsection1{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  repeat(3,1fr);
    grid-template-areas:
    "amtd amtd amtd amtd amtd amtd"
    "disd disd disd disd disd disd"
    "natd natd natd natd natd natd";

  }

  #MainNetsection2{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  repeat(4,1fr);
    grid-template-areas:
    "amtt amtt amtt amtt amtt amtt"
    "cgstt cgstt cgstt cgstt cgstt cgstt"
    "sgstt sgstt sgstt sgstt sgstt sgstt"
    "natt natt natt natt natt natt";

  }

  #MainPaymentsection{
    height: 100%;
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows:  repeat(4,1fr);
    grid-template-areas:
    "pbn pbn pbn pbn . ."
    "rad rad rad rad rad rad"
    "bad bad bad bad bad bad"
    "nad nad nad nad nad nad";

  }

}


.mainAmountSale1{
  grid-area: amtd;
}

.mainDiscountSale1{
  grid-area: disd;
}

.mainNetAmtSale1{
  grid-area: natd;
}

/*  */
.mainAmountSale2{
  grid-area: amtt;
}

.mainCgstSale2{
  grid-area: cgstt;
}

.mainSgstSale2{
  grid-area: sgstt;
}

.mainNetAmtSale2{
  grid-area: natt;
}


/* payment section */
.mainReceivedAmountDiv{
  grid-area: rad;
}

.mainBalanceAmountDiv{
  grid-area: bad;
}

.mainNetAmountDiv{
  grid-area: nad;
}

.payemtBtn{
  grid-area:pbn
}

/*.powerinfo{
  display:none

}*/