@font-face {
  font-family: SpaceMono;
  src: url("https://static.smartstock.africa/font/SpaceMono-Regular.ttf");
}

@font-face {
  font-family: RobotoVariable;
  src: url("https://static.smartstock.africa/font/Roboto.ttf");
}

@font-face {
  font-family: Jost;
  src: url("https://static.smartstock.africa/font/jost.ttf");
}

@font-face {
  font-family: Figtree;
  src: url("https://static.smartstock.africa/font/figtree.ttf");
}

@font-face {
  font-family: Inconsolata;
  src: url("https://static.smartstock.africa/font/inconsolata.ttf");
}

:root {
  --Dark: #3a4e55;
  --Roboto: "Roboto", sans-serif;
  --Jost: "Jost", sans-serif;
  --Figtree: "Figtree", sans-serif;
  --Inconsolata: "Inconsolata", sans-serif;
  --font-size: 100%;
  --sidebar-size: 160px;
  --animate-duration: 0.3s !important;
  --animate-delay: 0s !important;
}

::selection {
  background-color: var(--body-color);
  color: white;
}

html {
  overflow: hidden;
}

* {
  transition: all 0.3s ease-in-out;
  scrollbar-width: thin;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100svh;
  background: var(--body-color);
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.rotateBody {
  transform: rotate(90deg);
  height: 100vw;
}

/* LOADER FORMATS */
#loaderShip {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--body-color);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loaderContainer {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  background-color: #e9eff2;
}

#loader {
  position: relative;
  z-index: 101;
  background: linear-gradient(
    90deg,
    var(--body-color) 0%,
    rgba(0, 0, 0, 0) 20%,
    var(--body-color) 75%,
    var(--body-color) 100%
  );
  animation: streak 8.5s linear infinite;
}

#loaderIcon,
#loader {
  height: 20px;
}

@keyframes streak {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100rem 0%;
  }
}

header {
  height: 64px;
  background-color: hsl(0deg 0% 100% / 15%);
  display: flex;
  box-shadow: 0px 0px 5px hsl(0deg 0% 0% / 15%);
  border-bottom: 1px solid hsl(0deg 0% 100% / 10%);
}

.fullWidth {
  width: 100vh;
}

#headerContainer,
.headerElement {
  display: flex;
  align-items: center;
}

#headerContainer {
  gap: 10px;
  padding: 10px;
  flex: 1;
}

#messageIconContainer {
  margin-left: auto;
  position: relative;
}

.newMsgIndicator {
  position: absolute;
  top: -1px;
  right: -1px;
  height: 10px;
  width: 10px;
  background: var(--body-color);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0px 0px 3px #00000030;
  opacity: 0;
}

.indicate {
  background: #ca3c25;
  opacity: 1;
}

#notificationMessageUI {
  max-height: 50vh;
  overflow-y: scroll;
  scrollbar-color: black white;
  font-size: 80%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#messageIconContainer,
#profilePhotoContainer,
#notificationIconContainer {
  cursor: pointer;
}

.headerElement {
  gap: 5px;
}

#menuIconSvg {
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
}

#menuIconSvg:active {
  transform: scaleX(0.9);
}

#profilePhotoHeader {
  height: 100%;
}

#smstLogo {
  height: 50px;
}

#SmStShopTextHolder {
  font-family: var(--Jost);
  color: white;
  font-size: calc(var(--font-size) * 1.2);
  letter-spacing: 1px;
}

section {
  height: 100%;
  display: flex;
  position: relative;
}

#sideBar {
  height: 100%;
  width: 150px;
  display: flex;
  overflow: hidden;
  user-select: none;
  background: #00000029;
  backdrop-filter: blur(50px);
  position: absolute;
  z-index: 2;
}

.active {
  width: 45px !important;
}

.subActive {
  width: 0px !important;
}

.active .sidebarText {
  display: none;
}

#sideBarContainer {
  flex: 1;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.svgPathOne {
  stroke: white;
}

.svgPathOneInv {
  fill: none;
  stroke: white;
}

.svgPathTwo {
  fill: white;
  stroke: none;
}

.svgPathTwoStroke {
  stroke: white;
}

.svgPathTwoFill {
  fill: white;
}

.sidebar {
  height: max-content;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 10px;
  user-select: none;
  padding-left: 5px;
}

.sidebar:hover {
  background: var(--body-color);
}

.sidebar:active {
  background: transparent;
}

.sidebarIcon {
  display: flex;
}

.secondaryIcon {
  margin-left: auto;
  margin-right: 5px;
}

.rotate {
  transform: rotate(180deg);
}

.sidebarText {
  font-family: var(--Figtree);
  font-size: 80%;
  letter-spacing: 1px;
  color: white;
  font-weight: 400;
}

.subSideBarContainer {
  height: 0;
  overflow: hidden;
}

.subSideBar {
  font-family: var(--Figtree);
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 40px;
  color: white;
  font-size: 80%;
  padding-top: 5px;
}

.subsidebar {
  cursor: pointer;
}

.subsidebar:hover {
  text-decoration: underline;
}

.mediaHolder {
  box-shadow: 0px 0px 5px #00000035;
  border-radius: 50%;
  height: 30px;
  border: 1px solid white;
  background: #ffffff5c;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.mediaHolder:active {
  background: #c6c6c65c;
}

.searchHolder {
  display: flex;
  align-items: center;
}

.searchIconHolder {
  position: absolute;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

#searchInput {
  padding: 5px;
  height: 100%;
  padding-left: 35px;
  font-size: var(--font-size);
  letter-spacing: 1px;
  font-family: var(--Figtree);
  outline: none;
  color: var(--Dark);
  background: hsl(0deg 0% 100% / 15%);
  border: none;
  border-bottom: 1px solid var(--body-color);
  border-radius: 0px;
  width: 100%;
}

#searchContainer {
  margin-left: 25px;
  display: flex;
  flex-direction: column;
  position: relative;
}

#searchInput:focus {
  background: #ffffff70;
  border-bottom: 2px solid var(--body-color);
}

.searchOutputHolder {
  width: 100%;
  position: absolute;
  top: 100%;
  z-index: 1;
  box-sizing: border-box;
  height: 0px;
  background: var(--body-color);
  border-radius: 5px;
  box-shadow: 0px 0px 2px black;
  margin-top: 7px;
  overflow: hidden;
}

.search {
  margin: 5px;
  border-radius: 5px;
  font-family: var(--Figtree);
}
.search .smstDataDisplayNameHolder {
  padding: 5px;
}

#mainBar {
  flex: 1;
  position: relative;
  display: flex;
  background: var(--body-color);
}

#section {
  flex: 1;
}

#sectionContainer,
#motherModuleContainer {
  height: 100%;
}

#sectionContainer {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

#motherModuleContainer,
#auntModuleContainer {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

#auntModuleContainer {
  grid-template-rows: 1fr;
}

.motherModule {
  animation-duration: 1s !important;
}

.employeeModule {
  grid-template-rows: 1fr !important;
}

#quickPlatform {
  background: transparent;
  border: none;
  box-shadow: none;
}

#quickPlatformContainer {
  font-family: var(--Lexend);
  margin: 5px;
  padding: 5px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
}

.quickAction {
  display: flex;
  width: max-content;
  height: max-content;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px;
  cursor: pointer;
  user-select: none;
  font-size: calc(var(--font-size) * 0.8);
  color: white;
  font-family: var(--Jost);
}

.quickAction:hover {
  background: rgba(255, 255, 255, 0.4);
}

.quickAction:hover .qaIconHolder {
  transform: rotate(90deg);
}

.quickAction:active {
  background: rgba(255, 255, 255, 0.2);
}

.qaIconHolder {
  display: flex;
  align-items: center;
}

#mainShip {
  display: flex;
  height: 100%;
  animation-duration: 1s !important;
}

#mainContainer {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

#mainContainerMobile {
  font-family: var(--Jost);
  font-weight: 500;
  color: var(--Dark);
  font-size: 120%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 10px;
}

#mainHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: white;
  font-family: var(--Jost);
  font-weight: 500;
  font-size: 120%;
  height: 35px;
  align-items: center;
}

#dateHolder {
  display: flex;
  align-items: center;
  padding-left: 5px;
  opacity: 1;
  font-weight: 400;
  color: white;
  font-size: 80%;
  background: #00000054;
  padding-right: 5px;
  border-radius: 3px;
  letter-spacing: 1px;
}

#aunt,
#father,
#uncle {
  display: flex;
  border-radius: 5px;
  margin: 5px;
  gap: 10px;
  background: #00000029;
  padding: 5px;
  border-radius: 10px;
  overflow: hidden;
}

#uncle {
  flex-direction: row !important;
}

#miniSidebarContainer {
  height: 100%;
  padding: 5px;
  font-family: var(--Jost);
  background: #ffffff24;
  font-size: 120%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

#miniSidebar {
  display: none;
}

.miniSidebar:hover {
  background: #ffffff61;
}

#contentContainer {
  font-family: var(--Jost);
  position: relative;
  height: 100%;
  overflow-y: scroll;
  min-width: 300px;
}

#orderContainer {
  height: 100%;
}

.contact {
  display: flex;
  padding: 5px;
}

#smartstock_slider_container {
  margin-left: auto;
  display: flex;
  align-items: end;
}

#sliderContent {
  display: flex;
  gap: 10px;
  font-size: calc(var(--font-size) * 0.8);
  align-items: center;
}

.content {
  height: max-content;
  display: flex;
  padding: 10px;
  flex-direction: column;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  color: white;
}
#orderProductsContainer,
#saleProductsContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#productContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
#formContainer {
  display: flex;
  gap: 10px;
  background: var(--body-color);
  width: 100%;
}

#unitContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#unitContainer.qASelectValues {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

.qASelectValues .qACode {
  background: hsl(0 100% 100% /50%);
  flex-direction: row;
}

#rotateButton {
  background: var(--body-color);
  padding: 2.5px;
  border-radius: 5px;
  color: #1e1e1e;
  letter-spacing: 1px;
  box-shadow: 0px 0px 3px -1px #000000c4;
  font-weight: 500;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ffffff1f;
  font-family: var(--Figtree);
}

#variableContainer {
  gap: 10px;
}

.quickActionContent #variableContainer {
  max-height: 50vh;
}

.smstDataDisplay {
  cursor: pointer;
  flex: 1;
  gap: 10px;
  color: white;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 0px 0px 1px #00000038;
}

.miniContent {
  overflow: hidden;
}

.smstDataDisplay:hover {
  background: #ffffff1c;
}

.smstDataDisplay:hover .smstDDNHIconHolder {
  opacity: 1;
  pointer-events: auto;
}

.smstDataDisplay:active {
  background: #0000001c;
}

.smstDataDisplayNameHolder {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0000001c;
  text-wrap-mode: nowrap;
}

.smstDDNHId {
  font-size: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  padding: 2.5px;
  background: var(--body-color);
  padding-left: 5px;
  padding-right: 5px;
}

.smstDataDisplayDescriptionHolder {
  font-size: 70%;
  background: #ffffff21;
  padding: 2.5px;
  padding-left: 5px;
  color: #313131;
  letter-spacing: 1px;
}

.smstDDNHIconHolder {
  margin-left: auto;
  display: flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  pointer-events: none;
  opacity: 0;
}

.slider {
  font-size: 80%;
  padding: 2.5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.slider:hover {
  letter-spacing: 1px;
}

.slided {
  background: #fff;
  letter-spacing: 1px;
  color: black;
}

.sliderText {
  height: 2ch;
}

#dynamicUI {
  display: flex;
  flex-direction: column;
  align-items: end;
  pointer-events: none;
}

#dynamicUIHolder {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: start;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

#notificationDynamicUIHolder::before,
#notificationMessageDynamicUIHolder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #ffffff70;
  z-index: 0;
}

#notificationDUI {
  padding: 5px;
}
#notificationDUI,
#notificationMessage {
  position: relative;
  z-index: 1;
}

#profileDynamicUIHolder,
#notificationDynamicUIHolder,
#notificationMessageDynamicUIHolder {
  background: var(--body-color);
  margin: 5px;
  border-radius: 10px;
  border: 1px solid #3a4e5538;
  box-shadow: 0px 0px 5px #3a4e5533;
  opacity: 0;
  overflow: hidden;
}

#notificationMessageDynamicUIHolder {
  opacity: 1;
  position: absolute;
}

#profileDisplay {
  aspect-ratio: 3/1;
  display: flex;
  align-items: end;
  background: var(--body-color);
  border-radius: 10px;
}

#profilePhoto {
  width: max-content;
  display: flex;
  border-radius: 50%;
  border: 2px solid var(--Dark);
  background: white;
}

#profileDetails {
  font-size: calc(var(--font-size) * 0.8);
  font-family: var(--Lexend);
  color: white;
  padding: 2.5px;
  background: #ffffff33;
  padding-left: 5px;
  padding-right: 5px;
}

.infoTitle {
  font-size: calc(var(--font-size) * 0.8);
  padding: 2px;
  font-family: var(--Lexend);
  margin-top: 10px;
}

.infoDisplay {
  font-size: calc(var(--font-size) * 0.8);
  font-weight: 300;
  padding: 2px;
  border-bottom: 1px solid #3a4e5573;
  padding-bottom: 0px;
}

#notificationUI {
  display: flex;
  flex-direction: column;
}
#closeIcon {
  display: flex;
}

#closeIcon {
  cursor: pointer;
  display: flex;
  border-radius: 50%;
  border: 1px solid transparent;
}

#closeIcon:hover {
  border: 1px solid var(--body-color);
}

#notificationHeader {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--Lexend);
  font-size: calc(var(--font-size) * 0.8);
  margin: 5px;
  background: #ffffffb5;
  padding: 5px;
  border-left: 4px solid var(--body-color);
}

#notifications {
  display: flex;
  box-shadow: 0px 0px 5px #0000001c;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}

.notification {
  font-family: var(--Jost);
  margin: 5px;
  color: black;
  box-shadow: 3px 2px 0px 1px var(--body-color);
}

.read_notification {
  box-shadow: 3px 2px 0px 1px white;
}

.notificationTitle {
  background: #ffffffbd;
  padding-left: 5px;
}

.notificationMessage {
  font-weight: 300;
  font-size: calc(var(--font-size) * 0.8);
  padding: 5px;
  background: #ffffff6e;
}

.notificationIconHolder {
  display: flex;
  align-items: center;
  margin: 5px;
}

.notificationDetail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--body-color);
  margin-left: 5px;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
  user-select: none;
}

.notificationDetail:hover {
  background: rgba(128, 173, 191, 0.2);
}

.notificationUsernameHolder {
  display: flex;
  font-family: var(--Lexend);
  font-size: calc(var(--font-size) * 0.8);
  justify-content: space-between;
  gap: 15px;
}

.notificationTimeHolder {
  font-size: calc(var(--font-size) * 0.8);
  display: flex;
  align-items: end;
}

.notificationMessageHolder {
  font-family: var(--Jost);
  font-size: 90%;
}

.notificationPhoto {
  border: 1px solid #0000004d;
  border-radius: 50%;
  height: 30px;
}

#notificationMessageHeader {
  display: flex;
  align-items: center;
  font-family: var(--Lexend);
  font-size: calc(var(--font-size) * 0.8);
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  padding: 5px;
  gap: 5px;
}

#notificationIconsHolder {
  display: flex;
  align-items: center;
  margin-left: auto;
  pointer-events: auto;
}

#notificationMessageBox {
  height: 150px;
  background: #ffffff91;
  display: flex;
  align-items: end;
  overflow: hidden;
}

#notificationMessage {
  font-family: var(--Figtree);
  font-size: calc(var(--font-size) * 0.8);
  letter-spacing: 0.5px;
  max-height: 150px;
  width: 100%;
  overflow-y: scroll;
  pointer-events: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

#messageInputContainer {
  display: flex;
  align-items: center;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  padding: 5px;
}

#msgInput {
  letter-spacing: 1px;
  padding: 5px;
  outline: none;
  text-wrap-mode: wrap;
  border: none;
  border-radius: 3px;
  background: #ffffff5c;
  font-family: var(--Figtree);
}

#messageSendIconHolder {
  display: flex;
  align-items: center;
  background: black;
  margin-left: 5px;
  background: var(--body-color);
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  border-bottom: 2px solid var(--Dark);
}

.senderMsgContainer {
  position: relative;
  display: flex;
  margin: 5px;
}

.senderMsg {
  padding: 5px;
  background: rgba(128, 173, 191, 0.27);
  border: 1px solid #3a4e553d;
  border-radius: 5px;
  border-top-left-radius: 0px;
}

.sendeeMsgContainer {
  margin: 5px;
  display: flex;
  justify-content: end;
}

.sendeeMsg {
  padding: 5px;
  background: rgba(128, 173, 191, 0.27);
  border: 1px solid #3a4e553d;
  border-radius: 5px;
  border-bottom-right-radius: 0px;
}

#quickActionShip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  backdrop-filter: blur(30px);
  display: flex;
  opacity: 0;
  z-index: 3;
}

#quickActionContainer {
  margin: auto;
  border-radius: 5px;
  font-family: var(--Jost);
  width: 30rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  animation-delay: 0.3s !important;
  margin-top: 30px;
}

#quickActionHeader {
  padding: 10px;
  background: var(--body-color);
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
}

#quickActionHeader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #0000002e;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
}

#quickActionContent {
  padding: 10px;
  background: var(--body-color);
  position: relative;
}

#quickActionContent::before {
  position: absolute;
  content: "";
  background: #ffffff61;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.qAText {
  font-weight: 500;
}

.qASelectValueHolder {
  position: relative;
}

.qAInputHolder,
.qASelectHolder {
  display: flex;
  flex-direction: column;
  background: var(--body-color);
  border-bottom-left-radius: 5px;
  overflow: hidden;
  border-bottom-right-radius: 5px;
}

.qAOverflow {
  overflow: visible !important;
}

.qAInputHolder {
  position: relative;
  height: 100%;
}

.qASelectHolder {
  overflow: visible !important;
  position: relative;
}

.qASelectIconHolder,
#dropDownIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.qASelectParent {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 0px;
  z-index: 3;
}

.quickSelect {
  z-index: 3 !important;
}

.hideQuickSelect {
  z-index: 1 !important;
}

.qASelectActivator {
  right: 0px;
  padding-left: 5px;
  padding-right: 5px;
  background: hsl(0 0% 0% / 25%);
  height: 100%;
  cursor: pointer;
  position: absolute;
  z-index: 3;
}

.qASelectActivatorVariant {
  display: flex;
  align-items: center;
}

.EQAInputHolder {
  margin: 5px;
}

.qAInput {
  padding: 5px;
  font-family: var(--Lexend);
  border: none;
  outline: none;
  background: #fff3;
  letter-spacing: 1px;
  width: 100%;
  color: black;
  border-top: 1px solid #00000057;
  box-sizing: border-box;
}

.qAFinance {
  text-align: right;
  padding-right: 3ch;
  font-family: var(--Inconsolata);
  font-size: 100%;
  font-weight: 700;
  height: 100%;
}

.qAinput[type="checkbox"] {
  accent-color: var(--body-color);
}

.extraQuickActionContent {
  padding: 5px;
  border-left: 4px solid var(--body-color);
  z-index: 1;
  position: relative;
  margin: 5px;
  background: #00000008;
}

.EQAInput {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  font-family: var(--Figtree);
  font-size: 80%;
  border: none;
  background: #ffffff59;
  font-weight: 500;
  outline: none;
}

.qASelectValues {
  width: 100%;
  background: var(--body-color);
  z-index: 4;
  margin-top: 5px;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid hsl(0 100% 100% / 50%);
  box-shadow: inset 0px 0px 5px hsl(0 0% 0% / 50%);
  max-height: 30vh;
  overflow-y: scroll;
}

.qASelectCodeHolder {
  opacity: 0.5;
  font-size: 80%;
}

.warning {
  animation: warn 2s ease-in-out;
}

.qaHelper {
  font-size: 80%;
  font-weight: 500;
  opacity: 0.7;
  background: #3a4e55;
  border-radius: 0px;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

@keyframes warn {
  0% {
    background: #fff3;
  }
  30% {
    background: #0000001f;
  }
  100% {
    background: #fff3;
  }
}

.Div {
  word-wrap: break-word;
  font-size: 80%;
}
.motherQuickAction {
  display: flex;
  position: relative;
  z-index: 4;
}

.quickActionContent {
  margin: 5px;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #00000042;
  overflow: visible;
  border-radius: 5px;
  flex: 1;
}

.quickActionDisabled {
  margin-left: 20px;
  opacity: 0.5;
  pointer-events: none;
}

#quickActionFooter {
  display: flex;
  justify-content: space-around;
  font-size: 90%;
  color: white;
  font-weight: 400;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.31);
}

.qAValue {
  display: flex;
  background: #ffffff59;
  padding: 5px;
  border-radius: 5px;
  align-items: center;
  margin: 5px;
  gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}

.qACode {
  justify-content: space-between;
  font-size: 80%;
  background: hsl(0 0% 0% /50%);
}

#actionheaderText {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
}

.footerButton {
  background: hsl(0 100% 100% / 40%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.4px);
  -webkit-backdrop-filter: blur(2.4px);
  border: 1px solid rgba(255, 255, 255, 0.31);
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: black;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}

.footerButton:hover {
  background: hsl(0 100% 100% / 60%);
  scale: 1.05;
}

.footerButton:active {
  background: hsl(0 100% 100% / 20%);
  transform: scaleX(1.05);
}

#headerIconHolder {
  display: flex;
  align-items: center;
  margin-left: auto;
  aspect-ratio: 1/1;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
}

#quickActionHeader {
  display: flex;
  align-items: center;
}

#headerIconHolder:hover {
  transform: rotate(90deg);
  background: #0000004a;
}

.qAInputLimitHolder,
.vbInputLimitHolder {
  font-family: var(--Lexend);
  font-size: 80%;
  display: flex;
  align-items: center;
  gap: 2px;
  color: black;
}

.qATextHolder {
  display: flex;
  justify-content: space-between;
  background: #fff6;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 1;
  font-size: 90%;
  user-select: none;
  padding: 2.5px;
  padding-left: 5px;
  padding-right: 5px;
  letter-spacing: 1px;
}

.miniHolder {
  font-size: 90%;
}

#employeeInfo {
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  margin: 5px;
}

#sysNotifHolder {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 999;
  display: flex;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 10;
}

#sysnotifContainer {
  margin: 10px;
  margin-right: 20px;
  height: max-content;
  background: #ffffffd6;
  border-radius: 5px;
  box-shadow: 0px 0px 3px var(--Dark);
  font-family: var(--Jost);
  overflow: hidden;
  position: relative;
  animation-delay: calc(0.3s + (var(--i) * 0.15s));
  /* top: calc(var(--i)*3px);
  z-index: calc(100 - var(--i)); */
}

#variableShip {
  pointer-events: all;
  height: 100%;
  width: 100%;
}

#moduleHolder {
  flex: 1;
}

#variableContainerExtra {
  margin: auto;
  background: white;
  border-radius: 5px;
  font-family: var(--Jost);
  overflow: hidden;
  width: 100%;
}

#variableBox {
  background: var(--body-color);
  color: white;
}

#vbHeader {
  padding: 5px;
  background: #00000045;
  color: white;
  padding-left: 10px;
  display: flex;
  font-family: var(--Figtree);
  letter-spacing: 1px;
}

#vbContent {
  padding: 5px;
}

#vbDescription {
  background: #3a4e551f;
  border-left: 4px solid #0000005c;
  overflow: hidden;
  font-size: 80%;
  padding-left: 5px;
}

#vbChartHolder {
  margin-top: 10px;
  box-shadow: inset 0px 0px 3px #00000091;
  border-radius: 5px;
}

#threadContainerHeader {
  font-family: var(--Figtree);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px;
  background: #00000026;
}

#vbMeta {
  font-size: 80%;
  font-family: var(--Lexend);
  display: flex;
  gap: 5px;
  padding: 5px;
  background: #00000024;
  border-left: 2px solid #0000005c;
}

.vbMeta {
  color: white;
  background: var(--Dark);
  border-radius: 2px;
  cursor: pointer;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background: #0000006b;
}

#sysNotifHeader {
  padding: 5px;
  background: var(--body-color);
  color: white;
}

#sysNotifContent {
  padding: 5px;
}

#vbMetaHolder {
  margin: 5px;
  margin-top: 10px;
}

#vbMetaHeader {
  font-family: var(--Figtree);
  padding-bottom: 5px;
}

#vbMetaWorkerHolder {
  background: #3a4e551f;
  border-left: 4px solid #0000005c;
  overflow: hidden;
}

.vbWorker {
  padding: 5px;
}

.untouch {
  opacity: 0.7;
  pointer-events: none;
}

.vbTextHolder {
  display: flex;
  margin-bottom: 5px;
}

.vbInputLimitHolder {
  margin-left: auto;
}

.vbInputCloser {
  display: flex;
  align-items: center;
  margin-left: 5px;
  cursor: pointer;
}

.vbIcon {
  background: black;
  padding: 2px;
  border-radius: 50%;
}

.vbButtonHolder {
  margin-top: 5px;
  font-size: 80%;
}

.vbButton {
  width: max-content;
  padding: 2px;
  background: var(--Dark);
  letter-spacing: 1px;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
  cursor: pointer;
  color: white;
  background: #0000006b;
}

.vbMHHeader {
  padding: 5px;
}

.vbMHContent {
  display: flex;
  padding: 5px;
  gap: 5px;
  padding-left: 0px;
}
#getEmployedShip {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

#codeExpiryFeedbackHolder {
  text-align: center;
}

.employeeInfo {
  grid-area: 1 / 1 / 2 / 2;
  text-align: center;
}
.employerCode {
  grid-area: 2 / 1 / 3 / 2;
}
.employerCodeQrCode {
  grid-area: 1 / 2 / 3 / 3;
}

.employerCode {
  font-family: var(--Lexend);
  display: flex;
  justify-content: center;
  font-size: 120%;
  letter-spacing: 0.5ch;
}

.qACCodeHolder {
  background: var(--Dark);
  border-radius: 5px;
  padding: 5px;
  color: white;
  height: max-content;
}

#employeeContainer {
  border-left: 5px solid var(--Dark);
  margin: 5px;
  padding: 5px;
  margin-top: 10px;
  letter-spacing: 1px;
}

.employeeDetails,
.employeeActionButtons {
  padding: 5px;
}

.employeeActionButtons {
  margin-right: 5px;
  display: flex;
  justify-content: flex-end;
  padding: 0px;
  padding-top: 5px;
}

.eabButton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #0000004f;
}

#eabText {
  position: relative;
  z-index: 1;
}

.eabButton {
  width: max-content;
  padding: 5px;
  background: var(--body-color);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: 90%;
  padding-left: 7.5px;
  padding-right: 7.5px;
  position: relative;
  z-index: 0;
}

.employeeAddLinkHolder {
  background: #3a4e551f;
  border-left: 5px solid var(--Dark);
  margin-left: 5px;
  overflow: hidden;
  padding: 5px;
}

#ealhBox {
  border: 1px solid var(--Dark);
  border-radius: 5px;
  padding: 5px;
  font-size: 80%;
  background: #0000001c;
  position: relative;
  text-wrap-mode: nowrap;
}

#ealhLink {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 90%;
  display: block;
}

.copyIconHolder {
  position: absolute;
  height: 75%;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.copyIconHolderVariation {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}

.qASelectInput {
  flex: 1;
  position: relative;
}

.qASelectValue {
  outline: none;
  letter-spacing: 1px;
  user-select: none;
  cursor: pointer;
  background: var(--body-color);
  padding-left: 5px;
  color: white;
  border-radius: 0px 0px 3px 3px;
}

.qASelectValue:active {
  scale: 0.99;
}

.qASelectOptions {
  position: absolute;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  height: 0px;
}

.qASelectOptionsHolder::before {
  content: "";
  position: absolute;
  background-color: #ffffff75;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.qASelectOptionsHolder {
  background: var(--body-color);
  box-shadow: 0px 0px 4px #00000040;
  margin: 5px;
  font-size: 100%;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  padding: 5px;
  border-radius: 0px 0px 3px 3px;
}

.qASelect {
  padding: 2.5px;
  margin: 2.5px;
  border: 1px solid #00000021;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 80%;
  z-index: 1;
}

.qASelect:hover {
  border-left: 5px solid var(--body-color);
}

.qASelected {
  animation: toRight 0.3s ease-in-out;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--body-color) 50%, transparent) 0%,
    transparent 30%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

@keyframes toRight {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

#employeePositionAddButton {
  font-size: 80%;
  padding: 2.5px;
  display: flex;
  align-items: center;
}

#positionQAC {
  margin: 5px;
  margin-left: 10px;
}

.employeeDetails {
  background: #fff3;
  margin-right: 5px;
  margin-top: 5px;
  border-left: 5px solid var(--body-color);
  box-shadow: 0px 0px 5px #0000000a;
}

.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: transparent;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: spin89345 1s linear infinite;
}

.employeeCard {
  border-radius: 5px;
  width: 100%;
  position: relative;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  background: #00000021;
  padding: 5px;
  color: black;
  letter-spacing: 1px;
  cursor: pointer;
}

.employeeCard:active {
  background: #ffffff21;
}

.employeeProfilePhotoHolder {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.employeeProfilePhoto {
  height: 100%;
}

.employeePhotoHolder {
  display: grid;
  grid-template-columns: 20px 20px 20px;
  grid-template-rows: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px;
  overflow: hidden;
}

.onlineEmployee {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 0px 0px 2px #2ba84a;
}

.onlineEmployee:nth-child(1) {
  z-index: 2;
}

.onlineEmployee:nth-child(2) {
  z-index: 1;
}

#content,
#fullContent,
#realFullContent {
  position: relative;
  background: var(--body-color);
  border-radius: 10px;
  box-shadow: 0px 0px 5px #0000003b;
  overflow-y: hidden;
  scrollbar-color: white black;
  overflow-x: hidden;
  margin: 5px;
  flex-direction: column;
}

#content {
  min-width: 25%;
}

#fullContent {
  width: 40%;
  display: flex;
}

#realFullContent {
  width: 100%;
  display: flex;
}

#employeeContextMenuShip {
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  box-shadow: 0px 0px 5px #00000059;
  background: #80adbf;
  margin: 0;
  width: 100%;
  z-index: 0;
}

#employeeContextMenuContainer {
  padding: 20px;
}

#employeeDetail {
  padding: 5px;
  font-family: var(--Figtree);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background: #ffffff78;
  margin: 5px;
}

#employeePhoto {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
}

#employeeFunctions {
  font-family: var(--Jost);
  padding: 5px;
}

.employeeFunctions {
  background: #ffffff78;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 5px;
}

.contextMenu {
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 0px 1px #0000;
  cursor: pointer;
  color: white;
  text-align: center;
  position: relative;
}

.contextMenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.contextMenu::before:active {
  background: black;
}

#notificationShip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #0000001f;
  backdrop-filter: blur(2px);
  display: flex;
  z-index: 4;
}

#notificationContainer {
  margin: auto;
  display: flex;
  background: var(--body-color);
  padding: 5px;
  border-radius: 5px;
  width: 350px;
  position: relative;
}

#shader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #ffffffab;
  z-index: 0;
  border-radius: 5px;
}

#notificationIcon {
  height: 20px;
  border-radius: 50%;
  margin: 5px;
  padding: 2.5px;
  background: #dd1c1a;
}

#notificationIconContainer {
  z-index: 1;
}

#notificationContentContainer {
  font-family: var(--Jost);
  line-height: 1;
  z-index: 1;
  flex: 1;
}

#notificationTitle {
  background: var(--body-color);
  border-radius: 5px;
  padding: 5px;
  color: white;
  letter-spacing: 1px;
  font-variant-caps: petite-caps;
  margin-top: 5px;
}

#notificationContent {
  padding: 5px;
  font-size: 90%;
}

#notificationButtonHolder {
  display: flex;
  padding: 5px;
  gap: 5px;
  justify-content: end;
}

.notificationButton {
  padding: 5px;
  border-radius: 5px;
  color: var(--body-color);
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.notificationButton:hover {
  background: var(--body-color);
  color: white;
}

.notificationButton:active {
  color: var(--body-color);
  background: transparent;
}

/* From Uiverse.io by satyamchaudharydev */
#nLoader {
  display: block;
  --height-of-loader: 2px;
  --loader-color: var(--body-color);
  width: 100%;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: white;
  position: relative;
}

#nLoader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

#notificationLoaderHolder {
  margin-top: 10px;
  height: 0px;
  overflow: hidden;
}

#notificationLoader {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #0000000d;
  border-left: 2px solid var(--body-color);
  padding-top: 10px;
}

.loadingIcon {
  color: white;
}

#text_with_select_holder {
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  padding-right: 5px;
  align-items: center;
}

#switchContainer {
  display: flex;
}

/* From Uiverse.io by Galahhad */
.switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: var(--body-color);
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
}

.switch input {
  display: none;
}

.switch {
  display: inline-block;
}

.switch svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  height: auto;
}

.switch .checkmark {
  width: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch .cross {
  width: var(--icon-cross-size);
  color: var(--icon-cross-color);
}

#silk_bases {
  background: #ffffff6b;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#silk_bases #variableContainer,
#silkVariableContainer {
  display: flex;
  margin: 5px;
  background: var(--body-color);
  border-radius: 5px;
  overflow-y: scroll;
  height: 300px;
  flex-direction: column;
  overflow-x: hidden;
  padding-right: 20px;
}

#silk_bases .variableDescriptionHolder {
  overflow: hidden;
  border: none;
  padding: 5px;
  height: 1ch;
  background: #0000001c;
}

#silk_bases .variableDescriptionHolder:hover {
  height: 100%;
}

#silk_bases .variable {
  width: 100%;
  box-shadow: none;
  border-bottom: 1px solid var(--body-color);
  margin: 5px;
  padding: 5px;
  border-radius: 0px;
  padding-left: 0px;
  flex: 0;
  flex-direction: column;
  align-items: start;
  gap: 5px;
  justify-content: unset;
}

#variableEditContainer {
  padding: 5px;
  margin-left: 5px;
  background: #0000000d;
  margin-right: 5px;
  border-left: 2px solid var(--body-color);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#variableValue {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 2px;
  background: #ffffffbf;
  border: 1px solid var(--body-color);
  font-family: var(--Figtree);
  font-size: 100%;
  outline: none;
}

#silkContainer {
  padding: 5px;
}

#silk_handler_init {
  font-family: var(--Jost);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.silk_handler {
  background: #ffffff78;
  padding: 5px;
  border-radius: 5px;
}

.silk_handler_name {
  font-weight: 500;
  color: black;
}

.silk_handler_value {
  font-weight: 350;
  font-size: 80%;
}

#mainContent {
  height: 100%;
  flex: 1;
}

#mainContentHolder {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  container-type: inline-size;
}

.mc {
  display: grid;
  grid-template-columns: 0.5fr 2fr;
  grid-template-rows: 2fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.mc_child_2 {
  display: grid;
  grid-template-columns: 1fr;

  grid-column-gap: 0px;
  grid-row-gap: 0px;
  container-type: inline-size;
}

.mc_grand_child_2 {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  container-type: inline-size;
}

.mc_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  container-type: inline-size;
}

.checkTextHolder {
  display: flex;
  justify-content: space-between;
}

@container (max-width:560px) {
  .resizeMobile {
    display: none;
  }
  .mc_grand_child_2 {
    display: grid;
    grid-template-columns: 100% 100%;
  }
  .mc_2 {
    grid-template-columns: 1fr;
  }
}

@container (max-height: 700px) {
  .mc {
    grid-template-rows: 1fr 1fr;
  }
}

.mc_grand_child,
.mc_2_child,
.mc_grand_child_1,
.mc_great_grand_child_2 {
  flex: 1;
  margin: 10px;
  background: hsl(0deg 0% 100% / 5%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 2px 5px hsl(0deg 0% 0% / 10%);
}

.mc_grand_child_1,
.mc_great_grand_child_2 {
  display: flex;
  flex-direction: column;
}

#statementChild {
  min-width: 300px;
}

.mc_child {
  display: flex;
}

.mcHeader {
  font-family: var(--Figtree);
  padding: 2.5px;
  font-weight: 550;
  letter-spacing: 1px;
  color: white;
  background: #ffffff14;
  padding-left: 10px;
  padding-top: 5px;
  box-shadow: 0px 0px 5px hsl(0deg 0% 0% / 20%);
  display: flex;
}

.mcContentHolder {
  font-family: var(--Jost);
  position: relative;
  flex: 1;
}
.mcTableHolder {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
}

#mcCounterContainer {
  border-radius: 5px;
  overflow: hidden;
  background: hsl(0 100% 100% / 15%);

}

.mcCounter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px;
  font-size: 80%;
  font-weight: 350;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 1px solid var(--body-color);
  color: black;
  border-radius: 4px;
  min-height: 70px;
  background: hsla(0,100%,100%, 10%);
  border-radius: 4px;
  overflow: hidden;
}

.mcCIHImage,
.mcImage{
  height: 100%
}


.mcTextImage{
  display: flex;
  font-weight: 800;
  font-family: var(--Inconsolata);
  height: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0px 4px;
}

.mcTextStatic{
  opacity: 0.5;
  font-weight: 450;
  font-size: 100%;
}
.mcCounterImageHolder{
  flex: 1;
  background: hsla(0,100%,100%,20%);
}

.mcCounter:active {
  background: #ffffff24;
}

.mcCounterText{
  padding: 4px;
}

.mcCounterGraph {
  width: 50%;
}

.linearGraphCompleteHolder {
  display: flex;
  align-items: center;
  gap: 10px;
}

.linearGraphComplete {
  width: 100%;
  height: 2px;
  background: white;
  border-radius: 5px;
}

.mcMessage {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #00000024;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
}

.mcMessagePhotoHolder {
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
}

.mcMessageContentContainer {
  flex: 1;
}

.messageProfilePhoto {
  height: 100%;
}

.mcMessageContentHolder {
  flex: 1;
}

.mcMessageMetaDataHolder {
  display: flex;
  font-size: 80%;
  font-weight: 500;
  justify-content: space-between;
}

.mcMessageContentHolder {
  font-weight: 350;
}

.mcMessageTimeHolder {
  font-size: 80%;
  display: flex;
  align-items: center;
}

.formVariable {
  background-color: var(--body-color);
  padding: 5px !important;
  max-height: 50vh;
  overflow-y: scroll;
}

.formVariable .smstDataDisplayDescriptionHolder {
  display: none;
}

.checkMarkIconHolder {
  height: 100%;
  animation: widen 0.3s ease-in-out;
  aspect-ratio: 1/1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
}

#formShip {
  height: 100%;
  width: -webkit-fill-available;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

#formContainerExtra {
  flex: 1;
  background: #00000029;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #0000003b;
  padding: 5px;
}

#formExtraDataHolder {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.formMetaDataHolder {
  font-family: var(--Figtree);
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.formVariablesPreviewHolder {
  height: 100%;
  background: var(--body-color);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  position: relative;
}

.formVariableTableHolder {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
}

.fvRowHeader {
  display: flex;
  justify-content: space-between;
  font-family: var(--Jost);
  background: var(--body-color);
  padding: 5px;
  box-shadow: 0px 0px 5px #0000005e;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fvHeaderText,
.rowData {
  flex: 1;
  text-align: center;
}

.rowData {
  text-wrap-mode: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fvRowBody {
  height: 100%;
}

#contentCMHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--body-color);
  font-size: 80%;
  font-family: var(--Figtree);
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0px 0px 3px black;
  padding-left: 10px;
  display: flex;
}

#contentCountHolder {
  background: #0000003d;
  padding: 2.5px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
  display: flex;
  align-items: center;
}

.formHeaderContainer {
  display: flex;
  align-items: center;
  background: #00000017;
  padding-left: 5px;
  color: white;
  font-size: 20px;
}

#contentCountHolder {
  background: #0000003d;
  padding: 2.5px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
}

.thread {
  display: flex;
  align-items: unset !important;
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.threadEndPointName {
  padding-left: 5px;
  padding-right: 5px;
  background: #0000003d;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.threadEndPointValue {
  font-weight: 500;
}

.thread .smstDataDisplayNameHolder {
  align-items: unset;
}

.smstDataDisplayValueHolder {
  background: #0000003d;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  align-items: center;
  color: white;
}

#threadContainer {
  padding: 5px;
  border-radius: 5px;
  margin: 5px;
}

.fMDAction {
  width: max-content;
  padding: 4px;
  border: 1px solid hsl(0 0% 0%/ 20%);
  border-radius: 16px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 4px;
  background: var(--body-color);
  color: #202020;
  font-weight: 700;
  cursor: pointer;
}

.fvRowContainer {
  position: relative;
}

#recordContainer {
  height: 100%;
  border-radius: 5px;
  font-family: var(--Figtree);
}

.table-wrapper {
  overflow-y: scroll;
  overflow-x: hidden;
}

.financial-wrapper {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.displayTable tbody {
  background: white;
}

.fvTable th,
.fvTable td {
  padding: 5px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 1px;
}

.fvTable td {
  font-family: var(--Figtree);
}

.mcTable {
  background: white;
}

.displayTable thead tr {
  font-weight: 500;
  font-family: var(--Figtree);
  background: var(--body-color);
  position: sticky;
  top: 0;
  box-shadow: 0px 0px 8px hsl(0 0% 0% / 30%);
  z-index: 1;
}

.displayTable thead th {
  padding: 4px;
}

.displayTable tbody tr {
  font-size: 80%;
  font-family: var(--Jost);
  text-align: center;
  font-weight: 350;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
}

.displayTable tbody tr td {
  padding: 4px;
}

.displayTable td:first-child {
  font-family: var(--Inconsolata);
  font-weight: 800;
  letter-spacing: 1px;
  text-align: left;
}

.txnCodes{
  font-size: 80%;
}

.fvTable thead th {
  position: sticky;
  top: 0;
  background: hsla(0, 0%, 100%, 0.722);
  z-index: 2;
  border-bottom: 1px solid #e5e7eb;
  font-family: var(--Jost);
  letter-spacing: 1px;
  font-weight: 550;
  font-size: 100%;
  padding: 2px;
  width: 100%;
}

.tableTime {
  font-size: 80%;
  font-family: var(--Roboto);
}

.fvTable tbody tr:hover {
  background: hsla(0, 100%, 100%, 0.15) !important;
  cursor: pointer;
}

.fvTable tbody tr:active {
  background: hsla(0, 100%, 100%, 0.05);
}

.fvTable tbody tr:nth-child(even) {
  background: hsla(0, 100%, 100%, 0.1);
}

th[data-sortable] {
  cursor: pointer;
}

th.sorted-asc::after {
  content: " ▲";
}

th.sorted-desc::after {
  content: " ▼";
}

.indicatorCell {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: end;
}

.iCell {
  display: flex;
}

.fvTable th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 10ch;
  background: white;
}
.fvTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 10ch;
  background: var(--body-color);
}

#financialTable thead th {
  background: hsl(0, 0%, 100%, 50%);
  border-bottom: none;
}

#financialTable th:first-child {
  position: sticky;
  width: 100%;
  text-align: left;
  padding-left: 5px;
}
#financialTable td:first-child {
  position: relative;
  width: 100%;
  background: transparent;
  text-align: left;
}

#financialTable th:nth-child(2) {
  text-align: right;
}
#financialTable td:nth-child(2) {
  text-align: right;
}

#financialTable td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.fvTable tfoot tr {
  position: sticky;
  bottom: 0;
  background: white;
  font-family: var(--Figtree);
}

#stockTransactionTable td:nth-child(3) {
  text-align: right;
}

.stockAmount {
  font-family: var(--Inconsolata);
  font-weight: 500;
  font-size: 120%;
}

.stockTime {
  font-size: 80%;
}

#chartContainer {
  background: white;
  height: 20vh;
  border-radius: 5px;
  position: relative;
  padding: 5px;
  display: none;
}

#chartContainer::before {
  content: "";
  height: 100%;
  width: 100%;
  background: white;
}

#recordDataHolderContainer {
  overflow: hidden;
}

#recordDataTraversalHolder {
  position: absolute;
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: calc(100% + 100px);
  left: 50%;
  transform: translateX(-50%);
}

#forwardTraversal,
#backwardTraversal {
  width: 50px;
  display: flex;
  cursor: pointer;
}

#recordDataID {
  padding: 5px;
  font-size: 80%;
  font-family: var(--Jost);
  font-weight: 500;
}

#actionHolder {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.productAttribute {
  display: flex;
  gap: 10px;
  background: var(--body-color);
}

#productAttributesContainerAdd {
  text-align: center;
  font-size: 80%;
  width: max-content;
  padding: 2.5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  margin: 5px;
}

.attributeValue,
.attributeKey {
  flex: 1;
}

.productAttributeHolder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--body-color);
  padding: 5px;
}

.productAttributeHeader {
  display: flex;
}

.productDisplayAttribute {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #00000024;
}

.attributeNameHolder,
.attributeKeyHolder {
  display: flex;
  align-items: end;
}

.attributeContainer {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  font-size: 80%;
}

.smstDDNHCode {
  padding: 2.5px;
  font-size: 80%;
  font-family: var(--Figtree);
  font-weight: 300;
}

.space {
  justify-content: space-between;
}

.product_name {
  padding: 2.5px;
}

#motherContainer {
  flex: 1;
  margin: 5px;
}

#productData {
  width: 100%;
  background: var(--body-color);
  font-family: var(--Figtree);
  border-radius: 5px;
}

#productDataHeader {
  display: flex;
  justify-content: space-between;
}

#productAttrData {
  padding: 5px;
  font-size: 80%;
  font-family: var(--Jost);
  color: white;
  background: #0000001c;
}

#productDataText {
  font-size: 120%;
  font-weight: 1000;
  letter-spacing: 2px;
  padding: 5px;
}

#sku_data_code {
  display: flex;
  align-items: center;
  font-family: var(--Jost);
  font-size: 80%;
  letter-spacing: 1px;
  color: white;
}

#sdc {
  border-radius: 3px;
  box-shadow: 0px 0px 2px black;
  margin: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

#productMotherContainer {
  display: none;
  opacity: 0;
  flex-direction: column;
  gap: 10px;
}

#productChartContainer {
  border-radius: 10px;
  padding: 5px;
  background: var(--body-color);
}

#productActionHolder {
  background: var(--body-color);
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  font-family: var(--Figtree);
  gap: 5px;
  font-weight: 700;
}

.paButton {
  flex: 1;
  padding: 5px;
  text-align: center;
  margin: 5px;
  background: #00000017;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.paButton:hover {
  background: #ffffff17;
  color: black;
}

.paButton:active {
  background: #00000017;
  color: white;
}

#stockContainer {
  width: 100%;
  background: var(--body-color);
  display: flex;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 10px;
  position: absolute;
}

#stockShip {
  display: flex;
  position: relative;
}

#stock_qr_code {
  width: 100%;
}

#miniSearchInputHolder {
  display: flex;
  margin-left: 5px;
}

#miniSearchInput {
  font-size: 80%;
  font-family: var(--Figtree);
  font-weight: 550;
  letter-spacing: 1px;
  background: #ffffff4f;
  border: none;
  padding: 5px;
  outline: none;
}

.formNavigatorHolder {
  display: flex;
  justify-content: space-between;
  font-family: var(--Jost);
  letter-spacing: 1px;
  font-weight: 350;
  background: #ffffff70;
  border-radius: 5px;
  overflow: clip;
}

.formNavigator {
  background: #ffffff78;
  width: 30px;
  display: flex;
  box-shadow: 0px 0px 5px black;
  height: 25px;
  justify-content: center;
  cursor: pointer;
}

.tippy-box {
  font-family: var(--Jost);
}

.radioInputHolder {
  display: flex;
  justify-content: space-between;
}

.fastActionHolder {
  position: relative;
}

#formShareDatesHolder {
  position: relative;
  width: 80px;
  overflow: hidden;
  background: var(--body-color);
  box-shadow: 0px 2px 0px 0px white;
  cursor: pointer;
}

.hideElements {
  overflow: visible !important;
}

#formShareDates {
  display: flex;
  flex-direction: column;
  position: absolute;
  text-wrap-mode: nowrap;
  font-size: 80%;
  z-index: 1;
  box-shadow: 0px 0px 0px 1px white;
  background: var(--body-color);
  max-height: 50vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

.formShareDate {
  display: flex;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
}

#showButton {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  right: 5px;
}

.formShareDate:hover {
  background: hsla(0, 0%, 100%, 30%);
}

.checkBoxContainer {
  margin: 5px;
  display: flex;
  background: hsl(0 0% 0% / 10%);
  border-radius: 5px;
  position: relative;
}

/* From Uiverse.io by Shoh2008 */
.checkbox-wrapper-44 {
  padding: 5px;
}
.checkbox-wrapper-44 input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper-44 *,
.checkbox-wrapper-44 *::before,
.checkbox-wrapper-44 *::after {
  box-sizing: border-box;
}

.checkbox-wrapper-44 .toggleButton {
  cursor: pointer;
  display: block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.14s ease;
}

.checkbox-wrapper-44 .toggleButton:active {
  transform: rotateX(30deg);
}

.checkbox-wrapper-44 .toggleButton input + div {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: relative;
  width: 25px;
  height: 25px;
}

.checkbox-wrapper-44 .toggleButton input + div svg {
  fill: none;
  stroke-width: 3.6;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  bottom: -3px;
  z-index: 1;
  stroke-dashoffset: 124.6;
  stroke-dasharray: 0 162.6 133 29.6;
  transition: all 0.4s ease 0s;
}

.checkbox-wrapper-44 .toggleButton input + div:before,
.checkbox-wrapper-44 .toggleButton input + div:after {
  content: "";
  width: 3px;
  height: 16px;
  background: white;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 5px;
}

.checkbox-wrapper-44 .toggleButton input + div:before {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  -webkit-animation: bounceInBefore-44 0.3s linear forwards 0.3s;
  animation: bounceInBefore-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper-44 .toggleButton input + div:after {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  -webkit-animation: bounceInAfter-44 0.3s linear forwards 0.3s;
  animation: bounceInAfter-44 0.3s linear forwards 0.3s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div svg {
  stroke-dashoffset: 162.6;
  stroke-dasharray: 0 162.6 28 134.6;
  transition: all 0.4s ease 0.2s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div:before {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  -webkit-animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
  animation: bounceInBeforeDont-44 0.3s linear forwards 0s;
}

.checkbox-wrapper-44 .toggleButton input:checked + div:after {
  opacity: 0;
  transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  -webkit-animation: bounceInAfterDont-44 0.3s linear forwards 0s;
  animation: bounceInAfterDont-44 0.3s linear forwards 0s;
}

#order_product_container {
  background: hsl(0 0% 0% / 50%);
  border-radius: 10px;
  text-align: center;
  border: 2px dashed hsl(0 100% 100%/50%);
  cursor: pointer;
}

#order_product_container:hover {
  background: hsl(0 0% 0% / 30%);
}

#order_product_container:active {
  background: hsl(0 0% 0% / 70%);
}

.addOrderProduct {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100%;
}

.addIcon {
  display: flex;
  background: hsl(0 100% 100% / 30%);
  border-radius: 50%;
  padding: 2.5px;
}

#motherQuickAction {
  z-index: 3 !important;
  position: relative;
}

@-webkit-keyframes bounceInBefore-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes bounceInBefore-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }
}

@-webkit-keyframes bounceInAfter-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes bounceInAfter-44 {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
  }

  80% {
    opacity: 1;
    transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }
}

@-webkit-keyframes bounceInBeforeDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes bounceInBeforeDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
  }
}

@-webkit-keyframes bounceInAfterDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes bounceInAfterDont-44 {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
  }
}

#orderHolderContainer,
#saleHolderContainer {
  width: 60%;
  display: flex;
}

#orderCartContainer,
#saleCartContainer {
  flex: 1;
  background: var(--body-color);
  position: relative;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
}

#orderContent,
#saleContent {
  flex: 1;
}

#orderCart,
#saleCart {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#orderFinancial,
#saleFinancial {
  padding: 5px;
  margin: 5px 10px 10px 10px;
  background: hsla(0, 100%, 98.8%, 0.3);
  border-radius: 5px;
  font-family: var(--Jost);
  padding-left: 10px;
  padding-right: 10px;
}

#orderHeader,
#saleHeader {
  padding: 5px;
  font-family: var(--Jost);
  font-weight: 700;
  font-size: 120%;
  letter-spacing: 1px;
  background: hsla(0, 100%, 98.8%, 0.3);
  margin: 10px 10px 0px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px hsl(0, 0%, 0%, 20%);
  display: flex;
}

#orderContent,
#saleContent {
  flex: 1;
  margin: 10px;
  box-shadow: inset 0px 6px 10px hsl(0 0% 0%/25%);
  border-radius: 5px;
  background: hsla(0, 0%, 0%, 0.2);
  position: relative;
}

.financial {
  display: flex;
  justify-content: space-between;
}

.productOrder,
.productSale {
  margin: 5px;
  padding: 5px;
  color: white;
  font-family: var(--Figtree);
}

.outOfStock {
  opacity: 0.5;
  pointer-events: none;
}

.productUnit,
.productSKUCode {
  font-size: 60%;
  opacity: 0.5;
}

.productPrice {
  font-weight: 800;
  font-family: var(--Inconsolata);
}

.pD {
  display: flex;
}

.productCount {
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  background: hsl(0 100% 100%/ 10%);
  margin-right: 4px;
  border-radius: 5px;
}

.qAFinanceCurrencyHolder {
  position: absolute;
  right: 0px;
  background: hsl(0 0% 0% / 25%);
  height: 100%;
}

.qACurrency {
  height: 100%;
}

.otherCurrencies {
  position: absolute;
  height: 0;
  overflow-y: scroll;
  right: 0;
  border-radius: 5px;
  -webkit-mask-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 20%,
    rgb(255, 255, 255) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
  mask-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 20%,
    rgb(255, 255, 255) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  scroll-behavior: smooth;
  min-width: 220px;
}

.otherCurrenciesInverse {
  bottom: 25px;
}

.currencies {
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-top: 75px;
  margin-bottom: 40px;
}

.activeCurrency,
.currency {
  display: flex;
  font-size: 80%;
  font-family: var(--Dark);
  height: 100%;
  align-items: center;
  padding-left: 2.5px;
  gap: 5px;
  padding-right: 2.5px;
  font-weight: 500;
  color: white;
}

.activeCurrency {
  cursor: pointer;
}

.activeCurrency:active {
  background: hsla(0, 0%, 100%, 0.5);
}

.currency {
  justify-content: end;
  text-wrap-mode: nowrap;
  gap: 10px;
  width: max-content;
  background: hsl(0 0% 0% / 65%);
  margin: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.currencyFlagEmoji {
  font-size: 20px;
}

.currencyCode {
  font-size: 80%;
}

.miniSearchVariant {
  position: sticky;
  top: 70px;
  margin-right: 5px;
  width: 200px;
  right: 00;
  margin-left: auto !important;
}

.miniSearchInputVariant {
  width: 100%;
  background: var(--body-color) !important;
  border: 1px solid hsl(0 0% 0% / 30%) !important;
  padding: 5px !important;
}

.showCurrency {
  height: 40vh !important;
}

.qAMathInput {
  position: relative;
}

#unitCodePreview {
  position: absolute;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  background: hsl(0 0% 0%/ 30%);
  color: white;
  top: 0;
}

#totalSum {
  font-family: var(--Inconsolata);
  font-weight: 800;
  font-size: 120%;
}

.productName {
  font-size: 80%;
  font-weight: 800;
}

#afContainer {
  position: relative;
}

#afBox {
  position: absolute;
  bottom: 0;
  padding: 12px;
  background: var(--body-color);
  border-radius: 16px;
  border: 1px solid hsl(0 100% 100%/10%);
  margin-bottom: 4px;
}
.shopFinancial {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
}

.sfResult {
  font-weight: 500;
}

#faddButton,
#orderButton,
#saleButton {
  width: max-content;
  padding: 4px;
  border: 1px solid hsl(0 0% 0%/ 20%);
  border-radius: 16px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 4px;
  background: var(--body-color);
  color: #202020;
  font-weight: 500;
  cursor: pointer;
  font-size: 80%;
  letter-spacing: 1px;
}

.orderHeaderButton,
.saleHeaderButton {
  font-size: 80%;
  font-weight: 500;
  padding: 4px;
  margin-left: auto;
}

#fAmount {
  font-family: var(--Inconsolata);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
}

.saleProduct {
  background: hsl(0 0% 0% / 25%);
  border-radius: 4px;
  min-width: max-content;
  border: 1px solid hsl(0 0% 0% / 5%);
  overflow: hidden;
  cursor: pointer;
}

.spContentKey {
  color: hsl(0 100% 100% / 80%);
}
.spCounter {
  font-weight: 500;
}

.overflowShader {
  height: 48px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0.34) 100%
  );
  z-index: 3;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.saleProductHeader {
  padding: 4px;
  padding-left: 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.saleProductContent {
  padding: 4px 6px;
  font-size: 80%;
  background: var(--body-color);
  font-family: var(--Jost);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.spContent {
  display: flex;
}

.separator {
  flex: 1;
  border-bottom: 2px dotted hsl(0 0% 0%/50%);
  margin: 0px 5px;
  align-self: center;
  min-width: 30px;
}

.mcChartContainer {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chartHolder {
  position: absolute;
  height: 90%;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 3px 2px 4px hsl(0 0% 0% / 10%);
  padding: 10px;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  justify-content: space-around;
}

.resizeHolder {
  height: 75%;
}

#finance_mc,
#stock_mc {
  display: flex;
  flex-direction: column;
}

.chartExplainer {
  margin-top: auto;
  font-family: var(--Jost);
  font-size: 80%;
  padding: 4px 8px;
  position: relative;
  z-index: 2;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 0px;
}

canvas {
  border-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.introExtraButton {
  padding: 8px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.explainerMother {
  display: flex;
  gap: 10px;
}

.explainer {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
  padding: 0px 4px;
  font-size: 80%;
}

.explainerContent {
  font-weight: 800;
  font-size: 140%;
  font-family: var(--Figtree);
}

.explainerSupp {
  font-weight: 400;
}

.saleCheckoutHolder {
  position: absolute;
  bottom: 0;
  width: 100%;
  box-shadow: 0px 0px 4px hsl(0 0% 0% / 50%);
  height: 100%;
  left: 0;
  backdrop-filter: blur(6px) brightness(0.7);
  display: flex;
  z-index: 1;
  display: flex;
  flex-direction: row;
}

.saleCheckout {
  padding: 4px;
  background: var(--body-color);
  margin: 4px;
  border-radius: 4px;
  box-shadow: 0px 1px 3px hsl(0 0% 0% / 50%);
}

.checkOutButton {
  padding: 4px;
  margin: 4px;
  background: hsl(0 100% 100%/20%);
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0px 0px 3px hsl(0 0% 0% / 50%);
  cursor: pointer;
}

.checkOutPlatform {
  padding: 4px 8px;
}

.checkOutContent {
  display: flex;
  gap: 10px;
}

.checkOutInput {
  box-sizing: border-box;
  box-shadow: 0px 0px 3px hsl(0 0% 0% / 50%);
  border-radius: 4px;
}

.coIHeader {
  padding: 4px;
  background: hsl(0 0% 0% / 25%);
  font-family: var(--Jost);
}

.coIInput {
  display: flex;
  gap: 10px;
}

.colPad {
  padding: 4px;
}

.valueChanger {
  padding-left: 8px;
  padding-right: 8px;
  background: hsl(0 0% 0%/50%);
  border-radius: 4px;
  color: var(--body-color);
}

.valueChanger,
.valueIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkOutHeader {
  margin: 4px 0px;
  font-family: var(--Figtree);
  font-weight: 700;
}

.transactionHolder {
  flex: 1;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
  overflow: scroll;
  padding-right: 8px;
  font-size: 80%;
  max-height: 15rem;
}

.transaction {
  display: grid;
  font-family: var(--Jost);
  gap: 5px;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background: hsl(0 0% 0% / 10%);
  margin: 4px 0px;
  padding: 4px;
  border: 1px solid hsl(0 100% 100% / 20%);
  border-radius: 4px;
  box-sizing: border-box;
}

.transactionTable {
  box-shadow: 0px 0px 3px hsl(0 0% 0% / 50%);
  border-radius: 5px;
  overflow: hidden;
  background: var(--body-color);
  height: 100%;
}

.mcNavigatorHeader {
  display: flex;
  margin-left: auto;
  gap: 10px;
}

.mcNavigatorIcon {
  background: hsla(0, 0%, 100%, 0.5);
  border-radius: 50%;
  cursor: pointer;
}

.toLeft {
  transform: translateX(-50%);
}

.mover {
  grid-template-rows: max-content 1fr;
}

.crane {
  opacity: 0;
}

.movers {
  background: hsl(0 0% 0% / 40%);
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: auto;
  margin-right: 10px;
  font-weight: 400;
  font-size: 0.895rem;
  font-family: var(--Jost);
}

@media (max-width: 750px) {
  #mcCounterContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .mc_child {
    display: flex !important;
  }
  #loader,
  #loaderIcon {
    height: 20px;
  }
  #notificationUI {
    flex-direction: column;
    align-items: end;
  }

  #profileDynamicUIHolder,
  #notificationDynamicUIHolder,
  #notificationMessageDynamicUIHolder {
    margin: 5px;
  }
  #sideBar {
    width: var(--sidebar-size);
  }

  .active {
    width: 45px !important;
  }

  .sidebar {
  }

  header {
    height: 54px;
  }
  #headerContainer {
    gap: 5px;
  }
  #smstLogo {
    height: 30px;
  }

  #SmStShopTextHolder {
    font-size: 90%;
  }

  #searchContainer {
    margin-left: 5px;
  }

  #searchInput {
    font-size: calc(var(--font-size) * 0.8);
    width: 20vw;
  }

  .content {
    border-radius: 5px;
    color: white;
  }
  #miniSidebar {
    display: none;
  }

  .motherModule {
    border-radius: 5px;
  }
  #motherModuleContainer,
  #auntModuleContainer {
    grid-template-rows: max-content 1fr;
  }

  #content,
  #fullContent {
    width: 100%;
    margin-left: unset;
    margin-right: unset;
    display: flex;
    flex: 1;
  }

  #fullContent {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    z-index: 1;
    height: 0;
    left: 0;
    margin: 0px;
  }

  .showUp {
    height: 50% !important;
  }

  #orderHolderContainer,
  #saleHolderContainer {
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: 10px;
    right: 10px;
    box-shadow: 0px 0px 5px hsl(0 0% 0% / 50%);
    border-radius: 5px;
    overflow: hidden;
    min-width: 15rem;
  }

  #orderProductsContainer,
  #saleProductsContainer {
    padding-bottom: 28rem;
    display: flex;
  }

  #variableContainerExtra {
    width: 80%;
  }
  .employeeProfilePhotoHolder {
    height: 25px;
    width: 25px;
  }
  #notificationMessageDynamicUIHolder {
    left: 100%;
  }
  .smstDataDisplay {
    align-items: start;
    gap: 0px;
    border-left: 2px solid #ffffff8f;
    flex: unset;
  }

  .variable {
    flex-direction: column;
  }
  .smstDataDisplayDescriptionHolder {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5px;
    padding-left: 5px;
  }

  .form .smstDataDisplayDescriptionHolder {
    display: none;
  }
  #silk_bases .smstDataDisplayDescriptionHolder {
    height: 100%;
  }
  .employeeFunctions {
    font-size: 80%;
  }
  .searchOutputHolder {
    width: 200%;
  }
  .noMbbile {
    display: none;
  }

  .mc {
    grid-template-rows: max-content 1fr;
    grid-template-columns: 1fr;
  }

  .mc_child_2 {
    grid-template-rows: 1fr 1fr;
  }
  #mainHeader {
    align-items: center;
    font-size: 100%;
  }
  .mcHeader {
    font-size: 100%;
  }
  .mc_grand_child,
  .mc_2_child,
  .mc_grand_child_1,
  .mc_great_grand_child_2 {
    margin: 5px;
  }
  .mcMessagePhotoHolder {
    display: none;
  }
  .mcMessageContentContainer {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
  }
  .mcMessage {
    align-items: unset;
  }
  .mcMessageContentHolder {
    text-wrap-mode: nowrap;
    position: relative;
    overflow: hidden;
  }
  .mcMessageContent {
    position: absolute;
    font-size: 80%;
  }
  .mcMessageTimeHolder {
    font-size: 80%;
    display: flex;
    align-items: end;
  }

  #formShip {
    flex: 1.5;
    height: auto;
  }
  .formMetaDataHolder {
    font-size: 16px;
  }
  .fvRowHeader {
    font-size: 80%;
  }
  #content::before {
    border-top-left-radius: 5px;
  }

  #employeeContextMenuShip {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 0px;
  }
  #dateHolder {
    display: none;
  }
  .fvRow {
    font-size: 80%;
  }

  #employeeContextMenuShip {
    width: max-conent;
  }
  #employeeContextMenuContainer {
    padding: 0px;
  }
  #moduleHolder {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 998;
    display: flex;
    pointer-events: none;
    overflow: hidden;
  }
  #variableShip {
    display: flex;
    backdrop-filter: blur(3px) brightness(0.8);
  }
  #variableContainerExtra {
    margin: auto;
    background: white;
  }
  .smstDataDisplayValueHolder,
  .threadEndPointName {
    font-size: 80%;
  }
  #moduleHolder {
    flex: unset;
  }
  .thread {
    margin-top: 5px;
    margin-bottom: 5px;
  }

}

@media (max-width: 900px) {
#silk_handler_init {
    grid-template-columns: 1fr 1fr;
  }
  #aunt {
    flex-direction: column;
  }
  #content {
    flex: 1;
  }
  .fvTable thead th {
    font-size: 80%;
  }

  .fvTable td {
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 80%;
  }
  .fvTable tfoot th {
    font-size: 80%;
    padding: 2.5px;
  }
  #financialTable td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #orderAmountHeader {
    width: 10ch;
  }
  .DataHolder {
    gap: 5px;
  }
  .fMDAction {
    font-size: 80%;
  }
  #quickActionContainer {
    width: 330px;
  }
  #productData {
    width: 100%;
  }
  #productMotherContainer {
    position: sticky;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    left: 0;
    padding: 0px;
    background: transparent;
    backdrop-filter: blur(2px) brightness(0.8);
    display: flex;

    display: none;
    opacity: 0;
    border-radius: 10px;
    justify-content: flex-end;
  }
  #contentContainer {
    border: none;
    display: flex;
    box-sizing: border-box;
    margin: 0px;

  }
  #productContainer{
    grid-template-columns: 1fr!important;
  }
  #productsSaleContainer {
    position: absolute;
  }
  #productDataContainer,
  #productActionHolder,
  #stockShip {
    margin-left: 10px;
    margin-right: 10px;
  }
  #stockDhip {
    position: relative;
    display: flex;
  }
  #stock_qr_code {
    width: 70%;
  }
  #miniSearchInput {
    font-size: 80%;
    font-size: 450;
    padding: 2.5px;
  }
  #stockContainer {
    position: relative;
  }

  #unitContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .qACode {
    flex-direction: column;
    align-items: flex-start;
  }
  #realFullContent {
    height: 100%;
  }

  .saleCheckoutHolder {
    flex-direction: column;
  }
  #aunt,
  #father,
  #uncle {
    flex-direction: column;
  }
  .multiCharts,
  .multiExplainer {
    width: 200%;
  }
  
  #formContainer {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    position: relative;
    width: max-content;
  }
}

@media (max-height: 800px) {
  #chartContainer {
    display: none;
  }
}

@media (max-width: 1290px) {
  #content {
    min-width: 40%;
  }
}

@media (max-width: 1000px) {
  .mc {
    grid-template-columns: 1fr;
  }
  .mc_child {
    display: none;
  }
  #productContainer {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-height: 850px) {
  .qASelectParent {
    bottom: 0;
  }
  .motherQuickAction {
    z-index: 3;
  }
}

@media (max-height: 720px) and (max-width: 900px) {
  .mc_child {
    display: none !important;
  }
  .mc {
    grid-template-rows: 1fr;
  }
}