div.main_hatw_loader {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 20px 20px;
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  padding-bottom: 40px;
}
div.top_main_hatw {
  background: transparent;
  width: auto;
  padding: 0;
  cursor: pointer;
  flex: 1 1 auto;
}
div.main_hatw {
  background: #ffffff;
  width: auto;
  padding: 10px 10px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 0px 2px rgb(216 225 236), -2px 10px 8px -1px #dbdbdb;
}
div.fornames {
  display: flex;
  gap: 8px 8px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
}
div.fornames p {
  background: lightcyan;
  padding: 5px 10px;
  border-radius: 5px;
}

div.henar {
  display: flex;
  gap: 8px 8px;
  margin-top: 10px;
}
div.henar p,
div.henar a {
  background: #ededed;
  padding: 5px 10px;
  border-radius: 5px;
}
div.forchand {
  display: flex;
  gap: 8px 8px;
  margin-top: 10px;
}
div.forchand p {
  background: #e0e8ff;
  padding: 5px 10px;
  border-radius: 5px;
}

div.forchandmawa {
  display: flex;
  gap: 8px 8px;
  margin-top: 10px;
}
div.forchandmawa p {
  background: lightcyan;
  padding: 5px 10px;
  border-radius: 5px;
}
div.forpricess {
  display: flex;
  gap: 8px 8px;
  margin-top: 10px;
}
div.forpricess p {
  background: lightcyan;
  padding: 5px 10px;
  border-radius: 5px;
}

div.cobrand {
  display: flex;
  gap: 8px 8px;
  margin-top: 0px;
}
div.cobrand p,
div.cobrand a {
  background: lightcyan;
  padding: 5px 10px;
  border-radius: 5px;
}

p.hnote {
  margin-top: 10px;
}

div.fornames p.naweshmak {
  background: transparent;
  font-family: "np";
  font-size: 20px;
  color: var(--blue);
  padding-left: 0px;
  padding-right: 0px;
}

div.forchandmawa p.hchand_hatw {
  background: #acffc9;
  font-weight: bold;
}

div.forchandmawa p.hchand_roshtw {
  background: #f9c8c8;
  font-weight: bold;
}

div.forchandmawa p.hchand_mawa {
  background: #b9dfff;
  font-weight: bold;
}

div.cobrand a.zhmnawehenar {
  padding-right: 29px;
  background-image: url(../images/phone.png);
  background-position: calc(100% - 6px) center;
  background-repeat: no-repeat;
  background-size: 19px;
  background-color: #fcefdd;
}

div.henar a.zhmnawehenar {
  padding-right: 29px;
  background-image: url(../images/phone.png);
  background-position: calc(100% - 6px) center;
  background-repeat: no-repeat;
  background-size: 19px;
  background-color: #e4fcdd;
}
div.cobrand p.nawebrand {
  background: lavender;
}
div.topflters {
  width: 95%;
  margin: 0 auto;
  background: #d7dfe2;
  padding: 8px;
  border-radius: 8px;
  margin-top: 5px;
}

div.inner_topflters form {
  margin-top: 10px;
}

button.showfbtns {
  height: 42.5px;
  background: #f1fbffc7;
  display: block;
  width: 100%;
  border-radius: 8px;
  text-align: right;
  padding: 0px 8px;
  font-size: 16.6px;
}
span.updownfls {
  width: 40px;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  background-image: url(../images/up.svg);
  background-position: center;
  background-size: 20px;
  background-repeat: no-repeat;
  transition: all 0.2s;
}
div.inner_topflters {
  display: none;
}
span.actupfls {
  transform: translateY(-50%) rotate(180deg);
}

div.toppagebtns {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
  margin-top: 70px;
  border-bottom: 1px solid;
  padding-bottom: 10px;
}
div.toppagebtns button,
div.toppagebtns a {
  background-color: var(--input_borderFocusedColor);
  padding: 10px;
  height: 43px;
  width: auto;
  border-radius: 8px;
  font-size: 16px;
  flex: 1 1 auto;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
}
button.add_shmakabtn {
  background-image: url(../images/plus_roundedwhite.svg);
}
button.garawa_shmakabtn {
  background-image: url(../images/returnwhite.png);
}
button.rep_shmakabtn {
  background-image: url(../images/report.png);
}
div.toppagebtns button span {
  color: white;
}
div.toppagebtns a span {
  color: white;
}

div.garawalist_loader {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 2.5px;
}
div.glists {
  flex: 1 1 100%;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 5px 9px -5px #23383773;
  z-index: 1;
}

div.glists:nth-child(even) {
  background: #eff6f6;
}

div.glists:nth-child(odd) {
  background: #e0eeedd4;
}

div.gar_wargdiv {
  display: flex;
  gap: 10px;
}

p.gar_name {
  width: 100%;
  padding: 0px 0px;
  border-radius: 5px;
  color: var(--mgreen4);
  font-weight: bold;
  margin-bottom: 3px;
}
p.gar_roshtw_nawewargr {
  font-weight: bold;
}
p.chand_brawatxt {
  font-size: 16.5px;
  font-weight: bold;
  color: rgb(218 94 57);
  text-align: left;
}
p.gar_note {
  margin-top: 4px;
  color: var(--blue);
  font-size: 14.5px;
}

div.gar_wargdivfdtme p {
  font-size: 14.5px;
}

div.top_searchs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  margin-top: 5px;
  align-items: center;
}

div.top_searchs a {
  color: var(--blue);
  font-size: 16px;
  text-align: center;
  background: #d7dfe2;
  padding: 6px 4px;
  flex: 1 1 auto;
  border-radius: 6px;
}

div.top_searchs a.sbtns_active {
  background: var(--blue);
  color: white;
}

div.smen_main {
  display: none;
  position: absolute;
  bottom: auto;
  left: 0px;
  top: 46px;
  height: auto;
  width: auto;
  background: #00978e;
  z-index: 2;
  border-radius: 6px;
  transform-origin: top;
}
div.smen_main a {
  display: block;
  width: 100%;
  padding: 10px 10px;
  font-size: 16.5px;
  color: white;
}
div.smen_main a:active {
  background: #06a398;
  color: white;
  border-radius: 6px;
}

div.divfortables {
  width: 95%;
  margin: 0 auto;
  text-align: center;
  padding-top: 25px;
}
p.page_title_fortbls {
  text-align: center;
  font-size: 17pt;
  font-family: np;
  margin-bottom: 5px;
}
p.nftbles {
  text-align: center;
  font-size: 22px;
  margin-top: 40px;
}
section.tablesec {
  overflow-x: auto;
}
div.top_btns {
  display: flex;
  /* gap: 6px; */
  margin: 0 auto;
  text-align: center;
  /* flex-wrap: wrap; */
  align-content: stretch;
  justify-content: center;
  align-items: center;
  background: #e4eaf5;
  height: auto;
  /* border-radius: 6px; */
  flex-direction: column;
}

div.top_btns_inner {
  display: flex;
  gap: 6px;
  margin: 0 auto;
  text-align: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background: transparent;
  height: 50px;
  width: 100%;
}
div.top_btns_inner a,
div.top_btns_inner button {
  flex: 1 1 auto;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  background: transparent;
  max-width: 100px;
}

button.print_btn {
  height: 50px;
  text-align: right;
  display: block;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
}

div.divfortables img.img_fp {
  display: none;
  width: 145px;
  margin: 0 auto;
  margin-bottom: 25px;
}
button.btnmen {
  position: absolute;
  z-index: 2;
  left: 8px;
  top: 8px;
  width: 46px;
  height: 46px;
  background: #f2f2f2;
  text-align: center;
  border-radius: 50px;
  line-height: 50px;
  color: #766a6a;
  cursor: default;
}

div.smenpost {
  display: none;
  position: absolute;
  left: 10px;
  top: 56px;
  z-index: 2;
  width: auto;
  background: #f2f2f2;
  border-radius: 8px;
  box-shadow: -5px 7px 13px -8px #323433;
  opacity: 0;
  transition: all 0.2s;
}
div.smenpost_open {
  display: block;
  opacity: 0;
  transition: all 0.2s;
  animation-name: fademen;
  animation-duration: 0.3s;
  animation-delay: 0ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fademen {
  to {
    opacity: 1;
  }
}
div.smen_inner {
  display: flex;
  gap: 0px;
  flex-direction: column;
}

div.smen_inner button {
  padding: 10px 20px;
  font-size: 17px;
}

div.top_counters {
  width: 95%;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
  background: #d7dfe285;
  padding: 20px 5px;
  border-radius: 8px;
}
div.top_counters_inner {
  display: flex;
  gap: 10px;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
div.for_summary_main {
  background: #ffffff;
  border-radius: 6px;
  text-align: center;
  padding: 10px;
}
div.summs img {
  width: 50px;
  display: block;
  margin: 0 auto;
  background: #e2e7eb;
  border-radius: 69px;
  padding: 8px;
}
p.counter_ttile {
  display: block;
  text-align: center;
  font-size: 18px;
  font-family: "np";
  color: #00978e;
}
p.sumcounts {
  text-align: center;
  font-size: 30px;
  font-family: np;
  margin-top: 2px;
}
p.sumttl {
  text-align: center;
  margin-top: -6px;
}
div.wargr_loader {
  margin-top: 6px;
}
div.wargr_loader_inner {
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: stretch;
}

p.price_f_p {
  text-align: left;
  padding-left: 2px;
  color: #245b8c;
  font-size: 16px;
  margin-top: -4px;
}
div.wargr_item {
  background: #efefef;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
div.wargr_item:nth-child(odd) {
  background: #eaeef1;
}
p.wr_pname {
  color: #000000;
  font-family: np;
}
p.wr_ptell {
  font-size: 12px;
}
p.nf_wargr {
  text-align: center;
  font-size: 16px;
  margin-bottom: 6px;
  color: #3c282a;
}
img.wargr_loadimg {
  width: 30px;
  margin: 0 auto;
  text-align: center;
  display: block;
  margin-bottom: 6px;
}
div.wargr_div {
  display: none;
}

button.addnewwargr {
  display: block;
  text-align: center;
  background: #00978e;
  height: 40px;
  border-radius: 6px;
  font-family: np;
  color: white;
  width: 100%;
  margin-top: 6px;
}
span.btxts {
  pointer-events: none !important;
}

img.updateloaderimg {
  display: block;
  margin: 0 auto;
  width: 50px;
  padding: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
}
div.forprices {
  background: #ebf3f3;
  padding: 7px;
  border-radius: 5px;
}
p.fpttl {
  font-family: "np";
  font-size: 16px;
  margin-bottom: -3px;
}

@media screen and (max-width: 800px) {
  div.flinputs {
    flex-wrap: wrap;
    gap: 10px;
  }
  div.flinners {
    margin-left: 0px;
    margin-right: 0px;
    flex: 0 0 calc(50% - 5px);
  }
}

@media screen and (max-width: 430px) {
  div.for_summary_main {
    padding: 6px;
  }

  div.summs img {
    width: 45px;
  }

  p.sumcounts {
    font-size: 25px;
  }

  div.top_counters_inner {
    gap: 5px;
  }

  p.sumttl {
    font-size: 13.5px;
  }
}