@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --theme-color: #f13f3e;
  --theme-light-color: #ffe2e2;
  --theme-hover-color: #d12d2c;
}
input {
  height: 25px;
}
body {
  font-family: "Rubik", sans-serif !important;
  background-color: #f1f2f7 !important;
  overflow-x: hidden;
  margin: 0;
}

.system-table-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.system-table-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.addTableOrderModel::-webkit-scrollbar {
  display: none;
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.addTableOrderModel::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

/* HEADER CSS START */

.header-wrapper {
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  height: 60px;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--theme-color);
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.header-top > div > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-top > div > ul > li {
  padding: 0 0.6rem;
  position: relative;
}

.header-top > div > ul > li > a,
.header-top > div > ul > li > span {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

/* .header-top    >    div    >    ul    >    li    >    a:hover,
  .header-top    >    div    >    ul    >    li    >    span:hover {
    color: var(--theme-color);
  } */

.header-top > div > ul > li > a > i,
.header-top > div > ul > li > span > i {
  font-size: 16px;
  margin: 0 0.3rem;
}

.header-bottom {
  background-color: #fff;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-bottom-left {
  display: flex;
  width: 250px;
}

.header-bottom-left > a {
  display: flex;
  width: 100%;
}

.header-bottom-left > a > img {
  width: 100%;
}

.accout-sub {
  position: absolute;
  right: 0;
  width: 260px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 7px 32px 0 rgba(39, 49, 66, 0.2);
  margin-top: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease-in-out;
  z-index: 9;
}

.accout-sub.active {
  opacity: 1;
  visibility: visible;
}

.accout-sub-wrapper {
  position: relative;
  padding: 1rem;
}

.accout-sub-wrapper::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 15%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.accout-sub-wrapper-top {
  display: flex;
  align-items: center;
}

.accout-sub-image {
  max-width: 65px;
  height: 65px;
}

.accout-sub-image > a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.accout-sub-image > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.accout-sub-detail {
  display: flex;
  flex-direction: column;
  width: calc(100% - 65px);
  margin-left: 1rem;
}

.accout-sub-detail-top > span {
  font-weight: 500;
  color: #222;
  font-size: 16px;
}

.accout-sub-detail-top > p {
  font-weight: 500;
  color: #666;
  margin: 0;
}

.account-point {
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 8px;
  background-color: var(--theme-color);
  font-size: 16px;
}

.accout-sub-detail-bottom {
  margin-top: 0.5rem;
}

.accout-sub-wrapper-bottom {
  margin-top: 1rem;
}

.accout-sub-wrapper-bottom > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accout-sub-wrapper-bottom > ul > li {
  padding: 0.3rem 0;
}

.accout-sub-wrapper-bottom > ul > li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.accout-sub-wrapper-bottom > ul > li > a {
  font-size: 13px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  display: flex;
  width: 100%;
  padding: 0.7rem;
  border-radius: 8px;
}

.accout-sub-wrapper-bottom > ul > li > a:hover {
  background-color: #f5f5f5;
}

.notification-sub {
  position: absolute;
  right: 0;
  background-color: #fff;
  width: 450px;
  border-radius: 8px;
  box-shadow: 0 7px 32px 0 rgba(39, 49, 66, 0.2);
  margin-top: 0.3rem;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transition: 0.2s ease-in-out;
}

.notification-sub.active {
  opacity: 1;
  visibility: visible;
}

.notification-sub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.notification-sub-title > span {
  font-size: 15px;
  font-weight: 500;
}

.notification-sub-title > span.notification-count {
  color: var(--theme-color);
}

.notification-sub-read-mark {
  font-size: 14px;
  font-weight: 500;
}

.notification-sub-read-mark span > i {
  margin-right: 0.5rem;
}

.notification-sub-read-mark > span {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.notification-sub-read-mark > span:hover {
  background-color: #f5f5f5;
}

.notification-sub-center {
  display: flex;
  flex-direction: column;
  height: 475px;
  overflow: auto;
}

.notification-sub-content {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--theme-light-color);
  height: 95px;
}

.notification-sub-content:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.notification-content-icon {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 1rem;
}

.notification-sub-bottom {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.notification-sub-bottom > a {
  font-size: 15px;
  font-weight: 500;
  color: var(--theme-color) !important;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.notification-sub-bottom > a:hover {
  background-color: #f5f5f5;
  border-radius: 8px;
}

.notification-details-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-content-details {
  width: calc(100% - 40px);
}

.notification-details-category,
.notification-details-date {
  font-size: 12px;
  font-weight: 400;
  color: #777;
}

.notification-details-center > span {
  font-size: 15px;
  font-weight: 400;
}

.notification-details-center {
  margin: 0.3rem 0;
}

.notification-details-bottom > a {
  color: var(--theme-color);
  font-size: 13px;
  font-weight: 500;
}

.header-bottom-right {
  display: flex;
  width: 250px;
  align-items: center;
  justify-content: flex-end;
}

.header-bottom-center {
  display: flex;
  width: calc(100% - 500px);
  align-items: center;
  justify-content: center;
  margin: 0 1rem;
}

.header-bottom-right > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header-bottom-right > ul > li > a {
  color: #95a1b5;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.header-bottom-right > ul > li:not(:last-child) {
  margin-right: 1rem;
}

.header-bottom-right > ul > li > a > i {
  margin-right: 0.5rem;
  font-size: 20px;
  display: flex;
}

.header-bottom-right > ul > li:last-child {
  padding: 0.5rem 1rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  transition: 0.2s ease-in-out;
}

.header-bottom-right > ul > li:last-child:hover {
  background-color: var(--theme-hover-color);
}

.header-bottom-right > ul > li:last-child > a {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
}

.header-bottom-center > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.header-bottom-center > ul > li {
  margin: 0 0.5rem;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  transition: 0.2s ease-in-out;
  border-radius: 8px;
  cursor: pointer;
}

.header-bottom-center > ul > li:hover,
.header-bottom-center > ul > li.active {
  background-color: var(--theme-color);
}

.header-bottom-center > ul > li:hover > a,
.header-bottom-center > ul > li.active > a,
.header-bottom-center > ul > li:hover > span,
.header-bottom-center > ul > li.active > span,
.header-bottom-center > ul > li:hover > button > i,
.header-bottom-center > ul > li.active > button > i {
  color: #fff;
}

.header-bottom-center > ul > li > span,
.header-bottom-center > ul > li > a {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  margin-right: 0.5rem;
}

.header-bottom-center > ul > li > .category-sub {
  position: absolute;
  left: 0;
  width: 260px;
  box-shadow: 0 7px 32px 0 rgba(39, 49, 66, 0.2);
  margin-top: 0.5rem;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease-in-out;
  top: 100%;
  z-index: 99;
}

.header-bottom-center > ul > li > .category-sub.active {
  opacity: 1;
  visibility: visible;
}

.header-bottom-center > ul > li > .category-sub > ul {
  list-style: none;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
}

.header-bottom-center > ul > li .category-sub > ul > li > a {
  display: flex;
  padding: 1rem;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}

.header-bottom-center > ul > li .category-sub > ul > li > a:hover {
  background-color: var(--theme-light-color);
  color: var(--theme-color);
}

.header-bottom-center > ul > li .category-sub::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 15%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.header-bottom-center > ul > li > button {
  border: none;
  background-color: transparent;
  padding: 0;
}

.header-bottom-center > ul > li > button > i {
  color: #95a1b5;
}

.breadcrump-wrapper {
  background-color: transparent;
  display: flex;
  padding: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: #000;
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding-bottom: 0;
}

.breadcrump-title > span {
  font-size: 18px;
}

.mobile-header-wrapper {
  display: none;
}

/* HEADER CSS FINISH */

.table-title {
  display: flex;
  width: 100%;
  height: 30px;
  justify-content: center;
  align-items: center;
}

.table-title .table-tr:first-child {
  border-left: 1px solid rgba(0, 0, 0, .1);
  border-radius: 5px 0 0 0;
}

.current-table .table-title .table-tr:first-child {
  width: 20%;
}

.table-title .table-tr {
  padding: .5rem;
  border: 1px solid rgba(0, 0, 0, .1);
  border-left: none;
  background-color: #f2f2f2;
  font-size: 12px;
  font-weight: 600;
}

.current-table .table-title .table-tr {
  width: 7.72%;
}

.full-page-wrapper {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  height: calc(100vh - (125px + 2rem));
  overflow: hidden;
  margin-top: 1rem;
}

.table-title .table-tr:last-child {
  border-radius: 0 5px 0 0;
}

.table-content {
  display: flex;
  width: 100%;
  cursor: pointer;
  transition: .2s ease-in-out;
}

.table-content:hover {
  background-color: #f0f0f0;
}

.table-content .table-td {
  width: 8.33%;
  padding: .5rem;
  border: 1px solid rgba(0, 0, 0, .1);
  border-left: none;
  border-top: 0;
  font-size: 13px;
  overflow: auto;
}

.current-table .table-content .table-td {
  overflow: auto;
  width: 7.72%;
}

.table-content .table-td:first-child {

  border-left: 1px solid rgba(0, 0, 0, .1);
}

.current-table .table-content .table-td:first-child {
  width: 20%;
}

.table-content:last-child .table-td:first-child {
  border-radius: 0 0 0 5px;
}

.table-content:last-child .table-td:last-child {
  border-radius: 0 0 5px 0;
}

.system-table-wrapper {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.fixed-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: .5rem 0;
  background-color: #fff;
  border-radius: 8px;
  padding: .5rem;
  height: 65px;
}

.fixed-btn {
  display: flex;
  width: 150px;
  align-items: center;
  justify-content: center;
}

.fixed-btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .5rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: .2s ease-in-out;
}

.fixed-btn > a > i {
  margin-right: .5rem;
}

.fixed-btn > a:hover {
  background-color: var(--theme-hover-color);
}

.current-form-wrapper {
  height: calc(100% - 35px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}

.current-form-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.current-form-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.add-current-form,
.add-current-filter,
.add-workshop-form,
.add-workshop-filter,
.add-stock-form,
.add-stock-filter,
.transaction-movement-form,
.select-current-list,
.select-workshop-list,
.add-model-form,
.add-pattern-form,
.order-model-update-show {
  height: calc(100vh - (65px + 4rem));
}

.add-current-form form {
  height: 100%;
}

.order-model-update-show form {
  height: 100%;
}

.current-form-content > label {
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.current-form-content > input,
.current-form-content > select,
.current-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.current-form-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.current-form-group {
  width: calc(100% - 300px);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.current-form-image {
  width: 300px;
  padding: 0.5rem;
  border-radius: 5px;
  border: 2px dashed var(--theme-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  position: relative;
}

.current-form-content {
  display: flex;
  flex-direction: column;
  width: calc(33.33% - (1.5rem * 2) / 3);
}

.current-form-image h2 {
  padding-bottom: 20px;
  font-size: 20px;
  text-align: center;
  color: var(--theme-color);
}

.current-form-image #current-image {
  display: none;
}

.current-form-image label[for='current-image'] * {
  vertical-align: middle;
  cursor: pointer;
}

.current-form-image label[for='current-image'] span {
  margin-left: 10px
}

.current-form-image i.remove {
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
  display: none;
}

.current-form-image label > i {
  text-align: center;
  font-size: 30px;
}

.setImageCurrent {
  width: 100%;
  height: 100%;
  display: flex;
}

.current-form-image label {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.current-form-image i.remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background-color: var(--theme-color);
  font-size: 14px;
}

.current-form-center-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.current-form-center-contain {
  display: flex;
  gap: 1rem;
}

.current-form-center-content > span {
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  align-items: center;
}

.current-form-center-content > input {
  height: 30px;
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.current-form-center-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 1rem;
}

.current-form-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 35px;
}

.current-form-btn {
  display: flex;
  width: 120px;
}

.current-form-btn > a,
.current-form-btn > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  padding: 0.3rem;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: .2s ease-in-out;
}

.current-form-btn > a:hover,
.current-form-btn > button:hover {
  background-color: var(--theme-hover-color);
}

form.current-filter {
  height: 100%;
}

.current-filter .current-form-top {
  flex-direction: column;
}

.current-filter .current-form-top .current-form-content {
  width: 100%;
}

form.stock-filter {
  height: 100%;
}

.stock-filter .stock-form-top {
  flex-direction: column;
}

.stock-filter .stock-form-top .stock-form-content {
  width: 100%;
}

.stock-table .table-title .table-tr,
.stock-table .table-content .table-td {
  width: 100%;
}

form.stock-form-seralize {
  height: 100%;
}

.stock-form-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 35px;
}

.stock-form-btn {
  display: flex;
  width: 120px;
}

.stock-form-btn > a,
.stock-form-btn > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  padding: 0.3rem;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: .2s ease-in-out;
}

.stock-form-btn > a:hover,
.stock-form-btn > button:hover {
  background-color: var(--theme-hover-color);
}

.stock-form-wrapper {
  height: calc(100% - 35px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}

.stock-form-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.stock-form-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.stock-form-content > label {
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.stock-form-content > input,
.stock-form-content > select,
.stock-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.stock-form-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.stock-form-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: column;
}

.select-current-list .select-current-list {
  height: calc(100vh - (65px + 4rem));
}

.select-current-list .set-current-view {
  height: 100%;
}

.select-current-list .set-current-view .full-page-wrapper {
  height: calc(100% - 35px);
  padding: .5rem;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
}

.select-current-list .set-current-view .fixed-btn-wrapper {
  height: 35px;
  margin: 0;
  padding: 0;
}

.daily-form-group {
  display: flex;
  gap: 0.1rem;
  flex-direction: column;
  padding-right: 5px;
}

.daily-transaction-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 40%;
}

.daily-form-content > label,
.workshop-form-content > label {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.daily-form-content > input,
.workshop-form-content > input {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
}

.daily-form-list > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .1);
  height: 120px;
  overflow: hidden;
  overflow-y: auto;
}

.daily-form-list > ul::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.daily-form-list > ul::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.daily-form-list > ul > li > p {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin: 0;
  padding: 0 .3rem;
  display: flex;
  width: 100%;
  align-items: center;
}

.daily-form-list > ul > li > p > span {
  font-size: 13px;
  color: #333 !important;
  font-weight: 400;
  margin-left: 0.3rem;
}

.daily-transaction-wrapper {
  display: flex;
  height: 100%;
}

.daily-transaction-left {
  width: 80%;
  margin-right: 1rem;
  height: 100%;
}

.daily-transaction-right {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.daily-transaction-top > div {
  width: 100%;
}

.daily-form-list {
  box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
  padding: 0.3rem;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
}

.daily-form-list > ul > li:nth-child(2n) > p {
  background-color: #f0f0f0;
}

.daily-form-list > ul > li:not(:last-child) > p {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.daily-form-list > ul > li {
  display: flex;
  width: 100%;
  height: 20px;
}

.total-curreny > p {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.total-curreny > p > span {
  font-size: 13px;
  color: #333 !important;
  font-weight: 400;
}

.total-curreny {
  display: flex;
  padding: 0.3rem 0;
  margin-bottom: 0.1rem;
}

.daily-transaction-table .table-tr,
.daily-transaction-table .table-td {
  width: 100%;
  padding: 0.2rem;
}

.daily-transaction-center {
  margin-top: 0.5rem;
  height: calc(46% - 0.5rem);
}

.transaction-details > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .3rem;
  margin-top: .3rem;
}

.transaction-details > ul > li > p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
}

.transaction-details > ul > li > p > span {
  font-size: 13px;
  color: #333 !important;
  font-weight: 400;
}

.transaction-details-title {
  font-size: 15px;
  font-weight: 600;
}

.daily-transaction-bottom {
  margin-top: 1rem;
  height: calc(10% - 1rem);
}

.daily-transaction-image {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 0.5rem;
}

.daily-transaction-image-content {
  display: flex;
  width: 100%;
  height: 150px;
}

.daily-transaction-image-content > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn,
.fixed-btn-wrapper.workshop-button-wrapper .fixed-btn {
  width: 100%;
}

.fixed-btn-wrapper.daily-button-wrapper {
  gap: .5rem;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn > div,
.fixed-btn-wrapper.workshop-button-wrapper .fixed-btn > div {
  width: 100%;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn button,
.fixed-btn-wrapper.daily-button-wrapper .fixed-btn > a,
.fixed-btn-wrapper.workshop-button-wrapper .fixed-btn button,
.fixed-btn-wrapper.workshop-button-wrapper .fixed-btn > a {
  font-size: 13px;
  height: 35px;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn button,
.fixed-btn-wrapper.workshop-button-wrapper .fixed-btn button {
  background-color: var(--theme-color);
  border: none;
  transition: .2s ease-in-out;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn button:hover,
.fixed-btn-wrapper.workshop-button-wrapper .fixed-btn button:hover {
  background-color: var(--theme-hover-color);
}

.courtship-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.daily-transaction-table .table-contain {
  overflow:
    hidden;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  height: calc(100% - 30px);
}

.daily-transaction-table .table-contain::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.daily-transaction-table .table-contain::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.transaction-details > ul > li {
  width: 100%;
}

.daily-transaction-table .table-td {
  border-radius: 0 !important;
}

.daily-transaction-table .table-td:last-child {
  border-right: 0;
}

.daily-transaction-table .table-td:first-child {
  border-left: 0;
}

.daily-form-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 35px;
}

.daily-form-btn {
  display: flex;
  width: 120px;
}

.daily-form-btn > a,
.daily-form-btn > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  padding: 0.3rem;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: .2s ease-in-out;
}

.daily-form-content > select,
.workshop-form-content > select {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
  height: 27px;
  padding: 0 .5rem;
}

.transaction-movement-form .daily-form-group {
  flex-direction: unset;
}

.transaction-movement-form .daily-form-group .daily-form-content {
  width: 100%;
}

.daily-form-wrapper {
  height: calc(100% - 35px);
}

form.transaction-form-seralize,form.transaction-update-form-seralize {
  height: 100%;
}


.daily-form-wrapper-bottom .daily-form-group {
  flex-wrap: wrap;
  gap: 1rem;
}

.daily-form-wrapper-bottom .daily-form-group .daily-form-content {
  width: calc(50% - (1rem) / 2);
}

.daily-form-wrapper-bottom .daily-form-group .daily-form-content:last-child {
  width: 100%;
}

.daily-form-wrapper-bottom {
  margin-top: 1.5rem;
}

.daily-form-content > textarea,
.workshop-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.select-stock-list {
  height: calc(100vh - (65px + 4rem));
}

.select-stock-list .set-stock-view .full-page-wrapper {
  height: calc(100% - 35px);
  padding: 0.5rem;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
}

.select-stock-list .set-stock-view {
  height: 100%;
}

.select-stock-list .set-stock-view .fixed-btn-wrapper {
  height: 35px;
  margin: 0;
  padding: 0;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn .btn-group > ul {
  padding: 0;
  border-radius: 0;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn .btn-group > ul > li > a {
  display: flex;
  font-size: 14px;
  padding: 0.5rem;
}

.fixed-btn-wrapper.daily-button-wrapper .fixed-btn .btn-group > ul > li:not(:last-child) > a {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.daily-transaction-table {
  height: 100%;
}

.report-table-top {
  display: flex;
  justify-content: space-between;
  height: 22px;
}

.report-table-top .report-table-top-title {
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--theme-color);
  background-color: #f0f0f0;
}

.report-table-top .report-table-top-title:first-child {
  width: 15%;
}

.report-table-top .report-table-top-title {
  width: 42.5%;
}

.report-table-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 25px;
}

.report-table-title .report-table-tr {
  width: 21.25%;
  border-right: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  height: 100%;
  align-items: center;
  padding-left: 1rem;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.report-table-title .report-table-tr:first-child {
  width: 15%;
  border-left: 1px solid rgba(0, 0, 0, .1);
}

.report-table-contain {
  display: flex;
  justify-content: space-between;
}

.report-table-contain .report-table-content {
  width: 21.25%;
  border-right: 1px solid rgba(0, 0, 0, .1);
  font-size: 12px;
  font-weight: 400;
}

.report-table-contain .report-table-content:first-child {
  width: 15%;
  border-left: 1px solid rgba(0, 0, 0, .1);
}

.report-table-contain .report-table-content p {
  margin: 0;
  display: flex;
  padding: 0.2rem 1rem;
  height: 31px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.report-courtship-list > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .1);
  height: 100%;
}

.report-courtship-list > ul > li:nth-child(2n) > p {
  background-color: #f0f0f0;
}

.report-courtship-list > ul > li:not(:last-child) > p {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.report-courtship-list > ul > li > p {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin: 0;
  padding: 0 0.3rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.report-courtship-list > ul > li > p > span {
  font-size: 13px;
  color: #333 !important;
  font-weight: 400;
  margin-left: 0.3rem;
}

.report-courtship-list {
  width: 100%;
  box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
  padding: 0.3rem;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
}

.report-courtship-title > p {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin: 0;
  /* padding: 0.3rem; */
}

.report-view-bottom {
  display: flex;
  margin-top: 1rem;
  height: calc(100% - (45% + 1rem));
  align-items: flex-start;
  gap: .5rem;
}

.report-courtship-wrapper {
  display: flex;
  width: 70%;
  gap: .5rem;
}

.report-courtship-wrapper > .report-courtship-list {
  width: 100%;
}

.report-courtship-total-wrapper {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.report-courtship-total-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.report-courtship-total-top > span {
  display: flex;
  width: 100%;
  background-color: #f0f0f0;
  padding: 0 1rem;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
}

.report-tables {
  height: 45%;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  overflow-y: auto;
}

.report-tables::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.report-tables::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.report-table-wrapper {
  height: calc(100% - 5px);
}

.selectMovementTable.selected {
  background-color: var(--theme-color);
  color: #fff;
}

.selectMovementTable a {
  color: #000000;
}

.selectMovementTable.selected a {
  color: #fff;
}

.set-setting-view {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2rem;
}

.set-setting-view .full-page-wrapper {
  width: calc(50%);
  height: calc(100vh - (60px + 2rem));
}

.select-receipt-number .table-tr {
  width: 100% !important;
}

.select-receipt-number .table-td {
  width: 100% !important;
}

.select-receipt-number .full-page-wrapper {
  margin-top: 0;
  padding-top: 0;
}

.setting-table-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.setting-table {
  height: calc(100% - 45px);
  overflow: hidden;
  overflow-y: auto;
}

.setting-table::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.setting-table::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

form.setting-form-seralize {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.setting-table .table-td,
.setting-table .table-tr {
  width: 100%;
}

.setting-form-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 35px;
}

.setting-form-btn {
  display: flex;
  width: 143px;
}

.setting-form-btn > a,
.setting-form-btn > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  padding: 0.3rem;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: .2s ease-in-out;
}

.setting-form-content > label {
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.setting-form-content > input,
.setting-form-content > select,
.setting-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.setting-form-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.setting-form-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: column;
}

.setting-form-wrapper {
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}

.setting-form-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.setting-form-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.set-setting-view.full-page-wrapper {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  height: calc(100vh - (60px + 2rem));
  overflow: hidden;
  margin-top: 1rem;
}

.setting-page-wrapper {
  width: calc(50% - (2rem) / 2);
  height: 100%;
}

.button-none {
  display: none;
}

.workshop-form-group {
  display: flex;
  width: 25%;
  flex-wrap: wrap;
  gap: 1rem;
}

.workshop-stock-list {
  width: 86%;
  display: flex;
  overflow: hidden;
  overflow-y: auto;
}

.workshop-stock-list::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.workshop-stock-list::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.workshop-transaction-top {
  display: flex;
  height: 52%;
}

.workshop-stock-list-contain {
  display: flex;
  gap: .5rem;
  width: 100%;
}

.workshop-content {
  display: flex;
  flex-direction: column;
  width: calc(16.5% - (.5rem * 2) / 2);
  flex-shrink: 0;
}

.workshop-stock-list-content {
  display: flex;
  flex-direction: column;
}

.workshop-stock-list-content input,
.workshop-stock-list-content span {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  /* padding-right: 40px; */
  color: #333 !important;
  height: 25px;
  font-size: 10px !important;
}

.workshop-stock-list-content span {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}



.workshop-stock-list-content span:active {
  cursor: grabbing;
  background-color: red !important;
  color: #fff !important;
}

.workshop-stock-list-content span:hover {
  border-color: red !important;
}

.workshop-input-content {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.workshop-list-name {
  display: flex;
  width: 100%;
}

.workshop-list-name > span {
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
}

.workshop-list-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-color);
  background-color: #f0f0f0;
  padding: 0 0.2rem;
  height: 20px;
}

.workshop-list-title.space {
  display: flex;
  padding: 0 0.2rem;
  height: 20px;
  background-color: transparent;
}

.workshop-stock-list-contain-right {
  display: flex;
  gap: .2rem;
  width: 100%;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
}

.workshop-stock-list-contain-right::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.workshop-stock-list-contain-right::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.workshop-stock-list-contain-left {
  width: 20%;
  display: flex;
}

.workshop-stock-list-contain-left .workshop-content {
  width: 100% !important;
}

.workshop-stock-list-content .workshop-input-content:not(:last-child) {
  margin-bottom: 0.1rem;
}

.workshop-transaction-center {
  margin-top: 0.5rem;
  height: calc(32% - 0.5rem);
}

.workshop-table.workshop-transaction-table {
  height: 100%;
}

.workshop-table .table-contain {
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  height: calc(100% - 30px);
}

.workshop-transaction-bottom {
  margin-top: 1rem;
  height: calc(10% - 1rem);
}

.workshop-transaction-left {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.workshop-transaction-wrapper {
  height: 100%;
}

.workshop-transaction-table .table-tr,
.workshop-transaction-table .table-td {
  width: 100%;
  padding: 0.2rem;
}

.workshop-content:first-child {
  width: 5%;
}

.workshop-form-content {
  width: calc(50% - (1rem) / 2);
}

.workshop-form-groups {
  width: 14%;
  display: flex;
  gap: .5rem;
}


.workshop-table .table-title .table-tr:first-child {
  width: 50%;
}

.workshop-table .table-title .table-tr {
  width: 50%;
}

.workshop-table .table-content .table-td {
  overflow: auto;
  width: 50%;
}

.workshop-table .table-content .table-td:first-child {
  width: 50%;
}

.workshop-form-wrapper {
  height: calc(100% - 35px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}

.workshop-form-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.workshop-form-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.add-workshop-form form {
  height: 100%;
}

.workshop-form-content > label {
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.workshop-form-content > input,
.workshop-form-content > select,
.workshop-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 12px !important;
  /* padding: 0.5rem; */
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.workshop-form-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.workshop-form-group {
  width: calc(100% - 300px);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.workshop-form-image {
  width: 300px;
  padding: 0.5rem;
  border-radius: 5px;
  border: 2px dashed var(--theme-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  position: relative;
}

.workshop-form-content {
  display: flex;
  flex-direction: column;
  width: calc(33.33% - (1.5rem * 2) / 3);
}

.workshop-form-image h2 {
  padding-bottom: 20px;
  font-size: 20px;
  text-align: center;
  color: var(--theme-color);
}

.workshop-form-image #workshop-image {
  display: none;
}

.workshop-form-image label[for='workshop-image'] * {
  vertical-align: middle;
  cursor: pointer;
}

.workshop-form-image label[for='workshop-image'] span {
  margin-left: 10px
}

.workshop-form-image i.remove {
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
  display: none;
}

.workshop-form-image label > i {
  text-align: center;
  font-size: 30px;
}

.setImageworkshop {
  width: 100%;
  height: 100%;
  display: flex;
}

.workshop-form-image label {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.workshop-form-image i.remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background-color: var(--theme-color);
  font-size: 14px;
}

.workshop-form-center-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.workshop-form-center-contain {
  display: flex;
  gap: 1rem;
}

.workshop-form-center-content > span {
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  align-items: center;
}

.workshop-form-center-content > input {
  height: 30px;
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  padding-right: 40px;
  color: #333 !important;
}

.workshop-form-center-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 1rem;
}

.workshop-form-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 35px;
}

.workshop-form-btn {
  display: flex;
  width: 120px;
}

.workshop-form-btn > a,
.workshop-form-btn > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  padding: 0.3rem;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: .2s ease-in-out;
}

.workshop-form-btn > a:hover,
.workshop-form-btn > button:hover {
  background-color: var(--theme-hover-color);
}

form.workshop-filter {
  height: 100%;
}

.workshop-filter .workshop-form-top {
  flex-direction: column;
}

.workshop-filter .workshop-form-top .workshop-form-content {
  width: 100%;
}

.select-workshop-list .select-workshop-list {
  height: calc(100vh - (65px + 4rem));
}

.select-workshop-list .set-workshop-view {
  height: 100%;
}

.select-workshop-list .set-workshop-view .full-page-wrapper {
  height: calc(100% - 35px);
  padding: .5rem;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
}

.select-workshop-list .set-workshop-view .fixed-btn-wrapper {
  height: 35px;
  margin: 0;
  padding: 0;
}

.content-msk {
  display: flex;
  gap: 2px;
}

.workshop-form-groups input {
  font-size: 10px !important;
}

.workshop-form-groups select {
  font-size: 10px !important;
}

.workshop-form-groups label {
  font-size: 11px;
}

form.transaction-workshop-form-seralize {
  height: 100%;
}

.transaction-movement-form .workshop-stock-list {
  width: 100%;
}

.report-tables-wrapper {
  height: 45%;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  gap: 1rem;
}

.report-tables-contain .report-tables {
  height: 100%;
  overflow: unset !important;
  border: none;
}

.report-tables-contain {
  width: 50%;
  overflow: hidden;
  overflow-y: auto;
}

.report-tables-contain::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.report-tables-contain::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.main-nav-sub {
  position: absolute;
  width: 280px;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in-out;
}

.main-nav-sub > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav-sub > ul > li > a {
  display: flex;
  padding: 1rem;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  transition: .2s ease-in-out;
}

.main-nav-sub > ul > li > a:hover {
  background-color: var(--theme-light-color);
}

.header-bottom-center > ul > li:hover .main-nav-sub {
  opacity: 1;
  visibility: visible;
  z-index: 999;
}

.report-date .report-courtship-wrapper {
  flex-direction: column-reverse;
  width: 100%;
}

.report-date .report-courtship-total-wrapper {
  width: 100%;
}

.general-total-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .5rem 0;
  width: 100%;
  margin-top: 0;
}

.general-total-wrapper .report-courtship-list {
  width: 100%;
  padding: .3rem;
}

.report-view-bottom-left {
  width: 40%;
}

.report-view-bottom-right {
  width: 40%;
}

.report-view-bottom-center {
  width: 20%;
  display: flex;
}

.setting-gg-page-wrapper {
  width: 100%;
  height: 100%;
}

.expense-report-title {
}

.ıncome-expense-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 75px;
  gap: 10px;
  position: relative;
}

.expense-report-title > p {
  margin: 0;
}

.expence-report-nav {
  display: flex;
  height: 40px;
  margin-top: 0.5rem;
  z-index: 0;
}

.expence-report-nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.expence-report-nav > ul > li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .3rem;
}

.expence-report-nav > ul > li > a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: .2s ease-in-out;
  background-color: transparent;
  border-radius: 5px;
  padding: 0.3rem 0;
}

.expence-report-nav > ul > li > a:hover {
  color: #fff;
  background-color: var(--theme-color);
}

.export-table-contain {
  /* padding-top: 1rem; */
  height: calc(100% - (75px + .5rem));
  border-top: 1px solid rgba(0, 0, 0, .1);
  margin-top: 0.5rem;
}

.expence-report-nav > ul > li:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, .1);
}

.casting-modal-wrapper-top {
  display: flex;
  gap: .5rem;
  height: calc(10% + 0.5rem);
  margin-bottom: 0.5rem;
}

.casting-form-content {
  width: 25%;
}

.casting-modal-wrapper input {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
}

.casting-modal-wrapper label {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.casting-modal-wrapper span {
  font-size: 13px;
  font-weight: 500;
  color: var(--theme-color);
  margin: 0;
  padding: 0 0.3rem;
  display: flex;
  width: 100%;
  align-items: center;
  background-color: #f0f0f0;
  height: 25px;
}

.casting-modal-wrapper-bottom {
  display: flex;
  gap: .5rem;
  height: calc(100% - (10% + 45px));
}

.casting-modal-wrapper-left {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.casting-modal-wrapper-bottom-right {
  width: 75%;
  display: flex;
  flex-direction: column;
  /* gap: .5rem; */
}

.casting-modal-wrapper-left-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: 25px;
}

.casting-modal-wrapper-left-title > * {
  width: 100%;
}

.casting-left-table-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  height: 25px;
}

.casting-left-table-tr {
  display: flex;
  align-items: center;
  width: 100%;
}

.casting-left-table-content {
  display: flex;
  gap: 0.5rem;
}

.casting-left-table-td > * {
  width: 100% !important;
}

.casting-left-table-td {
  width: 100%;
}

.casting-left-table-total {
  display: flex;
  gap: 0.5rem;
}

.casting-left-table-total > * {
  width: 100%;
}

.casting-left-table-total > span {
  padding: 0;
}

.casting-left-table {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: calc(100% - 125px);
  margin-top: 10px;
}

.casting-left-table-contain {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: calc(100% - 25px);
  overflow: hidden;
  overflow-y: auto;
}

.casting-right-table-title {
  display: flex;
  gap: .5rem;
  height: 25px;
}

.casting-right-table-tr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.casting-right-table-tr > span {
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.casting-right-table-contain {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
  height: calc(100% - (25px + .5rem));
  overflow: hidden;
  overflow-y: auto;
}

.casting-right-table-content {
  display: flex;
  gap: .5rem;
}

.casting-right-table-td {
  width: 100%;
}

.casting-left-bottom {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  height: 100px;
  align-items: center;
}

.casting-left-bottom-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.casting-left-bottom-content > span {
  height: auto;
  text-align: center;
}

.casting-right-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: .5rem;
}

.casting-right-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  height: 125px;
}

.casting-right-bottom-contain {
  display: flex;
  flex-direction: column;
  width: 20%;
  gap: .5rem;
}

.casting-modal-btn > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: .5rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  border: none !important;
  outline: none !important;
  transition: .2s ease-in-out;
}

.casting-modal-btn > button:hover {
  background-color: var(--theme-hover-color);
}

.casting-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.casting-modal-wrapper,
.casting-modal-wrapper > form {
  height: 100%;
}

.casting-form {
  height: calc(100vh - (65px + 4rem));
}

.casting-left-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.model-left-add-btn > button,
.model-stone-left-add-btn > button,
.pattern-stone-left-add-btn > button,
.casting-left-add-btn > button,
.casting-right-add-btn > button,
.casting-right-add-btn > button {
  display: flex;
  width: 100%;
  background-color: var(--theme-color);
  border: none;
  outline: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
  transition: .2s ease-in-out;
}

.table-td img {
  width: 100%;
  max-height: 100px;
  object-fit: contain;
}

.casting-left-add-btn > button:hover,
.casting-right-add-btn > button:hover {
  background-color: var(--theme-hover-color);
}

.casting-right-table {
  height: calc(100% - 35px);
}

.casting-right-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 35px;
}

.casting-right-add-btn > button {
  width: 20%;
}

.casting-left-table-contain::-webkit-scrollbar,
.casting-right-table-contain::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.casting-left-table-contain::-webkit-scrollbar-thumb,
.casting-right-table-contain::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.modal-content .full-page-wrapper {
  margin: 0;
  padding: 0;
}

.workshop-mixture-form .casting-modal-wrapper-bottom {
  display: flex;
  gap: 0.5rem;
  height: calc(100% - (0% + 45px));
}

.workshop-mixture-form .casting-left-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: calc(100%);
}

.casting-modal-wrapper-left-date .casting-form-content {
  width: 100%;
}

.casting-left-bottom-inputs .casting-form-content {
  width: 100%;
  width: calc(50% - (0.5rem) / 2);
}

.casting-left-bottom-inputs {
  display: flex;
  flex-wrap: wrap;
  height: 120px;
  gap: .5rem;
}

.casting-modal-wrapper-left-date {
  height: 55px;
}

.casting-left-table.ramat-table {
  height: calc(100% - (250px + 0.5rem));
}

.ramat-wrapper .casting-modal-wrapper-bottom {
  height: 100%;
}

.casting-right-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  height: calc(50% + 0.5rem);
}

.casting-right-inputs .casting-form-content {
  width: calc(33.33% - (1rem * 2) / 3);
}

.ramat-wrapper .casting-modal-wrapper-left {
  width: 30%;
}

.ramat-wrapper .casting-modal-wrapper-bottom-right {
  width: 70%;
  height: 100%;
}

.casting-left-table.ramat-table .casting-left-table-td > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  border: none;
  background-color: var(--theme-color);
  border-radius: 5px;
  color: #fff;
  margin-right: .5rem;
  transition: .2s ease-in-out;
}

.casting-left-table.ramat-table .casting-left-table-td > button > i {
  margin-right: .5rem;
}

.casting-left-table.ramat-table .casting-left-table-td:last-child {
  justify-content: flex-end;
  display: flex;
}

.fixed-btn-wrapper.ramat-button-wrapper .fixed-btn {
  width: 100%;
  justify-content: center;
}

.fixed-btn-wrapper.ramat-button-wrapper .fixed-btn > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 0.5rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  border: none !important;
  outline: none !important;
  transition: .2s ease-in-out;
}

.fixed-btn-wrapper.ramat-button-wrapper .fixed-btn > button:hover {
  background-color: var(--theme-hover-color);
}

.casting-modal-wrapper select {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
}

.casting-right-after-stocks {
  height: calc(50% + .5rem);
  margin-top: .5rem;
}

.casting-right-after-stocks-title {
  font-size: 16px;
  font-weight: 600;
  height: 30px;
}

.casting-right-after-stocks .casting-right-table {
  height: calc(100% - 65px);
}

.ramat-after-right-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 35px;
}

.ramat-after-right-add-btn button {
  display: flex;
  width: 150px;
  background-color: var(--theme-color);
  border: none;
  outline: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
  transition: .2s ease-in-out;
}

form.setting-unit-form-seralize {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.workshop-stock-list-content input:nth-child(2) {
  width: 36px;
}

.redirectShow {
  display: none;
}

#movement-model-type-list-modal span {
  font-size: 13px;
  font-weight: 500;
  color: var(--theme-color);
  margin: 0;
  padding: 0 0.3rem;
  display: flex;
  width: 100%;
  align-items: center;
  background-color: #f0f0f0;
  height: 25px;
}

#movement-model-type-list-modal input {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
}

.movement-model-type-table-title {
  display: flex;
  gap: .5rem;
  height: 25px;
}

.movement-model-type-table-tr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.movement-model-type-table-content {
  display: flex;
  gap: .5rem;
}

.movement-model-type-table-td {
  width: 100%;
}

.movement-model-type-table-contain {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
  height: calc(100% - (25px + .5rem));
  overflow: hidden;
  overflow-y: auto;
}

.movement-model-type-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1rem;
  height: 35px;
}

.movement-model-type-add-btn > button {
  display: flex;
  width: 20%;
  background-color: var(--theme-color);
  border: none;
  outline: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
  transition: .2s ease-in-out;
}

.movement-model-type-add-btn > button:hover {
  background-color: var(--theme-hover-color);
}

.movement-model-type-list {
  height: calc(100vh - (65px + 4rem));
}

.movement-model-type-list-contain {
  height: 100%;
}

.movement-model-type-table {
  height: calc(100% - (35px + 1rem));
}

.movement-model-type-table-contain::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.movement-model-type-table-contain::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.login-contain {
  display: flex;
  width: 45%;
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}

.login-wrapper {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #f3f2f2;
}

.login-contain-content {
  width: 100%;
  display: flex;
  padding: 2rem;
}

.login-contain-content .form-title {
  font-size: 30px;
  font-weight: 500;
  color: #000;
}

.login-contain-content .form-desc {
  font-size: 15px;
  font-weight: 500;
  color: #454545;
  opacity: 0.65;
}

.login-contain-content .form-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.login-contain-content .form-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
}

.login-contain-content .form-group-content {
  display: flex;
  align-items: center;
  height: 55px;
  width: 100%;
  gap: 1rem;
}

.login-contain-content form {
  width: 100%;
}

.login-contain-content .form-group-content-ikon {
  display: flex;
  width: 30px;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.login-contain-content .form-group-content-input {
  display: flex;
  width: calc(100% - 30px);
  height: 100%;
}

.login-contain-content .form-group-content-ikon > i {
  font-size: 25px;
  color: #454545;
}

.login-contain-content .form-group-content-input > input {
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: transparent !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.login-contain-content .form-group-content-input > input:focus {
  border-color: var(--theme-color) !important;
}

.login-contain-content .form-group-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 3rem;
}

.login-contain-content .form-group-btn > button {
  display: flex;
  background-color: var(--theme-color);
  width: 130px;
  border: none !important;
  cursor: pointer;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.13);
  transition: .3s ease-in-out;
}

.login-contain-content .form-group-btn > button:hover {
  transform: translateY(-5px);
  background-color: var(--theme-hover-color);
}

.model-table .table-title .table-tr {
  width: 100%;
}

.model-table .table-content .table-td {
  width: 100%;
}

.order-table .table-title .table-tr {
  width: 100%;
}

.order-table .table-content .table-td {
  width: 100%;
}

.add-model-form form {
  height: 100%;
}

.modal-list-form-wrapper {
  height: calc(100% - (32px + 1rem));
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  font-size: 13px;
}

.modal-list-form-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.modal-list-form-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.modal-list-form-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 35px;
}

.modal-list-form-btn {
  display: flex;
  width: 120px;
}

.modal-list-form-btn > a,
.modal-list-form-btn > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  padding: 0.3rem;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: .2s ease-in-out;
}

.modal-list-form-btn > a:hover,
.modal-list-form-btn > button:hover {
  background-color: var(--theme-hover-color);
}






.modal-list-form-image {
  width: 100%;
  padding: 0.5rem;
  border-radius: 5px;
  border: 2px dashed var(--theme-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  position: relative;
  flex-shrink: 0;
}

.modal-list-form-image h2 {
  padding-bottom: 20px;
  font-size: 20px;
  text-align: center;
  color: var(--theme-color);
}

.modal-list-form-image #current-image {
  display: none;
}

.modal-list-form-image label[for='current-image'] * {
  vertical-align: middle;
  cursor: pointer;
}

.modal-list-form-image label[for='current-image'] span {
  margin-left: 10px
}

.modal-list-form-image i.remove {
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
  display: none;
}

.modal-list-form-image label > i {
  text-align: center;
  font-size: 30px;
}

.setImageModal {
  width: 100%;
  height: 100%;
  display: flex;
}

.modal-list-form-image label {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
}

.modal-list-form-image i.remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background-color: var(--theme-color);
  font-size: 14px;
}

.modal-list-form-group {
  width: calc(100% - 296px);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  height: 89%;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  overflow-y: auto;
}

.modal-list-form-group::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.modal-list-form-group::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.modal-list-form-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.modal-list-form-content {
  display: flex;
  flex-direction: column;
  width: calc(24.8% - (.5rem * 2) / 3);
}

.modal-list-form-content > label {
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.modal-list-form-content > input,
.modal-list-form-content > select {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0 .5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
}


.modal-list-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
}

.modal-list-form-top {
  height: 100%;
}

.modal-list-image-wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 0.5rem;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding-right: .5rem;
}

.modal-list-image-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.modal-list-image-wrapper::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

.modal-list-form-image .model-image {
  display: none;
}

.modal-list-form-image label * {
  vertical-align: middle;
  cursor: pointer;
}

.modal-list-form-image label span {
  margin-left: 10px
}

form.model-filter {
  height: 100%;
}

.model-list-form-detail-row > a {
  border: 1px solid;
  text-decoration: none;
  padding: 4px;
}

.model-list-form-detail-row {
  display: flex;
  margin-bottom: 10px;
  gap: 10px;
}

.add-pattern-form form {
  height: 100%;
}

.modal-list-form-image .pattern-image,
.modal-list-form-image .modal-list-image {
  display: none;
}

.modal-list-form-image label > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.casting-left-stone-table-contain {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: calc(100% - 25px);
  overflow: hidden;
  overflow-y: auto;
}

.order-form-content label {
  font-size: 11px;
  font-weight: 500;
  color: #6e7787;
  /* margin-bottom: 0.3rem; */
}

.order-form-content input,
.order-form-content select {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 21px;
}

.order-form-content textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: .5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 90%;
}

.order-form-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-start;
}

.order-form-content {
  width: calc(20% - (.5rem * 4) / 5);
}

.order-date-content {
  display: flex;
  gap: .5rem;
}

.order-form-bottom {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  height: 160px;
}

.order-form-bottom-left {
  width: 20%;
}

.order-form-bottom-right {
  width: 80%;
  height: 100%;
}

.order-form-bottom .order-form-content {
  width: 100%;
  height: 100%;
}

.create-table .table-tr {
  width: 100%;
  padding: .2rem .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.create-table .table-title {
  height: 45px;
}

.create-table-wrapper {
  margin: .5rem 0;
  height: calc(30% - 1rem);
}

.create-table .table-contain {
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  height: calc(100% - 45px);
}

.create-order-list-wrapper {
  display: flex;
  gap: .5rem;
  height: 20%;
}

.create-order-list-wrapper .daily-form-list {
  width: 100%;
}

.create-order-list-wrapper .daily-form-list > ul {
  height: calc(100% - 20px);
}

.create-order-list-wrapper .daily-form-list .total-curreny {
  padding: 0 0.2rem;
  height: 20px;
}

.create-order-details > ul > li > p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
}

.create-order-details > ul > li > p > span {
  font-size: 13px;
  color: #333 !important;
  font-weight: 400;
}

.create-order-details > ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.create-order-details > ul > li {
  width: 25%;
}

.create-order-details > ul > li:first-child {
  width: 50%;
}

.create-order-details {
  margin: .5rem 0;
  height: calc(7% - 1rem);
}

.order-form-wrapper {
  height: 43%;
}

.create-table {
  height: 100%;
}

.fancybox__container {
  z-index: 9999999999 !important;
}

.exportTable tr {
  cursor: pointer;
}

.exportTable .selected-model {
  background: var(--theme-color);
  color: #ffffff;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(18 18 18 / 21%);
  color: white;
  text-align: center;
  padding-top: 20%;
  z-index: 9999;
}

#loader {
  font-size: 20px;
}

.table-contain.addTableOrderModel input {
  padding: 3px;
}

.order-select-model-update-show {
  height: calc(100vh - (65px + 4rem));
}

.group-order-modal-form {
  height: calc(100% - 35px);
  padding: 0.5rem;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
}

.group-order-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: #fff;
  border-radius: 8px;
  height: 35px;
  margin: 0;
  padding: 0;
}

.group-order-modal-btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .5rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: .2s ease-in-out;
}

.group-order-modal-btn > a > i {
  margin-right: .5rem;
}

.group-order-modal-btn > a:hover {
  background-color: var(--theme-hover-color);
}

.group-order-modal-form-content > label {
  font-size: 14px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.group-order-modal-form-content > input,
.group-order-modal-form-content > select {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 35px;
}

.group-order-modal-form-content > textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
}

.group-order-modal-form-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}

.group-order-modal-form-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.group-order-modal-form-bottom .group-order-modal-form-content {
  width: calc(11% - (.5rem * 3) / 4);
}

.group-order-modal-form-bottom .group-order-modal-form-content span {
  height: 35px !important;
}

.group-order-modal-btn > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: .2s ease-in-out;
}

.create-order-tab input,
.create-order-tab select {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 35px;
}

.create-order-tab textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
}

.create-order-tab label {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.create-order-tab .modal-list-form-content span {
  height: 35px !important;
}

.create-order-tab {
  width: 100% !important;
  height: 100% !important;
}

.group-order-modal-form-top {
  width: 100%;
  display: flex;
}

.group-order-modal-form-top .modal-list-form-content {
  width: 100%;
}

.create-order-tab .group-order-modal-form-bottom .modal-list-form-content {
  width: calc(9.9% - (.5rem * 3) / 4);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.create-order-tab .group-order-modal-form-bottom .modal-list-form-content:first-child {
  width: 100%;
}

.create-order-tab .modal-list-form-content {
  width: 45%;
}

.order-model-pattern-update-show {
  height: calc(100vh - (65px + 4rem));
}

.order-model-pattern-update-show > form {
  height: 100%;
}

.order-model-pattern-update-show .modal-list-form-group {
  width: 100%;
  height: auto;
}

.order-model-pattern-update-show .modal-list-form-group .modal-list-form-content > span {
  width: 100% !important;
}

.add-model-form .modal-list-form-content {
  width: 45%;
}

.add-model-form .modal-list-form-content .casting-left-table-content span {
  /* height: 35px !important; */
}

.add-pattern-form .modal-list-form-content {
  width: 45%;
}

.add-pattern-form .modal-list-form-content .casting-left-table-content span {
  height: 35px !important;
}

.create-table .table-tr.allSelectModel > input {
  margin-right: 0.5rem;
}

.create-table-wrapper {
  position: relative;
}

.create-order-magnify-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 35px;
  height: 35px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  background-color: #fff;
  cursor: pointer;
  color: #000;
  transition: .2s ease-in-out;
}

.create-order-magnify-icon:hover {
  background-color: #f0f0f0;
}

.magnify-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in-out;
}

.magnify-overlay.active {
  opacity: 1;
  visibility: visible;
}

.create-table-wrapper.magnify {
  position: absolute;
  z-index: 95;
  background-color: #fff;
  height: 95vh;
  top: 50%;
  width: 98%;
  margin: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 5px;
}

.create-order-magnify-remove {
  display: none;
}

.create-order-magnify-remove.active {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 1rem;
}

.create-table-wrapper.magnify .create-table {
  height: calc(100% - (25px + 1rem));
}

.magnify-remove-btn {
  padding-right: .5rem;
  cursor: pointer;
}

.order-rapor-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.order-rapor-toggle > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--theme-color);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  padding: 0.5rem;
  transition: .2s ease-in-out;
}

.order-rapor-toggle-sub {
  position: absolute;
  top: 140%;
  width: 230px;
  background-color: #fff;
  z-index: 9;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  right: 0px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: .25s ease-in-out;
}

.order-rapor-toggle-sub.active {
  opacity: 1;
  visibility: visible;
}

.order-rapor-toggle-sub > a {
  display: flex;
  padding: 1rem;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: .2s ease-in-out;
}

.order-rapor-toggle-sub > a:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.order-rapor-toggle-sub > a:hover {
  background-color: #f0f0f0;
}

.order-rapor-toggle > span:hover {
  background-color: var(--theme-hover-color);
}

.pagi-cont {
  justify-content: center;
}

.pagi-cont .pagination {
  margin-bottom: 5px;
  margin-top: 5px;
}

.pagi-cont-workshop {
  justify-content: center;
}

.pagi-cont-workshop .pagination {
  margin-bottom: 5px;
  margin-top: 5px;
}

ul.pagination .page-active-link {
  background: var(--theme-color);
}

ul.pagination .page-active-link {
  color: #ffffff !important;
}

a.page-link {
  color: #000000;
}

.comprehensive-wrapper {
  display: flex;
  gap: 1rem;
  flex-direction: unset;
}

.comprehensive-list {
  width: calc(33.33% - (1rem * 2) / 3);
  height: 100%;
  position: relative;
  overflow: auto;
}

.comprehensive-list .comprehensive-list-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  margin-bottom: 1rem;
}

.comprehensive-list .query-response {
  height: calc(100% - (25px + 1rem)) !important;
  background-color: #f0f0f0;
  overflow: auto;
}

.comprehensive-list .table-response {
  height: calc(100% - (25px + 1rem)) !important;
  background-color: #f0f0f0;
  overflow: auto;
  padding: 1rem;
}

.comprehensive-contain {
  height: calc(100% - (35px + 0.5rem));
}

.comprehensive-list .query-area input {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
  margin-bottom: 1rem;
}

.comprehensive-list .query-area label {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.comprehensive-list .query-area textarea {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  margin-bottom: 1rem;
}

.query-area-btn > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: .2s ease-in-out;
  border: navajowhite;
}

.query-area-btn {
  display: flex;
  gap: 1rem;
}

.query-area-btn > button:hover {
  background-color: var(--theme-hover-color);
}

.comprehensive-list-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 35px;
  height: 35px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  color: #000;
  transition: .2s ease-in-out;
}

.comprehensive-list-btn:hover {
  background-color: #f0f0f0;
}


.comprehensive-list.magnify {
  position: absolute;
  z-index: 95;
  background-color: #fff;
  height: 95vh;
  top: 50%;
  width: 98%;
  margin: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 5px;
}

.comprehensive-magnify-remove-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in-out;
  cursor: pointer;
}

.comprehensive-magnify-remove-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.comprehensive-magnify-remove-btn.active {
  opacity: 1;
  visibility: visible;
}

.report-table-currency a {
  text-decoration: none;
  border: 1px solid var(--theme-color);
  padding: 0 1rem;
  color: var(--theme-color);
  text-transform: uppercase;
}

.report-table-currency {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 10px;
  justify-content: center;
}

.report-table-currency a:hover {
  background: var(--theme-color);
  color: #ffffff;
}

.report-table-currency a.selected {
  background: var(--theme-color);
  color: #ffffff;
}

.expense-report-title > p:nth-child(2) {
  width: 20%;
}

.expense-report-title > button {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: .2s ease-in-out;
  border: none;
  outline: 0;
  font-size: 14px;
}

.expense-report-title > p:last-child {
  width: calc(100% - (20% + 150px));
  display: flex;
  justify-content: space-between;
}

.expense-report-title > p:last-child .select2-container {
  width: 30% !important;
}

.expense-report-title > p {
  font-size: 14px;
}

.expense-report-title > p:last-child > input {
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 0 1rem;
  font-size: 13px !important;
  border-radius: 5px;
}

.expense-report-title > button:hover {
  background-color: var(--theme-hover-color);
}

.expense-report-title > span {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.order-rapor-td {
  overflow: unset !important;
}

.comprehensive-report-filter-btn > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--theme-color) !important;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: .2s ease-in-out;
  border: none;
  outline: 0;
  gap: .5rem;
}

.comprehensive-report-filter-btn {
  display: flex;
  width: 180px;
  margin-bottom: 0.5rem;
}

.comprehensive-report-filter-btn > button:hover {
  background-color: var(--theme-hover-color) !important;
}

.comprehensive-report-modal-form-contain input {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
}

.comprehensive-report-modal-form-contain label {
  font-size: 13px;
  font-weight: 500;
  color: #6e7787;
  margin-bottom: 0.3rem;
}

.comprehensive-report-modal-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.comprehensive-report-modal-form-contain {
  width: calc(19.8% - (1rem * 2) / 3);
}

.comprehensive-report-modal-form-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

#comprehensive-report-modal .modal-body {
  height: calc(100vh - (65px + 4rem));
}

.comprehensive-report-modal-form-contain .select2-container .select2-selection--single {
  height: 25px !important;
}
.calc-expense-cont {
  display: flex;
  align-items: baseline;
}

.calc-expense-cont button,.filter-detail button  {
  background-color: var(--theme-color);
  border-radius: 8px;
  transition: 0.2s ease-in-out;
  color: #ffffff;
  border: none;
}

p.changeText {
  margin-right: 9px;
}
.filter-detail {
  width: 13.33%;
}
.filter-detail input {
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 13px !important;
  padding: 0.5rem;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100%;
  color: #333 !important;
  height: 25px;
  margin-bottom: 1rem;
}

.filter-col {
  display: flex;
  gap: 1rem;
}
.filter-detail.button {
  display: flex;
  align-items: center;
}

.filter-detail.button button {
  width: 100%;
  margin-top: 5px;
}