@charset "UTF-8";
@font-face {
  font-family: "iransans";
  src: url("../fonts/iransans/iransanswebfa_light.woff");
  font-weight: 300;
}
@font-face {
  font-family: "iransans";
  src: url("../fonts/iransans/iransanswebfa.woff");
  font-weight: 400;
}
@font-face {
  font-family: "iransans";
  src: url("../fonts/iransans/iransanswebfa_medium.woff");
  font-weight: 500;
}
@font-face {
  font-family: "iransans";
  src: url("../fonts/iransans/iransanswebfa_bold.woff");
  font-weight: 700;
}
@font-face {
  font-family: "font awesome";
  src: url("../fonts/awesome/fa-brands-400.woff2");
  font-weight: 500;
}
@font-face {
  font-family: "font awesome";
  src: url("../fonts/awesome/fa-thin-100.woff2");
  font-weight: 100;
}
@font-face {
  font-family: "font awesome";
  src: url("../fonts/awesome/fa-light-300.woff2");
  font-weight: 300;
}
@font-face {
  font-family: "font awesome";
  src: url("../fonts/awesome/fa-regular-400.woff2");
  font-weight: 400;
}
@font-face {
  font-family: "font awesome";
  src: url("../fonts/awesome/fa-solid-900.woff2");
  font-weight: 900;
}
.fab, .fas, .fa {
  font-style: normal;
  line-height: 1;
  display: inline-block;
}

.fa {
  font-family: "font awesome";
  font-weight: 300;
}

.fas {
  font-family: "font awesome";
  font-weight: 900;
}

.fab {
  font-family: "font awesome brand";
  font-weight: 400;
}

.fa::before,
.fas::before,
.fab::before {
  content: var(--fa);
}

.fa-sort-alpha-desc {
  --fa: "";
}

.fa-sort-alpha-asc {
  --fa: "";
}

.fa-filter-circle-xmark {
  --fa: "";
}

.fa-search {
  --fa: "";
}

.fa-angle-left {
  --fa: "";
}

.fa-angle-right {
  --fa: "";
}

.fa-arrow-circle-left {
  --fa: "" ;
}

.fa-times {
  --fa: "";
}

.fa-envelope {
  --fa: "";
}

.fa-home {
  --fa: "";
}

.fa-dashboard {
  --fa: "";
}

.fa-user-alt {
  --fa: "";
}

.fa-filter {
  --fa: "";
}

.fa-cogs {
  --fa: "";
}

.fa-warehouse {
  --fa: "";
}

.fa-calculator {
  --fa: "";
}

.fa-bell {
  --fa: "";
}

.fa-database {
  --fa: "";
}

.fa-folder-open {
  --fa: "";
}

.fa-trash {
  --fa: "";
}

.fa-toggle-on {
  --fa: "";
}

.fa-toggle-off {
  --fa: "";
}

.fa-question {
  --fa: "?";
}

.fa-plus {
  --fa: "+";
}

.fa-pencil-alt {
  --fa: "";
}

.fa-plus {
  --fa: "+";
}

.fa-pencil-alt {
  --fa: "";
}

.fa-cloud-upload {
  --fa: "";
}

.fa-poll-h {
  --fa: "";
}

.fa-pen-ruler {
  --fa: "";
}

.fa-box-open {
  --fa: "";
}

.fa-file-import {
  --fa: "";
}

.fa-file-export {
  --fa: "";
}

.fa-ellipsis {
  --fa: "";
}

.fa-ellipsis-v {
  --fa: "";
}

.fa-caret-down {
  --fa: "";
}

.fa-lightbulb {
  --fa: "";
}

.fa-angles-left {
  --fa: "";
}

.fa-angles-right {
  --fa: "";
}

.fa-refresh {
  --fa: "";
}

.fa-plus-circle {
  --fa: "";
}

.fa-barcode {
  --fa: "";
}

.fa-trash-alt {
  --fa: "";
}

.fa-level-up {
  --fa: "";
}

.fa-level-down {
  --fa: "";
}

.fa-undo {
  --fa: "";
}

.fa-print {
  --fa: "";
}

.fa-book {
  --fa: "";
}

.fa-book-open {
  --fa: "";
}

.fa-window-maximize {
  --fa: "";
}

.fa-check {
  --fa: "";
}

.fa-file-invoice {
  --fa: "";
}

.fa-user-edit {
  --fa: "";
}

.fa-file-clipboard {
  --fa: "";
}

/*#region Common*/
* {
  padding: 0;
  margin: 0;
  direction: rtl;
  font-family: "iransans";
  box-sizing: border-box;
  user-select: none;
}

html {
  max-height: 100vh !important;
}

body,
.page {
  max-width: 1400px !important;
  min-width: 992px !important;
  max-height: 100vh !important;
  min-height: 600px !important;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.fa-print {
  font-size: 24px;
}

/*#endregion*/
.btn {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: "iransans";
  cursor: pointer;
  transition: all 300ms;
  border-radius: 4px;
}

.btn-wishlist {
  color: #fff;
  background-color: #ff407b;
}
.btn-wishlist:hover {
  background-color: #ff407b;
  color: #fff;
}
.btn-brand {
  color: #2e2f39;
  background-color: #ffc750;
  border-color: #ffc750;
}
.btn-brand:hover {
  color: #2e2f39;
  background-color: #efb63e;
  border-color: #efb63e;
}
.btn-brand.focus, .btn-brand:focus {
  color: #2e2f39;
  background-color: #efb63e;
  border-color: #efb63e;
  box-shadow: none;
}
.btn-primary {
  color: #fff;
  background-color: #5969ff;
  border-color: #5969ff;
}
.btn-primary:hover {
  color: #fff;
  background-color: #4656e9;
  border-color: #4656e9;
}
.btn-primary.focus, .btn-primary:focus {
  color: #fff;
  background-color: #4656e9;
  border-color: #4656e9;
  box-shadow: 0 0 0 1px rgb(37, 52, 158);
}
.btn-secondary {
  color: #fff;
  background-color: #ff407b;
  border-color: #ff407b;
}
.btn-secondary:hover {
  color: #fff;
  background-color: #f0346e;
  border-color: #f0346e;
}
.btn-secondary.focus, .btn-secondary:focus {
  color: #fff;
  background-color: #f0346e;
  border-color: #f0346e;
  box-shadow: 0 0 0 1px rgb(222, 17, 80);
}
.btn-success {
  color: #fff;
  background-color: #2ec551;
  border-color: #2ec551;
}
.btn-success:hover {
  color: #fff;
  background-color: #21ae41;
  border-color: #21ae41;
}
.btn-success.focus, .btn-success:focus {
  color: #fff;
  background-color: #21ae41;
  border-color: #21ae41;
  box-shadow: 0 0 0 1px rgb(18, 158, 50);
}
.btn-danger {
  color: #fff;
  background-color: #ef172c;
  border-color: #ef172c;
}
.btn-danger:hover {
  color: #fff;
  background-color: #da0419;
  border-color: #da0419;
}
.btn-danger.focus, .btn-danger:focus {
  color: #fff;
  background-color: #da0419;
  border-color: #da0419;
  box-shadow: 0 0 0 1px rgb(218, 4, 25);
}
.btn-warning {
  color: #2e2f39;
  background-color: #ffc108;
  border-color: #ffc108;
}
.btn-warning:hover {
  color: #2e2f39;
  background-color: #f3b600;
  border-color: #f3b600;
}
.btn-warning.focus, .btn-warning:focus {
  color: #2e2f39;
  background-color: #f3b600;
  border-color: #f3b600;
  box-shadow: 0 0 0 1px rgb(238, 182, 0);
}
.btn-info {
  color: #000;
  background-color: #25d5f2;
  border-color: #25d5f2;
}
.btn-info:hover {
  color: #fff;
  background-color: #17c0dc;
  border-color: #17c0dc;
}
.btn-info.focus, .btn-info:focus {
  color: #fff;
  background-color: #17c0dc;
  border-color: #17c0dc;
  box-shadow: 0 0 0 1px rgb(238, 184, 22);
}
.btn-light {
  color: #71738d;
  background-color: #f0f0f8;
  border-color: #f0f0f8;
}
.btn-light:hover {
  color: #2e2f39;
  background-color: #d7d7df;
  border-color: #d7d7df;
}
.btn-light.focus, .btn-light:focus {
  color: #2e2f39;
  background-color: #d7d7df;
  border-color: #d7d7df;
  box-shadow: 0 0 0 1px rgb(215, 215, 223);
}
.btn-link {
  color: #4656e9;
  background-color: transparent;
  text-decoration: underline;
}
.btn-link:hover, .btn-link:focus {
  color: rgba(70, 86, 233, 0.6);
  cursor: pointer;
}
.btn-thin {
  color: #71738d;
  background-color: #f8f8f8;
  border-color: #f0f0f8;
}
.btn-thin:hover {
  color: #2e2f39;
  background-color: #d7d7df;
  border-color: #d7d7df;
}
.btn-thin.focus, .btn-thin:focus {
  color: #2e2f39;
  background-color: #d7d7df;
  border-color: #d7d7df;
  box-shadow: 0 0 0 1px rgb(215, 215, 223);
}
.btn-dark {
  color: #fff;
  background-color: #2e2f39;
  border-color: #2e2f39;
}
.btn-dark:hover {
  color: #2e2f39;
  background-color: #d7d7df;
  border-color: #d7d7df;
}
.btn-dark.focus, .btn-dark:focus {
  color: #fff;
  background-color: #d7d7df;
  border-color: #d7d7df;
  box-shadow: 0 0 0 1px rgb(46, 47, 57);
}
.btn-dropdown {
  position: relative;
}
.btn-dropdown i {
  font-weight: 700;
}
.btn-dropdown ul {
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  box-shadow: 0 3px 6px #c0c0c0;
  background-color: #fff;
  overflow: hidden;
  border-radius: 4px;
  display: none;
  z-index: 100;
  padding: 8px 0;
}
.btn-dropdown ul li {
  color: #1d1d1d;
  padding: 0 8px;
  padding-left: 24px;
  min-width: 100px;
  text-align: right;
  line-height: 28px;
  font-size: 11px;
  font-weight: 700;
}
.btn-dropdown ul li:hover {
  background-color: #e9e9e9;
}
.btn-dropdown.selected ul {
  display: block;
}
.btn-outline-brand {
  color: #2e2f39;
  background-color: transparent;
  border-color: #ffc750;
}
.btn-outline-brand:hover {
  color: #2e2f39;
  background-color: #ffc750;
  border-color: #ffc750;
}
.btn-outline-brand.focus, .btn-outline-brand:focus {
  color: #2e2f39;
  background-color: transparent;
  border-color: #ffc750;
  box-shadow: 0 0 0 1px rgb(255, 195, 89);
}
.btn-outline-primary {
  color: #5969ff;
  background-color: transparent;
  border-color: #5969ff;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #5969ff;
  border-color: #5969ff;
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
  color: #fff;
  background-color: #5969ff;
  border-color: #5969ff;
  box-shadow: 0 0 0 1px rgb(65, 77, 167);
}
.btn-outline-secondary {
  color: #ff407b;
  background-color: transparent;
  border-color: #ff407b;
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #ff407b;
  border-color: #ff407b;
}
.btn-outline-secondary.focus, .btn-outline-secondary:focus {
  color: #fff;
  background-color: #ff407b;
  border-color: #ff407b;
  box-shadow: 0 0 0 1px rgb(227, 45, 201);
}
.btn-outline-success {
  color: #2ec551;
  background-color: transparent;
  border-color: #2ec551;
}
.btn-outline-success:hover {
  color: #fff;
  background-color: #2ec551;
  border-color: #2ec551;
}
.btn-outline-success.focus, .btn-outline-success:focus {
  color: #fff;
  background-color: #2ec551;
  border-color: #2ec551;
  box-shadow: 0 0 0 1px rgb(40, 167, 69);
}
.btn-outline-danger {
  color: #ef172c;
  background-color: transparent;
  border-color: #ef172c;
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #ef172c;
  border-color: #ef172c;
}
.btn-outline-danger.focus, .btn-outline-danger:focus {
  color: #fff;
  background-color: #ef172c;
  border-color: #ef172c;
  box-shadow: 0 0 0 1px rgb(239, 23, 44);
}
.btn-outline-warning {
  color: #2e2f39;
  background-color: transparent;
  border-color: #ffc108;
}
.btn-outline-warning:hover {
  color: #2e2f39;
  background-color: #ffc108;
  border-color: #ffc108;
}
.btn-outline-warning.focus, .btn-outline-warning:focus {
  color: #2e2f39;
  background-color: #ffc108;
  border-color: #ffc108;
  box-shadow: 0 0 0 1px rgb(255, 193, 8);
}
.btn-outline-info {
  color: #25d5f2;
  background-color: transparent;
  border-color: #25d5f2;
}
.btn-outline-info:hover {
  color: #fff;
  background-color: #25d5f2;
  border-color: #25d5f2;
}
.btn-outline-info.focus, .btn-outline-info:focus {
  color: #fff;
  background-color: #25d5f2;
  border-color: #0998b0;
  box-shadow: 0 0 0 1px rgb(238, 184, 22);
}
.btn-outline-light {
  color: #7171a6;
  background-color: transparent;
  border-color: #e6e6f2;
}
.btn-outline-light:hover {
  color: #71748d;
  background-color: #f0f0f8;
  border-color: #cacae0;
}
.btn-outline-light.focus, .btn-outline-light:focus {
  color: #71748d;
  background-color: #f0f0f8;
  border-color: #cacae0;
  box-shadow: 0 0 0 1px rgb(235, 235, 237);
}
.btn-outline-dark {
  color: #2e2f39;
  background-color: transparent;
  border-color: #2e2f39;
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: #2e2f39;
  border-color: #2e2f39;
}
.btn-outline-dark.focus, .btn-outline-dark:focus {
  color: #fff;
  background-color: #2e2f39;
  border-color: #2e2f39;
  box-shadow: 0 0 0 1px rgb(46, 47, 57);
}
.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
}
.btn-sm {
  padding: 5px 12px;
  font-size: 14px;
}
.btn-lg {
  padding: 11px 20px;
  font-size: 15px;
}
.btn-icon {
  display: inline-flex;
  place-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-group {
  display: inline-flex;
  margin: 8px 0;
}
.btn-group-item {
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  color: #1d1d1d;
  background-color: #e9e9e9;
  padding: 4px 16px;
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  border-left: 1px solid #c0c0c0;
}
.btn-group-item:hover {
  cursor: pointer;
  background-color: #4656e9;
  border-color: #4656e9;
  color: #fff;
}
.btn-group-item:first-child {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #c0c0c0;
}
.btn-group-item:last-child {
  border-radius: 4px 0 0 4px;
}
.btn-group-item.active {
  background-color: #000;
  color: #fff;
  border-color: #000;
}
.btn-pd-0 {
  padding: 6px 0;
}

.border {
  border: 1px solid #c0c0c0;
}
.border.border-top, .border.border-left, .border.border-bottom, .border.border-right {
  border-color: transparent;
}
.border-w1 {
  border-width: 1px;
}
.border-w2 {
  border-width: 2px;
}
.border-w3 {
  border-width: 3px;
}
.border-w4 {
  border-width: 4px;
}
.border-w5 {
  border-width: 5px;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-top {
  border-top-color: #c0c0c0 !important;
}
.border-bottom {
  border-bottom-color: #c0c0c0 !important;
}
.border-left {
  border-left-color: #c0c0c0 !important;
}
.border-right {
  border-right-color: #c0c0c0 !important;
}
.border-radius-1 {
  border-radius: 4px;
}
.border-radius-2 {
  border-radius: 8px;
}
.border-radius-3 {
  border-radius: 12px;
}
.border-radius-4 {
  border-radius: 16px;
}

.color-primary {
  color: #4656e9;
}
.color-brand {
  color: #efb63e;
}
.color-wishlist {
  color: #ff407b;
}
.color-secondary {
  color: #f0346e;
}
.color-success {
  color: #21ae41;
}
.color-danger {
  color: #da0419;
}
.color-warning {
  color: #f3b600;
}
.color-info {
  color: #17c0dc;
}
.color-light {
  color: #d7d7df;
}
.color-dark {
  color: #2e2f39;
}

.font-size-10 {
  font-size: 10px;
}
.font-size-12 {
  font-size: 12px;
}
.font-size-13 {
  font-size: 13px;
}
.font-size-14 {
  font-size: 14px;
}
.font-size-16 {
  font-size: 16px;
}
.font-size-18 {
  font-size: 18px;
}
.font-size-20 {
  font-size: 20px;
}
.font-size-22 {
  font-size: 22px;
}
.font-size-24 {
  font-size: 24px;
}

.bgcolor-border {
  background-color: #c0c0c0;
}

.bgcolor-border-light {
  background-color: #c5c5c5;
}

.bgcolor-bg {
  background-color: #e9e9e9;
}

.bgcolor-bg-dark {
  background-color: #f0f0f0;
}

.bgcolor-bg-light {
  background-color: #fafafa;
}

.bgcolor-aqua {
  background-color: #00ffff;
}

.bgcolor-danger {
  background-color: #ff2929;
}

.bgcolor-success {
  background-color: #1c911c;
}

.bgcolor-text {
  background-color: #1d1d1d;
}

.bgcolor-text-light {
  background-color: #444;
}

.bgcolor-text-thin {
  background-color: #646464;
}

.bgcolor-white {
  background-color: #fff;
}

.bgblack {
  background-color: #000;
}

.bgcolor-primary {
  background-color: #4656e9;
}

.bgcolor-brand {
  background-color: #efb63e;
}

.bgcolor-wishlist {
  background-color: #ff407b;
}

.bgcolor-secondary {
  background-color: #f0346e;
}

.bgcolor-success {
  background-color: #21ae41;
}

.bgcolor-danger {
  background-color: #da0419;
}

.bgcolor-warning {
  background-color: #f3b600;
}

.bgcolor-info {
  background-color: #17c0dc;
}

.bgcolor-light {
  background-color: #d7d7df;
}

.bgcolor-dark {
  background-color: #2e2f39;
}

.box {
  width: 100%;
  height: calc(100% - 30px);
  border-radius: 4px;
  background-color: #fff;
  overflow-y: auto;
}
.box-title {
  height: 30px;
}

.hr {
  width: 100%;
  height: 1px;
  margin: 4px 0;
  border-bottom-width: 1px;
  border-bottom-color: #c0c0c0;
}
.hr-solid {
  border-bottom-style: solid;
}
.hr-dashed {
  border-bottom-style: dashed;
}
.hr-light {
  border-bottom-color: rgba(192, 192, 192, 0.2);
}
.hr-shadow-top {
  box-shadow: 0 -1px 3px #c0c0c0;
}
.hr-shadow-bottom {
  box-shadow: 0 1px 3px #c0c0c0;
}

.vr-left {
  padding-left: 8px;
  border-left-width: 1px;
  border-left-color: #c0c0c0;
  border-top: none;
}
.vr-left.vr-solid {
  border-left-style: solid;
}
.vr-left.vr-dashed {
  border-left-style: dashed;
}
.vr-left.vr-dotted {
  border-left-style: dotted;
}
.vr-right {
  padding-right: 8px;
  border-right-width: 1px;
  border-right-color: #c0c0c0;
}
.vr-right.vr-solid {
  border-right-style: solid;
}
.vr-right.vr-dashed {
  border-right-style: dashed;
}
.vr-right.vr-dotted {
  border-right-style: dotted;
}

.unit-mm {
  font-size: 12px;
  font-weight: 700;
}

.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
.align-center {
  text-align: center;
}

.dir-ltr {
  direction: ltr;
}
.dir-rtl {
  direction: rtl;
}

.tree {
  padding: 8px;
}
.tree ul {
  width: fit-content;
  padding-right: 20px;
}
.tree-label {
  display: inline-flex;
  gap: 30px;
  place-items: center;
}
.tree-label label {
  display: flex;
  gap: 4px;
  place-items: center;
}
.tree-label label span {
  line-height: 28px;
  font-size: 11px;
  display: flex;
  gap: 8px;
  place-items: center;
}
.tree-label label span i {
  font-size: 16px;
}
.tree-label label input[type=checkbox] {
  height: 12px;
  width: 12px;
}
.tree-btn {
  display: flex;
  place-items: center;
  gap: 8px;
}
.tree-btn button {
  border: none;
  background-color: transparent;
  outline: none;
}
.tree li {
  display: block;
  width: fit-content;
  position: relative;
}
.tree li ul {
  display: none;
}
.tree li.selected > ul {
  display: block;
}
.tree li.selectall ul {
  display: block;
}
.tree-folder li .tree-label {
  padding-right: 20px;
}
.tree-folder li input {
  display: none;
}
.tree-folder li:before {
  content: "\f114";
  font-family: "font awesome";
  transform: rotateY(180deg);
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 6px;
}
.tree-folder li.selected:before {
  content: "\f115";
  color: #21ae41;
}
.tree-circle li .tree-label {
  padding-right: 20px;
}
.tree-circle li input {
  display: none;
}
.tree-circle li:before {
  content: "\f111";
  font-family: "font awesome";
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 6px;
}
.tree-circle li.selected:before {
  content: "\f058";
  color: #21ae41;
  font-weight: 400;
}
.tree-square li .tree-label {
  padding-right: 20px;
}
.tree-square li input {
  display: none;
}
.tree-square li:before {
  content: "\f0c8";
  font-family: "font awesome";
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 6px;
}
.tree-square li.selected:before {
  content: "\f14a";
  color: #21ae41;
  font-weight: 400;
}
.tree-arrow li .tree-label {
  padding-right: 20px;
}
.tree-arrow li input {
  display: none;
}
.tree-arrow li:before {
  content: "\f104";
  font-family: "font awesome";
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 6px;
}
.tree-arrow li.selected:before {
  content: "\f107";
  color: #21ae41;
  font-weight: 300;
}
.tree-thread ul:not(.tree-first) {
  position: relative;
}
.tree-thread ul:not(.tree-first):before {
  content: "";
  width: 1px;
  height: calc(50% - 14px);
  position: absolute;
  right: 0;
  top: 50%;
}
.tree-thread ul:not(.tree-first):after {
  content: "";
  width: 1px;
  height: calc(50% - 14px);
  position: absolute;
  right: 0;
  bottom: 50%;
}
.tree-thread li:after {
  content: "";
  height: 1px;
  width: 16px;
  position: absolute;
  right: -20px;
  top: 14px;
}
.tree-thread li ul li:first-child:after {
  content: "";
  height: 18px;
  width: 16px;
  background-color: transparent !important;
  position: absolute;
  right: -20px;
  top: -4px;
  border-bottom-width: 1px;
  border-bottom-color: #c0c0c0;
  border-right-width: 1px;
  border-right-color: #c0c0c0;
}
.tree-thread.solid ul:before, .tree-thread.solid ul:after {
  background-color: #c0c0c0;
}
.tree-thread.solid li:after {
  background-color: #c0c0c0;
}
.tree-thread.solid li ul li:first-child:after {
  border-bottom-style: solid;
  border-right-style: solid;
}
.tree-thread.dashed ul:before, .tree-thread.dashed ul:after {
  border-right: 1px dashed #c0c0c0;
}
.tree-thread.dashed li:after {
  border-bottom: 1px dashed #c0c0c0;
}
.tree-thread.dashed li ul li:first-child:after {
  border-bottom-style: dashed;
  border-right-style: dashed;
}

.progress-dots {
  display: inline-flex;
  place-items: center;
  background-color: #f0346e;
  height: 2px;
  gap: 80px;
}
.progress-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #f0346e;
  position: relative;
}
.progress-dot:not(:first-child):before {
  content: "";
  width: 80px;
  height: 2px;
  background-color: #f0346e;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.progress-dot.active {
  background-color: #4656e9;
}
.progress-dot.active:before {
  background-color: #4656e9;
}
.progress-list {
  padding: 0 8px;
}
.progress-list ul {
  display: flex;
  place-items: center;
  border-bottom: 1px solid #c0c0c0;
}
.progress-list li {
  font-size: 12px;
  font-weight: 500;
  padding: 10px 16px;
  position: relative;
  transition: all 300ms;
  cursor: pointer;
}
.progress-list li.active:after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: #f0346e;
  position: absolute;
  bottom: 0;
  right: 0;
}

.tooltip {
  position: relative;
}
.tooltip-container {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 10;
  background-color: #fff;
  width: max-content;
  padding: 8px;
  box-shadow: 0 0 3px #c0c0c0;
}
.tooltip-container:before {
  content: "";
  border-bottom: 16px solid white;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  position: absolute;
  bottom: 100%;
  right: 20px;
}
.tooltip-container p {
  font-size: 12px;
  font-weight: 500;
  padding-bottom: 8px;
}
.tooltip-container.show {
  display: block;
}
.tooltip-container.hide {
  display: none;
}
.tooltip-close {
  display: flex;
  justify-content: left;
}
.tooltip-close i {
  cursor: pointer;
}

.tag-section {
  border: 1px solid #c0c0c0;
  height: 80px;
  position: relative;
  padding: 8px;
  border-radius: 8px;
}
.tag-list {
  width: 100%;
  display: flex;
  height: fit-content;
  gap: 4px;
  flex-wrap: wrap;
  max-height: 64px;
  overflow-y: auto;
}
.tag-btn {
  order: -1;
  font-size: 11px;
  padding: 0 4px 0 8px;
  height: 24px;
}
.tag-btn i {
  cursor: pointer;
  font-size: 16px;
  margin-left: 4px;
  height: 24px;
  display: flex;
  place-items: center;
  border-left: 1px solid rgba(70, 86, 233, 0.8);
  padding-left: 4px;
}
.tag-btn:hover i {
  color: #da0419;
}
.tag-input {
  min-width: 15%;
  height: 28px;
}
.tag-input input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: transparent;
}
.tag-item {
  position: absolute;
  top: 100%;
  right: 20%;
  left: 20%;
  z-index: 10;
  background-color: #fff;
  padding: 8px 16px;
  box-shadow: 0 4px 6px #c0c0c0;
}
.tag-item-close {
  display: flex;
  justify-content: left;
  padding-bottom: 4px;
}
.tag-item-close i {
  font-size: 20px;
  cursor: pointer;
}
.tag-item ul {
  max-height: 90px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tag-item li {
  list-style: none;
  line-height: 24px;
  cursor: pointer;
  font-size: 12px;
}
.tag-item.show {
  display: block;
}
.tag-item.hide {
  display: none;
}

.alert {
  height: 100px;
  background-color: #fafafa;
  border: 1px solid #e9e9e9;
}
.alert-modal {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.alert-body {
  height: 250px;
  margin: 80px auto;
  background-color: #fff;
  box-shadow: 0 0 5px #f0346e;
  border-radius: 8px;
}
.alert-fix {
  position: absolute;
  z-index: 100;
}
.alert-top-left {
  top: 10px;
  left: 2px;
}
.alert-top-right {
  right: 2px;
  top: 10px;
}
.alert-bottom-left {
  bottom: 10px;
  left: 2px;
}
.alert-bottom-right {
  right: 2px;
  bottom: 10px;
}
.alert-w10 {
  width: 10vw;
}
.alert-w20 {
  width: 20vw;
}
.alert-w30 {
  width: 30vw;
}
.alert-w40 {
  width: 40vw;
}
.alert-w50 {
  width: 50vw;
}
.alert-w60 {
  width: 60vw;
}
.alert-w70 {
  width: 70vw;
}
.alert-w80 {
  width: 80vw;
}
.alert-w90 {
  width: 90vw;
}
.alert-w100 {
  width: 100vw;
}
.alert-container {
  position: relative;
  width: 100%;
  height: 100px;
  bottom: 0;
  display: grid;
  grid-template-columns: 90px calc(100% - 90px);
}
.alert-close {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.alert-icon {
  height: 90px;
  width: 90px;
  background-color: #21ae41;
  display: flex;
  justify-content: center;
  place-items: center;
}
.alert-icon span {
  display: flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  justify-content: center;
  place-items: center;
}
.alert-icon span i {
  color: #21ae41;
  font-size: 24px;
  font-weight: 700;
  display: block;
}
.alert-message {
  padding-top: 18px;
  font-size: 11px;
  font-weight: 500;
  line-height: 24px;
  overflow-y: auto;
  direction: ltr;
  scrollbar-width: thin;
}
.alert-message p {
  padding: 0 4px;
}
.alert-progress {
  height: 8px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
.alert-progress-bar {
  height: 100%;
  background-color: #21ae41;
  animation-name: alertProg;
  animation-duration: 1500ms;
  -webkit-animation-name: alertProg;
  -webkit-animation-duration: 1500ms;
}
.alert.show, .alert-modal.show {
  display: block;
}
.alert.hide, .alert-modal.hide {
  display: none;
}

@keyframes alertProg {
  0% {
    width: 0;
  }
  10% {
    width: 10%;
  }
  20% {
    width: 20%;
  }
  30% {
    width: 30%;
  }
  40% {
    width: 40%;
  }
  50% {
    width: 50%;
  }
  60% {
    width: 60%;
  }
  70% {
    width: 70%;
  }
  80% {
    width: 80%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1) !important;
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.zoomIn {
  animation-name: zoomIn;
  animation-duration: 300ms;
  -webkit-animation-name: zoomIn;
  -webkit-animation-duration: 300ms;
}

.zoomOut {
  animation-name: zoomOut;
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  -webkit-animation-name: zoomOut;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: forwards;
}

.rotate {
  animation-name: rotate;
  animation-duration: 300ms;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 300ms;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0.01;
    width: 100%;
    height: 100%;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0.01;
    width: 100%;
    height: 100%;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5;
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.col {
  grid-column: span 12;
}
.col-1 {
  grid-column: span 1;
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}

.gap {
  gap: 4px 8px;
}
.gap-4 {
  gap: 4px;
}
.gap-8 {
  gap: 8px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-20 {
  gap: 20px;
}
.gap-24 {
  gap: 24px;
}

.pd {
  padding: 8px;
}
.pd-4 {
  padding: 4px;
}
.pd-8 {
  padding: 8px;
}
.pd-12 {
  padding: 12px;
}
.pd-16 {
  padding: 16px;
}
.pd-20 {
  padding: 20px;
}
.pd-24 {
  padding: 24px;
}
.pt-1 {
  padding-top: 4px;
}
.pt-2 {
  padding-top: 8px;
}
.pt-3 {
  padding-top: 12px;
}
.pt-4 {
  padding-top: 16px;
}
.pt-5 {
  padding-top: 20px;
}
.pt-6 {
  padding-top: 24px;
}
.pt-7 {
  padding-top: 28px;
}
.pt-8 {
  padding-top: 32px;
}
.pb-1 {
  padding-bottom: 4px;
}
.pb-2 {
  padding-bottom: 8px;
}
.pb-3 {
  padding-bottom: 12px;
}
.pb-4 {
  padding-bottom: 16px;
}
.pb-5 {
  padding-bottom: 20px;
}
.pb-6 {
  padding-bottom: 24px;
}
.pb-7 {
  padding-bottom: 28px;
}
.pb-8 {
  padding-bottom: 32px;
}
.pr-1 {
  padding-right: 4px;
}
.pr-2 {
  padding-right: 8px;
}
.pr-3 {
  padding-right: 12px;
}
.pr-4 {
  padding-right: 16px;
}
.pr-5 {
  padding-right: 20px;
}
.pr-6 {
  padding-right: 24px;
}
.pr-7 {
  padding-right: 28px;
}
.pr-8 {
  padding-right: 32px;
}
.pl-1 {
  padding-left: 4px;
}
.pl-2 {
  padding-left: 8px;
}
.pl-3 {
  padding-left: 12px;
}
.pl-4 {
  padding-left: 16px;
}
.pl-5 {
  padding-left: 20px;
}
.pl-6 {
  padding-left: 24px;
}
.pl-7 {
  padding-left: 28px;
}
.pl-8 {
  padding-left: 32px;
}

.m-1 {
  margin: 4px;
}
.m-2 {
  margin: 8px;
}
.m-3 {
  margin: 12px;
}
.m-4 {
  margin: 16px;
}
.m-5 {
  margin: 20px;
}
.m-6 {
  margin: 24px;
}
.m-7 {
  margin: 28px;
}
.m-8 {
  margin: 32px;
}
.mt-1 {
  margin-top: 4px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-3 {
  margin-top: 12px;
}
.mt-4 {
  margin-top: 16px;
}
.mt-5 {
  margin-top: 20px;
}
.mt-6 {
  margin-top: 24px;
}
.mt-7 {
  margin-top: 28px;
}
.mt-8 {
  margin-top: 32px;
}
.mb-1 {
  margin-bottom: 4px;
}
.mb-2 {
  margin-bottom: 8px;
}
.mb-3 {
  margin-bottom: 12px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-5 {
  margin-bottom: 20px;
}
.mb-6 {
  margin-bottom: 24px;
}
.mb-7 {
  margin-bottom: 28px;
}
.mb-8 {
  margin-bottom: 32px;
}
.mr-1 {
  margin-right: 4px;
}
.mr-2 {
  margin-right: 8px;
}
.mr-3 {
  margin-right: 12px;
}
.mr-4 {
  margin-right: 16px;
}
.mr-5 {
  margin-right: 20px;
}
.mr-6 {
  margin-right: 24px;
}
.mr-7 {
  margin-right: 28px;
}
.mr-8 {
  margin-right: 32px;
}
.ml-1 {
  margin-left: 4px;
}
.ml-2 {
  margin-left: 8px;
}
.ml-3 {
  margin-left: 12px;
}
.ml-4 {
  margin-left: 16px;
}
.ml-5 {
  margin-left: 20px;
}
.ml-6 {
  margin-left: 24px;
}
.ml-7 {
  margin-left: 28px;
}
.ml-8 {
  margin-left: 32px;
}
.m-auto {
  margin: auto;
}

[class*=col-] {
  display: block;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.flex.center,
.inline-flex.center {
  justify-content: center;
  place-items: center;
}
.flex.center-v,
.inline-flex.center-v {
  justify-content: center;
}
.flex.center-h,
.inline-flex.center-h {
  place-items: center;
}
.flex.full-width,
.inline-flex.full-width {
  width: 100%;
}
.flex.fix-width,
.inline-flex.fix-width {
  width: fit-content;
}
.flex.full-height,
.inline-flex.full-height {
  height: 100%;
}
.flex.fix-height,
.inline-flex.fix-height {
  height: fit-content;
}
.flex.left,
.inline-flex.left {
  justify-content: left;
}
.flex.right,
.inline-flex.right {
  justify-content: right;
}
.flex.between,
.inline-flex.between {
  justify-content: space-between;
}
.flex.flex-culomn,
.inline-flex.flex-culomn {
  flex-direction: column;
}
.flex.flex-start,
.inline-flex.flex-start {
  justify-content: flex-start;
}
.flex.flex-end,
.inline-flex.flex-end {
  justify-content: flex-end;
}

.block {
  display: block !important;
}

.justify-center {
  justify-content: center;
}
.justify-right {
  justify-content: right;
}
.justify-left {
  justify-content: left;
}
.justify-between {
  justify-content: space-between;
}

.form-area, .form-select, .form-required-text, .form-input, .form-group-text, .form-control {
  width: 100%;
  display: block;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  font-weight: 500;
  background-color: #fff;
  font-family: "iransans";
  font-size: 11px;
  font-weight: 500;
  outline: none;
  padding: 0 4px;
  border: none;
  padding-top: 4px;
}

.form-area, .form-select, .form-input, .form-group, .form-control {
  border-radius: 4px;
  border: 1px solid #c0c0c0;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  padding: 0px 4px;
  margin-right: 12px;
  margin-bottom: -10px;
  height: 20px;
  width: fit-content;
  position: relative;
  z-index: 5;
  color: #f0346e;
}
.form-label:after {
  content: "";
  height: 2px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 8px;
  background-color: #fff;
  z-index: -1;
}
.form-control.readonly {
  padding: 0;
  padding-right: 4px;
  background-color: #e9e9e9;
}
.form-control.readonly:focus {
  box-shadow: none;
}
.form-control:focus {
  box-shadow: 0px 2px 2px #c0c0c0;
}
.form-control:disabled {
  background-color: #fafafa;
}
.form-validate {
  display: block;
  padding: 2px 0;
  font-size: 11px;
  color: #da0419;
}
.form-title {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 2px dotted #c0c0c0;
  color: #1d1d1d;
  margin: 4px 0 8px;
}
.form-title.solid {
  border-bottom-style: solid;
}
.form-group {
  display: grid;
  grid-template-columns: 40px calc(100% - 40px);
  height: 38px;
  place-items: center;
  overflow: hidden;
}
.form-group:focus {
  box-shadow: 0 0 5px red;
}
.form-group-btn {
  width: 40px;
  text-align: center;
  font-size: 24px;
  color: #444;
}
.form-input {
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.form-input.readonly {
  padding: 0;
  background-color: #e9e9e9;
}
.form-input input {
  border: none;
  outline: none;
  display: block;
  width: 100%;
  background-color: transparent;
}
.form-input input:focus .form-input {
  box-shadow: 0px 2px 2px #c0c0c0;
}
.form-required {
  position: relative;
}
.form-required:before {
  content: "";
  width: 5px;
  background-color: #c0c0c0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.form-required input {
  padding-right: 6px;
}
.form-required-text {
  padding-right: 12px;
}
.form-select {
  position: relative;
  display: flex;
  padding-left: 0;
  padding-top: 0;
}
.form-select:after {
  font-family: "font awesome";
  font-size: 13px;
  margin-right: auto;
  display: block;
  padding: 0 4px;
  font-weight: 700;
}
.form-select-text {
  border: none;
  outline: none;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
}
.form-select-text:disabled {
  background-color: #fafafa;
}
.form-select-list {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 10;
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.form-select-list li {
  padding: 0 4px;
}
.form-select-list li:hover {
  background-color: #e9e9e9;
}
.form-select-btn {
  display: inline-flex;
  gap: 8px;
  justify-content: right;
  place-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #f0346e;
  padding: 4px;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
}
.form-select.after-on:after {
  background-color: #c0c0c0;
}
.form-select.show {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-select.show:after {
  content: "\f106";
  background-color: #c0c0c0;
}
.form-select.show .form-select-list {
  display: block;
}
.form-select.hide:after {
  content: "\f107";
}
.form-select.hide .form-select-list {
  display: none;
}
.form-select.classic {
  padding-right: 12px;
}
.form-select.classic:after {
  background-color: #c0c0c0;
}
.form-select.select-required:before {
  content: "";
  width: 5px;
  background-color: #c0c0c0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.form-select.select-required input {
  padding-right: 6px;
}
.form-radio {
  width: 100%;
  min-height: 28px;
  display: flex;
  gap: 8px;
  place-items: center;
}
.form-radio label {
  display: inline-flex;
  gap: 4px;
  place-items: center;
  font-weight: 400;
  font-size: 11px;
}
.form-radio input {
  width: 10px;
  height: 10px;
}
.form-radio-lg label {
  font-size: 12px;
  font-weight: 500;
}
.form-radio-lg input {
  width: 12px;
  height: 12px;
}
.form-area {
  height: 60px;
  line-height: 28px;
  resize: none;
}
.form-area:focus {
  box-shadow: 0px 2px 2px #c0c0c0;
}
.form-area.readonly {
  padding: 0;
  padding-right: 4px;
  background-color: #e9e9e9;
}
.form-area.readonly:focus {
  box-shadow: none;
}
.form-picture {
  position: relative;
  width: 120px;
  max-width: 100%;
  height: 120px;
  margin: 8px auto;
  border: 1px solid #c0c0c0;
  z-index: 0;
}
.form-picture:after {
  content: "\f1c5";
  font-family: "font awesome";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e9e9e9;
  color: #c0c0c0;
  font-size: 24px;
  display: flex;
  justify-content: center;
  place-items: center;
  z-index: -1;
}
.form-picture-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  z-index: 10;
}
.form-picture-btn .btn {
  font-size: 14px;
  margin-top: 8px;
  width: 20px;
  height: 20px;
}
.form-picture-btn .btn:hover .fa {
  font-weight: 700;
}
.form-picture-img {
  display: none;
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}
.form-toggle {
  display: inline-flex;
  gap: 4px;
  place-items: center;
}
.form-toggle-btn {
  padding: 0;
  font-size: 20px;
  height: 26px;
}
.form-toggle-icon.fa-toggle-on {
  font-weight: 900;
}
.form-toggle-icon.fa-toggle-off {
  color: #444;
  font-weight: 300;
}
.form-toggle-title {
  font-size: 12px;
  font-weight: 500;
  display: block;
}
.form-toggle-label {
  font-size: 13px;
  font-weight: 500;
}
.form-search {
  display: grid;
  grid-template-columns: calc(100% - 40px) 40px;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  position: relative;
}
.form-search input,
.form-search button {
  background-color: transparent;
  border: none;
  outline: none;
  line-height: 34px;
}
.form-search button {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  place-items: center;
  justify-content: center;
  border-right: 1px solid #c0c0c0;
}
.form-search button i {
  font-weight: 600;
  color: #c0c0c0;
}
.form-search button:hover i {
  color: #1d1d1d;
}
.form-search input {
  padding: 0 8px;
}
.form-search-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px #c0c0c0;
  padding: 4px;
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.form-search-list li {
  font-size: 11px;
  line-height: 28px;
  padding: 0 4px;
  cursor: pointer;
}
.form-search-list li:hover {
  background-color: #fafafa;
}
.form-search.show .form-search-list {
  display: block;
}
.form-search.hide .form-search-list {
  display: none;
}

fieldset {
  border: none;
  outline: none;
}

.page {
  display: grid;
  grid-template-columns: 100px calc(100% - 100px);
  border: 1px solid #e9e9e9;
}
.page-nav {
  position: relative;
}
.page-nav-main {
  height: 100vh;
  max-height: 100vh !important;
  overflow-y: auto;
  background-color: #777777;
  scrollbar-width: thin;
  direction: ltr;
  position: sticky;
  top: 0;
  z-index: 10;
  padding-bottom: 40px;
}
.page-nav-main li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-items: center;
  gap: 4px;
  position: relative;
  height: 60px;
  transition: all 300ms;
  color: #fff;
}
.page-nav-main li:not(:last-child) {
  border-bottom: 1px solid #969696;
}
.page-nav-main li.show {
  background-color: #969696;
}
.page-nav-main li.show:after {
  content: "";
  border-left: 10px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.page-nav-main li i {
  font-size: 20px;
}
.page-nav-main li span {
  font-size: 11px;
  font-weight: 500;
}
.page-nav-sub {
  position: absolute;
  top: 0;
  width: 200px;
  height: 100vh;
  bottom: 0;
  z-index: 2;
  padding-bottom: 40px;
  overflow-y: auto;
  background-color: #fff;
  scrollbar-width: thin;
  direction: ltr;
  transition: all 500ms;
  box-shadow: -2px 0 4px -2px rgba(192, 192, 192, 0.6);
}
.page-nav-sub li {
  position: relative;
  z-index: 1;
  display: flex;
  place-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 8px 0 28px;
  position: relative;
  border-bottom: 1px solid rgba(192, 192, 192, 0.6);
  color: #646464;
}
.page-nav-sub li:hover:not(.page-nav-sub li.nav-title) {
  background-color: #e9e9e9;
}
.page-nav-sub li:hover:not(.page-nav-sub li.nav-title):after {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #525252;
}
.page-nav-sub li.nav-title {
  padding: 16px 8px 4px;
  border-bottom: none;
  height: auto;
  color: #1d1d1d;
}
.page-nav-sub li.nav-title h3 {
  font-size: 14px;
  font-weight: 500;
}
.page-nav-sub li:last-child {
  border-bottom: none;
}
.page-nav-sub li span {
  font-size: 12px;
  font-weight: 500;
}
.page-nav-sub li button {
  position: absolute;
  z-index: 5;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: blue;
  color: #fff;
  border-radius: 50%;
  margin-right: auto;
  display: inline-flex;
  width: 22px;
  height: 22px;
  font-size: 11px;
  justify-content: center;
  place-items: center;
}
.page-nav-sub.show {
  right: 100px;
}
.page-nav-sub.hide {
  right: -1400px;
}
.page-body {
  position: relative;
  z-index: 1;
  width: 100%;
}
.page-top {
  height: 80px;
  background-color: #fff;
}
.page-top-header {
  height: 40px;
  border-bottom: 1px solid rgba(192, 192, 192, 0.2);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.page-top-company {
  padding: 2px 8px;
  display: flex;
  place-items: center;
}
.page-top-company img {
  max-height: 36px;
}
.page-top-company h1 {
  font-size: 14px;
  font-weight: 700;
}
.page-top-left {
  display: flex;
  gap: 16px;
  place-items: center;
}
.page-top-info {
  display: flex;
  gap: 4px;
  place-items: center;
  padding-left: 16px;
  border-left: 1px solid #c0c0c0;
  height: 100%;
  position: relative;
}
.page-top-info span {
  font-size: 12px;
}
.page-top-info span:first-child {
  font-weight: 500;
}
.page-top-info span:last-child {
  font-weight: 400;
}
.page-top-btn {
  display: flex;
  place-items: center;
  position: relative;
  height: 100%;
}
.page-top-toggle.show {
  color: #21ae41;
}
.page-top-toggle.hide {
  color: #1d1d1d;
}
.page-top-sub {
  position: absolute;
  top: 100%;
  left: 10px;
  z-index: 9999;
  min-width: 100%;
  width: max-content;
  min-height: 40px;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(192, 192, 192, 0.8);
  overflow: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.page-top-sub.show {
  display: block;
}
.page-top-sub.hide {
  display: none;
}
.page-top-sub h3 {
  padding: 16px 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1d;
}
.page-top-sub li {
  padding: 8px 16px;
  font-size: 11px;
  line-height: 28px;
  cursor: pointer;
}
.page-top-sub li:not(:first-child) {
  border-top: 1px solid rgba(192, 192, 192, 0.3);
}
.page-top-sub li:hover {
  background-color: #e9e9e9;
}
.page-top-menu {
  height: 40px;
  background-color: #00ffff;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid #c0c0c0;
}
.page-top-setting {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: end;
}
.page-top-setting button {
  font-size: 14px;
  height: 100%;
}
.page-container {
  height: calc(100% - 80px);
  background-color: #fafafa;
}

.home-page {
  background-color: #fff;
  min-height: 100%;
  padding: 4px;
}

.home-info {
  width: 100%;
  height: 100px;
}
.home-info-list {
  background-color: #fff;
  width: 100%;
}

.tab-list {
  display: grid;
  grid-template-columns: calc(100% - 116px) 100px;
  gap: 16px;
  place-items: center;
  justify-content: space-between;
}
.tab-list ul {
  display: flex;
  place-items: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  width: 100%;
}
.tab-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  place-items: center;
  gap: 8px;
  height: 40px;
  width: fit-content;
  padding: 4px;
  cursor: pointer;
  transition: all 200ms;
}
.tab-list li:first-child {
  padding: 4px 16px;
}
.tab-list li:not(:last-child) {
  border-left: 1px solid #c0c0c0;
}
.tab-list li.active {
  background-color: #fafafa;
  min-width: max-content;
}
.tab-list li.active:after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #c0c0c0;
}
.tab-list li .fa-times {
  height: 24px;
  width: 24px;
  display: flex;
  place-items: center;
  justify-content: center;
  margin-right: 4px;
  font-weight: 700;
  font-size: 13px;
}
.tab-list li .fa-times:hover {
  background-color: #da0419;
  color: #fff;
  border-radius: 50%;
}
.tab-list li:not(.tab-list li.active) .fa-times {
  display: none;
}
.tab-list li span {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.tab-list li:not(.tab-list li.active, .tab-list li.home) {
  color: #646464;
}
.tab-list li:not(.tab-list li.active, .tab-list li.home) span {
  font: 11px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
}
.tab-list li:not(.tab-list li.active, .tab-list li.home) .fa {
  color: #646464;
}
.tab-list li .fa:not(.fa-times) {
  color: #444;
}
.tab-container.show {
  display: block;
}
.tab-container.hide {
  display: none;
}
.tab-control {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0 8px 4px;
}
.tab-control-btn {
  min-width: max-content;
  height: 40px;
  display: inline-flex;
  place-items: center;
  gap: 4px;
  border-left: 1px solid #c0c0c0;
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
  background-color: #e9e9e9;
  color: #444;
  transition: all 200ms;
  position: relative;
}
.tab-control-btn:first-child {
  border-right: 1px solid #c0c0c0;
}
.tab-control-btn.active {
  background-color: #fff;
  font-weight: 500;
  color: #1d1d1d;
  border-bottom: none;
}
.tab-control-btn.active:after {
  content: "";
  height: 2px;
  background-color: #c0c0c0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tab-control-panel {
  width: 100%;
  height: calc(100% - 50px);
  overflow: scroll;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.tab-control-panel.show {
  display: block;
}
.tab-control-panel.hide {
  display: none;
}
.tab-scroll-control {
  display: flex;
  place-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid #c0c0c0;
  position: sticky;
  z-index: 10;
  top: 0;
  background-color: #fff;
}
.tab-scroll-btn {
  height: 40px;
  min-width: max-content;
  display: inline-flex;
  gap: 4px;
  place-items: center;
  padding: 0 8px;
  position: relative;
  transition: all 300ms;
  font-size: 13px;
}
.tab-scroll-btn.active {
  font-weight: 500;
}
.tab-scroll-btn.active:before {
  content: "";
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #c0c0c0;
}
.tab-scroll-panel {
  width: 100%;
  padding: 20px 8px;
}
.tab-vertical .tab-control {
  padding: 0;
}
.tab-vertical .tab-control-btn {
  background-color: transparent;
  border: none;
  font-weight: 700;
}
.tab-vertical .tab-control-btn.active:after {
  bottom: 0 !important;
  top: unset;
}
.tab-vertical .tab-control-panel {
  height: 100%;
  overflow: unset;
  padding-top: 8px;
}
.tab-section .tab-control-btn.btn {
  background-color: #17c0dc;
  border-radius: 4px;
  font-weight: 500;
  padding: 6px 16px;
  height: fit-content;
}
.tab-section .tab-control-btn.btn.btn-primary {
  background-color: #4656e9;
  color: #fff;
}
.tab-section .tab-control-btn.btn.btn-info {
  background-color: #17c0dc;
  color: #000;
}
.tab-section .tab-control-panel {
  height: fit-content;
  overflow: unset;
  padding-top: 0;
}

.filter {
  width: 240px;
  height: 350px;
  background-color: #fafafa;
  box-shadow: 0 0px 3px -1px #000;
  position: absolute;
  right: 0;
  top: 100%;
  display: block;
}
.filter-sort {
  display: grid;
}
.filter-sort button {
  border: none;
  background-color: transparent;
  outline: none;
  width: 100%;
  display: flex;
  gap: 8px;
  place-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 4px;
}
.filter-sort button:last-child {
  border-top: 1px solid #e9e9e9;
}
.filter-sort button:nth-of-type(2) {
  margin-bottom: 8px;
}
.filter-sort button i {
  font-size: 16px;
}
.filter-sort button:hover {
  background-color: #e9e9e9;
}
.filter-search {
  margin: 8px;
  display: grid;
  grid-template-columns: 85% 15%;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
}
.filter-search input, .filter-search button {
  background-color: transparent;
  border: none;
  outline: none;
  line-height: 34px;
}
.filter-search input {
  padding: 0 8px;
}
.filter-list {
  height: 160px;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  overflow-y: auto;
  scrollbar-width: thin;
  border: 1px solid #c0c0c0;
}
.filter-list label {
  display: flex;
  gap: 4px;
  place-items: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  padding: 4px;
}
.filter-btn {
  padding: 8px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

/*#region table*/
.table {
  border-spacing: 0;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  border-top: none;
}
.table-w100 {
  width: 100%;
}
.table-container {
  margin: 0 auto;
  padding: 4px 4px;
  position: relative;
}
.table-responsive {
  min-width: max-content;
}
.table-resize th:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
.table-ellipses th {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-height: 24px;
  height: 30px;
  display: -webkit-inline-box;
}
.table tr th:not(:last-child),
.table tr td:not(:last-child) {
  border-left: 1px solid #c0c0c0;
}
.table-not-left-border tr th:not(:last-child),
.table-not-left-border tr td:not(:last-child) {
  border-left: none;
}
.table th,
.table td {
  border-bottom: 1px solid #c0c0c0;
  position: relative;
}
.table th {
  padding: 4px;
  background-color: #f8f8f8;
  border-top: 1px solid #c0c0c0;
  font-size: 11px;
  font-weight: 700;
}
.table td {
  padding: 4px;
  font-size: 11px;
  font-weight: 500;
}
.table tfoot td {
  border-bottom: none;
}
.table tfoot td:not(:last-child) {
  border-left: 1px solid #c0c0c0;
}
.table tr.selected {
  background-color: #e9e9e9;
  position: relative;
}
.table tr.selected td:first-child {
  position: relative;
}
.table tr.selected td:first-child:before {
  content: "";
  border-right: 4px solid #c0c0c0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: inline-block;
}
.table-top {
  height: 36px;
  display: flex;
  place-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px;
  background-color: #e9e9e9;
}
.table-top h3 {
  font-size: 12px;
}
.table-top-title {
  display: flex;
  gap: 4px;
  place-items: center;
}
.table-top-btn {
  display: flex;
  gap: 8px;
  justify-content: left;
  place-items: center;
}
.table-top-btn > div {
  display: flex;
  gap: 8px;
  padding: 0 8px;
}
.table-top-btn > div .btn {
  padding: 4px 16px;
}
.table-top-btn > div .btn-icon:not(.table-addrow) {
  padding: 4px 2px;
}
.table-top-btn > div .btn-icon:not(.table-addrow):not(:first-child) {
  margin-right: 4px;
}
.table-top-btn > div .btn-icon:not(.table-addrow) i {
  font-weight: 600;
}
.table-top-btn > div .btn .fa {
  font-size: 16px;
}
.table-top label {
  display: inline-flex;
  place-items: center;
  gap: 4px;
  font-size: 12px;
}
.table-header {
  background-color: #fafafa;
}
.table-header-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-around;
  padding: 4px 8px;
  box-shadow: 0 2px 4px #c0c0c0;
}
.table-header-top label {
  display: inline-flex;
  place-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
}
.table-header-top div {
  display: flex;
  gap: 4px;
  place-items: center;
  justify-content: end;
}
.table-header-alert h3 {
  font-size: 12px;
  font-weight: 500;
  color: #da0419;
  width: 100%;
  text-align: right;
  padding: 4px;
}
.table-main {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #c0c0c0;
}
.table-main .table {
  border-right: none;
}
.table-basic {
  height: calc(100% - 40px);
  overflow-y: scroll;
  overflow-x: scroll;
  scrollbar-gutter: stabel;
  scrollbar-width: thin;
  padding-left: 2px;
  position: relative;
  z-index: 1;
}
.table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.table-bottom {
  position: absolute;
  z-index: 2;
  left: 4px;
  right: 4px;
  top: 100%;
}
.table-pagination {
  display: flex;
  place-items: center;
  gap: 16px;
  padding: 0 8px;
  background-color: #e9e9e9;
}
.table-pagination button {
  border: none;
  background-color: transparent;
  outline: none;
}
.table-paging {
  display: flex;
  gap: 16px;
  place-items: center;
  padding: 4px 0;
}
.table-paging span {
  display: flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.table-paging span i {
  font-style: normal;
}
.table-paging .fa {
  font-weight: 700;
}
.table-breadcrumb ul {
  display: flex;
  padding-bottom: 8px;
}
.table-breadcrumb li {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 2px;
  display: flex;
  place-items: center;
  gap: 2px;
}
.table-breadcrumb li:not(.table-breadcrumb li:last-child):after {
  content: "\f104";
  font-family: "font awesome";
  font-weight: 300;
  font-size: 11px;
}
.table-func {
  position: relative;
}
.table-func-list {
  background-color: #fff;
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: 10;
  box-shadow: 0 0 4px #c0c0c0;
}
.table-func-list li {
  display: flex;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  width: 120px;
}
.table-func-list li:hover {
  background-color: #17c0dc;
  cursor: pointer;
}
.table-func-list.hide {
  display: none;
}
.table-func-list.show {
  display: block;
}
.table-func-btn {
  padding: 0;
  font-size: 24px;
  color: #4656e9;
}
.table-goto {
  height: fit-content;
  display: flex;
  place-items: center;
  background-color: #fff;
  padding: 0 4px;
  border-radius: 16px;
}
.table-goto input {
  width: 60px;
  border: none;
  background-color: transparent;
  outline: none;
  padding-right: 4px;
}
.table-details {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 8px;
  margin: 0 24px;
  padding: 0;
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  background-color: #fafafa;
}
.table-details-right {
  display: grid;
  grid-template-columns: 70px calc(100% - 90px);
  gap: 20px;
}
.table-details-img {
  width: 70px;
  height: 70px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.table-details-img:after {
  content: "\f1c5";
  font-family: "font awesome";
  font-weight: 300;
  font-size: 30px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  place-items: center;
  line-height: 70px;
  color: #e9e9e9;
  z-index: -1;
}
.table-details-count {
  display: grid;
  justify-content: space-between;
  place-items: center;
  padding-right: 8px;
  border-right: 2px solid #c0c0c0;
}
.table-details-count div {
  display: flex;
  gap: 8px;
}
.table-details-left {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: 0 24px;
}
.table-details-left div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.table-details-left div:last-child {
  grid-column: span 2;
}
.table-details-left div:last-child span:last-child {
  display: block;
  width: 80%;
}
.table-details-twocolumn {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 0;
}
.table-details-twocolumn .table-details-right,
.table-details-twocolumn .table-details-left {
  grid-template-columns: max-content auto;
  gap: 16px;
  justify-content: right;
}
.table-details-twocolumn .table-details-left {
  justify-content: left;
}
.table-field {
  padding: 0 !important;
  position: relative;
}
.table-field input {
  width: 100%;
  height: 36px;
  line-height: 28px;
  border: none;
  outline: none;
  background-color: #fff;
  padding: 2px;
}
.table-field input:focus {
  outline: none;
}
.table-field-container {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 400px;
  width: max-content;
  min-height: 60px;
  background-color: #fff;
  z-index: 1;
  border: 1px solid #c0c0c0;
}
.table-newrow.selected {
  background-color: #fff !important;
}
.table-newrow td {
  padding: 1px;
  text-align: center;
}
.table-newrow .btn {
  padding: 0;
}
.table-newrow .fa-trash-alt {
  font-weight: 400;
  color: #da0419;
  font-size: 16px;
}
.table-newrow .form-select-list {
  min-width: max-content;
}
.table-newrow .form-select.show:after {
  background-color: transparent;
}
.table-newrow .form-select:after {
  font-size: 10px;
  padding: 0 2px;
}
.table-newrow-input {
  width: 100%;
  display: block;
  height: 24px;
  line-height: 24px;
  background-color: #fff;
  font-family: "iransans";
  font-size: 11px;
  font-weight: 500;
  outline: none;
  padding: 0 4px;
  padding-top: 4px;
  border-radius: 4px;
  border: 1px solid #c0c0c0;
}
.table-newrow-input.readonly {
  background-color: #e9e9e9;
}
.table-newrow-input:not(.readonly):focus {
  border-color: #f0346e;
}
.table-total {
  background-color: #fafafa;
}
.table-total td {
  font-size: 16px;
}

.th-null {
  width: 12px;
}
.th-null-2 {
  width: 24px;
}
.th-operand {
  width: 24px;
  background-color: #fff;
}
.th-operand .btn {
  padding: 0;
  margin: auto;
}
.th-counter {
  width: 40px;
}
.th-row {
  width: 60px;
}
.th-code {
  width: 120px;
}
.th-title {
  width: 220px;
}
.th-count {
  width: 70px;
}
.th-unit {
  width: 80px;
}
.th-ppunit {
  width: 120px;
}
.th-ptotal {
  width: 180px;
}
.th-details {
  width: 350px;
}
.th-auto {
  width: 100%;
}
.th-max th {
  min-width: max-content;
  display: -webkit-inline-box;
  line-height: 24px;
  height: 30px;
}

.td-row {
  text-align: center;
}

/*#endregion*/
.modal {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.modal-card {
  max-height: 90vh;
  background-color: #fff;
  margin: 5vh auto;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-shadow: 0 2px 3px #c0c0c0;
}
.modal-card-w9 {
  width: 90%;
}
.modal-card-w8 {
  width: 80%;
}
.modal-card-w7 {
  width: 70%;
}
.modal-card-w6 {
  width: 60%;
}
.modal-card-w5 {
  width: 50%;
}
.modal-card-w4 {
  width: 40%;
}
.modal-card-w3 {
  width: 30%;
}
.modal-card-w2 {
  width: 20%;
}
.modal.transparent {
  background-color: rgba(0, 0, 0, 0.02);
}
.modal-title {
  display: flex;
  justify-content: space-between;
  place-items: center;
  height: 50px;
  padding: 4px;
  border-bottom: 1px solid #c0c0c0;
}
.modal-title h3 {
  font-size: 14px;
  padding: 0 16px;
  font-weight: 500;
}
.modal-title button {
  background-color: transparent;
  border: none;
  outline: none;
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.modal-container {
  max-height: calc(90vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: 8px 16px;
  background-color: #e9e9e9;
  direction: ltr;
}
.modal-body {
  background-color: #fff;
  box-shadow: 0 3px 5px #c0c0c0;
}
.modal-bottom {
  height: 50px;
  display: flex;
  justify-content: left;
  gap: 8px;
  place-items: center;
  padding: 0 16px;
  border-top: 1px solid #c0c0c0;
}
.modal-full .modal-container {
  height: calc(90vh - 140px);
}
.modal .table-container {
  width: 100%;
}
.modal.show {
  display: block;
}
.modal.hide {
  display: none;
}

.add-product .modal-container {
  overflow-y: hidden;
}
.add-product-main {
  padding: 8px;
  background-color: #f0f0f0;
  overflow-y: scroll;
  scrollbar-width: thin;
  height: calc(90vh - 108px);
}
.add-product-main .form-radio {
  min-height: 20px;
}
.add-product-typebox {
  height: calc(100% - 16px);
  padding: 0 16px 16px 0;
  position: relative;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.add-product-typebox:before {
  content: "";
  height: 120px;
  width: 1px;
  position: absolute;
  right: 4px;
  top: -8px;
  background-color: #c0c0c0;
}
.add-product-type {
  display: flex;
  border-radius: 8px;
  justify-content: space-evenly;
}
.add-product-type li {
  width: 100%;
}
.add-product-code {
  display: flex;
  place-items: center;
  height: 100%;
  font-size: 14px;
  font-weight: 400;
}
.add-product-details {
  height: calc(90vh - 108px);
  overflow-y: scroll;
  scrollbar-width: thin;
}
.add-product-details .fa-ellipsis {
  font-weight: 700;
}
.add-product-details h3 {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 8px;
}
.add-product-variable .table-container {
  width: 100%;
}
.add-product-variable .table-main {
  width: 100%;
}
.add-product-variable .table th:first-child {
  width: 16px;
}
.add-product-variable .table tr td:first-child {
  text-align: center;
}
.add-product-cusradio {
  display: grid;
  place-items: center;
}
.add-product-cusradio .form-radio {
  min-height: fit-content;
}
.add-product-otherunits {
  padding: 8px 4px;
  box-shadow: 0 3px 6px #e9e9e9;
}

.add-person-typebox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.add-person-type {
  margin: 20px;
  display: flex;
}

.state-type.show {
  display: block;
}
.state-type.hide {
  display: none;
}

.state-toggle {
  border: 1px solid #c0c0c0;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  width: fit-content;
}
.state-toggle-btn {
  font-size: 14px;
  padding: 4px 16px;
  cursor: pointer;
  transition: all 300ms;
}
.state-toggle-btn.selected {
  background-color: #21ae41;
  color: #fff;
}

.group-person .box {
  height: 170px;
}

.productgroup {
  height: calc(100vh - 80px);
  padding-top: 4px;
  background-color: #fff;
}
.productgroup-right {
  background-color: #fafafa;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid #e9e9e9;
}
.productgroup-search {
  padding: 8px 16px 16px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  box-shadow: 0 3px 2px #e9e9e9;
  place-items: center;
}
.productgroup-search .form-search {
  width: 100%;
}
.productgroup-search .btn-primary {
  height: 34px;
}
.productgroup-search-btns {
  max-width: fit-content;
  display: flex;
  gap: 8px;
  place-items: center;
}
.productgroup-search .fa-print {
  font-size: 24px;
}
.productgroup .tree {
  padding: 8px 16px;
  height: 430px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stabel;
}
.productgroup-left {
  padding: 8px;
}
.productgroup-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #c0c0c0;
}
.productgroup-title h3 {
  font-size: 13px;
  font-weight: 500;
}
.productgroup-title div {
  display: flex;
  gap: 16px;
}
.productgroup-title div .btn {
  padding: 8px;
}
.productgroup-title .fa-trash {
  color: #da0419;
  font-weight: 600;
}
.productgroup-info {
  padding: 8px 0;
}
.productgroup-info li {
  display: grid;
  grid-template-columns: 25% calc(75% - 8px);
  gap: 8px;
  line-height: 40px;
}
.productgroup-info li span {
  font-size: 14px;
}
.productgroup-info li span:nth-of-type(1) {
  color: #646464;
}
.productgroup-list {
  position: relative;
}
.productgroup-list .table-container {
  width: 100%;
  padding: 0;
}
.productgroup-list .table-main {
  width: 100%;
  height: calc(100vh - 340px) !important;
}
.productgroup-list .table-bottom {
  position: absolute;
  right: 0;
  bottom: -40px;
}

.product {
  height: calc(100vh - 80px);
  background-color: #fafafa;
  padding-top: 4px;
}
.product-right {
  padding: 0 8px;
  position: relative;
}
.product-right .table-container {
  width: 100%;
  padding: 0;
}
.product-right .table-main {
  width: 100%;
}
.product-right .table-bottom {
  position: absolute;
  right: 8px;
  left: 8px;
  bottom: -40px;
}
.product-right .table th:first-child {
  width: 40px;
}
.product-right .table tr td:first-child {
  text-align: center;
}
.product-left {
  padding: 0 8px;
}
.product-container {
  background-color: #fff;
  padding: 8px;
  box-shadow: 0 0 2px #c0c0c0;
}
.product-info {
  display: grid;
  grid-template-columns: 80px calc(100% - 90px);
  gap: 10px;
  place-items: center;
}
.product-info ul {
  width: 100%;
}
.product-info li {
  display: grid;
  grid-template-columns: 90px calc(100% - 110px);
  gap: 20px;
}
.product-info li:last-child div:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
}
.product-info li:last-child div:nth-of-type(2) .btn {
  padding: 4px;
}
.product-info li div:first-child span {
  color: #444;
}
.product-info li span {
  font-size: 12px;
  font-weight: 500;
  line-height: 28px;
}
.product-picture {
  height: 80px;
  width: 80px;
  position: relative;
  z-index: 1;
  border: 1px solid #c0c0c0;
}
.product-picture:before {
  content: "\f1c5";
  font-family: "font awesome";
  font-size: 24px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  place-items: center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  color: #c0c0c0;
}
.product-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: auto auto;
}
.product-btn {
  display: inline-flex;
  gap: 8px;
  padding-left: 16px;
}
.product-title {
  padding: 8px 16px;
  background-color: #fafafa;
  color: #4656e9;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}
.product-panel {
  height: calc(100vh - 240px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: 8px;
}
.product-panel h3 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 24px;
}
.product-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 28px;
  height: 28px;
  gap: 4px;
}
.product-text-null {
  color: #646464;
}

.creditinstock {
  padding-bottom: 30px;
}
.creditinstock-info {
  display: flex;
  place-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #4656e9;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.creditinstock-info .fa {
  font-size: 18px;
  color: #4656e9;
}
.creditinstock-unselected, .creditinstock-selected {
  position: relative;
}
.creditinstock-unselected .table-container, .creditinstock-selected .table-container {
  width: 100%;
}
.creditinstock-unselected .table-main, .creditinstock-selected .table-main {
  width: 100%;
  height: calc(100vh - 260px) !important;
}
.creditinstock-unselected .table th:first-child, .creditinstock-selected .table th:first-child {
  width: 40px;
}
.creditinstock-unselected .table tr td:first-child, .creditinstock-selected .table tr td:first-child {
  text-align: center;
}
.creditinstock-btnselect {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  place-items: center;
  height: calc(100% + 40px);
}
.creditinstock-btnselect div {
  display: grid;
  place-items: center;
  gap: 24px;
}
.creditinstock-btnselect button {
  border: none;
  outline: none;
  background-color: transparent;
  border: 2px solid #f0346e;
  color: #f0346e;
  width: 35px;
  height: 35px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}
.creditinstock-btnselect button .fa {
  font-weight: 600;
}

.warehouseentrydoc-currency {
  font-size: 12px;
  font-weight: 500;
}
.warehouseentrydoc-barcode input {
  font-size: 12px;
  font-weight: 500;
  line-height: 28px;
}
.warehouseentrydoc-barcode button {
  line-height: 28px;
}
.warehouseentrydoc-table .table-info {
  padding: 0;
}
.warehouseentrydoc-table .table-container {
  padding: 0;
}

.settlement {
  background-color: #e9e9e9;
  height: fit-content;
}
.settlement h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.settlement h4 {
  font-size: 13px;
  font-weight: 500;
}
.settlement-right {
  padding-left: 8px;
  overflow-y: scroll;
  scrollbar-gutter: stabel;
}
.settlement-right::-webkit-scrollbar {
  width: 4px;
  background: #f00;
  padding: 0;
}
.settlement-right::-webkit-scrollbar-track {
  background: #e9e9e9;
}
.settlement-right::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}
.settlement-info {
  padding: 8px 16px;
  border: 1px dashed #c0c0c0;
  background-color: rgba(197, 197, 197, 0.2);
}
.settlement-info p {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  gap: 40px;
}
.settlement-left {
  border-right: 1px solid #c0c0c0;
  padding-right: 8px;
  height: 100%;
}
.settlement-form {
  height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  background-color: #fff;
}
.settlement-form-list {
  width: 60%;
  margin: 8px;
  margin-right: auto;
}
.settlement-form-list p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #ff407b;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 0;
}
.settlement-form-list p:first-child {
  border-bottom-width: 2px;
  font-weight: 700;
}
.settlement .tab-control {
  justify-content: space-between;
}
.settlement-month span {
  display: block;
  width: fit-content;
  font-size: 11px;
  padding: 0 8px;
  border-radius: 8px;
}
.settlement-month span:nth-of-type(2) {
  background-color: #4656e9;
  color: #fff;
}
.settlement-item {
  padding: 4px;
}
.settlement-item:not(:first-child) {
  border-top: 1px dashed #c0c0c0;
  padding-top: 8px;
}
.settlement-item:hover {
  background-color: #fafafa;
}
.settlement-item-title {
  font-size: 13px;
  font-weight: 500;
}
.settlement-item-label {
  font-size: 12px;
  font-weight: 500;
  color: #f0346e;
  border-bottom: 1px solid #e9e9e9;
  padding: 4px 8px;
}
.settlement-item-amount {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
  padding: 4px 8px;
}
.settlement-item-amount i {
  color: #da0419;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

.warehouse-opening-top {
  height: 40px;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  place-items: center;
  box-shadow: 0 2px 2px #c0c0c0;
}
.warehouse-opening-container {
  height: calc(90vh - 120px);
  background-color: #fafafa;
}
.warehouse-opening-card {
  width: 40%;
  margin: auto;
  margin-top: 40px;
  background-color: #fff;
  box-shadow: 0 0 3px #c0c0c0;
  padding: 50px;
}

.warehousingtagcount {
  padding: 16px;
  position: relative;
}
.warehousingtagcount .table-header {
  background-color: #fff;
}
.warehousingtagcount .table-container {
  width: 100%;
  position: relative;
  padding-bottom: 32px;
}
.warehousingtagcount .table-main {
  height: calc(100vh - 400px);
}
.warehousingtagcount .table-bottom {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  min-height: 30px;
}

.warehouse-print-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-evenly;
  place-items: center;
  height: 40px;
  padding: 0 8px;
  box-shadow: 0 2px 4px #c0c0c0;
  position: relative;
  z-index: 2;
}
.warehouse-print-top h3 {
  font-size: 12px;
  font-weight: 700;
  width: 100%;
}
.warehouse-print-top div {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 0 8px;
  justify-content: end;
}
.warehouse-print-container {
  margin: 0 16px;
  padding: 8px 16px;
  padding-bottom: 16px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.warehouse-print-paper {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 50px;
  margin: 8px 0;
  background-color: #fafafa;
  padding: 8px;
  border: 1px solid #4656e9;
  border-radius: 8px;
}
.warehouse-print-paper h3 {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
}
.warehouse-print-paper-right {
  border-left: 1px dashed #c0c0c0;
}
.warehouse-print h4 {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
}
.warehouse-print-setting {
  padding: 24px 40px;
}
.warehouse-print-setting h3 {
  font-size: 12px;
  font-weight: 500;
  padding-top: 16px;
}
.warehouse-print-setting .row {
  gap: 8px 40px;
}
.warehouse-print .table-main {
  height: calc(100vh - 190px) !important;
}

.warehouse-control {
  padding: 16px 40px;
}
.warehouse-control-list {
  padding: 16px;
  background-color: #fafafa;
  border: 2px solid #4656e9;
  border-radius: 8px;
}
.warehouse-control p {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
}
.warehouse-control .hr {
  margin: 16px 0;
}

.warehousereviewcombined {
  display: grid;
  grid-template-columns: 80px calc(100% - 90px);
}
.warehousereviewcombined-icons {
  grid-column: span 2;
}
.warehousereviewcombined-icons ul {
  display: flex;
  gap: 35px;
  padding: 0 100px;
  padding-top: 16px;
  border-top: 1px solid #c0c0c0;
}
.warehousereviewcombined-icons li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-items: center;
  color: #4656e9;
  cursor: pointer;
}
.warehousereviewcombined-icons li.active {
  color: #ff407b;
}
.warehousereviewcombined-icons span {
  font-size: 11px;
  font-weight: 500;
  display: block;
  line-height: 28px;
}
.warehousereviewcombined-icons i {
  font-size: 16px;
}
.warehousereviewcombined-right li {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 30px;
  margin: 3px 5px;
  width: 70px;
  background-color: #4656e9;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.warehousereviewcombined-right li:first-child {
  margin-top: 0;
}
.warehousereviewcombined-right li:last-child {
  background-color: transparent;
  font-size: 24px;
  font-weight: 900;
  color: #ff407b;
  margin-top: 20px;
}
.warehousereviewcombined-right li:last-child.visiable {
  color: #4656e9;
}
.warehousereviewcombined-right li.active {
  background-color: #ff407b;
}
.warehousereviewcombined-left {
  position: relative;
}
.warehousereviewcombined .table-container {
  width: 100% !important;
  padding: 0;
}
.warehousereviewcombined .table-main {
  width: 100%;
  height: calc(100vh - 240px) !important;
}
.warehousereviewcombined .table-basic {
  width: 100%;
}
.warehousereviewcombined .table-bottom {
  position: absolute;
  right: 0;
  left: 0;
  min-height: 30px;
  bottom: -30px;
}

.warehouserialization .table-container {
  position: relative;
}
.warehouserialization .table-container:last-child {
  margin-top: 40px;
}
.warehouserialization .table-main {
  position: relative;
  height: calc(50vh - 120px) !important;
}
.warehouserialization .table-bottom {
  position: absolute;
  right: 0;
  left: 0;
  min-height: 30px;
  bottom: -30px;
}

.accheading-info {
  padding: 8px;
}
.accheading-info li {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 40px;
  line-height: 32px;
}
.accheading-info li span {
  font-size: 11px;
  font-weight: 700;
}
.accheading-info li span:first-child {
  color: #646464;
}
.accheading-type-title {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: 40px;
  place-items: center;
  padding: 8px 0;
}
.accheading-type h3 {
  font-size: 12px;
  font-weight: 500;
  width: 100%;
}
.accheading-type-list {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.accheading-type h4 {
  font-size: 13px;
  font-weight: 500;
  color: #ff407b;
}
.accheading-type h4.selected {
  color: #4656e9;
}
.accheading-type-moein li {
  display: block;
  font-size: 11px;
  line-height: 28px;
  font-weight: 500;
  position: relative;
}
.accheading-type-moein li:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -8px;
}
.accheading-relations {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 8px;
}
.accheading-relations h3 {
  grid-column: span 3;
  font-size: 12px;
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;
}
.accheading-relations-item {
  padding: 8px;
  border-radius: 8px;
  background-color: #fafafa;
  position: relative;
  height: calc(100vh - 345px);
  box-shadow: 0 2px 4px #c0c0c0;
  overflow: hidden;
}
.accheading-relations h4 {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid #000;
}
.accheading-relations h5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(100, 100, 100, 0.7);
  font-size: 12px;
  font-weight: 500;
}
.accheading-relations ul {
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  max-height: 95%;
}
.accheading-relations li {
  font-size: 11px;
  line-height: 28px;
  position: relative;
}
.accheading-relations li:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -8px;
}
.accheading-kol h3 {
  font-size: 12px;
  font-weight: 500;
}
.accheading-kol-box {
  padding: 0 16px 16px;
  box-shadow: 0 3px 3px #c0c0c0;
}
.accheading-moein-type {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.accheading-moein-item h3 {
  border-bottom: 1px solid #000;
  padding: 8px 0;
  margin-bottom: 8px;
}

.accforeign .warehouse-print-top {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  position: relative;
}
.accforeign .warehouse-print-top div {
  width: fit-content;
  margin-right: auto;
}
.accforeign .warehouse-print-top ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.accforeign-box {
  width: 35%;
  margin: calc(50vh - 200px) auto;
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 3px 4px #c0c0c0;
}
.accforeign-box h3 {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
}
.accforeign-box p {
  font-size: 11px;
  font-weight: 500;
  padding: 8px 0;
}
.accforeign-box .btn {
  width: 100%;
}

.accdoc-newbottom {
  padding: 0;
  margin: 0 8px;
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 16px;
  line-height: 28px;
}
.accdoc-newbottom-info {
  background-color: #e9e9e9;
  padding: 0 8px;
}
.accdoc-newbottom p {
  padding: 8px 0;
  font-size: 12px;
  font-weight: 500;
}
.accdoc-newbottom-amount p {
  padding: 0;
}
.accdoc-attach {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-height: 100px;
  background-color: #fff;
  box-shadow: 0 2px 3px #c0c0c0;
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  place-items: center;
}
.accdoc-attach-box {
  position: relative;
}
.accdoc-attach-dialog {
  width: 120px;
  height: 120px;
  background-color: #fafafa;
  display: flex;
  place-items: center;
  justify-content: center;
}
.accdoc-attach-dialog span {
  font-size: 11px;
  font-weight: 500;
  display: block;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px #e9e9e9;
  cursor: pointer;
}
.accdoc-attach p {
  font-size: 11px;
  padding: 8px 4px;
}
.accdoc-attach.hide {
  display: none;
}
.accdoc-attach.show {
  display: block;
}

.AccReckoning {
  margin: 0;
  padding: 5%;
}
.AccReckoning .accforeign-box {
  margin: 0 auto;
}
.AccReckoning-operation {
  padding: 0;
}
.AccReckoning-operation .table-container {
  padding-bottom: 30px;
}
.AccReckoning-operation .table-bottom {
  bottom: 0;
  min-height: 30px;
}

.accreviewcombined .table-container {
  position: relative;
  padding-bottom: 32px;
}
.accreviewcombined .table-main {
  height: calc(100vh - 320px) !important;
}
.accreviewcombined .table-bottom {
  bottom: 0;
}

.acceditdocmodal .modal-card {
  height: 90vh;
}
.acceditdocmodal .table-container {
  position: relative;
  width: 100%;
  padding: 8px;
  padding-bottom: 150px;
}
.acceditdocmodal .table-basic {
  height: calc(90vh - 400px);
}
.acceditdocmodal .table-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}
.acceditdocmodal .table-bottom .accdoc-newbottom {
  margin: 0;
  margin-top: 4px;
}
.acceditdocmodal .table-pagination {
  padding: 0 8px;
}

.accendyear .modal-body {
  height: calc(90vh - 125px);
}
.accendyear .modal-body .table-container {
  padding-bottom: 40px;
}
.accendyear .modal-body .table-main {
  height: calc(90vh - 200px);
}
.accendyear .modal-body .table-bottom {
  padding: 0;
}

.accresource-box {
  padding: 0;
  scrollbar-gutter: unset;
  background-color: #e9e9e9;
  max-height: calc(90vh - 50px);
}
.accresource-box .modal-body {
  width: 60%;
  margin: 30px auto;
  box-shadow: 0 3px 5px #c0c0c0;
}
.accresource-box-header {
  padding: 8px 4px 0;
  background-color: #e9e9e9;
  box-shadow: 0 2px 3px #f0346e;
}
.accresource-box-top {
  background-color: #e9e9e9;
  padding: 8px;
}
.accresource-box h3 {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
}

.accelectricalbook {
  height: 90vh;
}
.accelectricalbook-top {
  background-color: #e9e9e9;
  border: 1px solid #f0346e;
  border-radius: 8px;
  padding: 8px;
}
.accelectricalbook-first {
  padding: 8px 25%;
}
.accelectricalbook-container {
  max-height: calc(90vh - 50px);
}
.accelectricalbook-info {
  padding: 8px 24px;
  background-color: #e9e9e9;
  border-radius: 8px;
  border: 1px solid #21ae41;
}
.accelectricalbook-info li {
  font-size: 11px;
  font-weight: 500;
  line-height: 24px;
  list-style: disc;
}
.accelectricalbook .table-main {
  height: calc(100vh - 360px) !important;
}

.recpay {
  background-color: #fff;
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: calc(100vh - 150px);
  box-shadow: 0 1px 3px #c0c0c0;
}
.recpaypos-id {
  padding: 8px;
  border: 1px solid #c0c0c0;
  background-color: #e9e9e9;
  border-radius: 8px;
  margin: 8px 0;
}
.recpaypos-id h3 {
  font-size: 12px;
  font-weight: 500;
}
.recpaypos-id p {
  text-align: left;
  direction: ltr;
  font-size: 12px;
  padding: 4px;
}
.recpaypos-id .btn {
  display: flex;
  margin: 8px auto;
}
.recpay-title {
  display: flex;
  justify-content: space-between;
  place-items: center;
  background-color: #e9e9e9;
  padding: 4px 16px;
  height: 40px;
}
.recpay-title h3 {
  font-size: 13px;
  font-weight: 500;
}
.recpay-right {
  border-left: 1px solid #c0c0c0;
  padding: 8px;
}
.recpay-right .form-area {
  height: calc(100vh - 330px);
}
.recpay-total {
  display: flex;
  justify-content: space-between;
  line-height: 28px;
  padding: 8px;
  font-size: 12px;
  font-weight: 500;
  background-color: #e9e9e9;
}
.recpay-left {
  padding: 8px;
}
.recpay-body {
  position: relative;
  height: calc(100vh - 205px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 4px;
}
.recpay-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1d;
}
.recpay h3 {
  font-size: 13px;
  font-weight: 500;
  color: #4656e9;
  padding: 8px 4px;
  display: flex;
  justify-content: space-between;
  place-items: center;
}
.recpay h3 div {
  display: flex;
  gap: 8px;
  place-items: center;
  border-bottom: 1px solid #e9e9e9;
}
.recpay h3 div i {
  font-size: 14px;
}
.recpay-box {
  box-shadow: 0 2px 2px #c0c0c0;
  padding: 8px;
}
.recpay-box:not(:last-child) {
  margin-bottom: 8px;
}
.recpay-check {
  padding: 16px;
}
.recpay-check h3 {
  font-size: 12px;
  font-weight: 500;
  padding-bottom: 16px;
}
.recpay-check .creditinstock-unselected .table-main {
  height: calc(100vh - 224px) !important;
}
.recpay-check .creditinstock-unselected .table-bottom {
  min-height: 34px;
  bottom: -36px;
}
.recpay-check .creditinstock-selected .table-main {
  height: calc(100vh - 290px) !important;
}
.recpay-check .creditinstock-selected .table-bottom {
  min-height: 30px;
  bottom: 34px !important;
}
.recpay-check .creditinstock-selected .opstatus {
  background-color: #e9e9e9;
  border: 1px solid #c0c0c0;
  padding: 4px;
  border-radius: 4px;
  position: relative;
  bottom: -36px;
}
.recpay-check-end {
  background-color: #fff;
  padding: 24px 10%;
}
.recpay-check-end h3 {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 4px;
}
.recpay-check-top {
  background-color: #fafafa;
  border: 1px solid #4656e9;
  padding: 8px 16px;
  border-radius: 8px;
}
.recpay-check-top li {
  display: flex;
  justify-content: space-between;
  gap: 8;
  padding: 4px 4px 10px;
}
.recpay-check-top li:not(:last-child) {
  border-bottom: 1px dashed #c0c0c0;
}
.recpay-check-top li span {
  font-size: 12px;
  font-weight: 400;
}
.recpay-check-top li span:first-child {
  color: #f0346e;
}
.recpay-check-top li span:last-child {
  color: #000;
}
.recpay-check-bottom {
  background-color: #fafafa;
  border: 1px solid #f0346e;
  padding: 4px 16px;
  border-radius: 8px;
  margin-top: 8px;
}
.recpay-check-bottom p {
  font-size: 12px;
  font-weight: 500;
  padding: 8px;
}

.trading-bottom {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0 16px;
  padding-bottom: 8px;
}
.trading-bottom > div:nth-of-type(1) {
  background-color: #e9e9e9;
  display: grid;
  grid-template-columns: 70px calc(100% - 80px);
  gap: 10px;
  padding: 8px;
}
.trading-bottom > div:nth-of-type(2) {
  padding: 8px;
  background-color: #fff;
  border-bottom: 1px dashed #c0c0c0;
}
.trading-bottom > div:nth-of-type(3) {
  grid-column: span 2;
  padding: 2px;
}
.trading-bottom p {
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  gap: 8px;
}
.trading-icon {
  border: 1px solid #c0c0c0;
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70px;
}
.trading-icon:after {
  content: "\f1c5";
  font-family: "font awesome";
  font-weight: 300;
  font-size: 30px;
  display: flex;
  justify-content: center;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  color: #646464;
}
.trading-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trading-info {
  border-right: 2px solid #c0c0c0;
  padding-right: 8px;
  display: grid;
}
.trading-priceinfo ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  border-bottom: 2px solid #c0c0c0;
}
.trading-priceinfo li {
  display: inline-flex;
  gap: 16px;
  padding: 0 4px 8px;
  font-size: 12px;
  font-weight: 500;
}
.trading-priceinfo li:not(:last-child) {
  border-left: 1px solid #e9e9e9;
}
.trading-priceinfo li:last-child span:first-child {
  display: block;
  width: fit-content;
  padding: 4px;
  color: #fff;
  background-color: #21ae41;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 400;
}
.trading-priceinfo div {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
}
.trading-priceinfo div p {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  gap: 16px;
}
.trading-review .table-main {
  height: calc(100vh - 240px) !important;
}
.trading-openpos {
  padding-top: 16px;
}
.trading-openpos .accforeign-box {
  margin: 0 auto;
}
.trading-openpos-info {
  padding: 0 60px;
  text-align: center;
}
.trading-openpos-info img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 4px auto;
}
.trading-openpos-info p {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}
.trading-card {
  background-color: #fff;
  box-shadow: 0 3px 6px #c0c0c0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 4px;
}

.retail-invoice {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.retail-form {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px #c0c0c0;
  height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.retail-list {
  height: calc(100vh - 100px);
}
.retail-list-title {
  display: flex;
  justify-content: space-between;
  place-items: center;
  background-color: #4656e9;
  color: #fff;
  height: 40px;
}
.retail-list-title h3 {
  font-size: 16px;
  font-weight: 500;
  padding: 0 8px;
}
.retail-list-title .btn {
  color: #fff;
  font-size: 16px;
}
.retail-list-title .btn-like {
  font-size: 14px;
}
.retail-list-title .btn-dropdown ul {
  right: unset;
  left: 0;
}
.retail-list-title > div {
  display: inline-flex;
  width: fit-content;
  gap: 16px;
  padding-left: 16px;
}
.retail-return {
  background-color: #2e2f39;
}
.retail-buy {
  background-color: #21ae41;
}
.retail-table {
  height: calc(100vh - 355px);
  margin-bottom: 5px;
  background-color: #fff;
  border-bottom: 1px dashed #c0c0c0;
  overflow-y: auto;
  scrollbar-width: thin;
  position: relative;
  padding-bottom: 8px;
}
.retail-data {
  border-spacing: 0;
  width: 100%;
  background-color: #fff;
}
.retail-data-counter {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #c0c0c0;
}
.retail-data-counter p {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 29px;
  height: 29px;
}
.retail-data-counter div {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}
.retail-data-counter button {
  border: none;
  outline: none;
  background-color: transparent;
  color: #f0346e;
  font-size: 18px;
  font-weight: 700;
  padding: 0 4px;
  cursor: pointer;
}
.retail-data thead {
  position: sticky;
  top: 0;
  background-color: #f0346e;
  color: #fff;
}
.retail-data th,
.retail-data td {
  font-size: 12px;
  border-bottom: 1px solid #c0c0c0;
  line-height: 24px;
  font-weight: 500;
}
.retail-data th:not(:last-child),
.retail-data td:not(:last-child) {
  border-left: 1px solid #c0c0c0;
}
.retail-data th span,
.retail-data td span {
  padding: 2px 4px;
  display: flex;
}
.retail-data th span.td-title,
.retail-data td span.td-title {
  justify-content: space-between;
  place-items: center;
}
.retail-data th span.td-title i,
.retail-data td span.td-title i {
  font-style: normal;
}
.retail-data th span.td-title .fa,
.retail-data td span.td-title .fa {
  color: #da0419;
  font-weight: 300;
  font-size: 16px;
  cursor: pointer;
}
.retail-data th {
  font-weight: 600;
  padding: 4px;
}
.retail-data .th-one {
  width: 10%;
}
.retail-data .th-two {
  width: 10%;
}
.retail-data .th-tree {
  width: 20%;
}
.retail-data .th-four {
  width: 15%;
}
.retail-data .th-five {
  width: 20%;
}
.retail-data .th-six {
  width: 25%;
}
.retail-data > tbody > tr:nth-child(odd) {
  background-color: #f0f0f0;
}
.retail-data table {
  border-spacing: 0;
  width: 100%;
}
.retail-data table tbody tr:nth-of-type(2) td {
  border-bottom: none;
}
.retail-data table tbody tr:nth-of-type(2) td:not(:first-child) span {
  font-size: 16px;
}
.retail-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #e9e9e9;
  padding: 8px 24px;
  border-radius: 4px;
  height: 160px;
}
.retail-info li {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;
  place-items: center;
}
.retail-info li span {
  line-height: 28px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  place-items: center;
  gap: 8px;
  width: 100%;
}
.retail-info li span i {
  color: #f0346e;
  cursor: pointer;
}
.retail-info li span:nth-of-type(1) {
  font-weight: 700;
}
.retail-info li span:nth-of-type(2) {
  font-size: 16px;
}
.retail-info div:nth-of-type(2) {
  padding-right: 24px;
  border-right: 1px solid #c0c0c0;
  display: grid;
  place-items: center;
  justify-content: right;
}
.retail-info div:nth-of-type(2) h3,
.retail-info div:nth-of-type(2) h4 {
  width: 100%;
  text-align: right;
  color: #ff407b;
  font-size: 16px;
}
.retail-btn {
  display: flex;
  gap: 16px;
  place-items: center;
  padding: 8px 0;
  height: 50px;
}
.retail-product-group {
  height: calc(90vh - 100px);
}
.retail-product-group .modal-body {
  height: calc(90vh - 120px);
}
.retail-group {
  display: grid;
  grid-template-columns: 300px calc(100% - 300px);
  height: 100%;
}
.retail-group-side {
  border-left: 1px solid #c0c0c0;
  background-color: #fafafa;
  padding: 0 4px;
}
.retail-group-new {
  box-shadow: 0 3px 5px #c0c0c0;
  background-color: #fff;
  padding: 4px 4px 16px;
}
.retail-customer-toggle {
  height: 1px;
  border-bottom: 1px dashed #c0c0c0;
  margin: 16px 0;
  position: relative;
}
.retail-customer-toggle span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  place-items: center;
  background-color: #e9e9e9;
  font-size: 12px;
  font-weight: 300;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 300ms;
}
.retail-customer-toggle span:after {
  content: "\f107";
  font-family: "font awesome";
}
.retail-customer.show .retail-customer-item {
  height: fit-content;
}
.retail-customer.show .retail-customer-toggle span:after {
  content: "\f106";
}
.retail-customer.hide .retail-customer-item {
  max-height: 48px;
  overflow: hidden;
}
.retail-customer h3 {
  font-size: 12px;
  font-weight: 500;
  color: #f0346e;
}

.prdformul {
  display: grid;
  grid-template-columns: 300px calc(100% - 300px);
  height: calc(100vh - 80px);
  max-height: 100%;
}
.prdformul-right {
  padding: 8px;
  background-color: #e9e9e9;
}
.prdformul-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  place-items: center;
  padding-bottom: 16px;
}
.prdformul-title h3 {
  font-size: 12px;
  font-weight: 600;
}
.prdformul-title div {
  display: flex;
  width: fit-content;
  gap: 16px;
}
.prdformul-title div .fa-ellipsis-v {
  font-size: 18px;
}
.prdformul-title div span {
  font-size: 12px;
  font-weight: 500;
}
.prdformul-title div span:nth-of-type(1) {
  color: #f0346e;
}
.prdformul-title div span:nth-of-type(2) {
  color: #000;
}
.prdformul-left {
  padding: 8px;
  background-color: #fff;
}
.prdformul-left .table-main {
  height: calc(100vh - 380px) !important;
}
.prdformul-info {
  background-color: #e9e9e9;
  margin: 8px auto;
  border-radius: 4px;
  border: 1px solid #c0c0c0;
}
.prdformul-modal .modal-card {
  height: 90vh;
}
.prdformul-modal .modal-card .table-container {
  padding-bottom: 30px;
}
.prdformul-modal .modal-card .table-main {
  height: calc(90vh - 300px);
}
.prdformul-modal .modal-card .table-bottom {
  top: unset;
}

.prdprevision-box .modal-card {
  height: 90vh;
}
.prdprevision-box .table-bottom {
  top: unset;
}
.prdprevision-box .table-container {
  padding-bottom: 30px;
}
.prdprevision-box .table-main {
  height: calc(90vh - 350px);
}

.rpt {
  height: calc(100vh - 85px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 16px 3%;
}
.rpt-title {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 1px solid #c0c0c0;
}
.rpt-list {
  width: 100%;
  padding: 16px 1%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.rpt-item {
  min-width: 140px;
  max-width: 140px;
  height: 140px;
  background-color: #fff;
  box-shadow: 0 1px 3px #f0346e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 2px;
  cursor: pointer;
}
.rpt-item img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: auto;
}
.rpt-item span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
.rpt-container {
  max-height: 96vh;
  margin: 2vh auto;
}
.rpt-modal {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: calc(96vh - 50px);
}
.rpt-card {
  background-color: #fafafa;
  height: calc(96vh - 50px);
  padding: 8px 16px 8px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.rpt-box {
  position: relative;
  height: calc(96vh - 50px);
  overflow-y: auto;
  scrollbar-width: thin;
  background-color: #646464;
  padding: 8px;
}

.loopperson-mandeh {
  border: 1px solid #4656e9;
  padding: 4px;
  border-radius: 4px;
}
.loopperson-mandeh h3 {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 0;
}

/*# sourceMappingURL=style.css.map */