@charset "UTF-8";.main-login-cont {
  height: 100%;
  width: 100%;
  background-image: url("/assets/Login_background_optimized-Dw47ROh0.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-form {
  width: 40vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1024px) {
  .login-form {
    width: 100%;
  }
}

.login-form .top-form-login {
  height: 85%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}

.top-form-login h1 {
  font-weight: 800;
  /* font-size: 2.5vw; */
  font-size: 2.2rem;
  color: var(--white);
}

.top-form-login h3 {
  font-weight: 400;
  /* font-size: 1.7vw; */
  font-size: 1.5rem;
  color: var(--white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
  margin-bottom: 1rem;
}

.top-form-login h3::after {
  content: "";
  width: 65%;
  height: 0.2rem;
  border-radius: 0.5rem;
  background-color: var(--white);
  position: absolute;
  bottom: 0.1rem;
}

.top-form-login button {
  background-color: var(--white);
  cursor: pointer;
  width: 12rem;
  height: 2.3rem;
  border-radius: var(--button-radius);
  border: none;
  /* outline: none; */
  color: var(--dark-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: calc(var(--p-size) + 0.1rem);
}

.top-form-login button img {
  height: 1rem;
}

.bottom-form-login {
  width: 90%;
}

.bottom-form-login .login-terms {
  color: var(--white);
  font-size: 0.7vw;
}.dashboard {
  width: 100%;
  flex-direction: column;
  padding: 0; /* Removemos el padding aquí ya que está en main-content-wrapper */
  overflow: visible; /* Sin restricciones de overflow aquí */
  display: flex;
  height: 100%;
  flex-direction: column;
}

.dashboard-container {
  display: flex;
  width: 100%;
  height: 90%;

  justify-content: space-between;
  flex-direction: column;
  overflow: visible; /* Sin restricciones de overflow */
  position: relative; /* Necesario para que el PanelFilter se posicione correctamente */
}

.dashboard-content-wrapper {
  display: flex;
  flex: 1;
  background-color: var(--white-100);
  position: relative;
  height: 90%;
  overflow: visible; /* Sin restricciones, el scroll se maneja a nivel superior */
  .MuiBox-root {
    position: relative;
    overflow: auto;
    height: 100%;
    overflow-x: hidden;
    margin-top: 0;
  }
}

.dashboard-container.with-filter-panel .box-style {
  transition: margin-right 0.3s ease-in-out;
  margin-right: 19rem; /* Ancho del panel de filtros actualizado */
  padding-right: 0.2rem;
}

/* Mover el botón flotante cuando el panel esté abierto */
.dashboard-container.with-filter-panel .gridstack-btns-container {
  transition: right 0.1s ease-in-out;
  right: calc(1.5rem + 19rem); /* Posición original + ancho del panel */
}

/* .dashboard {
 height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; 
} */

.dashboard .dashboard-navbar {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard .dashboard-navbar > h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  max-width: 30%;
  font-size: var(--title-size);
  color: var(--black-mid);
  font-weight: 700;
}

.dashboard-navbar > h1 > svg {
  height: 1.6vw;
  /* box-sizing: content-box; */
  padding: 0.1rem;
}

.dashboard-navbar > h1 > svg > g > path {
  fill: var(--black-mid);
}

.dashboard-navbar > span {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) - 0.2rem);
  border: var(--border);
  border-radius: var(--radius);
  height: 5.5vh;
  width: auto;
  max-width: 50%;
  padding: var(--padding);
  cursor: pointer;
  transition: var(--transition);
}

.dashboard-navbar > span:hover {
  background-color: var(--black-mid);
  border: 2px solid var(--black-mid);
}

.dashboard-navbar > span:hover p {
  color: var(--white);
}

.dashboard-navbar > span:hover svg > path {
  fill: var(--white);
}

.dashboard-navbar > span > p {
  font-size: var(--p-size);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 95%;
  color: var(--black-mid);
}

.dashboard-navbar > span > svg {
  height: 1.3vw;
}

.dashboard-navbar > span > svg > g > path {
  fill: var(--black-mid);
}

.dashboard-chartsContainer {
  width: 100%;
  height: calc(85%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.25vw;
}

.dashboard-chartsContainer > div {
  height: 100%;
  width: 100%;
  border-radius: 0.36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 0.1rem;
  padding: var(--padding);
}

.dashboard-chartsContainer > div > p {
  width: 95%;
  font-size: calc(var(--p-size));
  font-weight: 600;
  color: var(--black-mid);
  /* height: 15%; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: capitalize;
}

.dashboard-chartsContainer > div > p > span {
  height: 2vw;
  width: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--button-radius);
}

.dashboard-chartsContainer > div > p > span > svg {
  height: 1vw;
  width: 1vw;
}

.dashboard-chartsContainer > div > p > span:hover {
  background-color: var(--black-mid);
}

.dashboard-chartsContainer > div > p > span:hover > svg > g > ellipse {
  fill: var(--white);
}

.dashboard-chartsContainer > div > section {
  width: 95%;
  height: 85%;
}

.dashboard-chartsContainer-stepCounter {
  grid-column: span 2;
}

.dashboard-chartsContainer-selectsCont {
  width: 95%;
  /* height: 10%; */
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dashboard-chartsContainer-selectsCont > div {
  background-color: var(--white);
  border-radius: var(--button-radius);
  padding: 0 0.5rem;
  cursor: pointer;
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: var(--transition);
}

.dashboard-chartsContainer-selectsCont > div > svg {
  position: absolute;
  right: 0.5vw;
  height: 0.5vw;
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
}

.dashboard-chartsContainer-selectsCont > div > svg > path {
  stroke: var(--white);
}

.dashboard-chartsContainer-selectsCont > div > p {
  font-size: 0.5rem;
  color: var(--black-mid);
  font-weight: 600;
}

.dashboard-chartsContainer-selectsCont > div:hover {
  background-color: var(--black-mid);
  width: 35%;
}

.dashboard-chartsContainer-selectsCont > div:hover p {
  color: var(--white);
}

.dashboard-chartsContainer-selectsCont > div:hover > svg {
  visibility: visible;
  opacity: 1;
}

#dashboard-chartsContainer-gaugeChart-label {
  color: var(--black-mid);
  font-size: 0.8vw;
  font-weight: 400;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dashboard-chartsContainer-gaugeChart-label-minMax {
  width: 50%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40%;
}

#dashboard-chartsContainer-gaugeChart-label-minMax > p {
  color: var(--black-mid);
  font-size: var(--input-font-size);
  font-weight: 600;
}

.dashboard-chartsContainer-componentsCont {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  overflow: hidden auto;
  width: calc(100% - 0.01rem);
}

.dashboard-chartsContainer-componentsCont > section {
  height: 2.5vw;
  width: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem;
}

.dashboard-chartsContainer-componentsCont > section > img {
  height: 2vw;
  width: 2vw;
}

.dashboard-chartsContainer-componentsCont > section > div {
  width: 90%;
}

.dashboard-chartsContainer-componentsCont > section > div > h3 {
  font-size: 0.75vw;
  font-weight: 400;
  max-width: 95%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dashboard-chartsContainer-componentsCont > section > div > p {
  font-size: 0.65vw;
  font-weight: 400;
  color: var(--warn);
}

.dashboard-chartsContainer-componentsCont > section > div > p > span {
  font-size: 0.65vw;
  font-weight: 800;
  color: var(--warn);
}

#dashboard-chartsContainer-stockOut {
  gap: 0.5rem;
}

.dashboard-chartsContainer-stockOut > button {
  width: 90%;
  height: var(--input-height);
  border: 2px solid #808080;
  background-color: transparent;
  font-size: calc(var(--p-size) + 0.1rem);
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
  color: var(--black-mid);
}

.dashboard-chartsContainer-stockOut > button:hover {
  background-color: var(--black-mid);
  color: var(--white);
  border: 2px solid var(--black-mid);
}

#dashboard-chartsContainer-stepCounter {
  gap: 0.5rem;
}

#dashboard-chartsContainer-stepCounter > #labels-stepCounter-indicators {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

#labels-stepCounter-indicators > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8vw;
  width: 25%;
  color: var(--black-mid);
  font-weight: 400;
}

#labels-stepCounter-indicators > span > div {
  height: 0.7vw;
  width: 0.7vw;
  border-radius: 0.1rem;
  background: transparent linear-gradient(181deg, #ff6554 0%, #008da4 100%);
}

#labels-stepCounter-indicators > span > span {
  height: 0.1vw;
  width: 0.5vw;
  background-color: var(--grey-100);
}

.dashboard-chartsContainer-ColumnsWithGradientsChart > section {
  width: 100%;
  height: 30%;
  display: flex;
}

.dashboard-chartsContainer-ColumnsWithGradientsChart > section > section {
  width: 70%;
}

.dashboard-chartsContainer-ColumnsWithGradientsChart > section > div {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
}

.dashboard-chartsContainer-ColumnsWithGradientsChart > section > div > p {
  font-size: var(--p-size);
  font-weight: 400;
  color: var(--black-mid);
}
.dashboard-chartsContainer-smoothedLineChart {
  grid-column: span 3;
}

.dashboard-chartsContainer-smoothedLineChart > section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-chartsContainer-smoothedLineChart > section > p {
  transform: rotate(-90deg);
  font-size: 0.8vw;
  font-weight: 600;
  color: var(--grey-200);
}

.box-style {
  background-color: var(--white-100);
  margin: 0 -1rem -1rem -1rem;
  border-top: 1px solid #e0e0e0;
  /* Removido overflow y height fijos para que el scroll se maneje en el contenedor padre */
}
.nav-bar-component {
  /* width: 100%; */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.33rem;
  padding: 1rem 0 0;
}
.nav-bar-component .breadcrumbs-container {
  display: flex;
  justify-content: space-between;
}
.nav-bar-component .MuiBreadcrumbs-li {
  color: magenta;
  display: flex;
  align-items: center;
}
.nav-bar-component .MuiBreadcrumbs-li a {
  font-size: 0.68rem;
  font-style: italic;
  text-decoration: none;
  color: var(--black-mid);
}
.nav-bar-component .header-n-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-bar-component .nav-leftSide {
  /* width: 40%;
  max-width: 50%; */
  height: 100%;
  display: flex;
  align-items: center;
  --actions-gap: 0.64rem;
}
.nav-bar-component .nav-leftSide .module-navbar-actions {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--actions-gap);
  transition: all 0.3s;
}
.nav-bar-component .nav-leftSide .module-navbar-actions.btncount-1 {
  width: calc(var(--app-small-size));
  margin-right: var(--actions-gap);
}
.nav-bar-component .nav-leftSide .module-navbar-actions.btncount-2 {
  width: calc(2 * var(--app-small-size) + var(--actions-gap));
  margin-right: var(--actions-gap);
}
.nav-bar-component .nav-leftSide .module-navbar-actions.btncount-3 {
  width: calc(3 * var(--app-small-size) + 2 * var(--actions-gap));
  margin-right: var(--actions-gap);
}
@media (max-width: 450px) {
  .nav-bar-component .nav-leftSide .module-navbar-actions.mobileHidden {
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
    width: 0;
  }
}
.nav-bar-component .nav-leftSide .module-title {
  margin-left: var(--actions-gap);
}
.nav-bar-component .moduleOptions {
  margin-top: 1rem;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
}
@media (min-width: 450px) and (max-width: 1024px) {
  .nav-bar-component .moduleOptions {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 450px) and (max-width: 1024px) and (orientation: landscape) {
  .nav-bar-component .moduleOptions {
    grid-template-columns: repeat(5, 1fr);
  }
}
.nav-bar-component .nav-menu {
  height: var(--app-small-size);
  width: var(--app-small-size);
  /* padding: (--padding); */
  border-radius: var(--app-small-radius);
  border: 1px solid var(--black-mid);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  aspect-ratio: 1;
  /* display: grid; */
  /* place-items: center; */
}
.nav-bar-component .nav-menu > i {
  position: absolute;
  font-size: 1rem;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  /* line-height: 100%; */
}
.nav-bar-component .nav-menu:hover {
  background-color: var(--black-mid);
}
.nav-bar-component .nav-menu:hover > i {
  color: var(--white);
}
@media (max-width: 1024px) {
  .nav-bar-component .nav-menu.desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-bar-component .nav-menu.mobile {
    display: none;
  }
}
.nav-bar-component .app-square {
  height: var(--app-small-size);
  width: var(--app-small-size);
  /* padding: (--padding); */
  border-radius: var(--app-small-radius);
  font-size: var(--app-small-icon-font-size);
  color: var(--white);
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.nav-bar-component .nav-leftSide > div > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5vw;
}
.nav-bar-component .nav-leftSide > div > svg > g > g > path {
  transition: var(--transition);
}
.nav-bar-component .nav-leftSide > section {
  /* width: 90%; */
  /* height: 100%; */
  /* display: flex; */
  /* align-items: center; */
  /* gap: var(--gap-2); */
  /* 
  >i {
  	color: var(--grey-100);
  } */
}
.nav-bar-component .nav-leftSide > section > svg {
  height: 2vw;
}
.nav-bar-component .nav-leftSide > section > svg > g > g {
  fill: var(--grey-100);
}
.nav-bar-component .nav-leftSide > section > div {
  /* height: 100%; */
  /* width: 85%; */
  /* max-width: 90%; */
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
}
.nav-bar-component .nav-leftSide > section > div > h3 {
  color: #000000;
  font-weight: 700;
  max-width: 98%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-bar-component .store-nav-rightSide {
  width: 40%;
  max-width: 50%;
  height: 100%;
  display: flex;
  justify-content: end;
}
.nav-bar-component .store-nav-rightSide > span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: var(--border);
  border-radius: var(--radius);
  height: 60%;
  width: auto;
  max-width: 50%;
  padding: var(--padding);
  cursor: pointer;
  transition: var(--transition);
}
.nav-bar-component .store-nav-rightSide > span:hover {
  background-color: var(--black-mid);
}
.nav-bar-component .store-nav-rightSide > span:hover p {
  color: var(--white);
}
.nav-bar-component .store-nav-rightSide > span > p {
  font-size: var(--p-size);
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 95%;
}
.nav-bar-component .store-nav-rightSide > span > svg {
  height: 1.3vw;
}
.nav-bar-component .store-nav-rightSide > span > svg > g > path {
  fill: var(--black-mid);
}
.nav-bar-component .nav-menu-options {
  position: absolute;
  left: 2rem;
  top: -25%;
  height: auto;
  /* width: 28vw; */
  /* max-width: 35vw; */
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  z-index: 1000;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1960784314);
  padding: 1.28rem;
  gap: 1rem;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.nav-bar-component .nav-menu-options > div > svg {
  height: 1.7vw;
  width: 1.7vw;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.nav-bar-component .nav-menu-options > div svg > g > g > path {
  fill: var(--grey-100);
}
.nav-bar-component .nav-menu-options > div > h2 {
  color: var(--black);
  font-size: var(--subtitle-size);
  font-weight: 700;
}
.nav-bar-component .nav-menu-options > section {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1.2rem;
  row-gap: 0.88rem;
}
.nav-bar-component .nav-menu-options > section > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  cursor: pointer;
}
.nav-bar-component .nav-menu-options > section > div > p {
  min-width: 4.04rem;
  /* height: 40%; */
  color: var(--black-mid);
  font-weight: 400;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  line-height: 1.2;
  font-size: 0.6rem;
}
.nav-bar-component .nav-bar-title {
  display: flex;
  align-items: center;
}
.nav-bar-component .navbar-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.nav-bar-component .navbar-option > .option-icon {
  /* height: 3.5vw;
  width: 3.5vw; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  width: var(--app-size);
  aspect-ratio: 1;
  border-radius: var(--app-radius);
  font-size: var(--app-icon-font-size);
  /* >i {
  	font-size: 1.7rem;
  } */
}
.nav-bar-component .navbar-option p {
  text-align: center;
}

.options-icon-container {
  height: 5vh;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.options-icon-container > i {
  font-size: 1.1rem;
  color: var(--grey-100);
}
.options-icon-container > i::before {
  color: var(--grey-100);
}

/* .navBarTitle{
	display: ;
} */
.main-icon {
  font-size: 2.5em;
  font-weight: normal;
}

#visualize-store-options {
  visibility: visible;
  opacity: 1;
}

/* background of store options icons , the classes are based on the name of every element*/
.Inventory.Management {
  background-color: #29abe2;
}

.Inventory.Count {
  background-color: #22b573;
}

.Packing.and.Shipping {
  background-color: #f7931e;
}

.Dock.Receiving {
  background-color: #ff6554;
}

.Receiving {
  background-color: #4274c7;
}

.Prints {
  background-color: #ff6393;
}

.Reports {
  background-color: #25c2c0;
}

.Picklist.Management {
  background-color: #ebb000;
}

.Users {
  background-color: #29abe2;
}
.Users > img {
  height: 50% !important;
}

[class="Roles & Admins"] {
  background-color: #22b573;
}
[class="Roles & Admins"] > img {
  height: 60% !important;
  position: relative;
  left: 6%;
}

.module-total-records-container {
  background-color: #29abe2;
  border-radius: 0.3rem;
  display: flex;
  margin-left: var(--actions-gap);
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  min-width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}
.module-total-records-container-text {
  color: #fff;
  font-size: 0.65rem;
  line-height: normal;
}

.Applications {
  background-color: #f7931e;
}
.Applications > img {
  height: 50% !important;
}

.Parts {
  background-color: #ff6554;
}
.Parts > img {
  height: 50% !important;
}

.button-back-navBar-component {
  height: var(--app-small-size);
  width: var(--app-small-size);
  min-width: var(--app-small-size);
  border: none;
  background-color: var(--black-mid);
  color: var(--white);
  border-radius: var(--app-small-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: relative; */
}

.button-back-navBar-component > i {
  /* position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg); */
  transform: translateX(-1px) rotate(90deg);
  padding: 0;
  margin: 0;
  font-weight: 200;
  line-height: 0;
  font-size: 0.75rem;
}

.button-back-navBar-component:hover {
  box-shadow: var(--button-shadow);
}.user-profile-menu {
  height: calc(100dvh - 1rem);
  width: 22rem;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 24px 0px 0px 24px;
  box-shadow: var(--box-shadow);
  padding: 1rem 0 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
  transition: var(--transition);
  z-index: 1000;
}
@media (max-width: 450px) {
  .user-profile-menu {
    width: 100vw;
  }
}
@media (min-width: 450px) and (max-width: 1024px) and (orientation: portrait) {
  .user-profile-menu {
    width: 100vw;
  }
}

.user-profile-menu.hidde-menu {
  opacity: 0;
  visibility: hidden;
}

.top-menu-profile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-menu-profile {
  height: 15%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.5rem 0 0;
}

.menu-profile-username-cont,
.menu-profile-position-cont,
.menu-profile-configuration-cont {
  width: 84.9%;
}

.menu-profile-username-cont {
  height: 12.6%;
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
}

.menu-profile-username-cont section {
  height: 100%;
}

section.username-section {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  width: 85%;
}

.username-section h4 {
  font-size: 1rem;
  font-weight: 700;
  max-width: 100%;
  text-align: end;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.username-section p {
  font-size: 0.6rem;
  font-weight: 400;
  max-width: 100%;
  text-align: end;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

section.username-achronym {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.username-achronym > span {
  background-color: #484848;
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 500;
}

.menu-profile-position-cont {
  height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.menu-profile-position-cont > span {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-profile-position-cont > span p:nth-child(1) {
  font-size: 0.6rem;
  font-weight: 400;
  width: 25%;
}

.menu-profile-position-cont > span p:nth-child(2) {
  font-size: 0.6rem;
  font-weight: 500;
  width: 70%;
  text-align: end;
}

.menu-profile-position-cont button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) - 0.2rem);
  border: var(--border);
  border-radius: var(--button-radius);
  height: 5.5vh;
  width: 100%;
  padding: var(--padding);
  cursor: pointer;
  transition: var(--transition);
  font-size: var(--p-size);
  font-weight: 500;
  text-decoration: underline;
  background-color: var(--white);
}

.menu-profile-position-cont button:hover {
  background-color: var(--black-mid);
  color: var(--white);
  border: 2px solid var(--black-mid);
}

.menu-profile-configuration-cont {
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.menu-profile-configuration-cont > span {
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.menu-profile-configuration-cont > span > p {
  font-size: 0.6rem;
  font-weight: 500;
}

.menu-profile-configuration-cont > span > img {
  height: 1rem;
}

.span-select-language {
  border-radius: 0.3rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.span-select-language img {
  height: 1rem;
}

.select-language {
  width: 97%;
  height: 100%;
  cursor: pointer;
  border-radius: 0.3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0.3rem;
}

.select-language > span {
  font-size: 0.5rem;
}

.select-language > p {
  font-size: 0.5rem;
}

.select-language > .languages-availables {
  position: absolute;
  box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1176470588);
  position: absolute;
  left: 0;
  top: calc(100% + 0.3rem);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.3rem;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
  z-index: 100;
  background-color: var(--white);
  border: 1px solid var(--grey);
}

.hiperlink-company {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.select-company > .menu-list-companies {
  position: absolute;
  box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1176470588);
  position: absolute;
  left: 0;
  top: calc(100% + 0.3rem);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
  z-index: 100;
  background-color: var(--white);
  border: 1px solid var(--grey);
}

.languages-availables > span {
  font-size: 0.5rem;
  transition: var(--transition);
  cursor: pointer;
  height: 2rem;
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  padding-left: 0.3rem;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.languages-availables > span:hover {
  background-color: var(--grey);
}

.select-language:hover .languages-availables {
  visibility: visible;
  opacity: 1;
}

.select-company {
  /* cursor: pointer; */
  position: relative;
  /* text-decoration: underline; */
}

.select-company:hover .menu-list-companies {
  visibility: visible;
  opacity: 1;
}

.menu-list-companies > span {
  font-size: 0.5rem;
  transition: var(--transition);
  cursor: pointer;
  height: 2rem;
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  padding-left: 0.3rem;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.menu-list-companies > span:hover {
  background-color: var(--grey);
}

.theme-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-selector > div {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1rem;
}

.theme-selector > div > button {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  border: 0.3rem double transparent;
  transition: var(--transition);
}

.theme-selector > div > button > img {
  height: 0.5rem;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}

.theme-selector > div > button.light-btn-selected,
.theme-selector > div > button.dark-btn-selected {
  border: 0.3rem double var(--grey-200);
}

.theme-selector > div > button.light-btn-selected > img,
.theme-selector > div > button.dark-btn-selected > img {
  opacity: 1;
  visibility: visible;
}

.bottom-menu-profile > div {
  width: 90%;
  height: 45%;
  border-radius: var(--item-border-radius);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1490196078);
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1rem;
  padding: 0 0.5rem;
  cursor: pointer;
}

.bottom-menu-profile > div > p {
  font-size: 0.7rem;
}

.bottom-menu-profile > div > img {
  height: 1.1rem;
}.notifications-menu {
  position: absolute;
  top: 8vh;
  right: 0.8rem;
  z-index: 100;
  height: auto;
  max-height: 90vh;
  width: 20rem;
  border-radius: 10px;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3019607843);
  padding: 0.3rem 0.3rem 0 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
}
@media (max-width: 1024px) {
  .notifications-menu {
    width: 100vw;
    padding: 1rem;
    right: 0;
  }
}

.notifications-menu.viewMenuNotifications {
  visibility: visible;
  opacity: 1;
}

.filters-section {
  width: 95%;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filters-section > span {
  height: 100%;
  width: 45%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filters-section > span > img {
  height: 1.2rem;
}

.filters-section > span > h4 {
  font-size: 0.7rem;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

div.filters-cont {
  width: 55%;
  /* height: 70%; */
  border-radius: 0.6rem;
  border: 1px solid var(--grey-200);
  padding: 0.3rem 0.6rem;
  display: flex;
  align-items: center;
  position: relative;
  gap: 0.5rem;
  cursor: pointer;
}

.filters-cont > img {
  height: 0.7rem;
}

.filters-cont > p {
  font-size: 0.6rem;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

.filters-cont .view-filters-icon {
  height: 0.4rem;
  position: absolute;
  right: 0.5rem;
  cursor: pointer;
}

.search-notifications-section {
  width: 95%;
  display: flex;
  align-items: center;
  margin-bottom: 0.1rem;
  height: auto;
}

.search-notifications-section > .search-cont {
  height: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  /* border: 1px solid #33333320; */
  background-color: var(--white-100);
  padding: 0.3rem;
}

.search-cont > input {
  width: 95%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0 0.5rem 0 0.3rem;
  color: var(--black-mid);
  background-color: transparent;
}

.search-cont img {
  height: 0.8rem;
  cursor: pointer;
}

.notifications-section {
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden auto;
  padding: 0.5rem 0;
}

.notifications-section .notification {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  padding: 0.7rem;
  display: flex;
  gap: 1rem;
}

.notification > .user-icon-notification {
  width: min-content;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.user-icon-notification > div {
  background-color: #01A8E9;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  opacity: 0.3;
}

.notification > .notification-content {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.3rem;
}

.notification-content > p {
  font-size: 0.6rem;
  font-weight: 500;
}

.notification-content > p > span {
  font-size: 0.6rem;
  font-weight: 700;
}

.notification-content > span {
  font-size: 0.5rem;
  color: #16b2ed;
}
.wrapper-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.span-open-module i {
  color: var(--white);
}

.resource-tab {
  position: relative;
}
.resource-tab:hover .btn-close-tab {
  display: flex;
}
.resource-tab .icon-pinned {
  top: 10px;
  left: 8px;
  font-size: 0.4rem;
  position: absolute;
}
.resource-tab .icon-pinned:before {
  color: var(--white);
}

.btn-close-tab {
  cursor: pointer;
  position: absolute;
  display: none;
  background-color: #fff;
  top: 2px;
  right: 0;
  border-radius: 0.6rem;
  height: 0.6rem;
  width: 0.6rem;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
  border: none;
  color: var(--black-mid);
}

.tab-preview {
  position: absolute !important;
  top: 0px;
  left: 10px;
  margin-top: 5px;
  z-index: 100;
  width: 199px;
  /* UI Properties */
  background: #4d4d4d 0% 0% no-repeat padding-box !important;
  border-radius: 15px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  padding: 0.3rem;
  pointer-events: none;
}

.tab-preview-content {
  transform: scale(1);
}

/* sidebar styles */
.sidebar {
  border-top-right-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  height: 100%;
  width: 4.54rem;
  padding: 5px;
  display: flex;
  align-items: center;
  position: relative;
  transition: var(--transition);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5019607843);
  z-index: 1001;
}
@media (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}

.sidebar.minwidth {
  width: 1.5vw;
  padding: 0;
}

.all-options-cont {
  height: 97%;
  width: 85%;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.icon-apps {
  color: var(--white);
}

.ka-wrapper {
  height: 100%;
}
.ka-wrapper .ka-content {
  height: 100%;
}

.resize-sidebar-icon-cont {
  cursor: pointer;
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  /* background-color: teal; */
}

.sidebar.minwidth > .all-options-cont {
  opacity: 0;
  visibility: hidden;
  width: 0%;
}

.sidebar.minwidth .resize-sidebar-icon-cont {
  width: 100%;
}

.resize-sidebar-icon-cont > i {
  font-size: 0.8rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}

.sidebar.minwidth .resize-sidebar-icon-cont > i {
  transform: rotate(270deg);
}

/* .sidebar.minwidth span:not(.resize-sidebar-icon-cont) {
    opacity: 0;
    visibility: hidden;
}

.sidebar.minwidth section {
    opacity: 0;
    visibility: hidden;
} */
.sidebar > div > span {
  width: 1.88rem;
  height: 1.88rem;
  border-radius: 0.3rem;
  padding: 0.6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

/* .sidebar img {
  height: 1.3vw;
} */
.sidebar div > section {
  transition: var(--transition);
}

.sidebar > div > section > span {
  transition: var(--transition);
}

.sidebar-allmodules-icon {
  height: 3vw;
  width: 3vw;
}

.sidebar-allmodules-icon > g > rect {
  transition: var(--transition);
  fill: var(--white);
}

.span-icon-allModules.bg-white > i {
  color: var(--black-mid);
}

.sidebar > .all-modules-menu {
  position: absolute;
  left: 3.1rem;
  top: 1%;
  width: fit-content;
  max-width: 23rem;
  z-index: 1000;
  box-shadow: var(--box-shadow);
  padding: 1rem 0.7rem 0.7rem 0.7rem;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(4.8rem, 1fr));
  grid-auto-rows: 6rem;
  /* gap: .5rem; */
  overflow: hidden auto;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
  border-radius: var(--button-radius);
  border: 1px solid #eeeeee;
}

.sidebar > .all-modules-menu.visualize-all-modules {
  visibility: visible;
  opacity: 1;
}

.all-modules-menu .module-span-icon {
  min-height: 4.5rem;
  height: auto;
  width: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  /* Reduce el espacio entre el icono y el texto */
  position: relative;
}

.all-modules-menu .module-span-icon img {
  height: 2.5rem;
  width: 2.5rem;
  /* padding: 0.65rem; */
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.all-modules-menu .module-span-icon p {
  font-size: calc(var(--p-size));
  font-weight: 400;
  text-align: center;
  min-height: 2rem;
  display: flex;
  align-items: center;
}

.limited-access-cont {
  height: 100%;
  width: 100%;
  grid-column: 2/6;
  display: flex;
  align-items: center;
  gap: var(--gap);
  justify-content: space-around;
}

.limited-access-cont > img {
  height: 95%;
}

.limited-access-cont > section {
  width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.limited-access-cont > section > h2 {
  color: var(--black-mid);
  font-size: calc(var(--subtitle-size) - 0.3rem);
  font-weight: 600;
  text-transform: uppercase;
}

.limited-access-cont > section > p {
  color: var(--black-mid);
  font-size: 0.5rem;
  font-weight: 400;
  margin-bottom: 5px;
}

.limited-access-cont > section > button {
  width: 80%;
  height: 2rem;
  border: var(--border);
  background-color: transparent;
  font-size: calc(var(--p-size));
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  color: var(--black-mid);
  transition: var(--transition);
}

.limited-access-cont > section > button:hover {
  background-color: var(--black-mid);
  color: var(--white);
  border-color: var(--black-mid);
}

.open-modules {
  height: auto;
  max-height: 90%;
  width: 85%;
  /* border-bottom: 1px solid #4D4D4D; */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 0.5rem 0;
  overflow: hidden auto;
  /* margin-bottom: .5rem; */
  position: relative;
}

.open-modules::before {
  background-color: #4d4d4d;
  content: "";
  height: 1px;
  width: 70%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  /* border-radius: .7rem; */
}

.open-modules::-webkit-scrollbar {
  width: 0;
  display: none;
}

.close-open-module {
  background-color: var(--red-300);
  color: var(--white);
  position: absolute;
  width: 1rem;
  height: 1rem;
  right: 0;
  top: 0;
  border-radius: 50%;
  z-index: 100;
  font-size: calc(var(--p-size) - 0.1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none;
}

.open-modules > div:hover section.close-open-module {
  /* background-color: teal !important; */
  display: flex;
}

.open-modules > div:not(.module-active) {
  background-color: transparent;
  content: "";
  padding: 0.45vw;
  position: relative;
  border-radius: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.open-modules > div.module-active {
  background-color: rgba(255, 255, 255, 0.0823529412) !important;
  content: "";
  position: relative;
  border-radius: var(--button-radius);
  min-height: 2.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  width: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.open-modules > div::after {
  background-color: var(--white);
  opacity: 0.1;
  content: "";
  height: 40%;
  width: 5%;
  position: absolute;
  right: 0;
  border-radius: var(--button-radius);
}

.open-modules > div.module-active::after {
  background-color: var(--white);
  opacity: 1;
  content: "";
  height: 45%;
  width: 5%;
  position: absolute;
  right: 0;
  border-radius: var(--button-radius);
}

.open-modules > div.module-inactive::after {
  /* background-color: var(--white); */
  opacity: 0.1;
  content: "";
  height: 30%;
  width: 5%;
  position: absolute;
  right: 2px;
  border-radius: var(--button-radius);
}

.span-open-module {
  border-radius: var(--button-radius);
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: rebeccapurple !important; */
  cursor: pointer;
}

.span-open-module > img {
  /* border-radius: var(--app-small-radius); */
  /* width: var(--app-small-size); */
  height: 1rem;
  /* display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3rem;
        cursor: pointer;  */
  /* display: none; */
}

.anchored-options {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  /* padding: 0 0 .5rem 0; */
}

.anchored-options .span-anchored-option {
  /* width: 85%; */
  display: flex;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0 0 0.45rem 0;
  position: relative;
}

.span-anchored-option::before {
  background-color: #4d4d4d;
  content: "";
  height: 1px;
  width: 90%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.span-anchored-option img {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--button-radius);
  padding: 0.3rem;
  cursor: pointer;
}

/* main content wrapper styles */
.main-content-wrapper {
  height: 100%;
  width: 100%;
  overflow-y: auto; /* Scroll vertical a nivel del contenedor principal */
  overflow-x: hidden; /* Sin scroll horizontal */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem 1rem 1rem;
}
@media (max-width: 1024px) {
  .main-content-wrapper {
    width: 100%;
    padding: 0 1rem;
  }
}

/* navbar styles */
.navbar-mainCont-container {
  height: 100%;
  width: 100%;
  transition: var(--transition);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.navbar-mainCont-container.fullwidth {
  width: 98.5vw;
}

.navbar-mainCont-container.minwidth .dashboard-tab-group {
  max-width: 100%;
}

.navbar {
  /* height: 10vh; */
  width: 100%;
  /* width: 97%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem 0;
}
@media (min-width: 450px) and (max-width: 1024px) {
  .navbar {
    padding: 1rem 1.4rem 0;
  }
}
@media (max-width: 450px) {
  .navbar {
    padding: 1rem 1rem 0;
  }
}

.navbar > section {
  height: 100%;
}

.navbar .navbar-company-name {
  width: min-content;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.navbar .navbar-company-name .modules-menu-container {
  display: none;
}
.navbar .navbar-company-name .modules-menu-container i {
  color: var(--grey-250) !important;
  font-size: 0.9rem;
  display: flex;
  position: relative;
  bottom: 0.05rem;
}
@media (max-width: 1024px) {
  .navbar .navbar-company-name .modules-menu-container {
    display: flex;
  }
}

.app-company-selector {
  background-color: var(--white-100);
  border-radius: 0.3rem;
  padding: 0.3rem 0.3rem 0.3rem 0.5rem;
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  /* gap: var(--gap); */
  position: relative;
}

.app-company-selector > span {
  color: var(--black-mid);
}

.app-company-selector > span:nth-child(1) {
  font-size: var(--p-size);
}

.app-company-selector > span:nth-child(2) {
  font-size: 0.65rem;
  font-weight: 600;
}

.arrow-app-company-selector {
  position: absolute;
  right: 0.48rem;
  font-size: var(--p-size);
  transition: var(--transition);
}

.app-company-selector-list {
  min-height: 1.5rem;
  height: auto;
  max-height: 10rem;
  padding: 0.4rem;
  border-radius: 0.3rem;
  min-width: 12rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.app-company-selector-list > span {
  height: 1.8rem;
  width: 100%;
  border-radius: calc(var(--button-radius) - 0.15rem);
  border: 1px solid rgba(241, 241, 241, 0.862745098);
  font-size: var(--p-size);
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 0.2rem;
  cursor: pointer;
  transition: var(--transition);
  /* Nuevas propiedades para ellipsis */
  white-space: nowrap;
  /* Evita el salto de línea */
  overflow: hidden;
  /* Oculta el texto que se desborda */
  text-overflow: ellipsis;
  /* Aplica los 3 puntos (...) */
}

.app-company-selector-list > span:hover {
  background-color: var(--black-mid);
  color: var(--white);
  border: 1px solid var(--black-mid);
}

.navbar .navbar-search2 {
  width: 100%;
  display: flex;
  position: fixed;
  top: 4rem;
}

.navbar-company-name h3 {
  font-size: 1.16rem;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 98%;
  white-space: nowrap;
  color: var(--black-mid);
  line-height: 1;
  font-weight: 900;
}

.search-inp-cont {
  z-index: 901;
  /* height: 80%; */
  width: 22rem;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 0;
  transition: var(--transition);
  border: 1px solid transparent;
  position: relative;
}
@media (max-width: 1024px) {
  .search-inp-cont {
    width: 100%;
  }
}

.navbar-search2 .search-inp-cont {
  z-index: 901;
  /* height: 80%; */
  width: 95%;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.7rem 0 0;
  transition: var(--transition);
  border: 1px solid transparent;
}

.search-inp-cont:hover {
  border: 1px solid rgb(153, 153, 153);
}

.search-inp-cont input {
  height: var(--input-height);
  width: 96%;
  border: none;
  outline: none;
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  background-color: transparent;
  font-size: 0.64rem;
  color: var(--black-mid);
  font-weight: 500;
  padding: 0 0.3rem;
}

.search-inp-cont img {
  height: 0.8rem;
  cursor: pointer;
}

.navbar-search .navbar-search-results-cont {
  height: 80vh;
  width: 99%;
  position: absolute;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  top: 0;
  border-radius: 0.5rem;
  z-index: 900;
  box-shadow: var(--box-shadow);
  padding: 1rem;
  transform: translateY(-0.5rem);
  display: flex;
  justify-content: center;
  align-items: end;
}

.navbar-search2 .navbar-search-results-cont {
  height: 80vh;
  width: 99%;
  position: absolute;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  top: 0;
  border-radius: 0.5rem;
  z-index: 900;
  box-shadow: var(--box-shadow);
  padding: 1rem;
  transform: translateY(-0.5rem);
  display: flex;
  justify-content: center;
  align-items: end;
}

.navbar-search2 .navbar-search-results-cont.visible {
  opacity: 1;
  visibility: visible;
}

.all-results-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.all-results-left.expanded {
  gap: 0;
}

.all-results {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.all-results hr {
  border-top: solid var(--grey-75) 1px;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.all-results .recent-searchs {
  height: 35%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.recent-searchs h4 {
  font-size: 0.8rem;
  font-weight: 700;
  padding-left: 0.5rem;
  height: 20%;
  display: flex;
  align-items: center;
}

.all-results .files-results {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem;
  gap: 0.5rem;
}
@media (max-width: 1024px) {
  .all-results .files-results {
    height: 50%;
  }
}

.all-results .transactions-results {
  height: 75%;
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem;
  gap: 0.5rem;
}
@media (max-width: 1024px) {
  .all-results .transactions-results {
    height: 50%;
  }
}

.recent-searchs > section {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.list-of-recents {
  width: 100%;
  display: grid;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.3rem;
  overflow: none;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.list-of-recents > span {
  min-width: 5vw;
  width: 5vw;
  height: 100%;
  border-radius: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.list-of-recents > span > img {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
}

.list-of-recents > span > p {
  font-size: 0.56rem;
  line-height: 1.1;
  font-weight: 400;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  text-align: center;
  height: 60%;
}

.view-more-cont {
  width: 15%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  position: relative;
  top: 0.9em;
}

.view-more-cont > img {
  height: 2vw;
  cursor: pointer;
}

.view-more-cont > p {
  font-size: 0.6vw;
  font-weight: 400;
}

.files-results > p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.8rem;
}

.files-results > p > img {
  height: 1rem;
}

.files-results > .list-files {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden auto;
  gap: 0.3rem;
}
.files-results > .list-files.view-list {
  display: flex;
  flex-direction: column;
}

.text-file-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.text-file-container span {
  font-size: 0.6rem;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-file-container p {
  opacity: 0.52;
  font-size: 0.5rem;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-files > span {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  width: calc(100% - 0.2rem);
  border-radius: 0.6rem;
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  opacity: 0.85;
  border: 1px solid #f1f1f1;
  margin-right: 0.2rem;
}
.list-files > span i {
  color: var(--black-mid) !important;
  font-size: 0.8rem;
}
.list-files > span br {
  display: none;
}

.list-files > span > p {
  font-size: 0.6rem;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-files > span > img {
  height: 0.8rem;
}

.list-files > .category-file-container > span {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  width: calc(100% - 0.2rem);
  border-radius: 0.6rem;
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  opacity: 0.85;
  border: 1px solid #f1f1f1;
  margin-right: 0.2rem;
}
.list-files > .category-file-container > span i {
  color: var(--black-mid) !important;
  font-size: 0.8rem;
}
.list-files > .category-file-container > span br {
  display: none;
}

.list-files > .category-file-container > span > p {
  font-size: 0.6rem;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-files > .category-file-container > span > img {
  height: 0.8rem;
}

.transactions-results > h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.transactions-results > h4 > img {
  height: 1rem;
}

.transactions-results > .list-transactions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden auto;
  gap: 0.3rem;
}

.list-transactions span {
  justify-self: center;
  height: 100%;
  width: 100%;
  border-radius: 0.6rem;
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  opacity: 0.85;
  border: 1px solid #f1f1f1;
}
.list-transactions span br {
  display: none;
}

.list-transactions > span > p {
  font-size: 0.6rem;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-transactions > span > img {
  height: 0.8rem;
}

.list-transactions > span > i {
  color: var(--black-mid) !important;
}

.wrapper-details-bar {
  background-color: #fbfbfb;
  height: 1rem;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  border: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  z-index: 1000;
}

.wrapper-details-bar > span.wrapper-details-bar-version-data {
  transition: var(--transition);
  margin-left: 4.5rem;
  font-size: var(--p-size);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.wrapper-details-bar > span.wrapper-details-bar-version-data b {
  font-size: inherit;
}
@media (max-width: 1024px) {
  .wrapper-details-bar > span.wrapper-details-bar-version-data {
    margin-left: 0;
  }
}

.wrapper-details-bar > span.wrapper-details-bar-version-data.minwidth {
  margin-left: 1.5rem;
}

.wrapper-details-bar > section {
  width: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.wrapper-details-bar > section > section {
  width: auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.wrapper-details-bar > section > section > p {
  color: var(--black-mid);
  font-size: var(--p-size);
  font-weight: 500;
}

.wrapper-details-bar > section > section > span {
  background-color: #25c2c0;
  width: auto;
  display: flex;
  height: 0.8rem;
  width: 0.8rem;
  font-size: 0.6rem;
  border-radius: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}.horizontal-component{
  flex-direction: row!important;
  align-items: center;
  .content {
    flex-direction: row !important;
    width: 100%;
}
}
.properties-card-component {
  b {
    font-size: 0.7rem;
    color: var(--black-mid);
    p{
      color: var(--black-mid);
    }
}
  display: flex;
  flex-direction: column;
  gap: 0.3rem;

  >.horizontal-card {
    background-color: var(--white);
    border-radius: var(--input-radius);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 1rem;
    >.card-title {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex: 1;
      > span {
        color: var(--grey-100);
        font-size: 0.6rem;
      }
      >b {
        font-size: 0.8rem;
      }
    }
    >.vertical-property{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      /* gap: 4px; */
      width: min-content;
      >span{
        color: var(--grey-100);
        font-size: 0.6rem;
      }
      >b{
        
        font-size: 0.68rem !important;
      }
      > span,b {
        text-align: center;
        white-space: nowrap;
      }
    }

  }

  .properties-card-header {
    font-size: 0.6rem;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    >span{
      color: var(--grey-100);
    }

  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    &.grey>.property{
      background-color: var(--white-100);
    }

    >.property {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      padding: 0.2rem 0.5rem;
      min-height: 1.68rem;
      gap: 0.5rem;
      background-color: var(--white);
      border-radius: 0.4rem;
      font-size: 0.88rem;
      border: 1px solid #EFEFEF;
      /* font-size: 1123em; */
      /* font-size: 1123em; */
      
     > span{
        font-size: 0.6rem;
        color: var(--grey-100);
      }

      > b {
        text-align: right;
        font-size: 0.65rem;
      }
      > a{
        cursor: pointer;
        color: var(--blue-250);
        text-decoration: underline;
        text-align: right;
        font-size: 0.65rem;
      }

    }

    &.single-card{
      gap: 0;
      >.property {
        min-height: 32px;
        border-radius: 0;
        padding: 0px 0.84rem;
        &:first-child{
          border-radius: 0.4rem 0.4rem 0 0;
          /* padding-top: 0.84rem; */
        }
        &:last-child {
          border-radius: 0 0 0.4rem 0.4rem;
          /* padding-top: 0.84rem; */
          /* padding-bottom: 0.84rem; */
        };
      }

    }

  }
}



.tag-component {
  color: var(--grey-150);
  font-weight: 500;
  width: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  i {
    font-size: 1.5em;
    font-weight: normal;
  }

  b {
    font-size: 1em;
  }
}

.tag-component.small {
  font-size: 0.56rem;
}

.tag-component.transparent {
  font-size: 0.6rem;
  font-style: oblique;
  &.success {
    color: var(--green-400, teal);
  }

  &.info {
    color: var(--blue-150, teal);
  }

  &.warning {
    color: var(--yellow-300, goldenrod);
  }

  &.error {
    color: var(--red-50, purple);
  }
}

.tag-component.filled {
  min-height: 1.68rem;
  padding: 0 var(--input-padding);
  border-radius: 11px;
  white-space: nowrap;
  font-size: 0.62rem;
  background-color: #fff;
  border: solid 1px var(--grey-150);

  &.success {
    transition: all 0.3s ease;
    border: solid 1px var(--green-400);
    background-color: var(--green-600);
    color: var(--green-400);
  }

  &.info {
    transition: all 0.3s ease;
    background-color: var(--blue-500);
    color: var(--blue-150);
    border: solid 1px var(--blue-150);
  }

  &.warning {
    transition: all 0.3s ease;
    background-color: var(--yellow-50);
    color: var(--yellow-100);
    border: solid 1px var(--yellow-100);
  }
  &.issued {
    transition: all 0.3s ease;
    border: solid 1px var(--orange-250);
    background-color: var(--orange-300);
	color: var(--orange-250);;
  }
  &.error {
    transition: all 0.3s ease;
    background-color: var(--pink-50);
    color: var(--red-100);
    border: solid 1px var(--red-100);
  }
}
.partial-issued-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.issue-container {
  border-radius: 5px;
  border: solid 1px var(--orange-250);
  background-color: var(--orange-300);
  width: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  .icon-issue{
	font-size: 0.6rem;
  }
  .icon-issue:before {
    color: var(--orange-250);
    font-size: 0.6rem;
  }
}
.custom-tag-component {
  &.part > .tag-component {
    background-color: var(--purble-200);
    color: var(--purple-150);
    border: solid 1px var(--purple-150);
  }
  &.consumable > .tag-component {
    background-color: var(--yellow-200);
    color: var(--yellow-250);
    border: solid 1px var(--yellow-250);
  }

  > .tag-component {
    font-weight: normal;
  }
}
.part-details-dialog-component{
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-width: 65vw;
  gap: 1em;


  >.header{
    display: flex;
    align-items: center;
    gap: 3em;
    justify-content: space-between;

    >.title-container{
      display: flex;
      align-items: center;
      gap: 1em;
    }
  }

  .sections {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    overflow: auto;

    >.section{
      display: flex;
      flex-direction: column;
      gap: 1em;

      >b{
        padding: 0 1em;
      }

      >.section-info{
        display: grid;
        /* min-width: 570px; */
        /* width: 100em; */
        grid-template-columns: 1fr 1fr;
        gap: 1em;
      }
    }
    
    hr {
      border: solid 1px var(--grey-50);
      border-radius: 1em;
    }
  }

}
.accordion.location-configuration {
  background-color: var(--white);
  border: 1px solid #E6E6E6;
  border-radius: var(--item-border-radius);
  padding: 1rem;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--padding) 0;
  position: relative;
}
.accordion-header h2 {
  font-size: .8rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  color: var(--black-mid);
  /* max-width: 18%; */
}
.accordion-content h2,
h3 {
  margin: 0;
  font-weight: 00;
  white-space: nowrap;
  /* max-width: 18%; */
  font-size: 0.8rem;
}

.accordion-header .cont-chipsFilters {
  max-width: 95%;
  height: 100%;
}

.cont-chipsFilters::-webkit-scrollbar {
  /* width: 4px; */
  height: 4px;
}
.accordion-icon {
  transition: var(--transition);
  cursor: pointer;
  position: absolute;
}

.accordion-icon.open {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  /* overflow: hidden; */
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}

.accordion-content.open {
  visibility: visible;
  opacity: 1;
  transition: var(--transition);
  max-height: 100vh;
}

.accordion-header > section {
  display: flex;
  align-items: center;
  width: 85%;
  gap: calc(var(--gap) * 2);
}

.cont-chipsFilters {
  flex: 1;
  display: flex;
  gap: calc(var(--gap) * 2);
}
.filters-component {
  >.filters-header {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
  }

  &~hr {
    border-top: solid var(--grey-75) 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  .basicFilters-cont{
    height: min-content !important;
    gap: 0.4rem;
    padding-bottom: 1rem;
  }

  .inputs-basicFilters-cont {

    height: min-content;
    padding: 0.5rem 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: unset;
    place-items: center;
    gap: calc(var(--gap) * 2.5);
    position: relative;
    >div>input {
      border: 1px solid var(--grey-200);
      border-radius: var(--radius);
      padding: var(--padding);
      font-size: var(--p-size);
      width: 95%;
      height: 5vh;
      outline: none;
    }
  }
  .advance-filters-sect2 {
    /* height: 35%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;

    >h2 {
      width: 99%;
      color: var(--black);
      font-weight: 700;
    }

    >section {
      height: 80%;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      /* grid-template-rows: repeat(1, 1fr); */
      gap: calc(var(--gap) * 2.5);
      place-items: center;
      height: min-content;

      >input {
        background-color: transparent;
        border: 1px solid var(--grey-200);
        border-radius: var(--radius);
        padding: var(--padding);
        font-size: var(--p-size);
        width: 95%;
        height: 5vh;
        outline: none;
        cursor: pointer;
      }
    }

  }
}.select {
    position: relative;
    width: 100%;
    height: var(--input-height);
    display: flex;
    align-items: center;
    /* justify-content: center; */

    .dropdownIcon{
        font-size: 0.7rem;
        padding-left: 0.3rem;
    }

    &.disabled{
        pointer-events: none;
        *{
            pointer-events: none;
        }
        &>#select-partNumber{
            border: none;
            color: var(--grey-250);
            background-color: var(--disabled-input-bg);
        } 
        .selected-option-singleSelection-dropdown{
            color: var(--grey-500);
        }
        label{
            color: var(--grey-500);
        }
    }

    .error-label{
        color: var(--input-error);
        position: absolute;
        right: calc(3 * var(--input-padding));
        font-size: var(--input-font-size);
        font-style: normal;
    }
}

.select>#select-partNumber {
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    font-size: var(--p-size);
    width: 100%;
    height: var(--input-height);
    outline: none;
    cursor: pointer;
    background-color: var(--white);
    
    &.error{
        border: 2px solid var(--input-error);
        /* border-color: var(--input-error); */
    }
    /* padding-left: .3rem; */
}

.selected-options-container-dropdown {
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    /* gap: var(--gap); */
    padding: 0 .2rem;
}

.selected-option {
    width: auto;
    max-width: 100%;
    padding: calc(var(--padding) - .35em);
    height: 60%;
    margin-right: .2rem;
    border-radius: 0.2rem;
    background-color: #1EC496;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    color: var(--white);
    font-size: 0.5rem;
}

.selected-option-singleSelection-dropdown{
    width: auto;
    max-width: 95%;
    height: 60%;
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    color: var(--black);
    font-size: var(--input-font-size);
    white-space: nowrap;
    overflow: hidden;
    padding: 0 var(--input-padding);

    &.hasPrefix {
        padding: 0 var(--input-padding) 0 0.4rem;
    }
}


/* Estilo para el contador de elementos ocultos */
.hidden-count {
    background-color: #1EC496;
    color: var(--white);
    padding: .3rem;
    border-radius: 6px;
    font-size: calc(var(--p-size) - .2rem);
    font-weight: 500;
    height: 60%;
    width: auto;
    /* max-width: 15%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

  

.select>label {
    position: absolute;
    top: 50%;
    left: var(--input-padding);
    transform: translateY(-50%);
    font-size: var(--input-font-size);
    color: var(--input-color);
    transition: var(--transition);
    pointer-events: none;
    font-weight: 400;

    &.hasPrefix {
        left: 1.6rem !important;
    }
}




.data-basic-filters-cont {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    padding: 0.5rem;
    width: 15rem !important;
    max-width: 15rem; 
    /* min-width: 10rem; */
    height: auto;
    max-height: 60vh;
    z-index: 100;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap) + .3rem);
    overflow: hidden;
    z-index: 1000;
}



.data-basic-filters-cont>button {
    width: 100%;
    height: 2rem;
    min-height: 2rem;
    border-radius: var(--radius);
    border: none;
    outline: none;
    cursor: pointer;
    font-size: var(--p-size);
    padding: var(--padding);
}

.data-basic-filters-cont>.data-basic-filters-cont-selectedFiltersName {
    width: 100%;
    /* display: flex;  disabled cause interferes with the ellipsis */
    align-items: center;
    justify-content: space-between;
    font-size: var(--p-size) !important;
    font-weight: 400;
}

.data-basic-filters-cont-selectedFiltersName>span {
    color: var(--green-300);
    text-decoration: underline;
    cursor: pointer;
}


 .data-basic-filters-cont>.filter-options-selected {
    width: 100%;
    min-height: 4.5rem;
    max-height: 4.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    overflow-y: auto;
    outline: 1px solid #DFDFDF;
    border-radius: 5px;
    padding: 0.2rem;

} 

.filter-options-selected>span {
    width: auto;
    max-width: 100%;
    height: 40%;
    padding: calc(var(--padding) - .15rem);
    border-radius: 6px;
    background-color: #1EC496;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}


.filter-options-selected>span>p {
    color: var(--white);
    font-size: calc(var(--p-size));
    font-weight: 400;
} 

.data-basic-filters-cont>.filters-options-cont {
    width: 100%;
    height: auto;
    max-height: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    overflow: hidden auto;
}

.data-basic-filters-cont>.filters-options-cont::-webkit-scrollbar {
    width: 4px;
}


.filters-options-cont>.search-options-cont-dropdowns {
    width: 100%;
    border-radius: var(--input-radius);
    display: flex;
    gap: .1rem;
    align-items: center;
    height: calc(var(--input-height) - .2rem);
    background-color: var(--white-100);
    padding: 0 .2rem 0 0;
    font-size:var(--p-size);
}

.search-options-cont-dropdowns>input {
    background-color: transparent;
    height: 95%;
    border: none;
    outline: none;
    box-shadow: none;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
    padding: 0 .2rem 0 .2rem;
    font-size:var(--p-size);
    color: var(--black);
    font-weight: 400;
    flex: 1;
    flex-grow: 1;
    &::placeholder{
        color: var(--grey-200);
    }
}
.placeholder-dropdown {
    opacity: 0.5;
    &.hidden{
        display: none;
    }
}
.search-options-cont-dropdowns:focus-within{
    border: 1px solid var(--grey-100);  

}

.search-options-cont-dropdowns>img {
    /* height: 0.8rem; */
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
}

/* .filters-options-cont>.options {
    background-color: var(--white);
    width: 100%;
    border-radius: calc(var(--radius) - 3px);
    padding: calc(var(--padding) - .3rem);
    display: flex;
    align-items: center;
    gap: var(--gap);
    border: 2px solid var(--white-100);
} */

.options:hover{
    background-color: #DBFFEE !important; 
}
.options>section {
    width: 100%;
    cursor: pointer;
}

.options>section>p:nth-child(1) {
    font-size: var(--p-size);
    color: var(--black);
    font-weight: 400;
}

.options>section>p:nth-child(2) {
    font-size: calc(var(--p-size) - .1rem);
    color: var(--grey-300);
    font-weight: 400;
}
.no-results-label-dropdown{
    height: 2rem;
    width: 100%;
    font-size: calc(var(--p-size) + .1rem);
    color: var(--black-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input-border);
    border-radius: .3rem;
    opacity: .72;
    
}


  /* [data-viewport-type="element"]{
    height: auto !important;
  } */
.change-systemMeasure-modal-cont {
    /* background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(100px); */
    width: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background-color: #fff;
  
    height: 30vh;
    padding: 1rem .5rem;
  }
  
  .change-systemMeasure-modal-cont>.change-systemMeasure-modal-cont-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 3rem;
    width: 90%;
  }
  
  .change-systemMeasure-modal-cont-header>button {
    height: 2rem;
    width: 2rem;
    border-radius: .5rem;
    outline: none;
    background-color: #FFA724;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  .change-systemMeasure-modal-cont-header>button>i {
    color: var(--white);
    font-size: 1rem;
  }
  
  
  .change-systemMeasure-modal-cont-header>p {
    color: var(--black-mid);
    font-weight: 700;
    font-size: calc(var(--p-size) + .3rem);
  }
  
  .change-systemMeasure-modal-cont>div {
    width: 90%;
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
    color: var(--black-mid);
    height: 5rem;
  }
  
  .btn-changeSystemCont {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    height: 3rem;
  }
  .btn-changeSystemCont> button{
    background-color: var(--black-mid);
    width: 7rem;
    height: 2rem;
    border-radius: var(--radius);
    color: var(--white);
    border: none;
    outline: none;
    cursor: pointer;
  }

  .btn-changeSystemCont> button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);
    color: var(--black-mid);
    transition: var(--transition);
  }

  .btn-changeSystemCont> button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
  }/* Para Webkit (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Para Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.numeric-field{
  text-align: right;
}

.input-component {
  font-size: var(--input-font-size);
  position: relative;

  /* --label-active-top: -0.7em; */
  --label-active-translate: -1.8rem;
  --label-active-font: var(--input-active-label-font-size);
  --custom-input-padding: var(--input-padding);
  
  >* {
    transition: all 0.3s;
  }

  .suffixIcon{
    position: absolute;
    right: 0.5rem;
    font-size: 0.9rem;
    color: var(--grey-250);

  }

  .input-suffix{
    font-size: 0.65rem;
    font-weight: bold;
    margin-left: 0.3rem;
  }

  label {
    color: var(--grey-250);
    position: absolute;
    left: var(--custom-input-padding);
    font-size: var(--input-font-size);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;

    &.fixed {
      transform: translateY(var(--label-active-translate));
      font-size: var(--label-active-font);
      &.centered {
        left: 50%;
        transform: translateX(-50%) translateY(var(--label-active-translate));
      }
    }

  }  

  .error-tag{
    position: absolute;
    right: var(--custom-input-padding);
    color: var(--input-error);
    pointer-events: none;
  }

  width: 100%;
  display: flex;
  align-items: center;

  

  input, textarea {


    &.uppercase{
      text-transform: uppercase;
    }

    font-size: var(--input-font-size);
    min-height: var(--input-height);
    max-height: var(--input-height);
    border: solid 1px var(--input-border);
    border-radius: var(--input-radius);
    padding: 0 var(--custom-input-padding);
    width: 100%;

    &[disabled]{
      pointer-events: none;
      color: var(--grey-500);
      background-color: var(--disabled-input-bg);
      border: none;
      &~label{
        color: var(--grey-500) !important;
      }
    }

    &.error{
      border: solid 2px var(--input-error);
    }

    &.keep-placeholder::placeholder{
      opacity: 1 !important;
    }


    &::placeholder {
      opacity: 0;
    }

   &:not(.select){ 
    &:not(:placeholder-shown),
    &:focus-visible, &.open {
      /* outline: none; */
      /* background-color: magenta; */

      &::placeholder {
        opacity: 1;
        transition: all 0.3s;
      }

      &~label {
        /* transform: translateY(var(--label-active-translate)); */
        color: var(--black-mid);
        top: -0.9em;
        font-size: var(--label-active-font);
        &.centered {
          left: 50%;
          top: -0.9rem;
          transform: translateX(-50%);

        }
      }
    }}

    &.withIcon{
      padding-right: 1.7rem;
    }
  }

  i[class*="icon-light-cross"]{
    font-size: 0.6rem;

  }
  textarea{
    min-height: 3em;
    max-height: unset;
    resize: vertical;
    padding-top: 8px;
    transition: unset;
  }

}.parts-configuration-component{
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0.5rem;

  .main-content-wrapper{
    display: flex;
    flex-direction: column;
  }

  .nav-header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    >.filter-toggle{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: transparent;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;
      >i{
        transition: all 0.3s;
        &.open{
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      h2 { 
        font-size: 0.8rem;
      }
    }
  }
}

.parts-configuration-component-content {
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: 100%;

  .main-content-wrapper{
    overflow: auto;
  }

  .delete-part-button {
    background-color: transparent;
    min-width: 1.2rem;
    border: none;
    display: grid;
    place-items: center;
    /* aspect-ratio: 1; */
    i{
      line-height: normal;
      font-size: 0.9rem;
    }
  }

  /* .item-component, .sorting-component {
    padding-left: 24px;
  } */




  .part-list-table{
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 0.3rem;
    padding-top: 0.3rem;

    --list-item-display: grid;
    --list-item-template: calc(27vw - 4.7rem) calc(24vw - 4.7rem) calc(17vw - 4.7rem) calc(20vw - 4.7rem) calc(13vw - 4.7rem);
    --list-item-justify: left;
    --list-item-padding: 0 0 0 24px;
    --list-item-gap: 1rem;
  }

  .part-list{
    /* min-height: */
    height: 100%;
    /* background-color: plum; */
    /* margin: 12px 0; */
    /* width: 100%; */
    display: flex;
    overflow: auto;
    /* margin-top: 0.5rem; */
    flex-direction: column;
    padding: 0 0.3rem 0 0;
    gap: 0.4rem;


    details[open] {
      .item-component {
        background-color: var(--blue-500);
        border: solid 1px var(--green-25);
      }
    }

    .expandable-details{
      /* overflow: visible; */
    }

    .item-component{
      b {
        font-weight: normal;
      }
      /* .main-info{
        display: grid;
        grid-template-columns: 7rem 19rem 10rem 14rem 7rem;
        gap: 1rem;
        justify-items: left;
      } */
    }
   
  }



  >.content-header>.parts-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;

    .search-bar-input{
      width: unset;
    }

    .filter-toggle{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      h2 {

        font-size: 0.8rem;
      }
    }

    >.left-container {
      display: grid;
      grid-template-columns: min-content min-content minmax(170px, 40vw) auto min-content;
      align-items: center;
      gap: 0.8rem;
      width: 100%;

      >i {
        font-size: 1.2rem;
      }

      >b {
        white-space: nowrap;
        font-size: 0.8rem;
      }

      >button {
        width: min-content;
        /* white-space: nowrap;
        font-size: 11px;
        display: flex;
        align-items: center;
        gap: 8px; */
      }

      >.input-wrapper {
        position: relative;
        display: flex;
        align-items: center;

        >i {
          font-size: 1rem;
          position: absolute;
          right: 0.8rem;
        }

        >input {
          width: 100%;
          /* position: relative; */
          min-height: var(--input-height);
          border-radius: var(--input-radius);
          border: solid 1px var(--input-border);
          padding: 0 28px 0 12px;
          font-size: var(--input-font-size);
          color: var(--black-mid);

          &:focus-visible {
            outline: none;
          }

          &::placeholder {
            color: var(--black-mid);
          }
        }
      }


    }
  }
}.expandable-component {
  > details {
    > summary {
      position: relative;
      cursor: pointer;
      > .summary-content {
        outline: solid 2px magenta;
        * {
          pointer-events: none;
        }
      }

      &::marker {
        content: "";
        display: none;
      }
     
      
      &:focus-visible {
        outline: none;
        > *:first-child {
          border: solid 1px var(--black-mid) !important;
        }
      }
    }

    &[open] + div.expandable-details {
      max-height: 1000vh;
      opacity: 1;
      transition: all 1s;
    }

    & + div.expandable-details {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: all 0.5s;
    }
  }
}
.openSticky{
  position: sticky;
  top: 0;
  z-index: 100;
}
.active-expandable {
  >.item-component {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
  }
  >.item-new-order-container {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
  }
}
.dialog-trigger-component{
  /* width: max-content;
  height: max-content; */
  
    background-color: unset;
    border: none;
    padding: none;
    cursor: pointer;
  
}.general-card-component {
	border-radius: 0.6rem;       
	background-color: var(--white-100);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	overflow: visible;
	gap: 0.48rem;
	position: relative;

	>.ribbon{
		position: absolute;
		top: 0;
		left: 0;
	}

	> .card-content-container {
		display: flex;
		flex-direction: column;
		gap: 1.23rem;
		/* overflow: auto; */
		>.card-header{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 0.5rem;
			b.cardTitle{
				font-size: 0.8rem;
				color: var(--black-mid);
			}
		} 
	}

	>.more-info{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

.more-options-container {
	display: flex;
	line-height: 1;
	justify-content: flex-end;
    &.disabled{
		pointer-events: none !important;
		opacity: 0.5;
	}
	span {
		display: grid;
		min-height: 1.2rem;
		max-height: 1.2rem;
		max-width: 1.2rem;
		min-width: 1.2rem;
		aspect-ratio: 1;
		border: solid 1px var(--grey-500);
		color: var(--grey-500);
		border-radius: 0.2rem;

		place-items: center;
	}
}.checkbox-component {

  --box-width: 0.95rem;
  background-color: var(--grey-75);
  border-radius: var(--checkbox-radius);
  cursor: pointer;

  width: var(--box-width);
  min-width: var(--box-width);
  min-height: var(--box-width);
  height: var(--box-width);
  max-height: var(--box-width);
  max-width: var(--box-width);
  /* aspect-ratio: 1; */
  transition: all 0.3s;

  &.outlined{
    background-color: transparent;
    border: solid 1px var(--grey-300);
    align-items: center;
    &.checked{
      border: none;
    }
  }
  
  >svg{
    width: 100%;
    height: 100%;
    > polyline{
      stroke: transparent;
      transition: all 0.3s;
      
    }
  }
  
  &.checked{
    transition: all 0.4s;
    background-color: var(--green-250);
    > svg > polyline {
      stroke: var(--white);
      transition: all 0.3s;
    }
  }
}



/* @keyframes checkAnim {
  0% {
    height: 0;
  }

  100% {
    height: calc(0.2 * var(--box-width));
  }
} */.general-section-form-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.6rem;

  >.section-header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    
    >.title-container{
      display: flex;
      align-items: center;

      >b{
        font-size: 0.8rem;
            color: var(--black-mid);
      }
    }
  }

  
}


.general-section-form-component {
  padding-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.2rem;
  row-gap: 1.27rem;


  .general-info-ata {
    display: flex;
    align-items: center;
    gap: 1.2rem;

    >b{
      font-size: 0.8rem;
    }

    >div {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 0.68rem;
      width: 100%;
    }

  }
  
  .icon-checkbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    >.icon-coloredwarning{
      font-size: 1.2rem;
    }
  }

  .checkboxes{
    display: grid;
    grid-column: span 2;
    gap: 0.72rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* >*:nth-child(3) {
    grid-column: span 2;
  }
  >*:nth-child(4) {
    grid-column: span 2;
  } */





  /* .checkbox-field {
    box-shadow: 0px 2px 4px #00000029;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    gap: 8px;
    background: var(--white);

    >.left-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

  } */

  .select {
    >div {
      /* width: 100% !important; */
    }
    >svg{
      /* right: 7px; */
    }
  }

  .select-container{
    min-height: 40px;
  }
}

.custom-select-option {
  min-height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  min-width: 100px;
  font-size: 12px;

  &:hover {
    background-color: var(--grey-75);
  }
}.select-component {
  position: relative;
  display: flex;
  align-items: center;

  .input-component {
    >input:focus-visible {
      outline: none;
    }

    >input:not(:placeholder-shown)~label {

      transform: translateY(var(--label-active-translate));
      font-size: var(--label-active-font);

      &.centered {
        left: 50%;
        transform: translateX(-50%) translateY(var(--label-active-translate));
      }
    }

    >input {
      padding-right: 32px;
    }

    >.error-tag {
      right: 30px;
    }
  }
  
  >i {
    position: absolute;
    right: 7px;
    font-size: 11px;
    cursor: pointer;
    /* pointer-events: none; */
    transition: all 0.3s;
  }

  &.open {
    .input-component {

      >input~label {
        transform: translateY(var(--label-active-translate));
        font-size: var(--label-active-font);
        &.centered {
          left: 50%;
          transform: translateX(-50%) translateY(var(--label-active-translate));
        }
      }
    }

    >i{
      transform: rotate(180deg);
    }
  }

}.checkbox-field-component {
  display: flex;
  align-items: center;
  /* box-shadow: var(--pop-over-shadow); */
  box-shadow: 0px 1px 2px #00000029;
  display: flex;
  align-items: center;
  font-size: var(--input-font-size);
  padding: 0 0.64rem;
  min-height: var(--input-height);
  border-radius: var(--input-radius);
  gap: 0.52rem;
  background: var(--white);
  width: 100%;
  cursor: pointer;
  /* outline: none; */
  border: none;

  span{
    /* background-color: magenta; */
    font-size: var(--input-font-size);
    height: min-content;
    line-height: normal;
    position: relative;
    /* top: 0.1rem; */
  }

  &.grey{
    background-color: var(--white-100);
  }

  &.checked{
    background-color: var(--green-250-16);
  }

  &.disabled{
    pointer-events: none;
    background-color: var(--disabled-input-bg);
    box-shadow: unset;
    color: var(--grey-500);
    *{
      pointer-events: none;
    }
  }

  /* >.left-container {
      display: flex;
      align-items: center;
      gap: 8px;
    } */

}.multioption-button-component {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 11.43rem;
  /* z-index: 300; */

  &.hidden {
    display: none !important;
  }

  button {
    width: 100%;
    min-height: 1.64rem;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 0;
    padding: 0 !important;
    border-radius: 0.32rem;
    transition: border-radius 0s 0.35s;

    &.open {
      transition: border-radius 0s;
      border-top-left-radius: var(--button-radius);
      border-bottom-right-radius: var(--button-radius);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

    }

    >div {
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        padding: 0 0 0 0.54rem;
        gap: 0.43rem;
      }

      &:nth-child(2) {
        padding: 0 0.54rem;
        height: 1.64rem;
      }

    }

    >i {
      font-size: 0.7rem;
    }
  }

  .button-options {
    position: absolute;
    top: calc(100%);
    /* visibility: hidden; */
    width: 100%;
    z-index: 4;
    gap: 0.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--black-mid);
    /* border-radius: 0 0 0.32rem 0.32rem; */
    border-bottom-left-radius: var(--button-radius);
    border-bottom-right-radius: var(--button-radius);

    max-height: 0;
    overflow: hidden;
    /* opacity: 0; */
    transition: all 0.5s;
    padding: 0;

    &.open {
      /* display: flex; */
      padding: 0;
      max-height: 5rem;
      opacity: 1;
      /* visibility: visible; */
    }

    button {
      width: calc(100% );
    }


  }

}.part-configuration-grid-component{
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 0;
  gap: 0.48rem ;
  overflow: auto;
  .card-content-container {
    /* gap: ; */
    gap: 1.78rem;

  }

  .eng-summary{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height:  100%;

    .summary-item{

      b{
        font-size: 0.65rem;
      }
      display: grid;
      grid-template-columns: 10rem auto;
      align-items: center;
      /* justify-content: left; */
      background-color: var(--disabled-input-bg);
      height: var(--input-height);
      padding: 0 var(--input-padding);
      border-radius: var(--input-radius);

      .placeholder{
        font-size: 0.6rem;
        color: var(--grey-250);
      }

      .interchange-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center !important;
        gap: 0.3rem;
        width: 100%;
        align-items: center;

        .type{
          font-size: 0.6rem;
          display: flex;
          align-items: center;
          gap: 0.3rem;

          .count{
            width: 1rem;
            aspect-ratio: 1;
            border-radius: 0.2rem;
            background-color: var(--black-mid);
            color: white;
            display: grid;
            place-items: center;
          }
        }
      }
    }
  }

  .sub-grid{
    display: grid;
    grid-template-rows: min-content auto;
    gap: 0.48rem;
  }

  .title-container{
    display: flex;
    align-items: center;
    gap: 0.92rem;
  }

  .card-header{
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: unset !important;
  }

  .card-content-container{
    height: 100%;
  }

  .placeholder{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
    height: 100%;

    b{
      font-size: 0.8rem;
    }
    >i{
      font-style:normal;
      font-size: 0.7rem;
      color: var(--grey-100);
      a{
        padding: 0 0.3em;
        color: var(--blue-300);
        cursor:  pointer;
        text-decoration: underline;
      }
    }
  }

}.item-component {
	border:          var(--item-border);                  
	border-radius:   var(--item-border-radius);           
	padding:         var(--item-padding);                 
	min-height:      var(--item-min-height);                
	background-color:var(--item-background-color);                
	display:         var(--item-display);                   
	gap:             var(--item-gap);                           
	align-items: center;
	justify-content: space-between;
	position: relative;
	
	&.clickable{
		cursor: pointer;
	}
	
	>.left-info {
		display: flex;
		align-items: center;
		gap: 0.48rem;
	}

	.main-info {
		display: var(--list-item-display, flex);
		grid-template-columns: var(--list-item-template, unset);
		align-items: center;
		gap: var(--list-item-gap, 1.72rem);
		justify-items: var(--list-item-justify, left);
		padding: var(--list-item-padding, 0);

	}

	>.left-info>.main-info>.property {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 0.56rem;
		max-width: 100%;

		>span {
			font-size: 0.6rem;
			text-align: center;
			color: var(--black-200);
			white-space: nowrap;
		}

		>b {
			text-align: center;
			font-size: var(--item-value-font-size, 0.68rem);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.light-font{
			text-align: center;
            font-size: var(--item-value-font-size, 0.609rem);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
			>span {
				font-size: 0.6rem;
				text-align: center;
				color: var(--black-200);
				white-space: nowrap;
			}
		}
	}
}.engineering-dialog-component {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: calc(93vw - 48px);
  overflow: auto;
  max-height: 80vh;


  h2 {
    font-size: 0.8rem;
    color: var(--black-mid);
  }

  .search-bar-input {
    width: 45%;
  }

  hr {
    min-height: 1px;
    width: 100%;
    border: none;
    background-color: var(--grey-75);
  }

  >.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    >.title {
      display: flex;
      align-items: center;

      >.title-part {
        margin-left: 2rem;
        font-size: 0.7rem;

        b {
          font-size: 1em;
        }

        border-radius: 0.4rem;
        padding: 0.4rem 1rem;
        background-color: var(--white-100);
        display: flex;
        align-items: center;
        gap: 1rem;
      }
    }
  }

  >.dialog-content {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    overflow: auto;
    padding-right: 0.5rem;

  }

  .section {
    display: flex;
    flex-direction: column;

    >.section-header {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    >.section-content {
      margin-top: 0.5rem;

      .nlasuffix {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        span {
          font-size: 0.6rem;
        }

        /* i,
        span {
          color: var(--grey-100);
        } */
      }
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.6rem 0;
    gap: 0.4rem;

    .interchange-indicator {
      display: flex;
      align-items: center;
      gap: 0.4rem;

      >span {
        font-size: 0.7rem;
        white-space: nowrap;
        min-width: 4rem;
      }

      >div {

        display: grid;
        place-items: center;
        background-color: var(--black-mid);
        border-radius: 0.33rem;
        min-width: 1.56rem;
        aspect-ratio: 1;

        >i {
          font-size: 0.75rem;
          color: var(--white);
        }
      }
    }

    .list-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      >button {
        cursor: pointer;

        &.saveButton {
          border-radius: 0.28rem;
          min-height: 1.57rem;
          padding: 0 0.4rem;
          gap: 0.4rem;

          >span {
            font-size: 0.52rem;
          }

          >i {
            font-size: 0.7rem;
          }
        }
      }

      button.iconButton {
        cursor: pointer;
        background: transparent;
        border: none;
        color: var(--black-mid);

        >i {
          font-size: 0.9rem;
        }
      }

    }
  }
}.interchangeability-component{
  

}.interchangeability-list-component {

  &.disabled {
    .interchange-grid {
      * {
        opacity: 0.9;
        pointer-events: none
      }

      .drop-area {
        display: none !important;
      }
    }

    ;
  }

  margin-top: 0.5rem;
  background-color: var(--item-background-color);
  border: var(--item-border);
  border-radius: vaR(--item-border-radius);
  padding: 0 0.6rem 0rem 0.6rem !important;

  .on-drag {
    >.interchange-list-item {
      /* background-color: magenta !important; */
    }
  }

  b {
    font-size: 1em;
  }

  .counter {
    display: flex;
    align-items: center;
    font-size: 0.58rem;
    gap: 0.5rem;

    i {
      font-size: 1.3em;
    }

    .name {
      color: var(--black-200);
    }

    .count {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 1.1rem;
      min-width: 1.1rem;
      padding: 0 0.4rem;
      background-color: var(--black-mid);
      color: vaR(--white);
      border-radius: 0.3rem;
    }
  }

  .conditional-notes-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.4rem;
  }

  .hidden {
    display: none;
  }

  overflow: visible;

  .expandable-details {
    .item-component {
      background-color: var(--white) !important;
    }
  }

  details {
    summary {
      .item-component {
        background-color: transparent !important;
        border: none !important;
      }

      /* .item-component {
        &:first-child {
          background-color: transparent !important;
          border: none;
        }
  
        &:not(:first-child) {
          background-color: white;
        }
  
        /* border: none; */
      /* min-height: 1.47rem; */
    }

  }

  .interchange-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
    margin: 0.4rem 0 0.6rem 0;


    >.interchange-type {
      background-color: white;
      border-radius: var(--item-border-radius);
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 0.5rem;
      min-height: 5rem;

      >.interchange-part-list {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: 100%;
        max-height: 8rem;
        overflow: auto;

        >.placeholder {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 1rem;


          i {
            background-color: var(--white-100);
            color: var(--grey-200);
            font-size: 0.6rem;
            min-height: var(--input-height);
            border-radius: var(--input-radius);
            display: grid;
            width: max-content;
            padding: var(--input-padding);
            place-items: center;
            white-space: nowrap;

          }
        }

        .interchange-list-item {
          border-radius: var(--input-radius);
          background-color: var(--item-background-color);
          min-height: 1.7rem;
          /* display: flex; */
          align-items: center;
          display: grid;
          grid-template-columns: min-content auto min-content min-content min-content;
          /* justify-content: space-between; */
          padding: 0.3rem 0.3rem 0.3rem 0.7rem;
          gap: 0.5rem;
          font-size: 0.6rem;
          /* cursor: grab !important; */

          >.icons {
            display: flex;
            align-items: center;
            gap: 0.4rem;
          }

          &.inherited {
            background-color: var(--blue-500);
          }

          >b,
          >span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:active {
            cursor: pointer;
          }

          button {
            background: none;
            border: none;
            cursor: pointer;
          }

          i {
            font-size: 0.8rem;
            color: var(--grey-200)
          }

        }
      }

      >.drop-area {
        display: flex;
        border: dashed 1px #BABABA;
        align-items: center;
        justify-content: center;
        min-height: 1.6rem;
        color: #BABABA;
        width: 100%;

        >span {
          font-size: 0.6rem;
        }
      }

      >.interchange-header {
        display: grid;
        align-items: center;
        gap: 0.4rem;
        grid-template-columns: min-content min-content min-content auto;



        >span {
          white-space: nowrap;
          font-size: 0.6rem;
        }

        input {
          min-height: unset;
          height: 1.7rem !important;
          font-size: 0.6rem !important;

          &::placeholder {
            color: var(--black-mid);
          }
        }

        >i {
          background-color: var(--black-mid);
          color: white;
          font-size: 0.7rem;
          min-width: 1.2rem;
          min-height: 1.2rem;
          display: grid;
          place-items: center;
          border-radius: var(--input-radius);
        }
      }

    }
  }



  /* ç */
  .item-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: min-content;
    background-color: magenta;
    border: var(--item-border);
    border-radius: var(--item-border-radius);
    background-color: var(--item-background-color);
    display: var(--item-display);
    /* gap:             var(--item-gap);     */

    >.item-content {
      /* padding: 0 0.7rem 0.7rem 0.7rem; */
      display: flex;
      flex-direction: column;
      max-height: 0;
      opacity: 0;
      transition: var(--transition);
      visibility: hidden;

      &.open {
        opacity: 1;
        max-height: 100vh;
        visibility: visible;
      }

      >.content-header {
        padding: 0.7rem;
        display: grid;
        grid-template-columns: min-content min-content auto min-content auto;
        align-items: center;

        >button {
          min-width: 7.44rem;
          border: solid 1px var(--input-border) !important;
          background-color: var(--white);

          &:hover {
            background-color: var(--black-mid);
            color: var(--white);
          }

          &.checked {
            background-color: var(--black-mid);
            color: var(--white);
          }
        }

        gap: 0.44rem;
      }

      >.notes {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0 0.7rem 0.7rem 0.7rem;

        h2 {
          font-size: 0.6rem;
        }

        textarea {
          font-size: var(--input-font-size);
          border: solid 1px var(--input-border);
          border-radius: var(--input-radius);
          padding: 0.4rem var(--input-padding);
          resize: none;
          min-height: calc(1.7 * var(--input-height));
        }
      }
    }

    >.item-component {
      transition: var(--transition);

      .main-info {
        display: grid;
        grid-template-columns: 8rem 27rem;
        gap: 1rem;

        .property {
          justify-content: left;
        }
      }
    }

    &.open {
      >.item-component {
        transition: var(--transition);
        /* padding-top: 0.9rem ; */
      }

    }
  }

  .interchange-actions {
    display: flex;
    align-items: center;

    i {
      cursor: pointer;
      font-weight: normal;
      font-size: 0.9rem;
      color: var(--grey-200);
    }
  }
}.conditional-note-component {
    /* background-color: magenta; */
    display: flex;
    flex-direction: column;
    min-width: 20rem;
    font-size: 0.7rem;
    gap: 0.7rem;

    textarea {
        border-radius: var(--input-radius);
        width: 100%;
        border: var(--item-border);
        min-height: 5rem;
        padding: 0.7rem;
        font-size: 0.6rem;
    }

    .txt{
        display: flex;
        min-height: 5rem;
        color: var(--grey-200);
        padding: 0.7rem;
        background-color: var(--white-100);
        border-radius: var(--input-radius);
        font-size: var(--input-font-size);
    }

    .label{
        display: flex;
        align-items: center;
        gap: 0.4rem;
        i{
            font-size: 0.8rem;
            color: var(--grey-300);
        }
        b{
            font-size: 0.6rem;
        }
    }

    >.placeholder {
        display: flex;
        justify-content: center;
        align-items: center;

        i {
            background-color: var(--white-100);
            color: var(--grey-200);
            font-size: 0.7rem;
            min-height: var(--input-height);
            border-radius: var(--input-radius);
            display: grid;
            width: max-content;
            padding: var(--input-padding);
            place-items: center;
            white-space: nowrap;

        }
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
            gap: 0.4rem;

            i {
                min-width: 1.2rem;
                font-size: 0.7rem;
                aspect-ratio: 1;
                border-radius: 0.3rem;
                display: grid;
                place-items: center;
                background-color: var(--black-mid);
                color: var(--white);
            }
            >b{
                font-weight: normal;
                font-size: 0.7rem;
            }
        }
    }

    .part {
        font-size: 0.6rem;
        >b {
            font-size: 0.6rem;

        }


        border: solid 1px #50D999;
        background-color: #DFF5EB;
        border-radius: var(--input-radius);
        min-height: var(--input-height);
        display: grid;
        grid-template-columns: min-content 1fr 1fr min-content;
        gap: 0.5rem;
        /* display: flex; */
        align-items: center;
        /* justify-content: space-between; */
        padding: 0 0.6rem 0 0;
        >span{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        

    }

    >.button-container{
        display: flex;
        align-items: center;
        justify-content: center;
        >button{
            width: 6.7rem;
        }
    }
}.badge-component{
    position: relative;
    display: flex;
    >.badge{
        min-width: 0.3rem;
        /* background-color: magenta; */
        position: absolute;
        aspect-ratio: 1;
        bottom: 0;
        right: 0;
        display: flex;

        /* >svg{
            width: 100%;
            height: 100%;
        } */
    }

}

.parts-selector-component {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 20rem;
    /* max-width: 24rem; */
    overflow: auto;
    max-height: 70vh;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        

        .left {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            i {
                min-width: 1.2rem;
                font-size: 0.7rem;
                aspect-ratio: 1;
                border-radius: 0.3rem;
                display: grid;
                place-items: center;
                background-color: var(--black-mid);
                color: var(--white);
            }

            span{
                font-size: 0.7rem;
            }


        }

        .right{
            display: flex;
            align-items: center;
            gap: 0.5rem;

            button{
                &:disabled{
                    background-color: var(--grey-75) !important;
                    color: var(--grey-100);
                    border: none;
                    cursor: default;
                    &:hover{
                        box-shadow: unset;
                    }
                }
            }
            >button:first-child{
                >i::before{
                    color: var(--white);
                }
            }
        }
    }

    .content{
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        overflow: auto;
    }

    .notes{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        .label{
            display: flex;
            align-items: center;
            gap: 0.2rem;

            i{
                color: var(--grey-100);
                font-size: 0.8rem;
            }
            b{
                font-size: 0.6rem;
            }
        }
        textarea {
            font-size: 0.6rem;
            border-radius: var(--input-radius);
            width: 100%;
            border: solid 1px var(--input-border);
            min-height: 4rem;
            /* max-height: 5rem; */
            padding: 0.3rem 0.5rem;
        }

        
    }

    .list{
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        overflow: auto;
        padding: 0;

        &.hasMorePages{
            padding-bottom: calc(2*var(--input-height));
        }
        
        .part {
            cursor: pointer;
            font-size: 0.6rem;
            border-radius: var(--input-radius);
            min-height: var(--input-height);
            display: grid;
            grid-template-columns: min-content auto 10rem 4rem;
            align-items: center;
            padding: 0 0.6rem 0 0;
            border: var(--item-border);
            background-color: var(--item-background-color);
            /* display: flex; */
            transition: all 0.1s;

            >b {
                font-size: 0.6rem;
    
            }
    
    
            &.selected{

                border: solid 1px #50D999;
                background-color: #DFF5EB;
            }
           

            /* justify-content: space-between; */
            >.part-info{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-left: 1rem;
            }
            
    
        }
    }
}.interchangeability-summary-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 36rem;
    max-height: 32rem;
    overflow: auto;

    >b {
        font-size: 0.68rem;
    }

    .relation-boxes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-size: 0.6rem;
        gap: 0.4rem 0.6rem;
        overflow: auto;

        width: 100%;

        b {
            font-size: 0.6rem;
        }

        .box {
            border-radius: var(--item-border-radius);
            border: solid 1px var(--grey-25);
            background-color: var(--white-100);
            padding: 0.84rem;
            display: flex;
            flex-direction: column;
            gap: 0.44rem;
            overflow: auto;

            .box-content {
                display: flex;
                flex-direction: column;
                gap: 0.68rem;
                overflow: auto;

                .placeholder{
                    color: var(--grey-100);
                    width: 100%;
                    display: flex;
                    align-items: center;
                    /* justify-content: center; */
                }
            }
        }

        .box-header {
            display: flex;
            align-items: center;
            gap: 0.44rem;



            
            i {
                &.delete::before{

                    color: var(--red-300);
                }
                font-size: 0.76rem;
                &::before {
                    color: var(--black-mid);
                }
            }
            .delete{
                color: var(--red-300);
            }
        }

    }

    .buttons{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;

        button{
            min-width: 11rem;
        }
    }


}.expandable-component {

  &.stickysummary{
    >details{
      &[open]{
        position: sticky;
        top: 0;
        z-index: 4;
      }
    }

  }

  >details {
    >summary {
      cursor: pointer;
      >.summary-content{
        outline: solid 2px magenta;
        *{
          pointer-events: none;
        }
      }

      &::marker {
        content: "";
      }

      &:focus-visible {
        outline: none;
        >*:first-child {
          border: solid 1px var(--black-mid) !important;
        }

      }
    }

    
    &[open]+div.expandable-details {
      max-height: 1000vh;
      opacity: 1;
      transition: all 1s;
    }

    &+div.expandable-details {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: all 0.5s;
    }
  }
}.delete-part-dialog-component{
  /* background-color: magenta; */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2px 0;
  position: relative;

  /* width: 20rem; */
  /* height: min-content; */
  /* aspect-ratio: 1.9; */
  >.header{
    span{
    font-size: 0.75rem;
    }
    button{
      position: relative;
      top: -12px;
      right: -12px;
    }
  }

  .properties-card-component{
    .property{
      gap: 2rem;
      >b{
        max-width: 15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* color: magenta; */
      }
    }
  }

  >.buttons{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    button{
      min-width: 6rem;
    }
  }

  .MuiDialogContent-root{
    padding: 0  !important;
  }
}.kits-component {
    /* padding-bottom: 3rem; */

    /* --item-template: auto */


    b {
        /* font-size: 1em; */
    }


    .property{
        b{
            font-size: 0.6rem;
        }
    }

    --item-padding: 0.48rem 0.48rem 0.48rem 1rem;
    /* --list-item-display: grid; */
    /* --list-item-template: auto auto 6rem 7rem 6rem 11.43rem; */

    .sorting-component{
        .columns{
            display: grid;
            grid-template-columns: 1fr 1fr 7rem 8rem 5rem 11.43rem;
            gap: 1.2rem;
        }
    }


    .item-component {
        .left-info {
            width: 100%;

            .main-info {
                width: 100%;
            }
        }
    }

    >.placeholder {
        display: flex;
        justify-content: center;
        align-items: center;

        i {
            background-color: var(--white-100);
            color: var(--grey-200);
            font-size: 0.7rem;
            min-height: var(--input-height);
            border-radius: var(--input-radius);
            display: grid;
            width: max-content;
            padding: var(--input-padding);
            place-items: center;
            white-space: nowrap;

        }
    }

    .section-content {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-height: calc(7 * var(--item-min-height));
        /* max-height:calc(6 * var(--item-min-height)); */
        /* overflow: auto; */
        padding-bottom: 3rem;
    }

    .kit-content {
        display: grid;
        grid-template-columns: auto 7rem 8rem 5rem 11.43rem;
        align-items: center;
        gap: 1.2rem;
        font-size: 0.6rem;

        width: 100%;



        .property {
            >span {
                color: var(--black-200);
                font-size: 0.6rem;
                white-space: nowrap;
            }

             b {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                /* min-width: 4ch; */
                &.units{
                    min-width: 3ch;
                }
            }

            display: flex;
            align-items: center;
            gap: 0.2rem;

            &.has-sub-prop {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.2rem;
            }
        }

        /* .count {
            font-size: 0.5rem;
            background-color: var(--black-mid);
            color: var(--white);
            display: grid;
            place-items: center;
            min-height: 1rem;
            padding: 0 0.5rem;
            border-radius: 1rem;

        } */
    }

    .sorting-container{
        &.hidden {
            display:  none;
        }
    }

}

.kitssuffix {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    justify-content: right;

    min-width: 11.43rem;

    span {
        font-size: 0.6rem;
    }

    >i,
    >span {
        color: var(--grey-150);
        font-size: 0.9rem;

    }

    .dialog-trigger-component {
        display: flex;
        align-items: center;
        >i {
            font-size: 0.9rem;
            color: var(--grey-150);

        }
    }
}.sorting-component {
  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);
  /* display: flex; */
  /* align-items: center; */
  /* padding: var(--item-padding); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--item-padding);
  position: relative;
  /* padding-top: 0; */
  /* padding-bottom: 0; */
  /* position: sticky;
    top: 0; */
}
.sorting-component > button {
  position: absolute;
  right: 0;
}
.sorting-component .columns {
  display: var(--list-item-display, flex);
  grid-template-columns: var(--list-item-template, unset);
  align-items: center;
  gap: var(--list-item-gap, 1.72rem);
  justify-items: var(--list-item-justify, left);
  padding: var(--list-item-padding, 0);
  width: 100%;
}
.sorting-component .columns .column-direction {
  flex-direction: column;
  text-align: center;
}
.sorting-component .columns .column-direction b {
  font-size: 0.6rem;
}
.sorting-component .columns > .column {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sorting-component .columns > .column > .arrows {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sorting-component .columns > .column b {
  cursor: pointer;
}
.sorting-component b {
  font-size: 0.62rem;
}
.sorting-component .arrow-button {
  cursor: pointer;
  display: grid;
  place-items: center;
  min-width: 0.96rem;
  aspect-ratio: 1;
  font-size: var(--icon-font-size);
  background-color: var(--item-background-color);
  border-radius: 0.2rem;
  color: var(--icon-default-color);
  position: relative;
}
.sorting-component .arrow-button.active {
  background-color: var(--black-mid);
  color: var(--white);
}
.sorting-component .arrow-button > u {
  text-decoration: none;
  position: absolute;
  aspect-ratio: 1;
  width: 0.7rem;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  left: 0.6rem;
  top: -0.4rem;
  color: #ffffff;
  background-color: #fe5757;
  border-radius: -12rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sorting-menu {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 1rem 1rem;
  gap: 0.5rem;
  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);
}
.sorting-menu .arrow-button {
  cursor: pointer;
  display: grid;
  place-items: center;
  min-width: 0.96rem;
  aspect-ratio: 1;
  font-size: var(--icon-font-size);
  background-color: var(--item-background-color);
  border-radius: 0.2rem;
  color: var(--icon-default-color);
}
.sorting-menu .arrow-button.active {
  background-color: var(--black-mid);
  color: var(--white);
  font-weight: 100;
}
.sorting-menu .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.sorting-menu .header .left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sorting-menu .header .left .sub-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sorting-menu .header .left span {
  font-size: 0.6rem;
}
.sorting-menu .header .left b {
  font-size: 0.9rem;
}
.sorting-menu .header .right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sorting-menu .dnd-activity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.64rem;
  row-gap: 0.3rem;
}
.sorting-menu .dnd-activity > span {
  font-size: 0.63rem;
  margin-left: 0.4rem;
}
.sorting-menu .dnd-activity .dnd-items {
  min-height: var(--input-height);
  min-width: 11rem;
  background-color: var(--item-background-color);
  border-radius: calc(var(--input-radius) + 0.2rem);
  padding: 0.2rem;
  border: var(--item-border);
  display: flex;
  flex-direction: column;
  /* gap: 0.2rem; */
}
.sorting-menu .dnd-activity .dnd-items .spacer {
  min-height: 0.2rem;
  width: 100%;
  background-color: transparent;
  border-radius: var(--input-radius);
  transition: all 0.4s;
}
.sorting-menu .dnd-activity .dnd-items .spacer.dragover {
  margin: 0.2rem 0;
  background-color: var(--grey-75) !important;
  min-height: var(--input-height);
}
.sorting-menu .dnd-activity .dnd-items .items-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sorting-component-dnd-item {
  font-size: 0.6rem;
  border: var(--item-border);
  min-height: 1.6rem;
  border-radius: var(--input-radius);
  background-color: var(--white);
  padding: 0 0.4rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
}
.sorting-component-dnd-item i {
  cursor: pointer;
  color: var(--icon-default-color);
  font-size: var(--icon-font-size);
}
.sorting-component-dnd-item .item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sorting-component-dnd-item .item-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.align-left {
  text-align: left;
  width: 100%;
  justify-content: flex-start;
}

.align-center {
  width: 100%;
  justify-content: center;
}

.align-right {
  width: 100%;
  justify-content: flex-end;
}.nla-item-component {
    /* background-color: blue; */
    display: grid;
    grid-template-columns: auto min-content;
    gap: 1rem;
    background-color: var(--item-background-color);
    border: var(--item-border);
    border-radius: var(--item-border-radius);
    padding: 0 0.5rem 0 0.93rem;
    height: var(--item-min-height);

    .properties {
        display: flex;
        align-items: center;
        /* gap: 1.2rem; */

        .dot {
            min-width: 0.4rem;
            aspect-ratio: 1;
            /* background-color: magenta; */
            border-radius: 2rem;
            z-index: 2;
        }

        font-size: 0.62rem;

        b {
            font-size: 0.62rem;
        }

        .prop {
            margin-left: 0.8rem;

            &:not(:nth-child(2)) {
                margin-left: 1.2rem;

            }
            .dropdown-contianer{
                min-width: 13rem;
            }

            &.qty{
                input{
                    max-width: 3rem;
                    min-width: 3rem;
                }
            }

            &.nla{
                width: 100%;
            }

            .check-container{
                width: min-content;
                *{
                    white-space: nowrap;
                }
            }
            display: flex;
            align-items: center;
            gap: 0.5rem;

            >span {
                color: var(--grey-200);
                white-space: nowrap;
                font-size: 0.6rem;
            }
            

            >b{
                white-space: nowrap;
            }
            .square{
                color: white;
                background-color: gainsboro;
                border-radius: 0.3rem;
                padding: 0 0.3rem;
                display: grid;
                place-items: center;
            }
        }

    }

    .actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        >i {
            color: var(--grey-200);
            font-size: 0.85rem;

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

        >button {
            display: flex;
            align-items: center;
            color: var(--grey-200);
            gap: 0.3rem;
            font-size: 0.7rem;

            >span {
                font-size: 0.6rem;
                display: flex;
                align-items: center;
                white-space: nowrap;
            }

            >i {
                font-size: 0.85rem;

            }
        }

        /* white-space: nowrap; */
    }
}.nla-positions-component {
    min-width: 30rem;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    padding: 0.7rem;
    gap: 0.7rem;
    overflow: auto;

    .nla-positions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.68rem;

        b {
            font-size: 0.68rem;
        }

        span {
            color: var(--grey-200);
        }

        .left {
            padding-left: 0.5rem;
        }

        >div {
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }
    }

    .nla-positions-list {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        font-size: 0.6rem;
        overflow: scroll;

        .nla-pos-item {
            background-color: var(--item-background-color);
            border: var(--item-border);
            display: grid;
            grid-template-columns: 3.3rem auto;
            align-items: center;
            gap: 1rem;
            border-radius: var(--item-border-radius);
            padding: 0.3rem 0.3rem 0.3rem 0.7rem;

            .input-container {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                width: 100%;

                input {
                    min-height: 1.56rem;
                }
            }

            span {
                color: var(--grey-200);
                white-space: nowrap;
            }


            b{
                font-size: 0.6rem;
                min-height: var(--input-height);
                display: flex;
                align-items: center;
            }
        }
    }
}.line-test-container {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  
.line-test-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  .line-child {
    background-color: #7d7d7d;
    width: 0.041rem;
    border-radius: 2px;
    height: 0.31rem;
  }
}
.line-extra-child {
  position: absolute;
  bottom: -0.3rem;
  border-radius: 2px;
  background-color: #7d7d7d;
  width: 0.3rem;
  height: 0.041rem;
  z-index: 2;
}

}
.nla-component {
    position: relative;
    /* background-color: magenta; */
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 1rem;

    .spacer{
        min-height: 2rem;
    }

    >.placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        i {
            background-color: var(--white-100);
            color: var(--grey-200);
            font-size: 0.7rem;
            min-height: var(--input-height);
            border-radius: var(--input-radius);
            display: grid;
            width: max-content;
            padding: var(--input-padding);
            place-items: center;
            white-space: nowrap;

        }
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.4rem;
    }
}.time-controls-component {
  display: flex;
  flex-direction: column;

  b {
    font-size: 1em;
  }

  .checkbox-field-component {
    width: min-content;
    white-space: nowrap;
  }

  .item-component {
    /* background-color: transparent; */
    --item-border: none;
    padding-left: 1rem;
    /* min-height: 1.47rem; */
  }


  .list {
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;

    .skeleton-container{
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    >i{
      background-color: var(--white-100);
      color: var(--grey-200);
      font-size: 0.7rem;
      min-height: var(--input-height);
      border-radius: var(--input-radius);
      display: grid;
      width: 30%;
      padding: var(--input-padding);
      place-items: center;
      white-space: nowrap;

    }

    .override {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.65rem;
      /* width: 100%; */
    }

    .control-tag {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      span {
        font-weight: normal;
      }
    }

    .list-actions {
      display: flex;
      /* grid-template-columns: auto min-content min-content min-content; */
      /* width: 100%; */
      align-items: center;

      &.override-actions {
        width: min-content;
      }

    }

  }

  .item-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: min-content;
    border: var(--item-border);
    border-radius: var(--item-border-radius);
    background-color: var(--item-background-color);
    display: var(--item-display);
    --item-value-font-size: 0.6rem;
    --item-padding: 0.6rem 0.6rem 0.6rem 1rem;
    /* gap:             var(--item-gap);     */

    .item-row-content {
      display: flex;
      align-items: center;
      /* justify-content: center; */
      gap: 0.56rem;
      font-size: 0.6rem;

      span.label {
        color: var(--black-200);
      }



    }


    >.item-content {
      /* padding: 0 0.7rem 0.7rem 0.7rem; */
      display: flex;
      flex-direction: column;
      max-height: 0;
      opacity: 0;
      transition: var(--transition);

      >.content-n-overrides {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;

        >.overrides {
          display: flex;
          flex-direction: column;
          gap: 0.8rem;

          >.overrides-header {
            display: flex;
            align-items: center;
            gap: 0.8rem;

            b {
              font-size: 0.68rem;
            }

          }

          >.overrides-list {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;

          }

          .override-item {
            background-color: white;
            border: var(--item-border);
            border-radius: var(--item-border-radius);

            .override-row {
              min-height: var(--item-min-height);
              padding: var(--item-padding);
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;

              .ribbon {
                background-color: var(--blue-300);
              }

              >.type {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                >.count {
                  font-size: 0.5rem;
                  background-color: var(--black-mid);
                  color: var(--white);
                  display: grid;
                  place-items: center;
                  min-height: 1rem;
                  padding: 0 0.5rem;
                  border-radius: 1rem;

                }



                >i {
                  font-size: 0.9rem;
                  color: var(--grey-100);
                  cursor: pointer;
                }
              }
            }

            font-size: 0.6rem;



            >.override-container {

              max-height: 0;
              transition: all .3ms;
              opacity: 0;
              visibility: hidden;

              &.open {
                max-height: 100vh;
                transition: all .3ms;
                opacity: 1;
                visibility: visible;
              }


              >.override-content {
                display: flex;
                align-items: center;
                gap: 0.8rem;
                padding: 0.5rem 1rem;

              }

              >.specific {
                display: flex;
                flex-direction: column;
                padding: var(--item-padding);
                gap: 1rem;

                input {
                  min-height: var(--input-height);
                  /* max-width: 2.48rem; */
                  border-radius: var(--input-radius);

                  &:not(:disabled) {
                    border: solid 1px var(--input-border);
                  }
                }

                >.criteria-grid {
                  display: grid;
                  grid-template-columns: repeat(5, 1fr);
                  gap: 1rem;
                }

                >.schedule {
                  display: flex;
                  align-items: center;
                  gap: 0.7rem;

                  input {
                    max-height: 1.7rem;
                    max-width: 4rem;
                    padding: var(--input-padding);
                    border: solid 1px var(--input-border);
                    border-radius: var(--input-radius);

                    &:disabled {
                      border: none;
                    }
                  }
                }
              }
            }
          }

        }
      }

      &.open {
        opacity: 1;
        max-height: 100vh;
      }

      >div {
        padding: 0 0.7rem 0.7rem 1rem;

        >.content-grid {
          display: flex;
          /* display: grid; */
          /* grid-template-columns: 11.8rem auto; */
          align-items: center;
          gap: 1rem;
          background-color: var(--white);
          padding: 1.1rem;
          border: var(--item-border);
          border-radius: var(--item-border-radius);

          >*:first-child {
            max-width: 11.84rem;
            /* outline: solid 2px red; */
          }

          >.schedule {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.6rem;


            h3 {
              font-weight: bold;
              color: var(--black-200);
              font-size: 0.6rem;
            }
          }

          >.schedule-inputs {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.6rem;

            input {
              min-height: 1.72rem;
              max-width: 3.4rem;
              border: solid 1px var(--input-border);
              border-radius: var(--input-radius);
            }
          }
        }
      }
    }
  }

}.time-control-component {
    background-color: var(--item-background-color);
    border-radius: var(--item-border-radius);
    border: var(--item-border);
    width: 100%;

    .item-schedule {
        /* background-color: magenta; */
        min-width: 100px;
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 0.7rem;

        span {
            font-size: 0.6rem;
            color: var(--black-200);
        }

        b {
            font-size: 0.65rem;
        }
    }

    .left-info{
        width: 100%;

        .main-info{
            width: 100%;
        }

        
    }

    .item-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        justify-content: flex-end;

        i.actionbutton {
            color: var(--grey-100);
            font-size: 0.9rem;
            display: flex;
        }
    }

    .control-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
        padding-bottom: 0.5rem;
        font-size: 0.6rem;

        

        .edit-mode {
            input:not([class*="Mui"]) {
                max-width: 3.4rem;
                position: relative;
                left: -0.2rem;
                /* min-height: ; */
            }
            .header {
                display: grid;
                grid-template-columns: 13rem min-content min-content max-content max-content;
                align-items: center;
                gap: 1rem;
            }
            display: flex;
            background-color: white;
            padding: 1.3rem 1rem;
            border: var(--item-border);
            border-radius: var(--item-border-radius);
            gap: 1rem;
            display: flex;
            flex-direction: column;

            b {
                color: var(--grey-400);
                &.row-header{
                    font-size: 0.7rem !important;
                    margin-right: 0.6rem;
                }
            }

            

        }
    }
}.override-item-component {
    border: var(--item-border);
    background-color: var(--white);
    border-radius: var(--item-border-radius);

    --item-background-color: var(--white);
    /* --item-border: solid 1px var(--grey-50) !important; */


    .selected-type {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;

        span {
            color: var(--black-200);
        }

        .type-items {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;

            .type-item {
                display: flex;
                gap: 0.4rem;
                align-items: center;

                .count {
                    background-color: var(--black-mid);
                    color: white;
                    padding: 0 0.4rem;
                    min-height: 1rem;
                    display: grid;
                    place-items: center;
                    border-radius: 1rem;
                    font-size: 0.9em;

                }
            }
        }
    }

    .override-suffix {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
        justify-content: flex-end;

        .schedule {
            display: flex;
            align-items: center;
            gap: 0.5rem;


            span {
                color: var(--black-200);
                white-space: nowrap;
            }
        }

        .override-actions {
            display: flex;
            align-items: center;

            gap: 0.5rem;

            >button{
                display: flex;
            }

            i.actionbutton {
                font-size: 0.9rem;
                color: var(--grey-100);
            }
        }

    }

    .override-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem 0.5rem 1rem;

        .inputs-container {
            /* padding: 0 1rem; */
            margin-top: 1rem;
            display: grid;
            align-items: center;
            gap: 0.5rem;
            grid-template-columns: max-content max-content max-content repeat(5, 1fr);


            input:not([class*="Mui"]) {
                max-width: 3.4rem;
                position: relative;
                left: -0.2rem;
                /* min-height: ; */
            }

            .input-component{
                input:not(.qty){
                    max-width: unset !important;
                    left: 0;
                }
            }
        }

        .schedule {
            padding: 0.5rem 1rem 1rem 1rem;
            display: flex;
            gap: 1rem;
            align-items: center;
            width: min-content;

            input {
                min-height: 1.7rem;
                max-height: 1.7rem;
                max-width: 4rem;
                min-width: 4rem;
            }

            >span {
                color: var(--black-200);
                white-space: nowrap;
            }
        }


    }
}.date-component {
  font-size: var(--input-font-size);
  position: relative;

  /* --label-active-top: -0.7em; */
  --label-active-translate: -2rem;
  --label-active-font: var(--input-active-label-font-size);
  --custom-input-padding: var(--input-padding);

  >* {
    transition: all 0.3s;
  }

  .icon-date {
    font-size: 1rem;
    color: var(--black-mid);
  }

  .MuiStack-root>.MuiTextField-root {
    /* min-width: 189px; */
    min-width: 149px;
  }

  label {
    color: var(--input-color);
    position: absolute;
    left: var(--custom-input-padding);
    font-size: var(--input-font-size);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;

    &.fixed {
      transform: translateY(var(--label-active-translate));
      font-size: var(--label-active-font);

      &.centered {
        left: 50%;
        transform: translateX(-50%) translateY(var(--label-active-translate));
      }
    }
  }


  .MuiIconButton-root.Mui-disabled {
    background-color: transparent;
    color: var(--grey-500);
  }

  .MuiOutlinedInput-root.Mui-disabled {
    pointer-events: none;
    color: var(--grey-500);
    background-color: var(--disabled-input-bg);
    border: none;

    &~label {
      color: var(--grey-500) !important;
    }
  }

  .MuiInputLabel-root.Mui-focused {
    color: var(--input-color);
  }

  .MuiFormLabel-filled,
  .MuiInputLabel-shrink {
    transform: translateY(var(--label-active-translate));
    font-size: var(--label-active-font);
  }

  .MuiOutlinedInput-input {
    padding-left: 0;
    color: var(--input-color);
  }

  .MuiOutlinedInput-notchedOutline {
    border: none;
  }

  .MuiOutlinedInput-root {
    font-size: var(--input-font-size);
    min-height: var(--input-height);
    max-height: var(--input-height);
    border: solid 1px var(--input-border);
    border-radius: var(--input-radius);
    padding: 0 var(--custom-input-padding);
    background-color: #fff;
  }

  .MuiStack-root {
    overflow: unset;
    padding: 0;
  }

  .MuiInputLabel-root.Mui-disabled {
    color: var(--grey-500);
  }

  .MuiOutlinedInput-input.Mui-disabled {
    color: var(--grey-500);
    -webkit-text-fill-color: var(--grey-500);
  }
}

.MuiDateCalendar-root {
  .MuiPickersCalendarHeader-label {
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .MuiPickersYear-yearButton {
    font-size: 0.8rem;
  }

  .MuiPickersDay-dayWithMargin {
    font-size: var(--p-size) !important;

    font-family: "Poppins", sans-serif;
  }

  .MuiDayCalendar-weekDayLabel {
    font-size: 0.68rem !important;
    font-family: "Poppins", sans-serif;
  }

  .MuiPickersYear-yearButton {
    font-size: 0.7rem !important;
    font-family: "Poppins", sans-serif;
  }

  .Mui-selected {
    background-color: var(--green-250) !important;
  }
}

.MuiPaper-root {
  .MuiList-root {
    .MuiMultiSectionDigitalClockSection-item {
      font-size: 0.8rem !important;
    }
  }
}.threshinterval-component {
  display: grid;
  /* grid-template-columns: repeat(14, max-content) auto min-content; */
  gap: 0.5rem;
  align-items: center;

  b,
  span {
    &:not([class*="icon"]) {

      font-size: 0.6rem;
    }
  }

  .MuiTextField-root {

    min-width: unset;
    /* width: min-content !important; */
  }

  input:not([class*="Mui"]) {
    max-width: 3.4rem;
    position: relative;
    left: -0.2rem;
    /* min-height: ; */
  }

  hr {
    grid-column: span 16;
    border: none;
    background-color: var(--grey-50);
    min-height: 1px;

  }


}.specific-overrides-component {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;

    .main-info {
        width: unset !important;
    }

    >.spec-override-header {
        font-size: 0.68rem;
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0.5rem;
    }

    >.spec-overrides-list {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
}.radio-group-cont {
  width: 100%;
}
.radio-group-component {
  gap: 0.5rem;
  flex-wrap: nowrap !important;
  width: 100%;
  .Mui-checked {
    color: var(--green-300) !important;
  }
  .MuiFormControlLabel-label {
    font-family: "Poppins", sans-serif;
    font-size: 0.713rem;
    color: var(--black-mid);
    margin-left: 0.2rem;
    white-space: nowrap;
  }
  .MuiRadio-root {
    padding: 0;
    margin-right: 0.3rem;
  }
  .MuiSvgIcon-fontSizeMedium {
    font-size: 1rem;
  }
  .custom-render-radio {
    min-height: var(--item-min-height);
    position: relative;
    background-color: var(--item-background-color);
    border: var(--item-border);
    border-radius: var(--item-border-radius);
    width: 100%;
    display: flex;
    padding: 0 1rem;
    &.isActive {
      border: 1px solid var(--green-300);
      background-color: #dff5eb;
    }
  }
}
.MuiTouchRipple-root {
  display: none !important;
}
.MuiRadio-root {
  background-color: transparent !important;
  &:hover {
    background-color: transparent !important;
  }
}
.outlineStyle {
  label {
    border: 1px solid var(--grey-25);
    background-color: #fafafa;
    border-radius: 10px;
    height: 2rem;
    padding: 0 0.5rem;
    margin: 0;
    width: 100%;
    &.isActive {
      border: 1px solid var(--green-300);
      background-color: #dff5eb;
    }
  }
}
.icon-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  p {
    font-size: 0.713rem;
  }
}
.effectivity-component {
    .effectivity-content {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .checkbox-component {
        display: flex;
    }

    .item-element {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--item-background-color);
        border: var(--item-border);
        height: var(--item-min-height);
        border-radius: var(--item-border-radius);
        padding: var(--item-padding);

        /* margin-top: 1rem; */

        span {
            font-size: 0.6rem;

        }

        b {
            font-size: 0.6rem;
        }

        .right,
        .left {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            span {
                font-size: 0.58rem;
            }

            >i {
                color: var(--grey-250);
            }

            .icon-delete-new{
                font-size: 0.9rem;
                display: flex;
            }
        }
    }

    .expandable-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 1rem;
        margin-top: 1.5rem;

        .selection {
            display: grid;
            grid-template-columns: 20rem auto;
            align-items: center;
            gap: 0.5rem;

            [class*="MuiTypography"] {
                font-size: 0.6rem;
                font-weight: bold;

            }
        }

        .right-h {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .input-component {
                /* max-width: 30%; */
            }

            b {
                font-size: 0.6rem;
                white-space: nowrap;
            }

            i {
                background-color: white;
                display: grid;
                place-items: center;
                height: 1.5rem;
                aspect-ratio: 1;
                font-size: 0.8rem;
                color: var(--grey-250);
                border-radius: 0.2rem;

                &.rotated {
                    transform: rotate(90deg);
                }

                &.active {
                    background-color: var(--black-mid);
                    color: white;

                    &::before {
                        color: white;
                    }
                }

            }

            .all-selectors {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                min-width: 50%;
                gap: 0.5rem;

                button{
                    border-color: var(--grey-250) !important;
                    b{
                        /* color: var(--grey-250); */
                        font-size: 0.56rem;
                    }
                    &:hover{
                        b{
                            color: var(--white);
                        }
                    }

                    &.selectall{
                    background-color: var(--green-250);
                    border: solid 1px var(--green) !important;
                     b{
                        color: var(--white);
                     }
                    }

                    &.deselectall{
                        background-color: var(--black-mid);
                        b{
                            color: var(--white);
                        }
                    }
                }

                >div {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;

                    b {
                    }
                }

            }
        }

        .ranges-selector {

            display: grid;
            grid-template-columns: 20rem auto;
            gap: 0.5rem;

            .left-range-s {
                display: flex;
                flex-direction: column;
                gap: 0.9rem;
                padding: 1.5rem 1rem;
                border-radius: var(--item-border-radius);
                background-color: var(--item-background-color);

                b {
                    font-size: 0.6rem;
                }


                .range-list {

                    b,
                    span {
                        font-size: 0.54rem;
                    }

                    display: flex;
                    flex-direction: column;
                    gap: 0.2rem;

                    .range {
                        display: grid;
                        grid-template-columns: 3rem auto 1.5rem;
                        align-items: center;
                        gap: 0.5rem;
                        background-color: white;
                        border: var(--item-border);
                        border-radius: var(--input-radius);
                        min-height: calc(1.3 * var(--input-height));
                        padding: 0.3rem var(--item-padding);


                        i {
                            display: flex;
                            justify-content: flex-end;
                        }

                        >div {
                            display: flex;
                            flex-direction: column;
                            gap: 0.2rem;
                            align-items: flex-end;
                            /* justify-content: ; */
                            position: relative;

                            >span{
                                color: var(--orange);
                                font-size: 0.5rem;
                            }

                            >div {
                                display: grid;
                                align-items: center;
                                grid-template-columns: min-content auto min-content auto;
                                gap: 0.4rem;

                                &.error{
                                    input{
                                        border: solid 1px var(--orange);
                                    }
                                }

                                .input-component {
                                    position: relative;
                                    right: 0.1rem;

                                    input {
                                        min-height: calc(0.8 * var(--input-height));
                                    }
                                }
                            }
                        }



                    }
                }

            }

            .right-range-s {
                display: flex;
                flex-direction: column;
                gap: 0.9rem;
                padding: 1rem 1rem;
                border-radius: var(--item-border-radius);
                background-color: var(--item-background-color);

                b {
                    font-size: 0.6rem;
                }





            }
        }

        .array-container {
            background-color: white;
            border: var(--item-border);
            border-radius: var(--input-radius);
            padding: 0.5rem;
            height: 100%;
            min-height: 7rem;
        }

        .array {
            
            /* FIXME: auto calculate columns */
            display: grid;
            /* grid-template-columns: repeat(7, 1fr); */
            /* gap: 0.2rem 0.5rem; */
            position: relative;

            .placeholder-component {
                position: absolute;
                top: 1rem;
                left: 50%;
                transform: translateX(-50%);
            }

            .array-item {
                border: solid 1px var(--grey-75);
                display: flex;
                align-items: center;
                border-radius: 0.3rem;

                padding: 0.3rem 0.5rem;
                gap: 0.2rem;

                i {
                    font-size: 0.9rem;
                    color: transparent;

                }

                span {
                    font-size: 0.6rem;
                }

                &.active {
                    background-color: #E3F9EF;

                    i {
                        color: #50D999;
                    }

                }
            }
        }

        .manual-selector {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            padding: 1rem 1rem;
            border-radius: var(--item-border-radius);
            background-color: var(--item-background-color);

            .array-item {
                cursor: pointer;
            }
        }
    }

}.finance-form-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.6rem;

  >.section-header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    
    >.title-container{
      display: flex;
      align-items: center;

      >b{
        font-size: 0.8rem;
            color: var(--black-mid);
      }
    }
  }

  
}


.finance-form-component {
  padding-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.2rem;
  row-gap: 1.27rem;

  .general-info-ata {
    display: flex;
    align-items: center;
    gap: 1.2rem;

    >b{
      font-size: 0.8rem;
    }

    >div {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 0.68rem;
      width: 100%;
    }

  }

  
  .gl-accounts{
    grid-column: span 2;
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;
    gap: 1.27rem 1.1rem;

    .title{
      grid-column:  span 2;
    }

    .input-label{
      font-size: 0.6rem;
      white-space: nowrap;
      font-weight: bold;

    }
  }
  
  .icon-checkbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    >.icon-coloredwarning{
      font-size: 1.2rem;
    }
  }

  .checkboxes{
    display: grid;
    grid-column: span 2;
    gap: 0.72rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* >*:nth-child(3) {
    grid-column: span 2;
  }
  >*:nth-child(4) {
    grid-column: span 2;
  } */





  /* .checkbox-field {
    box-shadow: 0px 2px 4px #00000029;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    gap: 8px;
    background: var(--white);

    >.left-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

  } */

  .select {
    >div {
      /* width: 100% !important; */
    }
    >svg{
      /* right: 7px; */
    }
  }

  .select-container{
    min-height: 40px;
  }
}

.custom-select-option {
  min-height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  min-width: 100px;
  font-size: 12px;

  &:hover {
    background-color: var(--grey-75);
  }
}.section-placeholder-compoennt{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
    height: 100%;

    b{
      font-size: 0.8rem;
    }
    >i{
      font-style:normal;
      font-size: 0.7rem;
      color: var(--grey-100);
      a{
        padding: 0 0.3em;
        color: var(--blue-300);
        cursor:  pointer;
        text-decoration: underline;
      }
    }
  }
.general-section-form-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.6rem;

  >.section-header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    
    >.title-container{
      display: flex;
      align-items: center;

      >b{
        font-size: 0.8rem;
            color: var(--black-mid);
      }
    }
  }

  
}

.stores-aditional{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stores-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.2rem 1rem;

  .subtitle{
    grid-column: span 2;
    font-size: 0.6rem;
    font-weight: 600;
  }

  .dimensions-grid{
    display: grid;
    grid-template-columns: auto min-content auto min-content auto;
    align-items: center;
    gap: 0.5rem;
    i {
      font-size: 0.5rem;
    }
  }

  

  .bin-control{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;

    b{
      white-space: nowrap;
    }
  }

  .schedule{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0.4rem;
  }
}


.stores-form {
  padding-top: 4px;
  display: grid;
  grid-template-columns: 1fr min-content 1fr min-content 1fr 1fr;
  column-gap: 0.6rem;
  row-gap: 1.27rem;
  align-items: center;

  b{
    font-size: 0.6rem;
    white-space: nowrap;
  }

  i{
    /* color: black; */
    font-size: 0.5rem;
  }

  .general-info-ata {
    display: flex;
    align-items: center;
    gap: 1.2rem;

    >b{
      font-size: 0.8rem;
    }

    >div {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 0.68rem;
      width: 100%;
    }

  }
  
  .icon-checkbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    >.icon-coloredwarning{
      font-size: 1.2rem;
    }
  }

  .checkboxes{
    display: grid;
    grid-column: span 2;
    gap: 0.72rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* >*:nth-child(3) {
    grid-column: span 2;
  }
  >*:nth-child(4) {
    grid-column: span 2;
  } */





  /* .checkbox-field {
    box-shadow: 0px 2px 4px #00000029;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    gap: 8px;
    background: var(--white);

    >.left-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

  } */

  .select {
    >div {
      /* width: 100% !important; */
    }
    >svg{
      /* right: 7px; */
    }
  }

  .select-container{
    min-height: 40px;
  }
}

.custom-select-option {
  min-height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  min-width: 100px;
  font-size: 12px;

  &:hover {
    background-color: var(--grey-75);
  }
}.general-info-component {
    /* background-color: magenta; */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
    }

    .form {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 1.2rem;
        row-gap: 1.27rem;

        padding-top: 1rem;

        .checkboxes-container {
            grid-column: span 6;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 1.2rem;
            row-gap: 0.7rem;

        }

        .checkbox-container {
            /* grid-column: span 2; */

            .icon-coloredwarning {
                font-size: 1.1rem;
            }

            .icon-checkbox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
            }
        }

        .ata {
            display: grid;
            grid-template-columns: min-content auto auto auto;
            gap: 0.5rem;
            align-items: center;
        }

        .toollifecontainer {
            /* min-width: 0; */
            width: 0;
            opacity: 0;
            max-width: 33%;

            pointer-events: none;
            /* flex-wrap: nowrap; */
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin: 0;
            /* transition: width 1s; */
            transition: width 0.3s, margin 0.3s;
            /* transition: margin 0.3s; */

            &.active {
                /* flex-grow: 1; */
                width: 100%;
                opacity: 1;
                pointer-events: all;
                margin-left: 1.2rem;
                transition: width 0.3s, margin 0.3s;
                /* transition: margin 0.3s; */
                /* transition: width 1s; */

            }
        }

        .categorySupperContainer {
            display: flex;
            align-items: center;

            grid-column: span 6;
            gap: 0;

            /* max-width: 33%; */
            &.active {
                transition: all 0.3s;
                /* gap: 1.2rem; */
            }
        }

        .categoryContainer {
            display: flex;
            align-items: center;
            width: 100%;


            gap: 1.2rem;
        }
    }



}.supply-chain-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.3rem;

  >.section-header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    
    >.title-container{
      display: flex;
      align-items: center;

      >b{
        font-size: 0.8rem;
            color: var(--black-mid);
      }
    }
  }

  
}

.stores-aditional{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.supply-chain-form{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0.5rem;

  .subtitle{
    grid-column: span 2;
    font-size: 0.6rem;
    font-weight: 600;
  }

  .vendor-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--input-radius);
    background-color: var(--white);
    border: solid 1px var(--grey-75);
    width: 100%;
    padding: 0.3rem 0.3rem 0.3rem 0.9rem;

    b {
      font-size: 0.65rem;
    }

    button {
      min-width: 9rem;
    }
  }

  .dimensions-grid{
    display: grid;
    grid-template-columns: auto min-content auto min-content auto;
    align-items: center;
    gap: 0.5rem;
    i {
      font-size: 0.5rem;
    }
  }

  

  .bin-control{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;

    b{
      white-space: nowrap;
    }
  }

  .schedule{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0.4rem;
  }

  .select{
    margin-top: 0.8rem;
  }

  .icon-favorite{
    color: #FFC85B;
  }
}


.stores-form {
  padding-top: 4px;
  display: grid;
  grid-template-columns: 1fr min-content 1fr min-content 1fr 1fr;
  column-gap: 0.6rem;
  row-gap: 1.27rem;
  align-items: center;

  b{
    font-size: 0.6rem;
    white-space: nowrap;
  }

  i{
    /* color: black; */
    font-size: 0.5rem;
  }

  .general-info-ata {
    display: flex;
    align-items: center;
    gap: 1.2rem;

    >b{
      font-size: 0.8rem;
    }

    >div {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 0.68rem;
      width: 100%;
    }

  }
  
  .icon-checkbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    >.icon-coloredwarning{
      font-size: 1.2rem;
    }
  }

  .checkboxes{
    display: grid;
    grid-column: span 2;
    gap: 0.72rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* >*:nth-child(3) {
    grid-column: span 2;
  }
  >*:nth-child(4) {
    grid-column: span 2;
  } */





  /* .checkbox-field {
    box-shadow: 0px 2px 4px #00000029;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    gap: 8px;
    background: var(--white);

    >.left-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

  } */

  .select {
    >div {
      /* width: 100% !important; */
    }
    >svg{
      /* right: 7px; */
    }
  }

  .select-container{
    min-height: 40px;
  }
}

.custom-select-option {
  min-height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  min-width: 100px;
  font-size: 12px;

  &:hover {
    background-color: var(--grey-75);
  }
}

.internal-repair-component {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;

    hr {
        border: none;
        min-height: 1px;
        background-color: var(--grey-75);
    }

    details[open]{
        .item-component{
            background-color: var(--blue-500);
            border-color: var(--green-25);
        }
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 3rem;

        .header-content {
            display: flex;
            align-items: center;
            gap: 2rem;

            .title {
                display: flex;
                align-items: center;
                gap: 1rem;

            }

            .part-info {
                display: flex;
                align-items: center;
                gap: 2rem;

                span {
                    font-size: 0.65rem;
                }

                b {
                    font-size: 0.6rem;
                }

                >div {
                    display: flex;
                    align-items: center;
                    gap: 0.3rem;
                }

            }
        }

    }

    .subheader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding-left: 1rem;

        .left-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .count {
                display: grid;
                place-items: center;
                padding: 0 0.25rem;
                background-color: var(--blue-300);
                color: white;
                font-style: normal;
                font-size: 0.6rem;
                border-radius: 0.2rem;
                font-style: normal;
            }
        }

        .right-info {
            font-size: 0.6rem;

        }
    }

    .list {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;

        min-height: 20rem;
        /* max-height: 20rem; */
        overflow: auto;
        padding-bottom: 1rem;


    }
}

.location-site-item-component {
    align-items: center;
    justify-content: space-between;
    font-size: 0.6rem;
    gap: 1rem;
    min-height: 2.87rem;


    .item-component {
        border: none;

        .left-info {
            width: 100%;
        }

        .main-info {
            width: 100%;
        }

        .property {
            * {
                font-size: 0.6rem !important;
            }
        }

        background-color: var(--item-background-color);
        border-radius: 0.6rem;
        border: var(--item-border);

    }

    .info {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;

        >div {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            b {
                font-size: 0.6rem;
                white-space: nowrap;
            }

            span {
                color: var(--grey-250);
                font-size: 0.6rem;
                white-space: nowrap;
            }

            &:last-child {
                width: 100%;
                justify-content: flex-end;
            }

        }

        .count {
            display: grid;
            place-items: center;
            padding: 0 0.3rem;
            min-height: 0.95rem;
            border-radius: 0.2rem;
            background-color: var(--black-mid);
            color: var(--white);
            font-style: normal;
        }
    }

    .actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: flex-end;

        .iconbutton {
            color: var(--grey-250);
            font-size: 0.9rem;
        }

        button {
            display: flex;
        }

    }

    .item-content {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: 0;

        .subheader {
            display: flex;
            align-items: center;
            gap: 1rem;
            justify-content: flex-start;

            >b {
                font-size: 0.6rem;
            }
        }

        .dropdowns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            padding: 1rem 0.4rem 0;
        }

        .repairs {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.2rem;

            padding: 0 0.4rem 0.6rem;

            max-height: calc(1.3 * 4 * var(--input-height));
            overflow: auto;

            .repair-content {

                b {
                    font-size: 0.6rem;
                }

                i {
                    font-size: 1rem;
                }

                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                background-color: var(--item-background-color);
                border: var(--item-border);
                border-radius: var(--input-radius);
                padding: 0 var(--input-padding);
                min-height: calc(1.5 * var(--input-height));

                gap: 2rem;

                .left {
                    display: flex;
                    align-items: center;
                    gap: 0.3rem;
                    width: 100%;
                }

                .right {
                    display: grid;
                    grid-template-columns: repeat(5, min-content);
                    align-items: center;
                    gap: 0.7rem;

                    input {
                        /* min-height: 1.5rem; */
                        min-width: 3rem;
                    }

                    >div {
                        display: flex;
                        align-items: center;
                        gap: 0.4rem;
                    }
                }
            }
        }
    }
}.vendors-cost-cpomponent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    --list-item-display: grid;
    --list-item-template: auto 7rem 7rem 7rem 13rem;
    --list-item-gap: 1rem;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;

        button {
            gap: 0.5rem;

            span {
                font-size: 0.56rem;
            }
        }

        .title {
            display: flex;
            align-items: center;
            gap: 1rem;

            >div {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                b,
                span {
                    font-size: 0.6rem;
                }

                span {
                    color: var(--grey-250);
                }
            }

        }

    }

    hr {
        border: none;
        min-height: 1px;
        background-color: var(--grey-75);
    }

    .left-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .vendors-content {
        display: grid;
        grid-template-columns: 20rem auto;
        gap: 1rem;
        min-height: 30rem;

        .title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .list {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            overflow: auto;
            max-height: 70vh;

            padding-right: 0.3rem;



            --list-item-display: grid;
            --list-item-template: auto 5rem;
            --list-item-justify: left;
            --list-item-padding: 0 0.3rem 0 0.5rem;
            --list-item-gap: 1rem;
            --item-padding: var(--list-item-padding);

            .sorting-component {
                position: sticky;
                top: 0;
                z-index: 2;
                background-color: var(--white);
                padding-top: 0.3rem;
                padding-left: var(--list-item-padding);
                padding-right: var(--list-item-padding);
                padding-bottom: 0.4rem;
            }

            .vendor-item {
                display: var(--list-item-display);
                grid-template-columns: var(--list-item-template);
                justify-items: var(--list-item-justify);
                align-items: center;
                min-height: calc(1.2 * var(--input-height));
                background-color: var(--item-background-color);
                gap: var(--list-item-gap);
                /* padding: 0 0.9rem; */
                padding: var(--item-padding);
                border: var(--item-border);
                border-radius: 0.4rem;
                position: relative;

                /* .ribbons-container {
                    right: 0 !important;

                    .ribbon{
                        border-radius: 0 0.4rem 0 0.4rem;
                    }
                } */

                [class*="icon"] {
                    margin-right: 0.3rem;
                }

                span {
                    font-size: 0.6rem;
                    position: relative;
                    /* top: 0.2rem; */
                }

                i {
                    color: #FFCC00;
                    font-size: 0.6rem;
                }

                &.active {
                    border: solid 1px #B9D8DF;
                    background-color: #EFFCFF;
                }

            }
        }



        .tab-content {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-width: 45rem;
            min-height: 25rem;

            .placeholder-container {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                font-size: 0.6rem;
                align-items: center;
                justify-content: center;

                width: 100%;
                height: 19rem;

                b {
                    font-size: 0.6rem;
                }

                span {
                    text-align: center;
                }
            }

            .content-header {
                display: flex;
                align-items: center;
                justify-content: space-between;

                b {

                    font-size: 0.6rem;
                }
            }

            .general {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.2rem 1rem;
                align-items: center;

                b {
                    font-size: 0.6rem;
                }

                .warranty {
                    display: grid;
                    gap: 0.3rem;
                    grid-template-columns: 1fr 1fr;


                    span {
                        font-size: 0.5rem;
                        color: var(--grey-250);
                    }

                    >div {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    input {
                        min-height: 1.7rem;
                    }
                }

                .tat {
                    display: grid;
                    grid-template-columns: auto 3rem min-content;
                    align-items: center;
                    gap: 0.4rem;
                    background-color: var(--item-background-color);
                    border-radius: var(--input-radius);
                    border: var(--item-border);
                    padding: 0 0.5rem;
                    font-size: 0.6rem;
                    height: var(--input-height);

                    input {
                        min-height: 1.6rem;

                    }
                }

            }
        }





        /* display: flex;
        flex-direction: column;
        gap: 0.5rem; */

        /* .header {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            justify-content: unset;

            .input-component {
                max-width: 50%;
            }
        } */
    }

    .small-icon {

        font-size: 0.55rem !important;
    }

    .chevron-left {
        transform: rotate(90deg);
        font-size: 0.55rem !important;
    }

    .chevron-right {
        transform: rotate(-90deg);
        font-size: 0.55rem !important;

    }

    .vendors-list {
        display: flex;
        flex-direction: column;
        min-height: 25rem;
        max-height: 25rem;
        overflow: auto;
        gap: 0.4rem;
    }

    .right-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .right-header {
            b {
                font-size: 0.65rem;
            }

            span {
                font-size: 0.6rem;
            }

            display: grid;
            align-items: center;
            gap: 1rem;
            grid-template-columns: min-content auto min-content 5rem max-content;

            .select {
                position: relative;
                left: -0.3rem;
            }
        }

        .actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.3rem;
        }
    }

}


.vendor-component {
    display: grid;
    grid-template-columns: var(--list-item-template);
    align-items: center;
    gap: var(--list-item-gap);
    background-color: var(--item-background-color);
    padding: var(--item-padding);
    border: var(--item-border);
    border-radius: var(--input-radius);

    >span {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    span {
        font-size: 0.6rem;
    }

    i {
        font-size: 0.7rem;

        &.active {
            color: #FFCC00;
        }
    }


}

.checkbox-menu-component {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.2rem;

    .conditions-list {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 12rem;
    }

    .checkbox-field-component {
        box-shadow: none;
        /* background-color: var(--white-100); */

        .checkbox-component {
            /* border: solid 1px #C7C7C7; */
            /* background-color: white; */
        }
    }

    .buttons {

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        justify-content: center;
        padding: 0.2rem 0.4rem;

        button {
            gap: 0.5rem;

            i {
                font-size: 0.6rem;
            }
        }
    }

}

.vendor-tabs-component {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 45rem;



    .tabs {
        display: flex;
        align-items: center;
        gap: 0.2rem;

        .button-label {
            font-size: 0.6rem;
            white-space: nowrap;
        }

        .tabs-container {
            display: flex;
            align-items: center;
            gap: 0.2rem;
            width: 100%;
            overflow: auto;

            scrollbar-width: none;
            scrollbar-height: none;

            .tab {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--item-background-color);
                font-size: 0.65rem;
                color: var(--black-mid);
                min-height: 1.8rem;
                border-radius: var(--input-radius);
                padding: 0 0.4rem;
                min-width: 33%;
                /* min-width: 10rem; */
                font-weight: bold;
                position: relative;
                cursor: pointer;

                .delete-btn-container {

                    position: absolute;
                    right: 0.3rem;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }


                i {
                    height: 1.2rem;
                    border-radius: 0.3rem;
                    aspect-ratio: 1;
                    transition: all 0.2s;
                    cursor: pointer;
                    display: grid;
                    place-items: center;

                    &::before {
                        transition: all 0.2s;

                        color: transparent;
                    }

                    &:hover {
                        background-color: #FF6E6E;
                    }
                }

                &:hover {
                    i {
                        &::before {
                            color: var(--black-mid);
                        }

                        &:hover::before {
                            color: white
                        }
                    }
                }

                &.active {
                    i {
                        &::before {
                            color: white;
                        }
                    }
                }


                &.active {
                    background-color: var(--black-mid);
                    color: var(--white);
                    justify-content: space-between;
                    transition: all 0.5s;


                }
            }
        }

        button[disabled] {
            background-color: var(--white-100) !important;
            color: var(--grey-250) !important;
            border: var(--item-border) !important;
            box-shadow: none !important;
            cursor: default;

            i::before {
                color: var(--grey) !important;
            }

        }


    }
}

.vendor-tab-content-component {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        b {
            font-size: 0.6rem;
        }

        .actions {
            display: flex;

        }
    }

    .tat-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;


        .tat-item {
            display: grid;
            grid-template-columns: auto 3rem 1.5rem;
            align-items: center;
            background-color: var(--item-background-color);
            border: var(--item-border);
            border-radius: var(--input-radius);
            /* height: var(--input-height); */
            padding: var(--input-padding);
            gap: 1rem;


            span {
                font-size: 0.6rem;
            }

            input {
                min-height: 1.6rem;
            }
        }
    }

    .warranty {
        display: grid;
        grid-template-columns: min-content repeat(4, auto);
        gap: 1rem;
        align-items: center;
        background-color: var(--item-background-color);
        border: var(--item-border);
        border-radius: var(--input-radius);
        padding: 0.5rem 1rem;

        b {
            font-size: 0.6rem;
            position: relative;
            bottom: 0.3rem;
        }

        .warranty-item {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
            align-items: center;


            input {
                min-height: 1.6rem;
            }

            span {
                color: var(--grey-250);
                font-size: 0.56rem;


            }

        }
    }
}

.vendor-component-content {
    display: grid;
    grid-template-columns: 18rem auto;
    gap: 1rem;
    margin-top: 0.5rem;

    .left {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        padding-top: 0.5rem;

        .select {
            margin-top: 0.6rem;
        }

        .vendor-subtitle {
            font-size: 0.6rem;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .tat-container {
            display: grid;
            grid-template-columns: auto 3rem min-content;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--item-background-color);
            border: var(--item-border);
            border-radius: var(--input-radius);
            min-height: var(--input-height);
            padding: 0 var(--input-padding);

            input {
                min-height: 1.5rem;
            }

            * {
                font-size: 0.6rem;
            }
        }

        .schedule {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 0.2rem 0.4rem;
            justify-items: center;

            input {
                min-height: 1.6rem;
            }

            span {
                font-size: 0.5rem;

            }
        }

    }



}

.cost-container {
    background-color: var(--item-background-color);
    border: var(--item-border);
    border-radius: var(--item-border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;

        >div {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }


        i {
            color: var(--grey-250);
            font-size: 0.8rem;

        }

        b {
            font-size: 0.6rem;
        }
    }

    .history {
        --list-item-template: 7rem 7rem auto 6.5rem;
        --list-item-padding: 0 0.7rem;

        b {
            font-size: 0.6rem;
        }

        display: flex;
        flex-direction: column;
        gap: 0.4rem;

        max-height: calc(5 * var(--item-min-height));
        min-height: calc(5 * var(--item-min-height));

        .history-header {
            display: grid;
            grid-template-columns: var(--list-item-template);
            padding: var(--list-item-padding);
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;

            padding-right: 0.5rem;


            overflow: auto;

        }
    }
}

.history-item-component {

    &.active {
        position: sticky;
        top: 0;
        background-color: var(--blue-500);
        border-color: var(--green-25);
    }

    .date-component {}

    display: grid;
    grid-template-columns: var(--list-item-template);
    background-color: var(--white);
    padding: var(--list-item-padding);
    border: var(--item-border);
    border-radius: var(--input-radius);
    align-items: center;
    min-height: var(--input-height);

    min-height: 2.5rem;

    span,
    b {
        font-size: 0.6rem;

    }

    .actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }



    .tag-component {

        b,
        span {
            font-size: 0.5rem !important;
        }
    }

}

.history-item-content-component {

    padding: 0.8rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;

    .header-item-content {
        display: grid;
        grid-template-columns: auto auto min-content;
        align-items: center;
        gap: 0.3rem;
    }

    .date-component {
        /* min-width: 6rem; */

        --label-active-translate: -1.7rem;

        * {
            font-family: "Poppins";
        }
    }

    .radio-group-component {
        display: grid;
        grid-template-columns: 1fr 1fr;

        /* label:not(.isActive){
            background-color: white;
        } */

        .MuiFormControlLabel-label {
            font-size: 0.56rem !important;
        }
    }

    .content-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .headr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--input-padding);

            .qty-header {
                display: flex;
                align-items: center;
                gap: 0.9rem;
            }
        }

        .range-item {
            display: flex;
            background-color: var(--white);
            border: var(--item-border);
            border-radius: var(--input-radius);
            align-items: center;
            justify-content: space-between;
            min-height: calc(1.1 * var(--input-height));
            padding: 0 0.5rem 0 0.3rem;

            .range-inputs {
                display: flex;
                align-items: center;
                gap: 0.4rem;

                input {
                    max-width: 5rem;
                }
            }

            input {
                max-width: 7rem;
                min-height: 1.5rem;
            }

            span {
                font-size: 0.6rem;
            }

            >div {
                display: flex;
                gap: 0.5rem;
                align-items: center;
            }

            .icon-delete-new {
                font-size: 0.9rem !important;
            }

        }

    }
}



.types-component {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;

    .type-item {
        background-color: var(--item-background-color);
        border: var(--item-border);
        border-radius: var(--input-radius);
        min-height: var(--input-height);
        padding: 0 var(--input-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;

        b {
            font-size: 0.6rem;
        }

        i {
            color: var(--grey-250);
            font-size: 0.7rem;
        }

    }
}.custom-tab-group {
    margin-top: 0.813rem;
    min-height: 2rem !important;
  .custom-tab {
    width: 10rem;
    height: 2rem;
    max-width: 10rem;
    min-width: 10rem;
    background: #fbfbfb 0% 0% no-repeat padding-box;
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    opacity: 1;
    font-size: 0.6rem;
    text-align: center;
    color: var(--black-mid);
    font-family: "Poppins", sans-serif;
    text-transform: unset;
    min-height: 2rem;
    justify-content: flex-start;
    .MuiTab-icon {
      font-size: 1rem;
    }
    .custom-tab-label{
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      align-items: center;
      .tab-suffix{
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--black-mid);
        font-weight: bold;
        border-radius: 4px;
      }
    }
  }
  .Mui-selected{
    background: var(--black-mid);
    color: var(--white) !important;
    .custom-tab-label{
      .tab-suffix{
        background-color: var(--white);
        width: 1.5rem;
      }
    }
  }
  .Mui-selected{
    background: var(--black-mid);
    color: var(--white) !important;
  }
  .MuiTabs-indicator {
    display: none;
  }
  .MuiTabs-flexContainer {
    gap: 0.6638rem;
  }

}

.paginator {
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: var(--p-size);
    color: #213246;
    width: 100%;
    padding: calc(var(--padding));
    border-top: 1px solid #70707017;
  }
  
  .paginator-info {
    width:auto;
    max-width: 50%;
    font-size: calc(var(--p-size) - .2rem);
    font-weight: 400;
    opacity: .5;
    margin-right: .5rem;
  }
  
  .paginator-btn {
    border: none;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--padding) - .2rem);
    background-color: transparent;
  }

  .paginator-btn > svg{
    /* background-color: red; */
    height: .7rem;
    width: .7rem;
  }
  
  .paginator-btn:disabled {
    cursor: not-allowed;
  }
  
  .paginator-page {
    font-size: calc(var(--p-size) - .2rem);
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: calc(var(--padding ) - .2rem);
    color: #21324688;
    /* opacity: .5; */
  }

  .paginator-page > span{
    border: 1px solid #213246;
    font-size: calc(var(--p-size) - .1rem);
    font-weight: 400;
    padding: .2rem .6rem;
    border-radius: 6px;
    color: #213246;
  }
  .sorting-btn-component {
  height: 1.8rem;
  width: 1.8rem;
  background-color: var(--black-mid);
  color: var(--white);
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-Sorting_button {
    font-size: 0.9rem;
  }
}

.sorting-component {
  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);

  /* display: flex; */
  /* align-items: center; */
  /* padding: var(--item-padding); */

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--item-padding);
  position: relative;
  /* padding-top: 0; */
  /* padding-bottom: 0; */
  /* position: sticky;
    top: 0; */

  > button {
    position: absolute;
    right: 0;
  }

  .columns {
    display: var(--list-item-display, flex);
    grid-template-columns: var(--list-item-template, unset);
    align-items: center;
    gap: var(--list-item-gap, 1.72rem);
    justify-items: var(--list-item-justify, left);
    padding: var(--list-item-padding, 0);
    width: 100%;

    .column-direction {
      flex-direction: column;
      text-align: center;

      b {
        font-size: 0.6rem;
      }
    }

    > .column {
      display: flex;
      align-items: center;
      gap: 0.4rem;

      > .arrows {
        display: flex;
        align-items: center;
        gap: 0.4rem;
      }

      b {
        cursor: pointer;
      }
    }
  }

  b {
    font-size: 0.62rem;
  }

  .arrow-button {
    cursor: pointer;
    display: grid;
    place-items: center;
    min-width: 0.96rem;
    aspect-ratio: 1;
    font-size: var(--icon-font-size);
    background-color: var(--item-background-color);
    border-radius: 0.2rem;
    color: var(--icon-default-color);
    position: relative;

    &.active {
      background-color: var(--black-mid);
      color: var(--white);
    }

    > u {
      text-decoration: none;
      position: absolute;
      aspect-ratio: 1;
      width: 0.7rem;
      display: grid;
      place-items: center;
      font-size: 0.5rem;
      left: 0.6rem;
      top: -0.4rem;
      color: #ffffff;
      background-color: #fe5757;
      border-radius: -12rem;
      border-radius: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.sorting-menu {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 1rem 1rem;
  gap: 0.5rem;

  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);

  .arrow-button {
    cursor: pointer;
    display: grid;
    place-items: center;
    min-width: 0.96rem;
    aspect-ratio: 1;
    font-size: var(--icon-font-size);
    background-color: var(--item-background-color);
    border-radius: 0.2rem;
    color: var(--icon-default-color);

    &.active {
      background-color: var(--black-mid);
      color: var(--white);
      font-weight: 100;
    }
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    .left {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;

      .sub-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      span {
        font-size: 0.6rem;
      }

      b {
        font-size: 0.9rem;
      }
    }

    .right {
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
  }

  .dnd-activity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.64rem;
    row-gap: 0.3rem;

    > span {
      font-size: 0.63rem;
      margin-left: 0.4rem;
    }

    .dnd-items {
      min-height: var(--input-height);
      min-width: 11rem;
      background-color: var(--item-background-color);
      border-radius: calc(var(--input-radius) + 0.2rem);
      padding: 0.2rem;
      border: var(--item-border);
      display: flex;
      flex-direction: column;
      /* gap: 0.2rem; */

      .spacer {
        min-height: 0.2rem;
        width: 100%;
        background-color: transparent;
        border-radius: var(--input-radius);
        transition: all 0.4s;

        &.dragover {
          margin: 0.2rem 0;
          background-color: var(--grey-75) !important;
          min-height: var(--input-height);
        }
      }

      .items-container {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }
    }
  }
}

.sorting-component-dnd-item {
  font-size: 0.6rem;
  border: var(--item-border);
  min-height: 1.6rem;
  border-radius: var(--input-radius);
  background-color: var(--white);
  padding: 0 0.4rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;

  i {
    cursor: pointer;
    color: var(--icon-default-color);
    font-size: var(--icon-font-size);
  }

  .item-content {
    display: flex;

    align-items: center;
    gap: 0.5rem;
    .icon-draggable {
      cursor: grab !important;
    }
  }

  .item-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
}

.align-left {
  text-align: left;
  width: 100%;
  justify-content: flex-start;
}

.align-center {
  width: 100%;
  justify-content: center;
}

.align-right {
  width: 100%;
  justify-content: flex-end;
}

.filter-manager-btn{
    height: 1.8rem;
    width: 1.8rem;
    background-color: var(--black-mid);
    color: var(--white);
    border: none;
    border-radius: .3rem;
    cursor: pointer;
    position: relative;
}

.filter-manager-count-badge {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  background-color: var(--warn);
  color: white;
  border-radius: .3rem;
  width: auto;
  height: 1rem;
  min-width: 1rem;
  padding: .1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}


.orders-active-filters {
    background-color: var(--black-mid);
    min-width: 1rem;
    min-height: 1rem;
    border-radius: .2rem;
    color: var(--white);
    font-size: calc(var(--p-size));

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.orders-header-filters-applied {
    min-height: 3rem;
    width: 13rem;
    padding: .4rem .6rem;
    height: auto;
    max-height: 90vh;
}

.orders-header-filters-applied>nav {
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.orders-header-filters-applied>nav>p {
    color: var(--black-mid);
    font-weight: 600;
    font-size: calc(var(--p-size) + .1rem);
}

.orders-header-filters-applied>nav>span {
    color: #29ABE2;
    text-decoration: underline;
    cursor: pointer;
    font-size: calc(var(--p-size));
}

.orders-header-filters-applied>section>span {
    width: auto;
    min-width: 1rem;
    padding: .2rem .4rem;
    background-color: var(--black-mid);
    color: var(--white);
    font-size: var(--p-size);
    border-radius: .3rem;

    display: flex;
    align-items: center;
    gap: var(--gap);
}

.orders-header-filters-applied>section>span>i {
    cursor: pointer;
}


.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-bottom: .5rem;
}

.filter-group-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    font-weight: 500;
    color: var(--black-mid);
    text-transform: capitalize;
    font-size: var(--p-size);
    position: relative;
}

.filter-group-title > p{
    position: absolute;
    right: 0;
    color: #29ABE2;
    text-decoration: underline;
    cursor: pointer;
    font-size: calc(var(--p-size));
    font-weight: 400;
}

.filter-group-line {
    width: 100%;
    height: 1px;
    background: #EEEEEE;
}

.filter-values {
    height: auto;
    max-height: 15rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    padding: .3rem;
    overflow-y: auto;
}

.filter-value {
    width: auto;
    min-width: 1rem;
    padding: .2rem .4rem;
    background-color: var(--black-mid);
    color: var(--white);
    font-size: var(--p-size);
    border-radius: .3rem;

    display: flex;
    align-items: center;
    gap: var(--gap);
}

.filter-value>i {
    cursor: pointer !important;
    font-size: .4rem !important;
}.locations-config {
  /* background-color: rebeccapurple; */
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.locations-config > h1 {
  color: var(--black-mid);
  font-size: var(--title-size);
  font-weight: 700;
}

.locations-config > .locations-config-actions {
  width: 100%;
  min-height: 3rem;
  height: 10%;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.locations-config-actions > h3 {
  font-size: var(--subtitle-size);
  font-weight: 700;
  color: var(--black-mid);
}

.btn-icon-addNew-location {
  height: 1.8rem;
  width: 6.7rem;
  border: 1px solid var(--black-mid);
  background-color: var(--black-mid);
  cursor: pointer;
  border-radius: var(--button-radius);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.btn-icon-addNew-location > p {
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500;
  color: var(--white);
  transition: var(--transition);
}

.btn-icon-addNew-location > i {
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500;
  color: var(--white);
  transition: var(--transition);
}

.btn-icon-addNew-location:hover {
  background-color: var(--black);
  box-shadow: 0 5px 5px #33333355;
}

.btn-icon-addNew-location:hover > i {
  color: var(--white);
}

.btn-icon-addNew-location:hover > p {
  color: var(--white);
}

.locations-config-actions > div {
  background-color: var(--white);
  height: 1.8rem;
  /* flex-grow: 1; */
  width: 65%;
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--input-radius);
  border: 1px solid #b7b7b7;
  padding: 0.3rem 0.5rem;
}

.locations-config-actions > div:focus-within {
  outline: 2px solid var(--blue-300);
}

.locations-config-actions > div > input {
  height: 100%;
  flex-grow: 1;
  border: none;
  background-color: transparent;
  outline: none;
  font-size: calc(var(--p-size) + 0.1rem);
}

.locations-config-actions > div > img {
  height: 90%;
}

.locations-config-locationsCont {
  height: 96%;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0.2rem;
}

.location-list-parent-div {
  height: 79%;
}

.btn-filters-locations {
  height: 1.8rem;
  width: 4rem;
  border-radius: var(--button-radius);
  border: none;
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  cursor: pointer;
  font-size: calc(var(--p-size) + 0.1rem);
  background-color: transparent;
}

.locations-nav-cont {
  padding: 0 0 0.5rem 0;
  border-bottom: 1px solid #efefef;
  display: flex;
  flex-direction: column;
  transition: var(--transition);

  --list-item-display: grid;
  --list-item-template: 10.4% 32.6% 25%;
  --list-item-justify: left;
  --list-item-padding: 0.5rem;
  --list-item-gap: var(--gap);
}

.locations-filters-section {
  display: grid;
  place-items: center;
  grid-template-rows: 1f;
  grid-template-columns: repeat(4, 10rem);
  position: relative;
  gap: var(--gap);
}

.locations-filters-section > div {
  display: flex;
  align-items: center;
  width: 100%;
  /* justify-content: center; */
}

.locations-filters-section > button {
  position: absolute;
  right: 0;
  height: 1.8rem;
  width: 6rem;
  color: var(--white);
  background-color: var(--black-mid);
  cursor: pointer;
  border-radius: var(--button-radius);
  border: none;
  font-size: calc(var(--p-size) + 0.1rem);
}

.locations-clearAllFilters-header-txt {
  margin-left: auto;
  margin-right: 0.8rem;
  color: #29abe2;
  text-decoration: underline;
  cursor: pointer;
  font-size: calc(var(--p-size) + 0.1rem);
}

.span-filtersCount-locations {
  background-color: var(--black-mid);
  min-width: 1rem;
  min-height: 1rem;
  border-radius: 0.2rem;
  color: var(--white);
  font-size: calc(var(--p-size));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.expandable-configMod-header {
  background-color: var(--white-100);
  width: 100%;
  min-height: 3rem;
  border: 1px solid #e6e6e6;
  border-radius: var(--item-border-radius);
  padding: 0.5rem 0.5rem 0.5rem 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap);
  transition: var(--transition);
  z-index: 10;
  position: relative;
  /* top: 0; */
}

.expandable-configMod-header:hover{
  background-color: rgb(239, 252, 255);

}

.expandable-configMod-header-opened {
  background-color: var(--blue-500);
  width: 100%;
  min-height: 3rem;
  border: 2px solid#B9D8DF;
  border-radius: var(--item-border-radius);
  padding: 0.5rem 0.5rem 0.5rem 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap);
  transition: var(--transition);
  z-index: 100;
  /* position: relative; */
  position: sticky;
  top: 0;
}

.expandable-configMod-header-opened::before{
  content: "";
  width: 100%;
  height: .3rem;
  background-color: var(--white);
  position: absolute;
  top: -.4rem;
  z-index: 99;
  transform: translateX(-.8rem);
}

.expandable-popOver-option-cont {
  background-color: var(--black-mid);
  height: auto;
  width: 10.2rem;
  border-radius: var(--item-border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /* padding: .2rem; */
  /* gap: .2rem; */
}

.expandable-popOver-option-cont>span {
  /* background-color: teal; */
  height: 1.8rem;
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: space-evenly; */
  border-radius: var(--radius);

  background-color: var(--black-mid);
  cursor: pointer;
  transition: var(--transition);
  gap: var(--gap-2);
}


.expandable-popOver-option-cont>span>svg {
  height: 1rem;
  width: 1rem;
  margin-left: 1rem;
  transition: var(--transition);
}

.expandable-popOver-option-cont>span>svg>g>path {

  fill: var(--white);
}

.expandable-popOver-option-cont>span>p {
  color: var(--white);
  font-size: calc(var(--p-size));
  font-weight: 500;
  transition: var(--transition);
}

.expandable-popOver-option-cont>span:hover>p {
  color: var(--white);
}

.expandable-popOver-option-cont>span:hover>svg>g>path {
  fill: var(--white);
}

.expandable-configMod-header>.expandable-configmod-previewDataCont {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}



.draft-location-span {
  background-color: var(--blue-300);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: var(--item-border-radius);
  border-bottom-right-radius: var(--item-border-radius);
  font-size: var(--p-size);
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}



.expandable-configMod-header-opened>.expandable-configmod-previewDataCont {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.expandable-configMod-header-opened>.expandable-configmod-deleteIconCont {
  width: 1.7rem;
  height: 1.7rem;
  position: relative;
  /* background-color: saddlebrown; */
  display: flex;
  align-items: center;
  justify-content: center;
}


.expandable-configMod-header-opened>.expandable-configmod-deleteIconCont {
  width: 1.7rem;
  height: 1.7rem;

}


.expandable-configmod-previewDataCont>section {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  gap: calc(var(--gap-2));
}

.expandable-configmod-previewDataCont>section>p {
  color: var(--grey-100);
  /* opacity: .6; */
  font-size: 0.6rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.expandable-configmod-previewDataCont>section>p>span {
  font-weight: 400;
  color: var(--black);
  font-size: 0.6rem;
}

.expandable-configMod-body {
  height: 0;
  /* overflow: hidden; */
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  display: none;
}

.expandable-configMod-body.expandable-configMod-body-opened {
  visibility: visible;
  opacity: 1;
  transition: var(--transition);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}


.expandable-configMod-body>.expandable-configMod-body-topData {
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 0 1rem;
}

#btn-edit-location:hover {
  background-color: var(--black-mid) !important;
  color: var(--white) !important;
}


/* #btn-edit-location:hover >i{
  color: var(--white);
} */


.expandable-configMod-body-topData>input::placeholder {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500;
}


div.iata-code-dropdown-cont {
  height: 5vh;
  min-width: 10rem;
  /* width: 20%; */
  outline: none;
}

.iata-info-cont {
  /* min-width: 20rem; */
  max-width: 80%;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.iata-info-cont > p{
  color: var(--black-mid);
  font-size: var(--subtitle-size);
  font-weight: 700;
}

.iata-info-cont > span{
  font-size: calc(var(--p-size) + 0.1rem);
  color: var(--black-mid);
  font-weight: 400;
  flex-grow: 1;
}

.expandable-configMod-body-topData>button {
  cursor: pointer;
  background-color: var(--black-mid);
  color: var(--white);
  border-radius: var(--radius);
  max-width: 25%;
  padding: .3rem;
  border: none;

  font-size: var(--p-size);
}

.expandable-configMod-body-contactInfo {
  background-color: var(--white-100);
  padding: 1rem .4rem .4rem .4rem;
  border-radius: 24px;
  border: 1px solid var(--grey-50);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}


.measurement-system-drop-cont{
  min-width: 10rem;
  width: 17%;
  margin-right: auto;
}
.expandable-configMod-body-contactInfo>h2 {
  color: var(--black-mid);
  font-size: calc(var(--subtitle-size) - 0.1rem);
  font-weight: 700;
  width: 98%;
  align-self: center;
}


.station-data-cont {
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.station-data-cont>form {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.station-data-cont>form>section {
  height: 30%;
  width: 100%;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  gap: var(--gap-2);
}

.station-data-cont>form>section span {
  flex-grow: 1;
  position: relative;
  width: 32%;
}

.error-indication-paragraph {
  color: var(--warn);
  position: absolute;
  left: 0;
  font-size: var(--p-size);
  font-weight: 500;
}


.station-data-cont>form>section:nth-child(2) {
  flex-wrap: wrap;
  height: 55%;
  /* justify-content: center; */
}

.station-data-cont>form>section:nth-child(2) section {
  flex-grow: 1;
  min-width: 32%;
  min-height: 2rem;
  width: calc(32%);

}
/*  */

.react-international-phone-input-container {
  min-width: 32%;

  min-height: 2rem;
  height: 5vh;
  padding: 0%;
}

.react-international-phone-input-container .react-international-phone-input {
  flex: 1;
  border: 1px solid var(--input-border) !important;
  height: var(--input-height) !important;
  /* border-top-right-radius: 9px !important;
  border-bottom-right-radius: 9px !important; */
  border-radius: var(--input-radius) !important;
  font-size: calc(var(--p-size) + .1rem) !important;
}

.react-international-phone-input-container .react-international-phone-country-selector-button {
  border: 1px solid var(--input-border) !important;
  height: 100% !important;
  border-top-left-radius: 9px !important;
  border-bottom-left-radius: 9px !important;
  display: none;
}



.station-data-cont>form>section:nth-child(2) input::placeholder {
  color: var(--black);
  font-size: calc(var(--p-size) + 0.1rem);
}


/* section inside modal of sites config */


.input-location-disabled {
  background: var(--disabled-input-bg) !important;
  pointer-events: none;
  border: none !important;
  color: var(--grey-250) !important;
}

.input-location-disabled::placeholder {
  color: var(--grey-250) !important;
}

.phone-input-disabled .react-international-phone-input {
  background-color: var(--disabled-input-bg) !important;
  pointer-events: none;
  border: none !important;
  color: var(--grey-250) !important;
}

.deleteLocation-cont {
  height: 10rem;
  width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
}

.deleteLocation-cont>h3 {
  font-size: calc(var(--p-size) + .2rem);
  color: var(--black-mid);
}

.deleteLocation-cont>.deleteLocation-btn-cont {
  width: 100%;
  /* height: 40%; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  /* background-color: red; */
}

.deleteLocation-btn-cont>button {
  height: 1.8rem;
  width: 5rem;
  font-size: calc(var(--p-size) + .1rem);
  border-radius: var(--radius);

  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}


.deleteLocation-btn-cont>button:nth-child(1):hover {
  background-color: var(--black-mid) !important;
  color: var(--white) !important;
}

.deleteLocation-cont>.deleteLocation-data-p-cont {
  height: 30%;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
}

.deleteLocation-data-p-cont>p {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--p-size));
  font-weight: 600;

}

.deleteLocation-data-p-cont>p>span {
  font-weight: 800;
}

.input-error {
  border: 2px solid var(--input-error);
}.global-modal-noContent-paragraph{
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .3rem);
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
    width: 100%;
    text-align: center;
}.react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));cursor:auto}.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
.sites-grey-bg {
    border-radius: var(--item-border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    /* align-items: center; */
    /* padding-bottom: .5rem; */
}


.sites-expandable-header {
    width: 100%;
    min-height: var(--item-min-height);
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    border-radius: var(--item-border-radius);
    border: 1px solid #E6E6E6;
    background-color: var(--white-100);
    padding: var(--item-padding);
    padding-left: .9rem;
    transition: var(--transition);
    /* margin-bottom: .5rem; */
    position: relative;
    cursor: pointer;
}

.sites-expandable-header:hover {
    background-color: rgb(239, 252, 255);
}

.sites-expandable-header>span:not(.draft-site-span) {
    height: .4rem;
    width: .4rem;
    border-radius: 50%;
    background-color: var(--blue-300);
    display: flex;
    position: relative;
    z-index: 5;
}

span.draft-site-span {
    background-color: var(--blue-300);
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: var(--item-border-radius);
    border-bottom-right-radius: var(--item-border-radius);
    font-size: var(--p-size);
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.sites-expandable-header>h4 {
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 600;
    color: var(--blue-300);
}

.sites-expandable-header>p {
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: var(--gap);
}

.sites-expandable-header>p>span {
    font-weight: 400;
    color: var(--black);
    text-transform: uppercase;
}

.site-racks-span {
    color: var(--white) !important;
    background-color: var(--green-250);
    width: 1rem;
    height: 1rem;
    border-radius: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.actions-section-sitesExp {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap-2);
    height: 100%;
}

.actions-section-sitesExp>p {
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
    color: var(--grey-200);
}

.actions-section-sitesExp>button {
    background-color: transparent;
    height: 1.7rem;
    width: 1.7rem;
    border-radius: .3rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}

/* .actions-section-sitesExp>button:hover i {
    color: var(--white);
} */


.actions-section-sitesExp>i {
    /* font-size: calc(var(--subtitle-size)); */
    font-size: 3rem;
    cursor: pointer;
}

.sites-expandable-content {
    height: 0;
    /* overflow: hidden; */
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    display: none;
}

.sites-expandable-content.open {
    height: auto;
    /* overflow: hidden; */
    transition: var(--transition);
    opacity: 1;
    visibility: visible;
    display: block;
    /* width: 98%; */
}

.form-edit-site-exp {
    width: 98%;
    margin: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    justify-self: center;
    margin-bottom: .5rem;

}

.form-edit-site-exp>section.form-edit-site-exp-top {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
}

@media screen {
    
}

.form-edit-site-exp>section .form-edit-inp-Cont {
    height: 100%;
    width: 29%;
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: var(--gap);
}

/* @media (min-width: 1273px) {
  .form-edit-site-exp > section .form-edit-inp-Cont {
    width: 40%;
  }
} */
.form-edit-inp-Cont>input {
    height: var(--input-height);
    min-height: 2rem;
    width: 100%;
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    /* outline: none; */
    padding: 0 .3rem;
    font-size: var(--input-font-size);
    text-transform: uppercase;
}

.site-labeL-radio-form {
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
}

.racks-exp-cont {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.type-Hangar-form {
    width: 100%;
    height: auto;
    /* max-height: 17rem; */
    display: flex;
    flex-direction: column;
    gap: var(--gap);

}

.type-Hangar-form .hangar-capacity-cont {
    min-height: 5rem;
    height: auto;
    max-height: 16rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-around;
    gap: var(--gap-2);

}

.hangar-capacity-cont>h2 {
    color: var(--black-mid);
    height: 1rem;
    font-size: calc(var(--subtitle-size) - .1rem);
}

.hangar-capacity-cont>div {
    /* min-height: 3rem; */
    height: auto;
    /* max-height: 16rem; */
    width: 100%;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
}

.hangar-capacity-cont>div>section {
    height: auto;
    /* min-height: 4rem; */
    /* max-height: 12rem; */
}

.hangar-capacity-cont>div>section:nth-child(1) {
    width: 30%;
    height: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* gap: var(--gap-2); */
}



.hangar-capacity-cont>div>section:nth-child(1)>input {
    height: var(--input-height);
    /* width: 6rem; */
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    padding: var(--item-padding);
    /* outline: none; */
    font-size: var(--input-font-size);
    text-align: right;
    text-transform: uppercase;
}

span.override-address-cont,
span.Available-for-Aircraft-cont {
    border-radius: var(--input-radius);
    height: 2rem;
    width: 100%;
    min-width: 5rem;
    padding: 0 .5rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.hangar-capacity-cont>div>section:nth-child(2) {
    width: 68%;
    background-color: var(--white);
    border-radius: var(--item-border-radius);
    padding: var(--padding);
    border: 1px solid #E6E6E6;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.hangar-capacity-cont>div>section:nth-child(2)>div {
    height: 2rem;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.hangar-capacity-cont>div>section:nth-child(2)>div>h3 {
    color: var(--black-mid);
    font-weight: 600;
    font-size: calc(var(--subtitle-size) - .3rem);
}


.hangar-capacity-cont>div>section:nth-child(2)>div>button {
    border: 1px solid var(--black-mid);
    background-color: var(--white);
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    border-radius: var(--button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-mid);
    transition: var(--transition);
}

.hangar-capacity-cont>div>section:nth-child(2)>div>button:hover {
    background-color: var(--black-mid);
    color: var(--white);
}

.hangar-capacity-cont>div>section:nth-child(2)>div>section {
    height: 90%;
    background-color: var(--white);
    flex-grow: 1;
    display: flex;
    align-items: center;
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    padding: 0 .2rem;
}


.hangar-capacity-cont>div>section:nth-child(2)>div>section:focus-within {
    outline: 2px solid var(--blue-300);
}

.hangar-capacity-cont>div>section:nth-child(2)>div>section>input {
    flex-grow: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 .3rem 0 0.3rem;
    border-radius: var(--input-radius);
    font-size: calc(var(--p-size) + .1rem);
    text-transform: uppercase;
}

.hangar-capacity-cont>div>section:nth-child(2)>div>section>i {
    width: 1rem;
}

.hangar-capacity-cont>div>section:nth-child(2)>section {
    width: 100%;
    height: 80%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.hangar-contact-info-cont {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.hangar-contact-info-cont>h4 {
    font-size: calc(var(--subtitle-size) - .1rem);
}

.hangar-contact-info-cont>section {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
}

/* .hangar-contact-info-cont>section>input { */
/* height: var(--input-height); */
/* width: 6rem; */
/* border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    padding: var(--item-padding); */
/* outline: none; */
/* font-size: var(--input-font-size); */
/* flex-grow: 1;
    text-transform: uppercase;
    color: var(--black); */
/* } */


.hangar-contact-info-cont>section>input::placeholder {
    color: var(--black);
}

.hangar-contact-info-cont>div {
    width: 100%;
    height: 7rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.hangar-contact-info-cont>div>span {
    display: inline-block;
}

.hangar-contact-info-cont>div>span,
.hangar-contact-info-cont>div>input {
    width: 100%;
}

.hangar-contact-info-cont>div>input {
    height: var(--input-height);
    /* width: 6rem; */
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    padding: var(--item-padding);
    /* outline: none; */
    font-size: var(--input-font-size);
    text-transform: uppercase;
    color: var(--black);
}

.hangar-contact-info-cont>div>input::placeholder {
    color: var(--black);
}

.popOver-content-site {
    min-height: 15rem;
    min-width: 15rem;
    border: 1px solid #C7C7C7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.popOver-content-site>h3 {
    color: var(--black-mid);
    font-size: calc(var(--subtitle-size) - .3rem);
}

.popOver-content-site>.dropdown-aircraftType-cont {
    width: 90%;
}

.popOver-content-site>section {
    height: 2rem;
    width: 90%;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.popOver-content-site>section>p {
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    width: 70%;
    font-weight: 600;
}


.popOver-content-site>section>input {
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    width: 30%;
    height: 90%;
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    padding: 0 .2rem;
    /* outline: none; */
    text-align: end;
}

.popOver-content-site>.estimated-aircraft-cap-btn-cont {
    width: 90%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

.popOver-content-site>.estimated-aircraft-cap-btn-cont>button {
    height: 1.8rem;
    width: 6rem;
    border-radius: var(--radius);
    border: none;
    /* outline: none; */
    cursor: pointer;
    font-size: calc(var(--p-size));
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--gap);
    justify-content: center;
    transition: var(--transition);
}

.popOver-content-site>.estimated-aircraft-cap-btn-cont>button:nth-child(1) {
    background-color: var(--black-mid);
    color: var(--white);
}


.popOver-content-site>.estimated-aircraft-cap-btn-cont>button:nth-child(2) {
    background-color: #FF6E6E;
    color: var(--white);
}



.popOver-content-site>.estimated-aircraft-cap-btn-cont>button:nth-child(1):hover {
    background-color: var(--white);
    color: var(--black-mid);
    outline: 1px solid var(--black-mid);
}

.phone-input-disabled .react-international-phone-input {
    background-color: var(--disabled-input-bg) !important;
    pointer-events: none;
    border: none !important;
    color: var(--grey-250) !important;
  }.rack-grey-bg{
    border-radius: var(--item-border-radius);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: var(--gap);
}

.racks-expandable-header{
    width: 100%;
    min-height: var(--item-min-height);
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    border-radius: var(--item-border-radius);
    border: 2px solid #E6E6E6;
    background-color: var(--white-100);
    padding: var(--item-padding);
    padding-left: 1.8rem;
    transition: var(--transition);
    position: relative;
    margin: auto;
    cursor: pointer;

}


/* Estilos para los spans que NO tienen la clase .draft-rack-span */    
.racks-expandable-header > span:not(.draft-rack-span) {
    height: 0.4rem;
    width: 0.4rem;
    border-radius: 50%;
    background-color: var(--green-250);
    position: relative;
    z-index: 4;
    display: flex;
    transform: translate(-1px , -1px);
}

/* Estilos específicos para el span con la clase .draft-rack-span */
.racks-expandable-header > span.draft-rack-span {
    background-color: var(--blue-300) ;
    position: absolute ;
    top: 0 ;
    left: 0 ;
    border-top-left-radius: var(--item-border-radius);
    border-bottom-right-radius: var(--item-border-radius) ;
    font-size: var(--p-size) ;
    width: 4rem ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    color: var(--white) ;
    z-index: 1000;
}

.racks-expandable-header > h4{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 600;
    color: var(--green-250);
}
.racks-expandable-header > p{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: var(--gap);
}

.racks-expandable-header > p > span{
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
}

.racks-expandable-header .total-shelves-span{
    color: var(--white);
    background-color: #E29E29;
    width: 1rem;
    height: 1rem;
    border-radius: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border  : none
}

.actions-section-sitesExp{
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap-2);
    height: 100%;
}

.actions-section-sitesExp > p{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
}

.actions-section-sitesExp > i{
    font-size: calc(var(--subtitle-size) - .15rem);
    cursor: pointer;
}

.racks-expandable-content{
    height: 0;
    /* overflow: hidden; */
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    display: none;
}

.racks-expandable-content.open{
    height: auto;
    /* overflow: hidden; */
    transition: var(--transition);
    opacity: 1;
    visibility: visible;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    justify-content: center;
    /* z-index: 100; */
    /* width: 98%; */
}

.form-edit-rack{
    width: 98%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    padding-bottom: .5rem;
}

.inp-cont-formRack{
    height: 2.8rem;
    display: flex;
    width: 40%;
    align-items: center ;
    gap: var(--gap);
    justify-content: space-between;
}

.inp-cont-formRack > input{
    height: var(--input-height);
    padding: var(--input-padding);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    border: 1px solid var(--input-border);
    text-transform: uppercase;
    /* outline: none; */
}

.inp-cont-formRack > input:nth-child(1) {
    width: 55%;
    min-width: 10rem;
}


.inp-cont-formRack > input:nth-child(2) {
    flex-grow: 1;
    min-width: 10rem;
}


.inp-cont-formRack > div{
    display: flex;
    width: 40%;
    align-items: center;
    height: var(--input-height);
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    gap: var(--gap);
    justify-content:space-between;
    background-color: var(--white);
    /* padding: var(--input-padding); */

    
}

.inp-cont-formRack > div > input{
    height: 100%;
    width: 100%;
    background-color: transparent;
    border: none;
    /* outline: none; */
    font-size: var(--input-font-size);
    text-transform: uppercase;
    padding:  0 .3rem;
    border-radius: var(--input-radius);

}
.inp-cont-formRack > div > p{
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 500;
    color: var(--black-mid);
}
.checks-cont-formRack{
    height: 2.8rem;
    width: 50%;
    display: flex;
    flex-grow: 1;
    padding-left:.5rem ;
    align-items: center;
    gap: var(--gap);
}

.rack-status-icons{
    width: 5%;
    min-width: 5rem;
    display: flex;
    height: 100%;
    align-items: center;
    gap: var(--gap); 
    /* background-color: slateblue;    */
}

.shelve-grey-bg{
    border-radius: var(--item-border-radius);
    display: flex;
    flex-direction: column;
    position: relative;
    /* align-items: center; */
    gap: var(--gap);
}

.shelve-expandable-header{
    width: 100%;
    min-height: var(--item-min-height);
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    border-radius: var(--item-border-radius);
    border: 2px solid #E6E6E6;
    background-color: var(--white-100);
    padding: var(--item-padding);
    padding-left: 2.6rem;
    transition: var(--transition);
    position: relative;
    
}

.shelve-expandable-header > span:not(.draft-shelf-span){
    height: .4rem;
    width: .4rem;
    border-radius: 50%;
    background-color: #E29E29;
    display: flex;
    position: relative;
    z-index: 4;
}

.shelve-expandable-header > span.draft-shelf-span{
    background-color: var(--blue-300) ;
    position: absolute ;
    top: 0 ;
    left: 0 ;
    border-top-left-radius: var(--item-border-radius) ;
    border-bottom-right-radius: var(--item-border-radius);
    font-size: var(--p-size) ;
    width: 4rem ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    color: var(--white) ;
    z-index: 1000;
}

.shelve-expandable-header > h4{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 600;
    color: #E29E29;
}
.shelve-expandable-header > p{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: var(--gap);
}

.shelve-expandable-header > p > span{
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
}

.shelve-expandable-header .bin-num-span{
    color: var(--white);
    background-color: #BD68F6;
    width: 1rem;
    height: 1rem;
    border-radius: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.actions-section-sitesExp{
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap-2);
    height: 100%;
}

.actions-section-sitesExp > p{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;

}

.actions-section-sitesExp > i{
    font-size: calc(var(--subtitle-size) - .15rem);
    cursor: pointer;
}

.shelve-expandable-content{
    height: 0;
    /* overflow: hidden; */
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    display: none;
}

.shelve-expandable-content.open{
    height: auto;
    /* overflow: hidden; */
    transition: var(--transition);
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* width: 98%; */
}

.shelve-edit-form{
    width: 98%;
    margin: auto;
    margin-bottom: .5rem;
    display: flex;
    height: 2.9rem;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

.shelve-edit-form > .shelve-inp-cont{
    height: 40%;
    width: 25%;
    display: flex;
    align-items: center ;
    gap: var(--gap);
    
}

.shelve-inp-cont > input{
    height: var(--input-height);
    padding: var(--input-padding);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    border: 1px solid var(--input-border);
    text-transform: uppercase;
    flex-grow: 1;
    /* outline: none; */
}

/* .shelve-inp-cont > input:nth-child(1) {
    width: 23%;
    min-width: 10rem;
}


.shelve-inp-cont > input:nth-child(2) {
    flex-grow: 1;
    min-width: 10rem;
} */


.shelve-edit-form > .shelve-measurements{
    height: 55%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* gap: var(--gap); */
}

.shelve-measurements > .shelves-measures-inp-cont{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    width: 100%;
    height: 50%;
    position: relative;
}

.shelves-measures-inp-cont > p{
    position: absolute;
    top:-2rem;
    z-index: 100;
}

/* .shelve-measurements > .shelves-measures-inp-cont > input{
    height: var(--input-height);
    padding: var(--input-padding);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    border: 1px solid var(--input-border);
    width: 15%;
} */
.shelve-measurements > .shelves-measures-inp-cont > i{
    color: var(--black-mid);
    font-size: var(--p-size);
}
.shelve-measurements > .shelves-measures-inp-cont > p{
    font-weight: 700;
    font-size: calc(var(--p-size) + .1rem);
    color: var(--black-mid);
}

.shelve-measurements> p{
    font-weight: 600;
    font-size: calc(var(--subtitle-size) - .3rem);
    padding-left: .5rem;
}

.uom-drop-cont{
    width: 35%;
}.bin-grey-bg {
  border-radius: var(--item-border-radius);
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  position: relative;
  gap: var(--gap);
  /* z-index: 100; */
}

.bin-expandable-header {
  width: 100%;
  min-height: var(--item-min-height);
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  border-radius: var(--item-border-radius);
  border: 2px solid #e6e6e6;
  background-color: var(--white-100);
  padding: var(--item-padding);
  padding-left: 3.4rem;
  transition: var(--transition);
  position: relative;
}

.bin-expandable-header>span:not(.draft-bin-span) {
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 50%;
  background-color: #bd68f6;
  display: flex;
}

div.draft-bin-span {
  background-color: var(--blue-300);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: var(--item-border-radius);
  border-bottom-right-radius: var(--item-border-radius);
  font-size: var(--p-size);
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  z-index: 1000;
}

.bin-expandable-header>h4 {
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 600;
  color: #bd68f6;
}

.bin-expandable-header>p {
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  gap: var(--gap);
}

.bin-expandable-header>p>span {
  font-weight: 600;
  color: var(--black);
  text-transform: uppercase;
}

/* .bin-expandable-header > p:nth-child(6) > span {
  color: var(--white);
  background-color: #bd68f6;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.actions-section-sitesExp {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap-2);
  height: 100%;
}

.actions-section-sitesExp>p {
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500;
}

.actions-section-sitesExp>i {
  font-size: calc(var(--subtitle-size) - 0.15rem);
  cursor: pointer;
}

.bin-expandable-content {
  height: 0;
  /* overflow: hidden; */
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  display: none;
}

.bin-expandable-content.open {
  height: auto;
  /* overflow: hidden; */
  transition: var(--transition);
  opacity: 1;
  visibility: visible;
  display: block;
  /* z-index: 20; */
}

.bin-edit-form {
  width: 98%;
  margin: auto;
  margin-bottom: .5rem;
  display: flex;
  /* flex-direction: column; */
  height: 2.9rem;
  gap: 2rem;
  justify-content: space-around;
  align-items: center;
}

.bin-edit-form>.bin-inp-cont {
  height: 40%;
  width: 25%;
  display: flex;
  align-items: center;
  gap: var(--gap);

}

/* .bin-inp-cont>input {
  height: var(--input-height);
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  font-size: var(--input-font-size);
  border: 1px solid var(--input-border);
  text-transform: uppercase;
  outline: none;
} */
/* 
.bin-inp-cont>input:nth-child(1) {
  width: 23%;
  min-width: 10rem;
}


.bin-inp-cont>input:nth-child(2) {
  flex-grow: 1;
  min-width: 10rem;
} */


.bin-edit-form>.bin-measurements {
  height: 55%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* gap: var(--gap); */
}

.bin-measurements>.bin-measures-inp-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  width: 100%;
  height: 50%;
}

.bin-measurements>.bin-measures-inp-cont>p {
  font-weight: 700;
  font-size: calc(var(--p-size) + .1rem);
  color: var(--black-mid);
}

.bin-measurements>.bin-measures-inp-cont>input {
  /* height: var(--input-height); */
  height: 5vh;
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  font-size: var(--input-font-size);
  border: 1px solid var(--input-border);
  /* outline: none; */
  width: 15%;
}

.bin-measurements>.bin-measures-inp-cont>i {
  color: var(--black-mid);
  font-size: var(--p-size);
}

.bin-measurements>p {
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - .3rem);
  padding-left: .5rem;
}

.uom-drop-cont {
  width: 35%;
}.delete-bin-cont{
    height: 11rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.delete-bin-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-bin-cont > .delete-bin-pCont{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-bin-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 600;
}

.delete-bin-pCont > p > span{
    font-weight: 400;
}

.delete-bin-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-bin-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-bin-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-bin-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-bin-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.delete-shelf-cont{
    height: 11rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.delete-shelf-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-shelf-cont > .delete-shelf-pCont{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-shelf-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 600;
}

.delete-shelf-pCont > p > span{
    font-weight: 400;
}

.delete-shelf-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-shelf-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--button-radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-shelf-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-shelf-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-shelf-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.delete-rack-cont{
    height: 11rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.delete-rack-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-rack-cont > .delete-rack-pCont{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-rack-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 600;
}

.delete-rack-pCont > p > span{
    font-weight: 400;
}

.delete-rack-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-rack-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--button-radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-rack-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-rack-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-rack-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.delete-site-cont{
    height: 11rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
    padding: .5rem;
}

.delete-site-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-site-cont > .delete-site-pCont{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-site-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 600;
}

.delete-site-pCont > p > span{
    font-weight: 400;
}

.delete-site-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-site-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--button-radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-site-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-site-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-site-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.AircraftTypeItem-section{
    background-color: var(--white-100);
    border: 1px solid #E6E6E6;
    border-radius: var(--item-border-radius);
    min-height: 1.9rem;
    padding: 0 .5rem;
    display: flex;
    align-items: center;   
    gap: var(--gap-2);
}

.AircraftTypeItem-section > p{
    color: var(--grey-250);
    font-size: calc(var(--p-size));
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--gap);
}


.AircraftTypeItem-section > p > span{
    color: var(--black-mid);
    font-weight: 700;    
}

.AircraftTypeItem-section > section{
    height: 90%;
    flex-grow: 1;
    display: flex;
    justify-content: end;
    gap: var(--gap);
    align-items: center;

}

.AircraftTypeItem-section > section > i{
    color: var(--grey-250);
    cursor: pointer;
    font-size: .9rem;
}.sites-config-modal-cont {
  max-height: 90vh;
  max-width: 90vw;
  width: 90vw;
  height: 90vh;
  padding: .5rem;
  overflow: hidden;
  background-color: var(--blue--100) !important;

  --list-item-display: grid;
    --list-item-template:  27% 17.5% 6% ;
    --list-item-justify: left;
    --list-item-padding :0 2.8rem;
    --list-item-gap: var(--gap);

}

.sites-config-modal-cont>header {
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;

}

.sites-config-modal-cont>header>p {
  color: var(--black-mid);
  font-size: calc(var(--subtitle-size) - .2rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1rem;
}


.sites-config-modal-cont>header>p>span {
  color: var(--black);
  font-size: calc(var(--p-size) + .2rem);
  font-weight: 400;
}

.sites-config-modal-searchCont {
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.sites-config-modal-searchCont>svg:nth-child(1) {
  height: 1.2rem;
  width: 1.2rem;
}

.sites-config-modal-searchCont>span {
  background-color: var(--blue-300);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: .3rem;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--p-size);

}

.sites-config-modal-searchCont>p {
  color: var(--black);
  font-size: calc(var(--p-size) + .3rem);
  font-weight: 600;
}

.sites-search-cont {
  height: 1.8rem;
  width: 50%;
  display: flex;
  align-items: center;
  gap: .2rem;
  border: 1px solid #B7B7B7;
  border-radius: var(--input-radius);
  padding: .3rem .5rem;
}

.sites-search-cont:focus-within{
  outline: 1px solid var(--blue-300);  
}

.sites-search-cont>input {
  height: 100%;
  flex-grow: 1;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 0 .5rem;
  background-color: var(--white);
  color: var(--black);
  font-size: calc(var(--p-size) + .2rem);
  font-weight: 400;
}


.sites-search-cont>img {
  height: 1rem;
  width: 1rem;
}

.sites-config-modal-searchCont>div:nth-child(6) {
  height: 1.8rem;
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.sites-config-modal-searchCont>div:nth-child(6)>p {
  color: #646464;
  font-size: calc(var(--p-size) + .1rem);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.sites-config-modal-searchCont>div:nth-child(6)>p>span {
  height: .5rem;
  width: .5rem;
  display: flex;
  border-radius: 50%;
}

.sites-config-modal-sitesCont {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: auto;
  max-height: 70vh;
  overflow: hidden auto;
  padding: .3rem;
}


.btn-add-new-site {
  width: 6.20rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  border: 1px solid var(--black-mid);
  background-color: var(--black-mid);
  cursor: pointer;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  transition: var(--transition);
}

.btn-add-new-site:hover{
  background-color: var(--black);
  box-shadow: 0 5px 5px #33333355;
}.results-not-found-cont{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: .5rem;
    flex-wrap: wrap;
}

.results-not-found-cont > section{
    height: 100%;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.results-not-found-cont > section > img{
    height: 70%;
    width: 90%;
    min-height: 10rem;
}

.results-not-found-cont > section:nth-child(2){
    flex-direction: column;
    align-items: baseline;
    gap: var(--gap);
}


.results-not-found-cont > section:nth-child(2) > h2{
    font-size: calc(var(--subtitle-size) + .3rem);
    color: var(--black-mid);
    font-weight: 700;
}

.results-not-found-cont > section:nth-child(2) > p{
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 400;
    color: var(--black-mid);
    opacity: .62;
    max-width: 80%;
}.sorting-btn-component {
  height: 1.8rem;
  width: 1.8rem;
  background-color: var(--black-mid);
  color: var(--white);
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sorting-btn-component .icon-Sorting_button {
  font-size: 0.9rem;
}

.sorting-component-fs {
  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);
  /* display: flex; */
  /* align-items: center; */
  /* padding: var(--item-padding); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  height: 2.3rem;
  position: relative;
  /* padding-top: 0; */
  /* padding-bottom: 0; */
  /* position: sticky;
    top: 0; */
}
.sorting-component-fs > button {
  position: absolute;
  right: 0;
}
.sorting-component-fs .columns {
  display: var(--list-item-display, flex);
  grid-template-columns: var(--list-item-template, unset);
  align-items: center;
  gap: var(--list-item-gap, 1.72rem);
  justify-items: var(--list-item-justify, left);
  padding: var(--list-item-padding, 0);
  width: 100%;
}
.sorting-component-fs .columns .column-direction {
  flex-direction: column;
  text-align: center;
}
.sorting-component-fs .columns .column-direction b {
  font-size: 0.6rem;
}
.sorting-component-fs .columns > .column {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sorting-component-fs .columns > .column > .arrows {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sorting-component-fs .columns > .column b {
  cursor: pointer;
}
.sorting-component-fs b {
  font-size: 0.62rem;
}
.sorting-component-fs .arrow-button {
  cursor: pointer;
  display: grid;
  place-items: center;
  min-width: 0.96rem;
  aspect-ratio: 1;
  font-size: var(--icon-font-size);
  background-color: var(--item-background-color);
  border-radius: 0.2rem;
  color: var(--icon-default-color);
  position: relative;
}
.sorting-component-fs .arrow-button.active {
  background-color: var(--black-mid);
  color: var(--white);
}
.sorting-component-fs .arrow-button > u {
  text-decoration: none;
  position: absolute;
  aspect-ratio: 1;
  width: 0.7rem;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  left: 0.6rem;
  top: -0.4rem;
  color: #ffffff;
  background-color: #fe5757;
  border-radius: -12rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sorting-menu {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 1rem 1rem;
  gap: 0.5rem;
  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);
}
.sorting-menu .arrow-button {
  cursor: pointer;
  display: grid;
  place-items: center;
  min-width: 0.96rem;
  aspect-ratio: 1;
  font-size: var(--icon-font-size);
  background-color: var(--item-background-color);
  border-radius: 0.2rem;
  color: var(--icon-default-color);
}
.sorting-menu .arrow-button.active {
  background-color: var(--black-mid);
  color: var(--white);
  font-weight: 100;
}
.sorting-menu .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.sorting-menu .header .left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sorting-menu .header .left .sub-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sorting-menu .header .left span {
  font-size: 0.6rem;
}
.sorting-menu .header .left b {
  font-size: 0.9rem;
}
.sorting-menu .header .right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sorting-menu .dnd-activity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.64rem;
  row-gap: 0.3rem;
}
.sorting-menu .dnd-activity > span {
  font-size: 0.63rem;
  margin-left: 0.4rem;
}
.sorting-menu .dnd-activity .dnd-items {
  min-height: var(--input-height);
  min-width: 11rem;
  background-color: var(--item-background-color);
  border-radius: calc(var(--input-radius) + 0.2rem);
  padding: 0.2rem;
  border: var(--item-border);
  display: flex;
  flex-direction: column;
  /* gap: 0.2rem; */
}
.sorting-menu .dnd-activity .dnd-items .spacer {
  min-height: 0.2rem;
  width: 100%;
  background-color: transparent;
  border-radius: var(--input-radius);
  transition: all 0.4s;
}
.sorting-menu .dnd-activity .dnd-items .spacer.dragover {
  margin: 0.2rem 0;
  background-color: var(--grey-75) !important;
  min-height: var(--input-height);
}
.sorting-menu .dnd-activity .dnd-items .items-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sorting-component-dnd-item {
  font-size: 0.6rem;
  border: var(--item-border);
  min-height: 1.6rem;
  border-radius: var(--input-radius);
  background-color: var(--white);
  padding: 0 0.4rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
}
.sorting-component-dnd-item i {
  cursor: pointer;
  color: var(--icon-default-color);
  font-size: var(--icon-font-size);
}
.sorting-component-dnd-item .item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sorting-component-dnd-item .item-content .icon-draggable {
  cursor: grab !important;
}
.sorting-component-dnd-item .item-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.align-left {
  text-align: left;
  width: 100%;
  justify-content: flex-start;
}

.align-center {
  width: 100%;
  justify-content: center;
}

.align-right {
  width: 100%;
  justify-content: flex-end;
}

.filters-and-sorting {
  height: 100%;
}

.filters-and-sorting-general-filters {
  height: 0;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
  max-height: 30vh;
  padding: 0;
  overflow: hidden auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  grid-auto-rows: minmax(2.3rem, auto);
  gap: var(--gap-2);
  place-items: center;
}

.filters-and-sorting-general-filters.open {
  height: auto;
  opacity: 1;
  visibility: visible;
  padding: var(--item-padding) 0 0 0;
}

.filters-and-sorting-general-filters > div {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sorting-and-filters-clear-btn {
  height: var(--input-height);
  width: 100%;
  border-radius: var(--button-radius);
  background-color: var(--black-mid);
  color: var(--white);
  cursor: pointer;
  border: none;
  transition: var(--transition);
  font-size: calc(var(--p-size) + 0.05rem);
  font-weight: 400;
}

.clear-btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}.part-request-main-cont {
  height: 100%;
  width: 100%;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .part-request-header {
    display: flex;
    justify-content: space-between;
    /* width: 100%; */
    align-items: flex-end;
    position: relative;
    /* top: 0.4rem; */
    /* padding: 0.2rem 0; */
  }
}

.part-request-top-section {
  display: flex;
  /* align-items: center; */
  /* border-bottom: 1px solid #efefef; */
  padding: 0 0 0.5rem 0;
  margin-bottom: 1rem;
  transition: var(--transition);

  .nav-bar-component {
    .header-n-actions {
      gap: 1rem;
      /* justify-content: unset; */


    }

    .filter-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: transparent;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;

      >i {
        transition: all 0.3s;

        &.open {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }

      h2 {
        font-size: 0.8rem;
      }
    }

    .nav-leftSide {
      width: auto;
    }
  }
}

.store-part-request-component {
  .view-options-part-request-stores {
    display: flex;
    gap: 0.4rem;
  
    .active-toogle {
      border: solid 1px var(--black-mid) !important;
      background-color: var(--black-mid) !important;
  
      .icon-list:before {
        color: var(--white) !important;
      }
  
      .icon-tabs:before {
        color: var(--white) !important;
      }
  
      .icon-tabular-view:before {
        color: var(--white) !important;
      }
  
      .icon-hierarchy-view:before {
        color: var(--white) !important;
      }
    }
  
    .toogle-view {
      background-color: #fbfbfb;
      border: 1px solid #f1f1f1;
      border-radius: var(--button-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      min-height: 1.7rem;
      min-width: 1.7rem;
  
      .icon-list:before {
        color: var(--black-mid);
      }
  
      .icon-tabs:before {
        color: var(--black-mid);
      }
  
      .icon-tabular-view:before {
        color: var(--black-mid);
      }
  
      .icon-hierarchy-view:before {
        color: var(--black-mid);
      }
  
      &:hover {
        border: solid 1px var(--black);
        /* color: var(--black-mid); */
        background: var(--black);
        box-shadow: var(--pop-over-shadow);
  
        .icon-list:before {
          color: var(--white);
        }
  
        .icon-tabs:before {
          color: var(--white);
        }
  
        .icon-tabular-view:before {
          color: var(--white);
        }
  
        .icon-hierarchy-view:before {
          color: var(--white);
        }
      }
    }
  }

  .part-request-button {
    width: 8rem;
    height: 2rem;
    min-width: 4rem;
    border-radius: var(--button-radius);
    border: none;
    background-color: var(--black-mid);
    color: var(--white);
    transition: var(--transition);
    cursor: pointer;

    &:hover {
      box-shadow: var(--button-shadow);
    }
  }

  .part-request-button-issue {
    width: 7.7123rem;
    height: 2rem;
    min-width: 7.7123rem;
    border-radius: 11px;
    border: none;
    background-color: var(--black-mid);
    color: var(--white);
    transition: var(--transition);
    cursor: pointer;
    background-color: #00ce88;
    transition: all 0.3s;
    padding: 0 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-size: 0.68rem;
    }

    .left-side {
      display: flex;
      align-items: center;
      gap: 0.2rem;
    }

    .cant-to-issue {
      display: flex;
      gap: 0.2rem;

      >div {
        background: #ffffff 0% 0% no-repeat padding-box;
        border-radius: 4px;
        color: #00ce88;
        font-weight: bold;
        width: 1rem;
        font-size: 0.68rem;
      }
    }

    &.disabled {
      background-color: var(--disabled-input-bg);
      color: var(--black-mid);
      pointer-events: none;

      .icon-issue:before {
        color: var(--black-mid);
      }
    }

    &:hover {
      box-shadow: var(--button-shadow);
    }
  }
}

.not-space {
  justify-content: unset !important;
  gap: 0.5rem;
}

.part-request-header-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem 0;
  width: 100%;

  .part-request-header-cont-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    .search-bar-input {
      width: 22.5rem;
    }
  }

  

  
}



.menu-options {
  .icon-issue:before {
    color: var(--black-mid);
  }
}

.part-request-top-section>div {
  width: 72%;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: var(--gap);
}

.part-request-top-section>div>section {
  width: 50%;
  height: 2rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.part-request-availability {
  display: flex;
  align-items: center;
  gap: var(--gap);
  font-size: var(--p-size);
  color: var(--grey-200);
  font-weight: 400;

  span {
    display: flex;
    align-items: center;
    gap: 0.3rem;

    .indicator {
      height: 1.3rem;
      width: 1.3rem;
      border-radius: var(--button-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 0.9rem;
    }
  }
}

.part-request-list-cont {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;

  --list-item-display: grid;
  --list-item-template: 12% 9% 14.5% 7.5% 10.5% 9% 5%;
  --list-item-justify: left;
  /* --list-item-padding : 0.5rem; */
  --list-item-gap: var(--gap-2);
}

.part-request-list-cont.Transfer {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;

  --list-item-display: grid;
  --list-item-template: 7.8% 5% 16.2% 14.5% 8% 9% 8.5% 5%;
  --list-item-justify: left;
  --list-item-padding :0  0 0 3rem;
  --list-item-gap: var(--gap);
}
.part-request-list-cont>section {
  height: 86%;
  display: flex;
  flex-direction: column;
  /* gap: var(--gap); */
  overflow: hidden auto;
  /* padding: 0.3rem; */
  padding: 0;
}

.Part-Request-prefix-status {
  background-color: #00ce88;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.Part-Request-prefix-status>i {
  color: var(--white);
}

.part-request-sufix-status {
  min-width: 6.56rem;
  width: 8rem;
  height: 1.56rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: calc(var(--subtitle-size) - 0.4rem);
  font-weight: 500;
  color: var(--blue-150);
  background-color: var(--blue-500);
  border: 1px solid var(--blue-150);
}

.part-request-filters-container {
  hr {
    border-top: solid var(--grey-75) 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
}

.part-request-filters {
  transition: var(--transition);
  display: grid;
  grid-template-columns: repeat(7, minmax(3rem, 14%));
  grid-auto-rows: 1fr;
  gap: var(--gap-2);
  padding: 0 0 0.5rem .1rem;
}

.part-request-filters>.status-filters-cont {
  grid-column: span 7;
  height: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: .3rem;
}

.part-request-filters>div {
  height: var(--input-height);
  border-radius: var(--input-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.part-request-filters>div>input {
  height: 100%;
  width: 100%;
  border: none;
  padding: 0 0.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--input-border);
}

.part-request-filters>div>input::placeholder {
  font-size: var(--p-size);
  color: var(--black-mid);
}


.btn-clear-all-filters-prnManagement {
  height: var(--input-height);
  grid-column: 7;
  border-radius: var(--button-radius);
  background-color: var(--black-mid);
  color: var(--white);
  cursor: pointer;
  border: none;
  transition: var(--transition);
  font-size: calc(var(--p-size) + 0.05rem);
  font-weight: 400;
}

.btn-clear-all-filters-prnManagement:hover {
  box-shadow: var(--button-shadow);
}

.date-range-show-data-selection-prn {
  display: flex;
  flex-direction: column;
  align-items: start !important;
  padding: .3rem;
}

.date-range-show-data-selection-prn>p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.08rem);
  font-weight: 500;
}

.date-range-show-data-selection-prn>span {
  font-size: calc(var(--p-size) - 0.05rem);
  color: var(--black-mid);

}

section.prn-hierarchy-tabs-btn {
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  align-items: center;
}

.prn-hierarchy-tabs-btn>button {
  height: 1.8rem;
  min-width: 5rem;
  width: 15%;
  max-width: 13rem;
  color: var(--black-mid);
  padding: .3rem .5rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid #F1F1F1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  background-color: white;

  font-size: var(--p-size);
  font-weight: 500
}


.prn-hierarchy-tabs-btn>button > span{
      background-color: var(--white);
    padding: .1rem;
    min-width: 1rem;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-mid);
    font-weight: 600;
    font-size: calc(var(--p-size));
}.PartRequestItem {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.PartRequestItem-header {
    background-color: #FBFBFB;
    width: 100%;
    height: var(--item-min-height);
    border-radius: var(--item-border-radius);
    padding: var(--item-padding) var(--item-padding) var(--item-padding) .85rem;
    border: 1px solid #F1F1F1;
    cursor: pointer;
    transition: var(--transition);

    display: flex;
    align-items: center;
    gap: var(--gap);
    z-index: 500;
}

.PartRequestItem-header.Transfer {
    display: grid;
    /* grid-template-columns: 5% 9% 5% 18% 15% 10% 10% 5% 5% 6%; */

}



.PartRequestItem-header:hover {
    background-color: #EFFCFF;
    border: 1px solid #B9D8DF;
}

.PartRequestItem-content {
    height: 0;
    /* overflow: hidden auto; */
    transition: var(--transition);
    opacity: 0;
}

.PartRequestItem-content.open {
    opacity: 1;
    padding: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    /* gap: var(--gap); */
}


/* .PartRequestItem-content.open::-webkit-scrollbar{
    display: none;
} */

.PartRequestItem-header>span.PartRequestItem-dot-span {
    /* background-color: #29ABE2; */
    position: absolute;
    left: .9rem;
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    z-index: 10;
    transition: var(--transition);
}

.PartRequestItem-header>div {
    background-color: #00ce88;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: var(--button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.PartRequestItem-header>div>i {
    color: var(--white);
}

.PartRequestItem-header>span:not(.PartRequestItem-dot-span) {
    position: absolute;
    right: 4rem;
    min-width: 6.56rem;
    width: 8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-radius);
    font-size: calc(var(--subtitle-size) - .4rem);
    font-weight: 500;
    color: var(--blue-150);
    background-color: var(--blue-500);
    border: 1px solid var(--blue-150);
}


.PartRequestItem-header>p {
    font-size: calc(var(--p-size) + .1rem);
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--black);

}

.PartRequestItem-header>p>span {
    color: var(--black-mid);
}

.PartRequestItem-header>button {
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    border-radius: var(--button-radius);
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: calc(var(--p-size) + .3rem);
    display: flex;
    align-items: center;
    justify-content: center;

}

.PartRequestItem-header>.PartRequestItem-button-edit {
    right: 2rem;
}

.PartRequestItem-header>.PartRequestItem-button-delete {
    right: .48rem;
}

.PartRequestItem-header>.PartRequestItem-button-cancel {
    right: .48rem;
    font-size: calc(var(--p-size) + .1rem);
}

button.PartRequestItem-button-save {
    right: 2rem;
    border-radius: .3rem;
    background-color: var(--black-mid);
}.PartRequestItemTask {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.partRequest-itemTask-header {
    background-color: #FBFBFB;
    width: 100%;
    height: var(--item-min-height);
    border-radius: var(--item-border-radius);
    padding: var(--item-padding) 1.75rem;
    border: 1px solid #F1F1F1;
    cursor: pointer;
    transition: var(--transition);

    display: flex;
    align-items: center;
    gap: var(--gap-2);
    position: relative;
    z-index: 300;
}

.partRequest-itemTask-header:hover {
    background-color: #EFFCFF;
    border: 1px solid #B9D8DF;
}

.PartRequest-ItemTask-content {
    height: 0;
    /* overflow: hidden auto; */
    transition: var(--transition);
    opacity: 0;
}

.partRequest-itemTask-header.open::after {
    content: "";
    background-color: var(--white);
    position: absolute;
    width: 100%;
    top: -.55rem;
    left: 0;
    height: .51rem;
    z-index: 30;
}


.PartRequest-ItemTask-content.open {
    height: auto;
    opacity: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
    /* gap: var(--gap); */
    margin-bottom: .5rem;
}

.partRequest-itemTask-header>span {
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    z-index: 50;
    transition: var(--transition);
}

.partRequest-itemTask-header>span.PartRequestItemTask-span-icon-availability {
    height: 1.5rem;
    width: 1.5rem;
    border-radius: var(--button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.partRequest-itemTask-header>span.PartRequestItemTask-span-icon-availability>i {
    color: var(--white);
}

.partRequest-itemTask-header>i {
    font-size: .9rem;
}

.partRequest-itemTask-header>p {
    font-size: calc(var(--p-size) + .1rem);
    display: flex;
    align-items: center;
    gap: var(--gap);
    color: var(--black);

}

.partRequest-itemTask-header>p>span {
    color: var(--black-mid);
    font-weight: 600;
}

.partRequest-itemTask-header>section {
    position: absolute;
    right: .48rem;
    display: flex;
    align-items: center;
    gap: var(--gap);
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 600;
    color: var(--black-mid)
}

.PNList-and-sorting-cont {
    --list-item-display: grid;
    --list-item-template: 11% 8% 13% 5.5% 8% 7.5% 11%;
    --list-item-justify: center;
    /* --list-item-padding : 0.5rem; */
    --list-item-gap: var(--gap);
    display: grid;
    align-items: center;
    gap: 0.48rem;

    overflow: hidden;
}

.sorting-sticky {
    position: sticky;
    top: calc(var(--item-min-height) + 3.2rem);
    background-color: #fff;
    /* border-radius: .5rem; */

    z-index: 5;
    padding-top: 0.2rem;
    /* padding-bottom: 0.5rem; */
    margin-bottom: .5rem;

    --list-item-display: grid;
    --list-item-template: 11% 8% 12.5% 8% 7.5% 11%;
    --list-item-justify: center;
    /* --list-item-padding : 0.5rem; */
    --list-item-gap: var(--gap);
    display: grid;
    align-items: center;
    gap: 0.48rem;

    overflow: hidden;
}


.PNList-cont {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}.partRequest-item-part {
    background-color: #FBFBFB;
    display: flex;
    align-items: center;
    /* gap: var(--gap); */
    height: var(--item-min-height);
    border-radius: var(--item-border-radius);
    border: 1px solid #DDDDDD;
    padding: var(--item-padding) 2.8rem;
    width: 100%;
    position: relative;
    /* margin-bottom: .5rem; */
    transition: var(--transition);
}

.partRequest-item-part > span{
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    z-index: 10;
    transition: var(--transition);
}

.partRequest-item-part:hover{
    background-color: #EFFCFF;
}

.partRequest-item-part>p , .partRequest-item-part>section {
    font-size: calc(var(--p-size));
    display: flex;
    align-items: center;
    gap: var(--gap);
    color: var(--black);
}

#issue-quantity-section-item-part{
    /* background-color: red; */
    min-width: 2rem;
    width: 5%;
    flex-direction: row-reverse;
    /* align-items: flex-end; */
    justify-content: flex-end;
    /* gap: 0; */
}

.insufficient-inventory-text{
    color: var(--warn);
    font-weight: 500;
}


#issue-quantity-section-item-part>div {
   background-color: var(--black-mid);
   /* width: 1rem;
   height: 1rem; */
   padding: .1rem .2rem;
   min-width: 1rem;
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: .2rem;
   font-weight: 600;
}

.partRequest-item-part>p>input{
    height: calc(var(--input-height));
    width: 100%;
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    padding: 0 .3rem;
    text-align: center;
    font-size: var(--p-size);
}

.partRequest-item-part > .part-request-item-inventory-count-header{
    position: absolute;
    right: .48rem;
    width: 30%;
    min-width: 14rem;
    height: 90%;
    display: flex;
    gap: var(--gap);
    align-items: center;
    justify-content: end;
}

.partRequest-item-part > .part-request-item-inventory-count-header > span{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    width: 30%;
}

.partRequest-item-part > .part-request-item-inventory-count-header > span >p{
    font-size: var(--p-size);
    color: var(--black-mid);
}

.partRequest-item-part > .part-request-item-inventory-count-header > span >p:nth-child(2){
    color: var(--warn);
}

.partRequest-item-part > .part-request-item-inventory-count-header > div{
    height: 1rem;
    width: 1rem;
    padding: .1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:.2rem;
    color: var(--white);
    font-size: var(--p-size);
    font-weight: 500;
}

.partRequest-item-part > .part-request-item-inventory-count-header > button{
    background-color: transparent;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: .2rem;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #858585;
    transition: var(--transition);
}

.partRequest-item-part > .part-request-item-inventory-count-header > .icon-open-log-part-request-part:hover{
    background-color: var(--black-mid);
    color: var(--white);
}


.partRequest-item-part > .part-request-item-inventory-count-header >section{
    background-color: #FFF5DF;
    height: 75%;
    border-radius: var(--button-radius);
    width: 35%;
    min-width: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3rem;
    border: 1px solid #DFB050;
}

.partRequest-item-part > .part-request-item-inventory-count-header > section > p{
    font-size: var(--p-size);
    color: #DFB050;
    font-weight: 400;
}.delete-PN-cont{
    height: 11rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.delete-PN-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-PN-cont > .delete-PN-pCont{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-PN-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 600;
}

.delete-PN-pCont > p > span{
    font-weight: 400;
}

.delete-PN-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-PN-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--button-radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-PN-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-PN-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-PN-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.HistoryItemPart {
    width: 50vw;
    height: auto;
    max-height: 17rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);

}

.HistoryItemPart>.HistoryItemPart-header {
    height: 2.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    position: relative;
}

.HistoryItemPart-header>h3 {
    font-size: calc(var(--subtitle-size) - .2rem);
}

.HistoryItemPart-header>p {
    font-size: calc(var(--p-size) + .1rem);
    color: var(--black-mid);
}

.HistoryItemPart-header>p>span {
    margin-left: .5rem;
    font-weight: 700;
}

.HistoryItemPart-header>button {
    position: absolute;
    right: 0;
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .3rem;
    border: 1px solid #333333;
    background-color: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.HistoryItemPart-header>button:hover {
    color: var(--white);
    background-color: var(--black-mid);
}

.HistoryItemPart-main {
    flex-grow: 1;
    overflow: hidden auto;

}

.HistoryItemPart-main>div {
    height: 2.04rem;
    border: 1px solid #F1F1F1;
    background-color: var(--white);
    border-radius: 10px;
    margin-bottom: .3rem;
    padding: 0 .5rem;

    display: flex;
    align-items: center;
    gap: var(--gap);
    transition: var(--transition);
}

.HistoryItemPart-main>div:hover {
    background-color: #EFFCFF;
}

.HistoryItemPart-main>div>span {
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    background-color: #29ABE2;
}

.HistoryItemPart-main>div>p {
    font-size: calc(var(--p-size));
    display: flex;
    align-items: center;
    gap: .2rem;
    color: var(--black-mid);
    font-weight: 400;
}

.HistoryItemPart-main>div>p>span {
    font-weight: 600;
}.delete-PRN-cont{
    height: 11rem;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.delete-PRN-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-PRN-cont > .delete-PRN-pCont{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-PRN-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .2rem);
    font-weight: 600;
}

.delete-PRN-pCont > p > span{
    font-weight: 400;
}

.delete-PRN-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-PRN-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--button-radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-PRN-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-PRN-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-PRN-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.part-request-tabular-list {
  height: 60%;
  display: flex;
  overflow: auto;
  margin-top: 0.5rem;
  flex-direction: column;
  padding: 0 0.3rem 0 0;
  gap: 0.4rem;
  details[open] {
    .item-component {
      background-color: var(--blue-500);
      border: solid 1px var(--green-25);
    }
  }
  .item-component {
    .image-container {
      color: var(--white);
      &.success {
        background: rgb(0, 206, 136);
      }
      &.warning {
        background: var(--yellow-100);
      }
      &.error {
        background: var(--red-50);
      }
        &.issued {
          background: var(--blue-300);
        }
    }
    .main-info {
      display: grid;
      grid-template-columns: 6vw 6vw 17vw 8vw 15vw 9vw 7vw 5vw;
      gap: 0.5vw;
    }
  }
}

.part-request-tabular-list-header.wp {
  --list-item-display: grid;
  --list-item-template:  5vw 6vw 16vw 7vw 14vw 10vw 10vw;
  --list-item-justify: left;
  /* --list-item-padding : 0.5rem; */
  --list-item-gap: var(--gap-2);
  display: flex;
  align-items: center;
  gap: 0.48rem;
  .sorting-component{
    width: 100%;
  }
  .sorting-free-slot {
    width: 1.68rem;
  }
}

.part-request-tabular-list-header.Transfer {
  --list-item-display: grid;
  --list-item-template:  5vw 6vw 16.3vw 7vw 14vw 7.9vw 6.5vw 8vw;
  --list-item-justify: left;
  /* --list-item-padding : 0.5rem; */
  --list-item-gap: var(--gap-2);
  display: flex;
  align-items: center;
  gap: 0.48rem;
  .sorting-component{
    width: 100%;
  }
  .sorting-free-slot {
    width: 1.68rem;
  }
}

.button-tabs-prn-tabular{
  height: 2rem;
  display: flex;
  gap: var(--gap);
  align-items: center;
}

.button-tabs-prn-tabular> button{
  height: 2rem;
  min-width: 5rem;
  width: 15%;
  max-width: 13rem;
  color: var(--black-mid);
  padding: .3rem .5rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid #F1F1F1;


  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);

}

.button-tabs-prn-tabular> button >p{
    font-size: var(--p-size);
    font-weight: 500;
}

.button-tabs-prn-tabular > button > span{
  background-color: var(--white);
  padding: .1rem;
  min-width: 1rem;
  border-radius: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-mid);
  font-weight: 600;

  font-size: calc(var(--p-size));
}.part-request-body {
  width: 100%;
  --list-item-display: grid;
  --list-item-template: 2.9vw 3.6vw 6vw 13vw 9.5vw 7.2vw 12.5vw 5vw 4.1vw 4vw
    5.2vw 6.5vw;
  --list-item-justify: left;
  --input-height: 1.808rem;
  --list-item-gap: 0.3vw;
  .sorting-component {
    padding: 0 0 0.4rem 0;
    width: 100%;
  }
  .grid-view-header {
    display: grid;
    grid-template-columns: 20rem 24rem 6rem 6rem 6rem 6rem;
    gap: 0.5rem;

    .part-request-number {
      display: flex;
      text-align: center;
      gap: 1rem;
      padding: 0 0.625rem;
    }
    .input-component {
      input {
        height: var(--input-height) !important;
      }
    }
    b {
      font-size: 0.68rem;
    }
  }
  .grid-view-body {
    background: #fafafa 0% 0% no-repeat padding-box;
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 0.2rem;
    flex-direction: column;

    .grid-view-body-list {
      height: 100%;
      flex-direction: column;
      display: flex;
      gap: 0.3rem;
    }
    .grid-view-row {
      display: grid;
      grid-template-columns: 2vw 10vw 13vw 10vw 6.5vw 13vw 4.5vw 4.5vw 4.5vw 4.5vw 7vw 7vw;
      align-items: center;
      gap: 0.3vw;
      .numberField {
        justify-content: flex-end;
      }
      .checkbox-field-component {
        box-shadow: none;
        border: 1px solid #efefef;
      }
      .part-request-status {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 5px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
    
        &.success {
          background: rgb(0, 206, 136);
        }
        &.warning {
          background: var(--yellow-100);
        }
        &.error {
          background: var(--red-50);
        }
        &.issued {
          background: var(--blue-300);
        }
      }
      .part-request-info {
        position: relative;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #efefef;
        border-radius: 8px;
        display: flex;
        padding: 0.438rem 0.525rem;
        cursor: pointer;
        align-items: center;
        color: var(--black-200);
        gap: 1rem;

        .part-request-icon {
          display: flex;
          gap: 0.2rem;
          align-items: center;
          .icon-task_icon_partRequest {
            font-size: 0.7rem;
          }
        }
        p {
          word-break: keep-all;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .detail-task-number {
          width: 3rem;
          overflow: hidden;
          text-align: center;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .detail-part-number {
          width: 4rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .detail-desc {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 9.5rem;
        }
        .icon-arrow-down {
          position: absolute;
          right: 10px;
          font-size: 0.55rem;
        }
      }
    }
  }
}
.complete-issued {
  .part-request-info {
    border: 1px solid #b9d8df !important;
    background: #effcff 0% 0% no-repeat padding-box !important;
  }
  input,
  textarea {
    &[disabled] {
      background: #effcff 0% 0% no-repeat padding-box !important;
      border: 1px solid #b9d8df !important;
    }
  }
  .checkbox-field-component {
    .checkbox-component {
      &.checked {
        background-color: var(--blue-250) !important;
      }
    }
    &.disabled {
      background: #effcff 0% 0% no-repeat padding-box !important;
      border: 1px solid #b9d8df !important;
      color: var(--blue-300);
    }
  }
}
.grid-request-detail-header {
  display: flex;

  gap: 0.3rem;
  > .checkbox-field-component {
    padding: 0 0 0 0.64rem;
    box-shadow: none;
    &.checked {
      background-color: transparent;
    }

    span {
      color: var(--black-mid);
      font-size: 0.6rem;
      font-weight: bold;
    }
  }
}
.item-grid-skeleton {
  display: grid;
  grid-template-columns: 1.5rem 8.5rem 11rem 8.9rem 6rem 5.5rem 3.8rem 3.8rem 3.8rem 3.8rem 5.2rem 5rem;
  align-items: center;
  gap: 0.3rem;
  .item-skeleton-content {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #efefef;
    border-radius: 8px;
    padding: 0 0.525rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;
    height: 100%;
    span {
      margin-top: 0.15rem;
    }
  }
}
.part-request-modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.7rem;
  .part-request-modal-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    button {
      width: 8rem;
      height: 2rem;
      border-radius: 15px;
      border: none;
      cursor: pointer;
      transition: var(--transition);
    }
    .pr-ok {
      background-color: var(--black-mid);
      border: 1px solid var(--black-mid);
      color: var(--white);
      &:hover {
        box-shadow: var(--button-shadow);
      }
    }
    .pr-cancel {
      background-color: #f16f6f;
      border: 1px solid #f16f6f;
      color: var(--white);
      &:hover {
        box-shadow: var(--button-shadow);
      }
    }
  }
  textarea {
    font-size: 0.6rem;
    border-radius: var(--input-radius);
    width: 100%;
    border: solid 1px var(--input-border);
    min-height: 4rem;
    /* max-height: 5rem; */
    padding: 0.3rem 0.5rem;
  }
}
.part-request-modal-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.date-range-component-container{
    width: 100%;
}

.date-range-component-btn{
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border);
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--input-height);
    padding: calc(var(--input-padding) - 0.2rem);
    cursor: pointer;
    font-size: var(--input-font-size);
}

.date-range-component-pickers-container{
    width: 100%;
    /* min-height: 5rem; */
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: calc(var(--input-padding) + 2rem) .3rem 1.3rem .3rem;
    border-radius: 1rem;
    gap: var(--gap);
    position: relative;
    
}

.date-range-component-pickers-container>p{
    position: absolute;
    right: .5rem;
    top: .3rem;
    text-decoration: underline;
    color: var(--green-300);
    cursor: pointer;
}.part-request-shop-component {
  display: flex;
  height: 88%;
  flex-direction: column;
  gap: 0.5rem;
  .main-content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .nav-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    > .filter-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: transparent;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;
      > i {
        transition: all 0.3s;
        &.open {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      h2 {
        font-size: 0.8rem;
      }
    }
  }
}
.buttons-container-order-actions{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.greenButton{
  
      background-color: #00ce88 !important;
      border: 1px solid #00ce88 !important;
}
.part-request-shop-component-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  --list-item-display: grid;
  --list-item-template: 5vw 9.5vw 5vw 4vw 5.5vw 5.6vw 5vw 5vw 5vw 5vw 5vw 3vw 7vw
    7vw;

  --list-item-justify: left;
  --list-item-padding: 0 0 0 0;
  --list-item-gap: 0.5rem;
  .sorting-header {
    .sorting-free-slot {
      padding-right: 3.8vw;
      margin-right: 0.5rem;
      width: 0;
      /* width: 3.8vw; */
    }
  }
  .sorting-component {
    margin: 0.4rem 0;
    b {
      font-size: 0.528rem;

      text-align: center;
    }
  }
  .part-request-header {
    display: flex;
    margin-top: 0.5rem;
    align-items: center;
    justify-content: space-between;
    .left-container {
      display: flex;
      align-items: center;
      width: 50%;
      gap: 0.5rem;
    }
  }
}
.cant-to-order {
  display: flex;
  gap: 0.2rem;
  align-items: center;

  > div {
    background: #fbfbfb 0% 0% no-repeat padding-box;
    border-radius: 4px;
    color: #404041;
    font-weight: bold;
    width: 1rem;
    font-size: 0.68rem;
  }
}
.supply-chain-list {
  height: 100%;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem 1.5rem 0;
  gap: 0.4rem;

  details[open] {
    .item-component {
      background-color: var(--blue-500);
      border: solid 1px var(--green-25);
    }
  }

  .expandable-details {
    overflow: visible;
  }
}
.filled {
  &.disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}
.image-container-checkbox {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  display: flex;
  font-size: var(--input-font-size);
  border-radius: var(--input-radius);
  width: 100%;
  cursor: pointer;
}
.item-prn-management-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns:
   3.8vw 5vw 9.5vw 4.5vw 4vw 5vw 5.6vw 5vw 5vw 6vw 4vw 5vw 3vw
    9vw 6vw;

  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding);
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .image-container {
    height: 1.38rem;
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    &.centerItem {
      width: 100%;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-date {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      text-decoration: underline;
      color: var(--blue-300);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .bold-font-black {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
}
.company-stock-full-container {
  max-height: 80vh;
  height: 80vh;
  display: flex;
  flex-direction: column;
  h3 {
    font-size: 0.84rem;
    margin: 0;
  }

  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  .search-bar-input {
    width: 45%;
  }
  .company-stock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .company-stock-header-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .company-stock-part-info {
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    gap: 1rem;
    border-radius: 0.4rem;
    border: 1px solid #f1f1f1;
    background-color: #fbfbfb;
    .company-stock-part-info-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.7rem;
      b {
        font-size: 1em;
      }
    }
  }
}
.company-stock-list {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem 0 0;
  gap: 0.4rem;
  --list-item-display: grid;
  --list-item-template: 16vw 12vw 12vw 15vw;

  --list-item-justify: left;
  --list-item-padding: 0 0 0 0;
  --list-item-gap: 1rem;
}
.item-global-location-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 1rem;
  cursor: pointer;
  padding-left: 1.5rem !important;
  grid-template-columns: 17vw 12vw 12vw 15vw 10vw;

  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding);
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }

  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      text-decoration: underline;
      color: var(--blue-300);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.transfer-button-color {
  width: 7.7123rem;
  height: 2rem;
  min-width: 7.7123rem;
  border-radius: 11px;
  border: none;
  background-color: var(--black-mid);
  color: var(--white);
  transition: var(--transition);
  cursor: pointer;
  background-color: #00ce88;
  &:hover {
    background-color: #00ce88;
    box-shadow: var(--button-shadow);
  }
  transition: all 0.3s;
  padding: 0 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.transfer-request-full-container {
  max-height: 85vh;
  height: 85vh;
  display: flex;
  flex-direction: column;
    --list-item-display: grid;
  --list-item-template: 4.5vw 6.3vw 4vw 5vw 4vw 3vw 4vw 4vw 5vw 6vw 5vw 6vw;

  --list-item-justify: left;
  --list-item-padding: 0 0 0 0;
  --list-item-gap: 1rem;
  .sorting-component {
    b {
      font-size: 0.528rem;

      text-align: center;
    }
  }
  h3 {
    font-size: 0.84rem;
    margin: 0;
  }
  .sub-title-transfer {
    font-size: 0.7rem;
    margin: 0.5rem 0 0.2rem;
  }
  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  .transfer-request-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .transfer-request-header-info {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .transfer-request-part-info {
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    gap: 1rem;
    border-radius: 0.4rem;
    border: 1px solid #f1f1f1;
    background-color: #fbfbfb;
    .transfer-request-part-info-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.7rem;
      b {
        font-size: 1em;
      }
    }
  }
}
.transfer-request-origin-destination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  .transfer-request-origin-container {
    &.activate {
      background: #effcff 0% 0% no-repeat padding-box;
      border: 1px solid #b9d8df;
      .transfer-request-origin-left {
        .icon-airport-new:before {
          color: #29abe2;
        }
        b {
          color: #29abe2;
        }
      }
    }
    border-radius: 10px;
    background: #fbfbfb 0% 0% no-repeat padding-box;
    border: 1px solid #f1f1f1;
    display: flex;
    align-items: center;

    height: 100%;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    gap: 2rem;

    .transfer-request-origin-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon-airport-new {
        margin-bottom: 0.5rem;
        font-size: 1.8rem;
     
      }
         b{
          white-space: nowrap;
        }
    }
    .transfer-request-origin-right {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      .transfer-request-origin-right-item {
        display: flex;
        align-items: center;
        gap: 2rem;
        justify-content: space-between;
        b {
          font-size: 0.615rem;
        }
        p {
          text-align: right;
          font-size: 0.615rem;
        }
      }
    }
  }
}
.company-transfer-list {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  padding: 0 0.3rem 0 0;
  gap: 0.4rem;

}
.transfer-request-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  .transfer-button-color {
    white-space: nowrap;
    padding: 0 1rem;
    width: auto;
  }
}
.item-global-tramsfer-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 1rem;
  cursor: pointer;
  padding-left: 1.5rem !important;
  grid-template-columns: 4.5vw 6.3vw 4vw 5vw 4vw 3vw 4vw 4vw 5vw 6vw 5vw 6vw;

  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding);
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }

  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    width: 100%;
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.isNumeric {
        text-align: center;
      }
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      text-decoration: underline;
      color: var(--blue-300);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.btn-search-prn-filter {
  background-color: var(--black-mid);
  right: calc(var(--padding));
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  width: 18.4%;
  height: 5vh;
  color: var(--white);
  font-size: var(--p-size);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) + 0.3rem);
  margin-bottom: 0.5rem;
}

.btn-search-prn-filter > svg {
  height: 1.9vh;
}

.footer-basicFilters{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}.new-order-full-content {
  height: 89vh;
  width: 95vw;
  display: flex;
  flex-direction: column;
  --input-height: 1.9rem;
  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  --list-item-display: grid;
  --list-item-template: 1.8vw 5vw 7.5vw 13.5vw 4vw 6vw 5.6vw 5vw 5vw 6vw;
  --list-item-justify: left;
  --list-item-padding: 0 0 0 0.48rem;
  --list-item-gap: 0.5rem;
  .title-order-detail {
    font-size: 0.7rem;
  }
  .sorting-header {
    padding: 0 0.7rem 0 0;
    .last-column {
      font-size: 0.528rem;
      white-space: nowrap;
    }
  }
  .sorting-component {
    .column {
      width: 100%;
    }
    b {
      font-size: 0.528rem;
      width: 100%;
      text-align: center;
    }
  }
}
.new-order-full-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .new-order-full-content-header-left {
    display: flex;
    align-items: center;
    .new-order-full-content-header-left-title {
      gap: 0.5rem;
      display: flex;
      align-items: center;
      b {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
      }
    }
  }
  .new-order-full-content-header-right {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    b,
    p {
      font-size: 0.61rem;
    }

    .total-price {
      color: #29abe2;
    }
    .order-summary {
      color: #29abe2;
      text-decoration: underline;
    }
  }
}

.new-order-full-content-body-top {
  display: flex;
  margin-top: 0.5rem;
  justify-content: space-between;
  align-items: center;
  .new-order-full-content-body-top-left {
    b {
      font-size: 0.7rem;
    }
  }
  .new-order-full-content-body-top-right {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    b {
      font-size: 0.65rem;
    }
  }
}

.new-order-form-general-info {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  .new-order-form-general-info-row1 {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 12vw 8vw 15vw 15vw 7vw 16.5vw 8vw 8vw;
    align-items: center;
    .vendor-container-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      .more-options-container {
        cursor: pointer;
        font-size: 0.68rem;
      }
    }
    .class-vendor-score {
      border: 1px solid #b9d8df;
      background-color: #effcff;
      display: flex;
      border-radius: 9px;
      justify-content: space-between;
      padding: 0 1rem;
      align-items: center;
      height: 100%;
      p {
        font-size: 0.65rem;
      }
      .score-container {
        display: flex;
        align-items: center;
        gap: 0.3rem;
      }
      .icon-favorite {
        font-size: 0.55rem;
      }
      .icon-favorite::before {
        color: #29abe2;
      }
      b {
        font-size: 0.65rem;
      }
    }
  }
  .new-order-form-general-info-row2 {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
}
.generate-order-button {
  width: 5.7123rem;
  height: 2rem;
  min-width: 5.7123rem;
  border-radius: 11px;
  border: none;
  background-color: var(--black-mid);
  color: var(--white);
  transition: var(--transition);
  cursor: pointer;
  background-color: #00ce88;
  &:hover {
    background-color: #00ce88;
    box-shadow: var(--button-shadow);
  }
  &.disabled {
    background-color: var(--disabled-input-bg);
    color: var(--black-mid);
    pointer-events: none;
  }
  transition: all 0.3s;
  padding: 0 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.note-terms-footer-button {
  min-height: var(--input-height);
  min-width: 11rem;
  width: 11rem;
  border: solid 1px var(--black-mid);
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0 1rem;
  background-color: var(--black-mid);
  color: var(--white);
  .icon-notes {
    font-size: 0.91rem;
  }
  &:hover {
    border: solid 1px var(--black);
    /* color: var(--black-mid); */
    background: var(--black);
    box-shadow: var(--pop-over-shadow);
  }
}
.terms-condition-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  .icon-terms-condition::before {
    font-size: 0.91rem;
    color: var(--black-mid);
  }
}
.info-order-tag {
  border: 1px solid #b9d8df;
  background-color: #effcff;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  height: 100%;
  min-height: var(--input-height);
  align-items: center;
  padding: 0 1rem;
  width: 11rem;
}

.vendor-popover-content {
  padding: 1rem;
  width: 20vw;
  .vendor-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    b {
      font-size: 0.7rem;
    }
  }
  .vendor-popover-body {
    .vendor-popover-body-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      border-bottom: 1px solid var(--grey-75);
      padding: 0.3rem 0;
      b,
      p {
        font-size: 0.53rem;
      }
    }
    .vendor-popover-body-item:last-child {
      border: none;
    }
  }
}
.order-footer-popover-content {
  padding: 1rem;
  width: 25vw;
  height: 30vh;
  display: flex;
  flex-direction: column;
  .order-footer-popover-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    .order-footer-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    b {
      font-size: 0.7rem;
    }
  }
  .order-footer-popover-content-body {
    padding-right: 0.2rem;
    height: 100%;
    overflow: auto;
  }
}
.terms-condition-popover-content {
  padding: 1rem;
  width: 60vw;
  height: 60vh;
  display: flex;
  flex-direction: column;
  .terms-condition-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    b {
      font-size: 0.7rem;
    }
  }
  .terms-condition-popover-body {
    overflow: auto;
    height: 100%;
  }
}

.new-order-source-of-price {
  padding: 0.3rem 0 0 0.5rem;
  display: flex;
  justify-content: space-between;
  .new-order-source-of-price-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    b {
      font-size: 0.51rem;
      white-space: nowrap;
    }
  }
  .unit-price-source-sub-selection {
    display: flex;
    margin-left: 0.5rem;
    align-items: center;
    gap: 0.5rem;
    width: 20vw;
  }
  .new-order-source-of-price-right {
    background: #effcff 0% 0% no-repeat padding-box;
    border: 1px solid #b9d8df;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    gap: 1rem;
    b {
      font-size: 0.61rem;
    }
    .date-exp {
      color: #29abe2;
    }
  }
}
.order-details-list {
  height: 100%;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem 0 0;
  gap: 0.4rem;
}

.item-new-order-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns: 1.8vw 5vw 7.5vw 13.5vw 4vw 6vw 5.6vw 5vw 7vw 32vw;

  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding);
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .image-container {
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    width: 100%;
    &.centerItem {
      width: 100%;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .light-right-font {
      text-align: right;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-blue {
      text-align: center;
      color: #29abe2;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
  .generation-tag {
    background-color: #29abe2;
    border-radius: 8px;
    height: 1.35rem;
    width: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
  }
}
.order-detail-info-full-container {
  padding: 0.55rem;
  display: grid;
  grid-template-columns: 43vw 20vw 26vw;
  gap: 0.5rem;
  h4 {
    font-size: 0.7rem;
  }
  .order-purchase-info {
    background: #fafafa;
    border: 1px solid #f1f1f1;
    border-radius: 15px;
    padding: 0.8rem;
    .order-purchase-row1 {
      --input-font-size: 0.59rem;
      padding-top: 1rem;
      display: grid;
      grid-template-columns: 1fr 0.6fr 0.8fr 1fr;
      gap: 0.5rem;
      align-items: center;
      .order-quantity-req {
        display: flex;
        align-items: center;
        gap: 0.3rem;
      }
    }
    .order-part-request-container {
      background: #ffffff;
      border-radius: 10px;
      margin-top: 1rem;
      padding: 0.8rem;
      .order-part-request-container-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        b {
          font-size: 0.7rem;
        }
      }
      .order-part-request-container-list-header {
        display: grid;
        grid-template-columns: 5vw 6vw 5vw 6vw 3vw;
        gap: 1.5rem;
        margin: 0.5rem 1rem;
        b {
          font-size: 0.5rem;
          color: #333333;
          opacity: 0.7;
        }
        .qty {
          width: 100%;
          text-align: center;
        }
      }
      .order-part-request-container-list-body {
        flex-direction: column;
        display: flex;
        gap: 0.5rem;
        .order-prn-item-grey {
          transition: all 0.3s;
          display: grid;
          justify-items: left;
          align-items: center;
          width: 100%;
          gap: 1.5rem;
          cursor: pointer;
          grid-template-columns: 5vw 6vw 5vw 6vw 3vw 3vw;
          border: var(--item-border);
          border-radius: var(--item-border-radius);
          padding: 0.48rem 1rem;
          min-height: var(--item-min-height);
          background-color: var(--item-background-color);
          b {
            text-align: center;
            width: 100%;
            font-size: 0.65rem;
          }
          p {
            font-size: 0.65rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            width: 100%;
          }
          .button-icons-action-order {
            display: flex;
            gap: 0.5rem;
          }
          .icon-new-save::before {
            color: #858585;
          }
          .icon-edit::before {
            color: #858585;
          }
        }
      }
    }
  }
  .order-charges-disccounts {
    background: #fafafa;
    border: 1px solid #f1f1f1;
    border-radius: 15px;
    padding: 0.8rem;
    --input-height: 1.78rem;
  }
  .order-logistics-delivery {
    background: #fafafa;
    border: 1px solid #f1f1f1;
    border-radius: 15px;
    padding: 0.8rem;
    height: 49%;
  }
}
.prn-container-count {
  background: #333333 0% 0% no-repeat padding-box;
  border-radius: 6px;
  height: 1rem;
  width: 1rem;
  color: #fff;
}
.normal-cost-row {
  margin-top: 0.5rem;
  b {
    font-size: 0.53rem;
    white-space: nowrap;
  }
  background: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  .normal-cost-row-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}
.sub-total-info-container {
  display: flex;
  justify-content: space-between;
  b {
    color: var(--blue-300);
  }
}
.unit-cost-row {
  margin-top: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: #effcff 0% 0% no-repeat padding-box;
  border: 1px solid #b9d8df;
  border-radius: 9px;
  b {
    font-size: 0.53rem;
    white-space: nowrap;
  }
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  .unit-cost-first-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .order-charges-total-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    b {
      display: flex;
      gap: 0.2rem;
      font-size: 0.53rem;
      white-space: nowrap;
      color: var(--blue-300);
      p {
        font-weight: 400;
        font-size: 0.53rem;
      }
    }
  }
  .unit-cost-row-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}
.order-charges-total-value {
  margin-top: 0.5rem;
  background-color: #effcff;
  border: 1px solid #b9d8df;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 9px;
  .order-charges-total-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    b {
      display: flex;
      gap: 0.2rem;
      font-size: 0.53rem;
      white-space: nowrap;
      p {
        font-weight: 400;
        font-size: 0.53rem;
      }
    }
    .price-blue {
      color: var(--blue-300);
    }
  }
}
.order-logistics-delivery-row {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
}
.new-quote-container {
  width: 30vw;
  display: flex;
  flex-direction: column;
  .new-quote-contianer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .new-quote-container-body {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;

    height: 100%;
  }
  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  .title-quote-vendors-selected {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    b {
      font-size: 0.61rem;
    }
    p {
      font-size: 0.61rem;
      color: var(--blue-300);
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .no-vendors-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
  .vendors-selected-container {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    width: 100%;
    height: 100%;
    background: #fbfbfb 0% 0% no-repeat padding-box;
    border: 1px solid #f1f1f1;
    border-radius: 9px;
    padding: 0.5rem 0.3rem 0.5rem 0.5rem;

    height: calc(30vh - 3rem);
    .vendor-selected-list {
      overflow: auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 0.3rem;
      .vendor-selected-item {
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #f1f1f1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.3rem;
        margin-right: 0.2rem;
        .icon-delete-new {
          font-size: 0.8rem;
          cursor: pointer;
        }
        .title-vendor-selected {
          display: flex;
          align-items: center;
          gap: 0.3rem;
          .icon-check-3 {
            font-size: 0.55rem;
          }
          span {
            font-size: 0.61rem;
          }
        }
      }
    }
  }
}

.new-quote-contianer-body-dropdowns
{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}.quote-order-confirmation-container {
  height: 60vh;
  width: 50vw;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  align-items: center;
  .quote-order-confirmation-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .quote-order-confirmation-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      .icon-confirmation {
        font-size: 2rem;
      }
    }
    .quote-order-confirmation-number {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      b {
        color: #00ce88;
      }
      .quote-order-confirmation-number-value {
        background: #00ce881c 0% 0% no-repeat padding-box;
        border: 2px solid #00ce88;
        border-radius: 11px;
        padding: 0.1rem 0.5rem;
        b {
          color: var(--black-mid);
        }
      }
    }
  }
  .quote-order-confirmation-company {
    width: 100%;
    margin-top: 1rem;
    background: #effcff 0% 0% no-repeat padding-box;
    border: 1px solid #b9d8df;
    border-radius: 9px;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    .quote-order-confirmation-company-right,
    .quote-order-confirmation-company-left {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      b,
      p {
        font-size: 0.61rem;
      }
    }
  }
  .quote-order-confirmation-vendors-title {
    width: 100%;
    padding: 0.5rem 0;
    b {
      font-size: 0.61rem;
    }
  }
  .quote-order-confirmation-vendors-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 0.3rem;
    .vendor-selected-item {
      background: #ffffff 0% 0% no-repeat padding-box;
      border: 1px solid #f1f1f1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.3rem;
      margin-right: 0.2rem;
      .icon-delete-new {
        font-size: 0.8rem;
        cursor: pointer;
      }
      .title-vendor-selected {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        .icon-check-3 {
          font-size: 0.55rem;
        }
        span {
          font-size: 0.61rem;
        }
      }
    }
  }
  .quote-order-prn-info {
    padding: 0.5rem 0;
  }
  .quote-order-prn-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow: auto;
    max-height: 16vh;
  }
  .quote-order-prn-info-title {
    padding: 0.5rem 0.5rem;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 4.8vw 12vw 9.5vw 4.5vw 9vw 6vw;
    b {
      font-size: 0.54rem;
    }
  }
  .item-prn-info-quote-container {
    transition: all 0.3s;
    display: grid;
    justify-items: left;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-right: 0.2rem;
    grid-template-columns: 4.8vw 12vw 9.5vw 4.5vw 9vw 5vw;

    border: var(--item-border);
    border-radius: 8px;
    padding: 0.5rem;
    .icon-task_icon_partRequest {
      font-size: 0.68rem;
      margin-top: 0.2rem;
    }
    .image-container {
      color: var(--white);
      &.success {
        background: rgb(0, 206, 136);
      }
      &.warning {
        background: var(--yellow-100);
      }
      &.error {
        background: var(--red-50);
      }
    }
    .property {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 0.26rem;
      max-width: 100%;
      &.centerItem {
        width: 100%;
      }
      .light-font {
        text-align: center;
        font-size: var(--item-value-font-size, 0.609rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .bold-font-date {
        text-align: center;
        font-size: var(--item-value-font-size, 0.609rem);
        overflow: hidden;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .bold-font {
        text-align: center;
        font-size: var(--item-value-font-size, 0.609rem);
        font-weight: 600;
        text-decoration: underline;
        color: var(--blue-300);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        width: 100%;
      }
      .bold-font-black {
        text-align: center;
        font-size: var(--item-value-font-size, 0.609rem);
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        width: 100%;
      }
    }
  }
}
.filter-all-cont {
  width: 100%;
  position: relative;
}

.inventoryManagement {
  height: 100%;
  width: 100%;
  overflow: hidden auto;
  .tags-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

.panel-content {
  .MuiBox-root {
    padding: 0;
  }
}
.inventoryManagement-header {
  hr {
    border-top: solid var(--grey-75) 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  .inventoryManagement-header-content {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    gap: 0.8rem;
    .search-bar-input {
      width: 70%;
    }
  }
}

.inventoryManagement-view-options {
  display: flex !important;
  gap: 0.4rem;
  .active-toogle {
    border: solid 1px var(--black-mid) !important;
    background-color: var(--black-mid) !important;
    .icon-list:before {
      color: var(--white) !important;
    }
    .icon-tabs:before {
      color: var(--white) !important;
    }
    .icon-tabular-view:before {
      color: var(--white) !important;
    }
    .icon-hierarchy-view:before {
      color: var(--white) !important;
    }
  }
  .toogle-view {
    background-color: #fbfbfb;
    border: 1px solid #f1f1f1;
    border-radius: var(--button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 1.7rem;
    min-width: 1.7rem;
    .icon-list:before {
      color: var(--black-mid);
    }
    .icon-tabs:before {
      color: var(--black-mid);
    }
    .icon-tabular-view:before {
      color: var(--black-mid);
    }
    .icon-hierarchy-view:before {
      color: var(--black-mid);
    }
    &:hover {
      border: solid 1px var(--black);
      /* color: var(--black-mid); */
      background: var(--black);
      box-shadow: var(--pop-over-shadow);
      .icon-list:before {
        color: var(--white);
      }
      .icon-tabs:before {
        color: var(--white);
      }

      .icon-tabular-view:before {
        color: var(--white);
      }
      .icon-hierarchy-view:before {
        color: var(--white);
      }
    }
  }
}

.inventoryManagement-header-optionsCont {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: calc(var(--gap) * 2);
}

.inventoryManagement-header-filtersCont {
  height: 50%;
}

.inventoryManagement-header-optionsCont > div {
  height: 60%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inventoryManagement-header-optionsCont > div > section {
  width: 45%;
  max-width: 55%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--gap) + 0.5rem);
}

.inventoryManagement-header-optionsCont > div > section > div {
  height: 2.7vw;
  width: 2.7vw;
  padding: var(--padding);
  border-radius: 7px;
  border: 1px solid var(--black-mid);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  position: relative;
}

.inventoryManagement-header-optionsCont > div > section > span {
  height: 2.7vw;
  width: 2.7vw;
  padding: var(--padding);
  border-radius: 7px;
  position: relative;
  transition: var(--transition);
  position: relative;
  background-color: var(--blue-300);
}

.inventoryManagement-header-optionsCont > div > section > span > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2.8vw;
}

.inventoryManagement-header-optionsCont
  > div
  > section
  > div
  > .store-options-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5vw;
}

.inventoryManagement-header-optionsCont
  > div
  > section
  > div
  > .hamburguer-menu-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5vw;
}

.hamburguer-menu-svg
  .inventoryManagement-header-optionsCont
  > div
  > section
  > div
  > svg
  > g
  > g
  > path {
  transition: var(--transition);
  height: 1vw;
}

.inventoryManagement-header-optionsCont > div > section > div:hover {
  background-color: var(--black-mid);
}

.inventoryManagement-header-optionsCont
  > div
  > section
  > div:hover
  .store-options-svg
  > g
  > g
  > path {
  fill: var(--white);
}

.inventoryManagement-header-optionsCont
  > div
  > section
  > div:hover
  .hamburguer-menu-svg
  > g
  > rect {
  fill: var(--white);
}

.inventoryManagement-header-optionsCont > div > section > h2 {
  color: var(--black-mid);
  font-weight: 600;
}

.inventoryManagement-header-optionsCont > div > div {
  width: 40%;
  max-width: 45%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--gap);
}

.inventoryManagement-header-optionsCont > div > div > span {
  height: 80%;
  width: auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  border-radius: 5px;
  padding: calc(var(--padding) + 0.1rem);
}

.inventoryManagement-header-optionsCont > div > div > span > svg {
  height: 1.3vw;
  width: 1.3vw;
}

#svg-parts > g > path {
  fill: #7396de;
}

#svg-consumables > g > path {
  fill: #dba741;
}

.inventoryManagement-header-optionsCont > div > div > span > p {
  font-weight: normal;
}

.store-menu-optCont {
  position: absolute;
  left: calc(100% + 0.5vw);
  top: -25%;
  height: auto;
  width: 28vw;
  max-width: 35vw;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  z-index: 100;
  box-shadow: 0px 5px 10px #00000032;
  padding: 1.5rem;
  gap: 1.5rem;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

#visualize-store-options {
  visibility: visible;
  opacity: 1;
}

.store-menu-optCont > div {
  height: 5vh;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-left: 1rem;
}

.store-menu-optCont > div > svg {
  height: 1.7vw;
  width: 1.7vw;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.store-menu-optCont > section {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5vw, 1fr));
  grid-auto-rows: 15vh;
  gap: var(--gap);
}

.store-menu-optCont > section > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  cursor: pointer;
}

.store-menu-optCont > section > div > span {
  height: 3.5vw;
  width: 3.5vw;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-menu-optCont > section > div > span > img {
  height: 90%;
}

.store-menu-optCont > section > div > p {
  width: 75%;
  height: 40%;
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size) - 0.15rem);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

/* filters section */

.title-filters-applied {
  font-weight: 700;
}

.filters-applied-chips {
  height: 100%;
  width: 12%;
  min-width: 10rem;
  border: 1px solid var(--grey);
  padding: 0.3rem var(--padding);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
  z-index: 1000;
}

.filters-applied-chips > span {
  font-size: calc(var(--p-size) - 0.2rem);
  height: 40%;
  display: flex;
  align-items: center;
  font-weight: 300;
  transition: var(--transition);
  color: var(--black-mid);
}

.filters-applied-chips > span > div {
  background-color: var(--black-mid);
  padding: calc(var(--padding) - 0.3rem) var(--padding);
  border-radius: 0.2rem;
  color: var(--white);
  font-size: calc(var(--p-size) - 0.2rem);
  font-weight: 500;
}

.filters-applied-chips > span:nth-child(1) {
  color: var(--grey-200);
}

.filters-applied-chips > span:nth-child(2) {
  color: var(--black-mid);
  font-weight: 500;
  gap: var(--gap);
}

.filters-applied-chips:hover {
  background-color: var(--black-mid);
}

.filters-applied-chips:hover > section {
  opacity: 1;
  visibility: visible;
}

.filters-applied-chips:hover > span:nth-child(1) {
  color: var(--grey);
}

.filters-applied-chips:hover > span:nth-child(2) {
  color: var(--white);
}

.close-Icon-Filter {
  position: absolute;
  right: 0.3rem;
  color: var(--white);
  opacity: 0;
  transition: var(--transition);
}

.filters-applied-chips:hover .close-Icon-Filter {
  opacity: 1;
}

.filters-applied-chips > section {
  background-color: var(--black-mid);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  max-height: 40vh;
  padding: var(--padding);
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}
.filters-applied-chips > section > div {
  width: 100%;
  padding: 0.3rem var(--padding);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
}

.filters-applied-chips > section > div > span {
  font-size: calc(var(--p-size) - 0.2rem);
  height: 40%;
  display: flex;
  align-items: center;
  font-weight: 300;
  transition: var(--transition);
  color: var(--black-mid);
}

.filters-applied-chips > section > div > .delete-filter-icon {
  position: absolute;
  right: 0;
  height: 1rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--white);
}

.filters-applied-chips > section > div > span > div {
  background-color: var(--white);
  padding: calc(var(--padding) - 0.45rem) calc(var(--padding) - 0.15rem);
  border-radius: 0.2rem;
  color: var(--black-mid);
  font-size: calc(var(--p-size) - 0.2rem);
  font-weight: 500;
}

.filters-applied-chips > section > div > span:nth-child(1) {
  color: var(--grey-100);
}

.filters-applied-chips > section > div > span:nth-child(2) {
  color: var(--white);
  gap: var(--gap);
}

.filters-applied-chips > section > span {
  background-color: rgba(103, 103, 103, 0.27);
  display: flex;
  width: 100%;
  border-radius: var(--radius);
  flex-direction: column;
  padding: calc(var(--padding) - 0.2rem);
  position: relative;
  cursor: default;
}

.filters-applied-chips > section > span > p {
  font-size: calc(var(--p-size) - 0.15rem);
  color: var(--white);
  width: 95%;
}

.filters-applied-chips > section > span > p:nth-child(2) {
  font-size: calc(var(--p-size) - 0.3rem);
}

.filters-applied-chips > section > span > .delete-option-filter {
  position: absolute;
  right: 0;
  height: 1rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--white);
}

.basicFilters-cont {
  height: 30vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.basicFilters-cont > .basicFilters-cont-searchSection {
  height: 30%;
  display: flex;
  align-items: center;
  gap: calc(var(--gap) + 0.5rem);
}

.basicFilters-cont-searchSection > h2 {
  display: flex;
  align-items: center;
  gap: var(--gap);
  color: var(--black);
  font-weight: 700;
}

.basicFilters-cont-searchSection > h2 > svg {
  height: 1vw;
}

.basicFilters-cont-searchSection > .search-field-cont {
  background-color: var(--white-100);
  height: 60%;
  width: 30%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 0.5rem;
  border-radius: var(--radius);
}

.search-field-cont > svg {
  /* background-color: slateblue; */
}

.search-field-cont > input {
  height: 100%;
  width: 95%;
  background-color: transparent;
  color: var(--black-mid);
  font-size: var(--p-size);
  font-weight: 400;
  outline: none;
  border: none;
}

.inputs-basicFilters-cont {
  height: 60%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
  gap: calc(var(--gap) * 2.5);
  position: relative;
}

.inputs-basicFilters-cont > .loading-dropdowns {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  text-align: center;
  color: var(--grey-100);
  font-size: var(--sub-title);
  animation: loading-drops 2.5s linear infinite;
}

@keyframes loading-drops {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* advanced filters styles */

.title-advanced-filters {
  display: flex;
  align-items: center;
  gap: var(--gap);
  color: var(--black);
  font-size: var(--sub-title);
}

.title-advanced-filters > svg {
  height: 1.5vw;
}

.advanced-filters-inpsCont {
  height: 30vh;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.advanced-filters-inpsCont > section.advance-filters-sect1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: calc(var(--gap) * 2.5);
  height: 25%;
}

.advanced-filters-inpsCont > section.advance-filters-sect1 > div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advanced-filters-inpsCont > section.advance-filters-sect1 > div > input {
  border: 1px solid var(--input-border);
  color: var(--input-color);
  border-radius: var(--input-radius);
  padding: 0 var(--input-padding);
  font-size: var(--input-font-size);
  width: 95%;
  height: var(--input-height);
  &::placeholder {
    color: var(--input-color);
  }
}

.advanced-filters-inpsCont > section.advance-filters-sect2 {
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.advanced-filters-inpsCont > section.advance-filters-sect2 > h2 {
  width: 99%;
  color: var(--black);
  font-weight: 700;
}

.advanced-filters-inpsCont > section.advance-filters-sect2 > section {
  height: 80%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: calc(var(--gap) * 2.5);
  place-items: center;
}

.advanced-filters-inpsCont > section.advance-filters-sect2 > section > input {
  /* background-color: transparent; */
  border: 1px solid var(--input-border);
  color: var(--input-color);
  border-radius: var(--input-radius);
  padding: 0 var(--input-padding);
  font-size: var(--input-font-size);
  width: 95%;
  min-height: var(--input-height);
  &::placeholder {
    color: var(--input-color);
  }
}

.advanced-filters-inpsCont > section.advance-filters-sect3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: calc(var(--gap) * 2.5);
  place-items: center;
  height: 35%;
}

.advanced-filters-inpsCont > section.advance-filters-sect3 > input {
  border: 1px solid var(--input-border);
  color: var(--input-color);
  border-radius: var(--input-radius);
  padding: 0 var(--input-padding);
  font-size: var(--input-font-size);
  width: 98%;
  min-height: var(--input-height);
  grid-column: span 2;
  &::placeholder {
    color: var(--input-color);
  }
}

.advanced-filters-inpsCont > section.advance-filters-sect3 > div {
  border-radius: var(--radius);
  padding: 0.1rem var(--padding);
  width: 95%;
  transition: var(--transition);
}

.btn-search-inventory-management {
  background-color: var(--black-mid);
  position: absolute;
  bottom: 5%;
  right: calc(var(--padding));
  border-radius: calc(var(--radius) - 3px);
  border: none;
  cursor: pointer;
  width: 18.4%;
  height: 5vh;
  color: var(--white);
  font-size: var(--p-size);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) + 0.3rem);
}

.btn-search-inventory-management > svg {
  height: 1.9vh;
}

/*New styles*/
.inventory-management-configuration-component {
  display: flex;

  height: 88%;
  flex-direction: column;

  .main-content-wrapper {
    display: flex;
    flex-direction: column;
  }

  .nav-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0 0.5rem 0;
    .filter-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: transparent;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;
      > i {
        transition: all 0.3s;
        &.open {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      h2 {
        font-size: 0.8rem;
      }
    }
    .nav-bar-component {
      .header-n-actions {
        gap: 1rem;
      }
      .nav-leftSide {
        width: auto;
      }
    }
  }
}

.inventoryManagement-component-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .part-inventory-list {
    height: 100%;
    display: flex;
    overflow: auto;
    margin-top: 0.5rem;
    flex-direction: column;
    padding: 0 0.3rem 0 0;
    gap: 0.4rem;
  }
}

.tags-container {
  margin-top: 0.875rem;
  justify-content: flex-end;
  display: flex;
  gap: 0.5rem;
  padding: 0 8px;
}
.global-list {
  overflow: auto;
  --list-item-display: grid;
  --list-item-template: 9.5dvw 8.5dvw 8.3dvw 5dvw 4.5dvw 18.5dvw 15dvw;
  --list-item-justify: left;
  --list-item-padding: 0 0 0 0.4rem;
  --list-item-gap: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
  .inventory-list {
    & .item-component {
      .main-info {
        transition: all 0.3s;
        grid-template-columns: 10dvw 9dvw 9dvw 5.5dvw 5dvw 19dvw 15dvw;
        justify-items: left;
        column-gap: 0.7dvw;
        padding: 0;
      }
    }
  }
}
.serialized-list {
  overflow: auto;
  --list-item-display: grid;
  --list-item-template: 9.5dvw 9dvw 8.3dvw 5dvw 4.5dvw 18.5dvw 15dvw;
  --list-item-justify: left;
  --list-item-padding: 0 0 0 0.4rem;
  --list-item-gap: 1rem;
  height: 100% !important;
  padding-bottom: 1.5rem;
  .inventory-list {
    & .item-component {
      .main-info {
        transition: all 0.3s;
        grid-template-columns: 10dvw 9dvw 9dvw 5.5dvw 5dvw 19dvw 15dvw;
        justify-items: left;
        column-gap: 0.7rem;
        padding: 0;
      }
    }
  }
}

.custom-tab-body {
  > .tab-info {
    padding: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.consumbale-list {
  overflow: auto;
  --list-item-display: grid;
  --list-item-template: 11.4dvw 9.4dvw 4.6vw 5.5dvw 20.5dvw 23dvw;
  --list-item-justify: left;
  --list-item-padding: 0 0 0 0.4rem;
  --list-item-gap: 1rem;
  height: 100% !important;
  padding-bottom: 1.5rem;
  .inventory-list {
    transition: all 0.3s;
    .item-component {
      .main-info {
        transition: all 0.3s;
        grid-template-columns: 12dvw 10dvw 5dvw 5.5dvw 21dvw 19dvw;
        justify-items: left;
        column-gap: 0.7rem;
        padding: 0;
      }
    }
  }
}
.image-container {
  height: 1.68rem;
  border-radius: var(--input-radius);
  aspect-ratio: 1;
  background-color: var(--grey-50, lightgray);
  color: var(--grey-150, gray);

  display: grid;
  place-items: center;

  &.consumable {
    background-color: var(--yellow-200);
    color: var(--yellow-250);
    border: solid 1px var(--yellow-250);
  }

  &.part {
    background-color: var(--purble-200);
    color: var(--purple-150);
    border: solid 1px var(--purple-150);
  }

  i {
    font-size: 0.88rem;
  }
}
.inventory-list {
  height: 100%;
  display: flex;
  overflow: auto;
  flex-direction: column;
  padding: 0 0.3rem 0 0;
  gap: 0.4rem;
  details[open] {
    .item-component {
      background-color: var(--blue-500);
      border: solid 1px var(--green-25);
    }
  }
  .item-component {
    gap: 0;

    .main-info {
      /* background-color: magenta !important; */
      display: grid;
      grid-template-columns: 7rem 6rem 4rem 3rem 6rem 12rem 15rem;
      justify-items: left;
      column-gap: 0.7rem;
    }
  }
  .general-card-component {
    & > .card-content-container {
      > .card-header {
        justify-content: normal;
      }
    }
  }
}

.item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.tags {
  display: flex;
  align-items: center;
  gap: 4px;

  > [class*="tag-component"] {
    min-width: 120px;
  }
}

/* expandables */
.item-details {
  display: flex;
  gap: 12px;
}
.active-class-part {
  .item-component {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
    .tag-component.filled {
      &.info {
        background-color: var(--blue-250);
        color: var(--white);
        border: solid 1px var(--blue-250);
      }
      &.success {
        border: solid 1px var(--green-400);
        background-color: var(--green-150);
        color: var(--white);
      }

      &.error {
        border: solid 1px var(--red-100);
        background-color: var(--red-100);
        color: var(--white);
      }

      &.warning {
        border: solid 1px var(--yellow-300);
        background-color: var(--yellow-350);
        color: var(--white);
      }
      &.issued{
        border: solid 1px var(--orange-250);
        background-color: var(--orange-250);
        color: var(--white);
      }
    }
  }
}
.item-container-skeleton {
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding);
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  max-height: var(--item-min-height);
  display: var(--item-display);
  gap: var(--item-gap);
  align-items: center;
  justify-content: space-between;
  position: relative;
  .item-skeleton-content {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}
.sorting-header {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.1rem;
  .sorting-free-slot {
    width: 1.68rem;
  }
  .sorting-component {
    padding: 0;
    width: 100%;
  }
}
.progress-bar-component{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.4rem;
  /* height: min-content; */
  
  /* remove following styles */
  /* padding: 12px;
  background-color: white; */
  >.value-label-container{
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 1em;
    display: grid;
    >span{
      position: absolute;
      font-weight: bold;
      font-size:  0.5rem;
      /* overflow: scroll; */
      /* transform: translateX(-50%); */
    }
    >i {
      font-style: normal;
      color: var(--grey-100);
      position: absolute;
      right: 0;
      font-size:  0.5rem;
    }
  }

  >.max-container{
    display: flex;
    font-size: 0.5rem;
    justify-content: flex-end;
    /* padding: 0px; */
    /* color: var(--grey-100); */
  }

  >.bar-range{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0.32rem;
    max-height: 0.32rem;
    border-radius: 2em;
    background-color: var(--grey-50);
    position: relative;

    >.bar-value{


      /* height: 100%;
       */
       min-height: 0.32rem;
      /* border-radius: 25px; */
      /* this will do the magic */
      -webkit-mask: linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0);
      min-width: 0.32rem;


      display: flex;
      /* width: 50%; */
      /* height: 100%; */
      border-radius: 2em;
      background: aqua;
      /* background-color: var(--aqua, teal);
      transition: var(--transition); */
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: var(--progress-bar-component-custom-gradient);
        /* your gradient here */
    }
    }
  }
}.progress-chart-component {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--input-radius);
  padding: 1rem;
  background: var(--white);
  >.progress-chart-header{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font-size: 0.8rem;
    >.chart-title{
      display: flex;
      flex-direction: column;
      >span{
        font-size: 0.6rem;
      color: var(--grey-100);
      }
    }
  }

  >.progress-table{
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
    >span {
      font-size: 0.56rem;
      color: var(--grey-100);
    }

  }

}.stepper-component {
  display: grid;
  grid-template-columns: 3vw 31vw;
  /* grid-template-rows: repeat(odd, min-content) repeat(even, 1fr); */
  grid-auto-rows: min-content;
  align-items: center;
  column-gap: 1em;
  height: 100%;

  > .step-indicator {
    display: grid;
    grid-template-rows: auto min-content auto;
    grid-auto-flow: column;
    align-items: center;
    height: 100%;
    font-size: 13.6px;
    /*  */

    > .step-connector {
      /* width: 100%; */
      height: 100%;
      min-height: 1em;
      min-width: 2px;
      display: grid;
      place-items: center;

      &.hide {
        visibility: hidden;
      }
      /* background-color: var(--blue-300); */
      > div {
        display: flex;
        height: 100%;
        min-width: 3px;
        background-color: var(--disabled-input-bg);
      }
    }

    > .circle-stepicon {
      display: grid;
      place-items: center;
      min-height: 2.16rem;
      max-height: 2.16rem;
      min-width: 2.16rem;
      max-width: 2.16rem;
      /* aspect-ratio: 1; */
      border-radius: 3em;
      color: var(--white);

      &.remaining-step {
        background-color: var(--blue-700);
      }

      font-size: 1.2rem;
      > i {
      }
    }
    .green-step {
      background-color: #f8fffc;
      border: 1px solid #50d999;
    }
    .red-step {
      background-color: #fff3f3;
      border: 1px solid #ff5d57;
    }
  }
  .steper-card-info {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #efefef;
    border-radius: 10px;
    display: grid;
    grid-template-columns:8vw 8vw 10vw;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem;
    > .step-name {
      display: flex;
      flex-direction: column;
      p {
        color: var(--blue-300);
        cursor: pointer;
        text-decoration: underline;
      }

      &.remaining {
        color: var(--blue-700);
      }
    }
    .steper-quanity {
      display: flex;
      text-align: right;
      flex-direction: column;
      b {
        font-size: 0.6rem;
        color: var(--black-mid);
      }
    }
    .steper-location{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      b {
        font-size: 0.6rem;
        color: var(--black-mid);
      }
    }
    .green-name {
      > span {
        font-weight: 600;
        font-size: 0.68rem;
        white-space: nowrap;
        color: #50d999;
      }
    }
    .red-name {
      > span {
        font-weight: 600;
        font-size: 0.68rem;
        white-space: nowrap;
        color: #ff5d57;
      }
    }
    span {
      font-size: 0.52rem;
      white-space: nowrap;
      color: var(--grey-100);
    }
    .span-details {
      color: var(--grey-100);
      font-size: 0.52rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  > *:nth-child(3n-2) {
    /* background-color: magenta !important; */
    /* align-self: center; */
  }
}
.wrapper {
  width: min-content;
  display: flex;
  align-items: center;
  position: relative;
}

.shared {
  --node-gap: 0.5rem;
  --node-height: 2rem;
  b {
    font-size: 0.7rem;
  }
}
.smallB {
  font-size: var(--p-size) !important;
}
.part-number {
  font-size: 0.6rem;
  white-space: nowrap;
  text-decoration: underline;
  color: var(--blue-300);
  cursor: pointer;
  font-weight: normal;
}

.window {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.airplane {
  font-size: 28px;
  color: var(--blue-300);
}

.header-info {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.subtitle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  font-size: 0.6rem;
  /* font-size: 11px; */
}

.position-label {
  font-weight: normal;
  color: darkgray;
}

.position {
  font-weight: 500;
}

.node {
  padding: 0 1rem;
  min-height: var(--node-height, 40px);
  border-radius: 8px;
  background-color: var(--white-100);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.65rem;
}

.node-dot {
  background-color: var(--blue-300);
  width: 0.4rem;
  aspect-ratio: 1;
  border-radius: 100%;
}

.node-branch {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  flex-direction: column;
}

.node-connector {
  position: absolute;
  left: calc(50% - 0.05rem);
  border-left: dashed 0.05rem var(--blue-300);
  border-bottom: dashed 0.05rem var(--blue-300);
  top: calc(50% - 0.05rem);
  height: calc(var(--node-height) + var(--node-gap));
  width: 16px;
  box-sizing: content-box;
}

.last-node-dot {
  border: solid 2px var(--blue-300);
  box-sizing: content-box;
  background-color: white;
}

.last-node {
  background-color: var(--blue-500);
}

.last-part {
  color: var(--blue-300);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--node-gap, 8px);
}

.node-content {
  display: flex;
  flex-direction: column;
}

.first-info {
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--blue-300);
}
.card-grid {
  display: grid;
  grid-template-columns: 27vw 38vw 25vw;
  /* grid-template-rows: min-content auto; */
  grid-auto-flow: column;
  gap: 0.5vw;

  padding: 12px 0;

  > .general-card-component {
    &:nth-child(1) {
      .card-content-container {
        /* display: grid; */
        /* height: min-content; */
        /* grid-template-columns: 1fr 1fr; */

        > .custom-card {
          display: flex;
          align-items: center;

          /* padding-left: 12px; */
          width: 100%;
          grid-column: span 2;
          background-color: var(--white);
          border-radius: 4px;

          > .properties-card-component {
            width: 100%;
          }
        }

        .custom-tag-component {
          justify-self: end;
        }

        > .properties-card-component {
          grid-column: span 2;
        }
      }

      /* grid-area: 1 / 1 / 4 / 2; */
      /* grid-row: span 2; */
    }

    &:nth-child(2) {
      overflow: auto;
      /* grid-row: span 2; */
      /* height: min-content; */

      /* grid-area: 1 / 2 / 4 / 3; */
      > .card-content-container {
        height: 100%;
      }
    }
  }

  > div:nth-child(2) {
    display: grid;
    /* flex-direction: column; */
    grid-template-rows: min-content auto;
    gap: 12px;

    height: 100%;

    > .general-card-component {
      /* flex-direction: row; */
      /* align-items: flex-end; */
    }

    > div:first-child > .card-content-container {
      /* background-color: magenta; 
      /* display: grid;
      grid-template-columns: 11rem auto;
      gap: 5px;*/

      > b {
        display: flex;
        padding-right: 24px;
        white-space: nowrap;
        align-items: center;
      }
    }

    > div:nth-child(2) > .card-content-container {
      /* gap: 20px; */
      height: 100%;

      > * + div {
      }
    }

    /* height: min-content; */
    /* grid-area: 1 / 3 / 2 / 4; */

    /* background-color: blue; */
  }
  .transaction-history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .transaction-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      .transaction-in {
        display: flex;
        gap: 0.625rem;
        align-items: center;
      }
      .transaction-out {
        display: flex;
        gap: 0.625rem;
        align-items: center;
      }
    }
  }
  .installed-card-container {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    background-color: var(--white);
    border-radius: 0.4rem;
    border: 1px solid #efefef;
    .info-icon {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .installed-nha {
      .icon-airplane-installed {
        color: var(--blue-300) !important;
      }
    }
    .installed-card-info-row{
      display: flex;
      justify-content: space-between;
    }
    .info-installed-card {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      width: 100%;
      justify-content: center;
      &.installed-nha {
        b {
          color: var(--blue-300) !important;
        }
      }
    }
    &.installed-info {
      gap: 1rem;
      display: flex;
    }
    .installed-card-info {
      display: flex;
      gap: 1rem;
      align-items: center;
      span {
        font-size: 0.64rem;
        color: var(--grey-100);
      }

      b {
        font-size: 0.64rem;
        color: var(--black-mid);
      }
    }
    &.not-installed {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .location-name {
        font-size: 0.64rem;
        color: var(--black-mid);
      }
    }
    > .installed-card {
      display: flex;
      flex-direction: column;
      height: min-content;
      gap: 0.5rem;
      justify-content: center;
      width: 100%;
      .info-icon {
        i {
          font-size: 0.9rem !important;
        }
      }
      i {
        grid-row: span 2;
        font-size: 1.5rem;
        color: var(--grey-100);
      }

      span {
        font-size: 0.64rem;
        color: var(--grey-100);
      }

      b {
        font-size: 0.64rem;
        color: var(--black-mid);
      }
    }
  }

  /* background-color: magenta; */
}

.transaction-history-footer {
  background-color: var(--blue-500);
  border: 1px solid var(--green-25);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 13px;
  padding: 0.4rem;
  .transaction-history-footer-text {
    display: flex;
    flex-direction: column;
  }
  b,
  p {
    font-size: 0.6rem;
  }
}
.transaction-history-hover {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 7.5rem;
  width: 100%;
  display: flex;
  align-items: self-end;
  justify-content: center;
  padding-bottom: 1rem;
  gap: 0.5rem;
  .transaction-history-hover-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  p {
    font-size: 0.5rem;
  }
  .more-options-container {
    background-color: var(--white);
  }
  .icon-more-horizontal {
    font-size: 16px;
  }
}
.item-steper-container-skeleton {
  display: flex;
  align-items: center;
  gap: 1em;
  .item-steper-skeleton-content {
    flex: 1;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #efefef;
    border-radius: 10px;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem;
  }
}
.item-location-container-skeleton {
  display: flex;
  align-items: center;
  background-color: var(--white);
  padding: 20px;
  height: 85px;
  gap: 1rem;
  border-radius: 0.4rem;
  border: 1px solid #efefef;
  .item-location-skeleton-content {
    flex: 1;
  }
}
.item-container-loading-general-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  .item-general-container-skeleton {
    flex: 1;
  }
  .item-general-container-body-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    .item-general-row-skeleton {
      flex: 1;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      padding: 0.2rem 0.5rem;
      min-height: 1.68rem;
      gap: 0.5rem;
      background-color: var(--white);
      border-radius: 0.4rem;
      font-size: 0.88rem;
      border: 1px solid #efefef;
    }
  }
}

.main-part-card {
  display: grid;
  gap: 1rem;
  grid-template-columns: 12vw 22vw;
  width: 100%;
  &.oneGrid {
    grid-template-columns: 1fr;
    .installed-card {
      display: flex;
    }
  }
}

.consumable-card-container {
  display: flex;
  align-items: center;
  background-color: var(--white);
  padding: 0.5rem 1rem;
  gap: 1rem;
  border-radius: 0.4rem;
  border: 1px solid #efefef;
  justify-content: space-between;
  .consumable-card-info {
    .icon-stock {
      font-size: 1.2rem;
    }
    .consumable-card-text {
      font-size: 0.63rem;
      p {
        font-weight: bold;
        color: var(--blue-300);
      }
    }
    display: flex;
    gap: 1rem;
    align-items: center;
  }
}
.general-card-ata {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.general-card-ata-content {
  width: 100%;
  padding: 0.2rem 0.5rem;
  border: 1px solid #efefef;
  display: flex;
  align-items: center;
  align-items: flex-end;
  justify-content: flex-end;
  background-color: var(--white);
  border-radius: 0.4rem;
  .general-card-ata-content-info {
    color: var(--black-mid);
    font-weight: 500;
    b {
      font-size: 0.65rem;
    }
  }
}
.part-time-controls-dialog-component{
  /* background: magenta; */
  min-width: 800px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;

  >.image-placeholder-component {
    /* background-color: magenta; */
    grid-column: span 2;
  }

  >.header{
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}.image-placeholder-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: center;
  height: 100%;
  >img{
    width: 50%;
    max-width: 200px;
  }
  >div {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  >b {
    color: var(--black-mid);
  }

  > p{
    padding: 0;
    margin: 0;
    font-size: 11px;
    color: var(--grey-200);
    text-align: center;
  }
}.inventory-availability-dialog-component{
  min-width: 40vw;
  >.header-dialog{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}.transaction-dialog-component{
  min-width: 40vw;
  >.header-dialog{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  user-select: none;
  overflow: hidden;
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: var(
    --custom-highlight-background,
    linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    )
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}
.inventory-management-issue-component {
  width: calc(90vw - 48px);
  max-height: 80vh;
  height: 80vh;
  display: flex;
  flex-direction: column;
  h2 {
    font-size: 0.8rem;
    color: var(--black-mid);
  }
  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  > .inventory-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left-side {
      display: flex;
      align-items: center;
      gap: 1rem;
      .header-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        .icon-issue:before {
          color: var(--black-mid);
        }
      }
      .header-part-info {
        display: flex;
        align-items: center;
        padding: 0.4rem 1rem;
        gap: 1rem;
        border-radius: 0.4rem;
        border: 1px solid #f1f1f1;
        background-color: #fbfbfb;
        .header-part-info-data {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.7rem;

          b {
            font-size: 1em;
          }
        }
      }
    }
  }
  > .inventory-dialog-body-actions {
    padding: 0.5rem 0 0;
    .sorting-header {
      gap: 0;
      margin-bottom: 0.5rem;
    }
    .inventory-dialog-body-actions {
      display: flex;
      justify-content: space-between;

      margin-bottom: 0.5rem;
    }
    .part-request-button-issue {
      width: 7.7123rem;
      height: 2rem;
      min-width: 7.7123rem;
      border-radius: 11px;
      border: none;
      background-color: var(--black-mid);
      color: var(--white);
      transition: var(--transition);
      cursor: pointer;
      background-color: #00ce88;
      transition: all 0.3s;
      padding: 0 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 0.68rem;
      }
      .left-side {
        display: flex;
        align-items: center;
        gap: 0.2rem;
      }
      .cant-to-issue {
        display: flex;
        gap: 0.2rem;

        > div {
          background: #ffffff 0% 0% no-repeat padding-box;
          border-radius: 4px;
          color: #00ce88;
          font-weight: bold;
          width: 1rem;
          font-size: 0.68rem;
        }
      }
      &.disabled {
        background-color: var(--disabled-input-bg);
        color: var(--black-mid);
        pointer-events: none;
        .icon-issue:before {
          color: var(--black-mid);
        }
      }
      &:hover {
        box-shadow: var(--button-shadow);
      }
    }
  }
  .existing-list {
    --list-item-template: 8dvw 6dvw 8.5dvw 15dvw 8dvw 9dvw 8dvw 4dvw;
    --list-item-display: grid;
    --list-item-gap: 1dvw;
    --list-item-padding: 0;
   
  }
  .existing-part-request-list{
    .item-prn-radio-container {
      grid-template-columns: 8dvw 6dvw 8.5dvw 15dvw 8dvw 9dvw 8dvw 4dvw;
      column-gap: 1dvw;
    }
  }
  .new-list {
    --list-item-template: 6.5dvw 8dvw 8dvw 10dvw 18dvw 7dvw 8dvw;
    --list-item-display: grid;
    --list-item-gap: 2dvw;
    --list-item-padding: 0;

  }
  .new-part-req-list {
    .item-prn-radio-container {
    grid-template-columns: 6.5dvw 8dvw 8dvw 10dvw 18dvw 7dvw 8dvw;
    column-gap: 2dvw;
    }
  }
  > .inventory-dialog-body {
    height: 100%;
    overflow: auto;

    .inventory-list {
      .item-prn-radio-container {
        transition: all 0.3s;
        display: grid;

        justify-items: left;
        align-items: center;
        width: 100%;
        padding: 0;
        .property {
          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 0.56rem;
          max-width: 100%;
          .light-font {
            text-align: center;
            font-size: var(--item-value-font-size, 0.68rem);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .issue-detail-cant {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    b {
      font-size: 0.7rem;
    }
    .input-component {
      width: 3rem;
    }
  }
}

.fast-part-request-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  .fast-part-request-body-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
  }
  .fast-part-request-body-form-row-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

.fast-part-request-extra-info {
  background: #fbfbfb 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: center;
  b {
    width: 8rem;
  }
  .fast-part-request-extra-info-radio {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
}
.fast-part-request-header {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .issue-detail-cant {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    b {
      font-size: 0.7rem;
    }
    .input-component {
      width: 3rem;
    }
    .part-request-button-issue {
      width: 7.7123rem;
      height: 2rem;
      min-width: 7.7123rem;
      border-radius: 11px;
      border: none;
      background-color: var(--black-mid);
      color: var(--white);
      transition: var(--transition);
      cursor: pointer;
      background-color: #00ce88;
      transition: all 0.3s;
      padding: 0 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 0.68rem;
      }
      .left-side {
        display: flex;
        align-items: center;
        gap: 0.2rem;
      }
      .cant-to-issue {
        display: flex;
        gap: 0.2rem;

        > div {
          background: #ffffff 0% 0% no-repeat padding-box;
          border-radius: 4px;
          color: #00ce88;
          font-weight: bold;
          width: 1rem;
          font-size: 0.68rem;
        }
      }
      &.disabled {
        background-color: var(--disabled-input-bg);
        color: var(--black-mid);
        pointer-events: none;
        .icon-issue:before {
          color: var(--black-mid);
        }
      }
      &:hover {
        box-shadow: var(--button-shadow);
      }
    }
  }
}
.search-bar-input {
  width: 75%;
}
.status-tag {
  color: var(--grey-150);
  font-weight: 500;
  width: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 1.68rem;
  width: 100%;
  padding: 0 var(--input-padding);
  border-radius: 11px;
  white-space: nowrap;
  font-size: 0.52rem;
  border: solid 1px var(--grey-150);
  &.info {
    transition: all 0.3s ease;
    border: solid 1px var(--green-400);
    background-color: var(--green-600);
    color: var(--green-400);
  }
}
.information-header {
  display: flex;
  margin-bottom: 0.5rem;
  align-items: center;
  gap: 0.3rem;
  border-radius: 8px;
  background: #effcff;
  border: 1px solid #b9d8df;
  height: 1.5rem;
  padding: 0 0.5rem;
  .icon-info:before{
    font-size: 0.9rem;
  }
}
.inventory-management-return-component {
  width: calc(50vw - 48px);
  display: flex;
  flex-direction: column;
  h2 {
    font-size: 0.8rem;
    color: var(--black-mid);
  }
  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  > .inventory-return-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left-side {
      display: flex;
      align-items: center;
      gap: 1rem;
      .header-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        .icon-issue:before {
          color: var(--black-mid);
        }
      }
    }
  }
  .inventory-return-dialog-body {
    display: flex;
    padding-top: 1rem;
    gap: 1rem;
    .inventory-return-dialog-right-side {
      flex-direction: column;
      display: flex;
      gap: 1.5rem;
      width: 100%;
      position: relative;
      .disabled-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 1;
        pointer-events: none;
      }
    }
    .inventory-return-dialog-left-side {
      width: 40vw;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
  }
  .inventory-return-dialog-footer {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    grid-template-columns: 3fr 0.5fr 1.5fr;
    b {
      font-size: 0.7rem;
      text-align: right;
      color: var(--black-mid);
    }
  }
  .inventory-return-dialog-buttons {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 1.5rem;
    justify-content: center;
    gap: 0.5rem;
    button {
      width: 8rem;
      height: 2rem;
      border-radius: 15px;
      border: none;
      cursor: pointer;
      transition: var(--transition);
    }
    .pr-ok {
      background-color: var(--black-mid);
      border: 1px solid var(--black-mid);
      color: var(--white);
      &:hover {
        box-shadow: var(--button-shadow);
      }
      &.disabled{
        background-color: var(--grey-50);
        border: 1px solid var(--grey-50);
        color: var(--grey-100);
        pointer-events: none;
      }
    }
    .pr-cancel {
      background-color: #f16f6f;
      border: 1px solid #f16f6f;
      color: var(--white);
      &:hover {
        box-shadow: var(--button-shadow);
      }
    }
  }
}

.inventory-return-dialog-part-header{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  b{
    font-size: 0.65rem
  };
}
.inventory-return-dialog-part-info{
  font-size: 0.65rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid #F3F3F3;
  background-color: #FBFBFB;
  cursor: pointer;
  border-radius: 10px;
  height: 2rem;
  align-items: center;
  padding: 0 0.5rem;
  &.active{
    background-color: var(--blue-500);
    border: 1px solid var(--green-25);
  }
}.new-part-request {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.new-part-request > section.new-part-request-top-section {
  height: 15%;
  min-height: 5rem;
  display: flex;
  align-items: center;
  border-bottom: var(--border);
}

.new-part-request > section.new-part-request-bottom-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding-bottom: var(--padding);
}

.new-part-request-bottom-section > .new-part-request-general-info {
  display: flex;
  width: 100%;
  /* height: 50%; */
  height: 40%;
  padding-right: 0.3rem;
  flex-direction: column;
  gap: var(--gap);
}

.new-part-request-general-info > div {
  display: flex;
  height: 2rem;
  align-items: center;
  gap: var(--gap);
}

.new-part-request-general-info > div > h3 {
  color: var(--black-mid);
}

.new-part-request-general-info > div > span {
  /* flex-grow: 1; */
  height: 2rem;
  width: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  margin-right: auto;
  background-color: #effcff;
  border-radius: var(--input-radius);
}

.new-part-request-general-info > div > span > p {
  color: #158baa;
  font-weight: 500;
  font-size: calc(var(--p-size) + 0.1rem);
}
.new-part-request-general-info > div > span > i {
  color: #158baa;
  font-weight: 500;
  font-size: calc(var(--p-size) + 0.4rem);
}

.new-part-request-general-info > div > button {
  width: 6rem;
  height: 1.8rem;
  border: none;
  border-radius: var(--button-radius);
  color: var(--white);
  cursor: pointer;
  background-color: var(--black-mid);
  transition: var(--transition);
  font-size: calc(var(--p-size) + 0.1rem);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.new-part-request-general-info > div > button:hover {
  box-shadow: var(--button-shadow);
}

.new-part-request-general-info > div > button > i {
  font-size: calc(var(--p-size) + 0.3rem);
}
.new-part-request-general-info > div > button > img {
  height: calc(var(--p-size) + 0.3rem);
}

.new-part-request-general-info > .new-part-request-general-info-inp-cont {
  /* height: 65%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(14% , 1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: var(--gap);
    align-items: center; */
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--gap);
  height: 50%;
  margin-top: var(--gap);
}

.new-part-request-general-info-inp-cont > div{
  flex: 1 1 calc(100% / 7);
}

.new-part-request-general-info
  > .new-part-request-general-info-inp-cont
  > div
  > input {
  height: var(--input-height);
  width: 100%;
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  padding: 0 0.5rem;
  background-color: #ebebeb;
  font-size: var(--input-font-size);
}

.new-part-request-general-info > .new-part-request-general-info-tc-fnd-cont {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  position: relative;
}

.new-part-request-general-info-tc-fnd-cont > h3 {
  color: var(--black-mid);
  font-size: calc(var(--subtitle-size) - 0.3rem);
  /* width: 18.8%;
    min-width: 10rem; */
}

.new-part-request-general-info-tc-fnd-cont > div {
  background-color: var(--white);
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  height: 70%;
  width: 29%;
  min-width: 15.5rem;
  padding-right: 0.3rem;
  gap: var(--gap);
  display: flex;
  align-items: center;
}
.new-part-request-general-info-tc-fnd-cont > div:focus-within {
  outline: 2px solid black;
}

div#new-part-request-filters-cont {
  /* background-color: slateblue; */
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 8rem;
  min-width: 5rem;
  padding: 0.3rem;
  font-size: calc(var(--p-size) + 0.1rem);
  position: relative;
  cursor: pointer;
}

.new-part-request-filter-opt {
  height: 2rem;
  width: 8rem;
  min-width: 5rem;
  padding: var(--padding);
  cursor: pointer;
  border-radius: var(--input-radius);
  border: none;
  border: 1px solid #efefef;
  margin-bottom: 0.3rem;
  transition: var(--transition);
}

.new-part-request-filter-opt:hover {
  background-color: #dbffee;
}

.new-part-request-general-info-tc-fnd-cont > div > input {
  flex-grow: 1;
  height: 100%;
  border: none;
  background-color: transparent;
  border-top-left-radius: var(--input-radius);
  border-bottom-left-radius: var(--radius);
  padding: 0 0.3rem;
  color: var(--black-mid);
  font-size: var(--input-font-size);
  outline: none;
}

.new-part-request-general-info-tc-fnd-cont > section {
  /* position: absolute; */
  right: 0;
  width: 20%;
  min-width: 10rem;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--gap);
}

.new-part-request-general-info-tc-fnd-cont > section > button {
  width: 8rem;
  height: 1.7rem;
  border: none;
  border-radius: var(--button-radius);
  color: var(--white);
  cursor: pointer;
  background-color: var(--black-mid);
  transition: var(--transition);
  font-size: calc(var(--p-size));

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.new-part-request-general-info-tc-fnd-cont > section > button:hover {
  box-shadow: var(--button-shadow);
}

.icon_TC_new_request::before {
  color: var(--white) !important;
}

.icon_FND_new_request::before {
  color: var(--white) !important;
}

.new-part-request-general-info-tc-fnd-cont > section > button > i {
  font-size: 0.8rem;
}

.new-part-request-cards-cont {
  background-color: var(--white-100);
  width: 100%;
  /* height: 15rem; */
  flex-grow: 1;
  border-radius: var(--radius);
  padding: 0.3rem;
  border: 1px solid #efefef;
  overflow: hidden auto;

  /* display: flex;
    flex-direction: column; */
  /* gap: var(--gap); */
}

.new-part-request-cards-cont > span {
  background-color: var(--white);
  width: 100%;
  height: 2rem;
  display: flex;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  border: 1px solid #efefef;
  border-radius: var(--radius);
}

.new-part-request-cards-cont-msg {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
}

.new-part-request-cards-cont-msg > i {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 1.5rem);
}

.new-part-request-cards-cont-msg > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.3rem);
}
.NewPartRequestTC {
    width: 100%;
    height: auto;
    min-height: var(--item-min-height);
    background-color: var(--white);
    border-radius: var(--radius);
    border: 1px solid #EFEFEF;
    padding: var(--item-padding);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-bottom: .4rem;
}

.NewPartRequestTC>header {
    display: flex;
    align-items: center;
    gap: var(--gap);
    height: 2rem;
}

.NewPartRequestTC>header>p {
    font-size: calc(var(--p-size) + .1rem);
    color: var(--black-mid);
    font-weight: 400;
    display: flex;
    gap: var(--gap);
}

.NewPartRequestTC>header>p>span {
    background-color: var(--black-mid);
    color: var(--white);
    font-weight: 500;
    height: 1rem;
    width: 1rem;
    border-radius: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    box-shadow: none;
}

.NewPartRequestTC>header>div {
    width: 15%;
}

.NewPartRequestTC>header>div.NewPartRequestTC-description {
    height: 2rem;
    border-radius: .3rem;
    border: 1px solid var(--input-border);
    flex-grow: 1;
    padding: 0 .3rem;

    display: flex;
    align-items: center;
    overflow: hidden;
}

.NewPartRequestTC>header>div.NewPartRequestTC-description>p {
    font-size: calc(var(--p-size));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
    
}

.NewPartRequestTC>header>button {
    border: none;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    font-size: 1.1rem;
    padding: 0;
    cursor: pointer;
}

.NewPartRequestTC>section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .3rem;

}

.part-requestTC-cont-NotFound{
    height: 3rem;
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

.part-requestTC-cont-NotFound > i{
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .5rem);
    opacity: .62;
}

.part-requestTC-cont-NotFound> p{
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .3rem);
    opacity: .62;

}.NewPartRequestPN {
    width: 100%;
    border: 1px solid #EFEFEF;
    background-color: var(--white-100);
    border-radius: 10px;
    padding: 0 var(--item-padding);
    min-height: var(--item-min-height);
    height: 3rem;

    display: flex;
    align-items: center;
    gap: var(--gap);
    position: relative;
}

.NewPartRequestPN>div {
    min-width: 8rem;
    height: 65%;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
}


.NewPartRequestPN>div:nth-child(1){
    width: 25%;
}

.NewPartRequestPN>div:nth-child(2){
    width: 15%;
}

.NewPartRequestPN>div:nth-child(3){
    width: 17%;
}
.NewPartRequestPN>div>p {
    font-size: calc(var(--p-size) + .1rem);
    color: var(--black-mid);
}

.NewPartRequestPN>div>input{
    width: 60%;
    height: 100%;
    border: 1px solid #707070;
    padding: 0 .3rem;
    border-radius: var(--radius);
    text-align: center;
    font-size: calc(var(--p-size));
}

.NewPartRequestPN> p{
    color: var(--black-mid);
    font-weight: 600;
    font-size: calc(var(--p-size) + .1rem);
    margin-right:  .3rem;

    display: flex;
    align-items: center;
    gap: var(--gap);
}

.NewPartRequestPN > p > span{
    font-size: calc(var(--p-size));
    font-weight: 400;
    opacity: .62;
}

.NewPartRequestPN > button{
    position: absolute;
    right: .48rem;
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    font-size: 1rem;
}.delete-newpart-tc-cont{
    height: 15rem;
    /* max-height: 20rem; */
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.delete-newpart-tc-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-newpart-tc-cont > .delete-newpart-tc-pCont{
    width: 100%;
    height: 40%;
    /* max-height: 10rem; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-newpart-tc-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
    outline: none;
    box-shadow: none;
}

.delete-newpart-tc-pCont > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    max-height: 50%;
}

.delete-newpart-tc-pCont > div > p:nth-child(1){
    min-width: 6rem;
    width: 25%;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
}

.delete-newpart-tc-pCont > div > p:nth-child(2){
    color: var(--black-mid);
    font-size: calc(var(--p-size));
    font-weight: 400;
    min-width: 8rem;
    width: 60%;
    max-height: 80%; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
    outline: none;
    box-shadow: none;
    line-height: 1.3;
    text-align: end;
}
.delete-newpart-tc-pCont > p > span{
    font-weight: 400;
    font-size: var(--p-size);
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 75%;
}

.delete-newpart-tc-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-newpart-tc-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--button-radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-newpart-tc-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-newpart-tc-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-newpart-tc-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.delete-TC-cont{
    height: 15rem;
    /* max-height: 20rem; */
    width: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.delete-TC-cont > h3{
    color: var(--black-mid);
    font-size: var(--subTitle-size);
    font-weight:600;
    text-align: center;
}

.delete-TC-cont > .delete-TC-pCont{
    width: 100%;
    height: 40%;
    /* max-height: 10rem; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--white-100);
    border-radius: var(--radius);
    padding: .3rem .7rem;
}

.delete-TC-pCont > p{
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
    outline: none;
    box-shadow: none;
}

.delete-TC-pCont > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    max-height: 50%;
}

.delete-TC-pCont > div > p:nth-child(1){
    min-width: 6rem;
    width: 25%;
    color: var(--black-mid);
    font-size: calc(var(--p-size) + .1rem);
    font-weight: 500;
}

.delete-TC-pCont > div > p:nth-child(2){
    color: var(--black-mid);
    font-size: calc(var(--p-size));
    font-weight: 400;
    min-width: 8rem;
    width: 60%;
    max-height: 80%; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
    outline: none;
    box-shadow: none;
    line-height: 1.3;
    /* text-align: end; */
}
.delete-TC-pCont > p > span{
    font-weight: 400;
    font-size: var(--p-size);
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 75%;
}

.delete-TC-btnCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: 2rem;
}

.delete-TC-btnCont > button{
    width: 6rem;
    height: 95%;
    border-radius: var(--radius);
    /* outline: none; */
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.delete-TC-btnCont > button:nth-child(2){
    background-color: var(--warn);
    color: var(--white);
}

.delete-TC-btnCont > button:nth-child(1){
    background-color: var(--white);
    border: 1px solid var(--black-mid);

}

.delete-TC-btnCont > button:nth-child(1):hover{
    background-color: var(--black-mid);
    color: var(--white);
}.working-p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--title-size);
    color: var(--black-mid);
    font-weight: 600;
}

.store {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.store>h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--subtitle-size);
  color: var(--black-mid);
}

.store-chartsContainer {
  height: 85%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.25vw;
}

.store-chartsContainer>div {
  background-color: var(--white-100);


  height: 100%;
  width: 100%;
  border-radius: 0.36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: var(--padding);
}

.store-chartsContainer>div>p {
  width: 95%;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--black-mid);
  /* height: 15%; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: capitalize;
}


.store-chartsContainer>div>p>span {
  height: 2vw;
  width: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 5px;
}


.store-chartsContainer>div>p>span>svg {
  height: 1vw;
  width: 1vw;
}

.store-chartsContainer>div>p>span:hover {
  background-color: var(--black-mid);

}

.store-chartsContainer>div>p>span:hover>svg>g>ellipse {
  fill: var(--white);
}

.store-chartsContainer-smoothedLineChart {
  grid-column: span 3;
}

.store-chartsContainer-columnWithGradientChart {
  grid-column: span 1;
}

.store-chartsContainer-stepcountChart {
  grid-column: span 2;
}

.store-chartsContainer>div>section {
  height: 85%;
  width: 100%;
}

.store-chartContainer-selectsCont {
  width: calc(100% - .01rem);
  height: 10%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.store-chartContainer-selectsCont>div {
  background-color: var(--white);
  border-radius: 8px;
  padding: 0 .5rem;
  cursor: pointer;
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: var(--transition);
}

.store-chartContainer-selectsCont>div>svg {
  position: absolute;
  right: .5vw;
  height: .5vw;
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
}

.store-chartContainer-selectsCont>div>svg>path {
  stroke: var(--white);
}

.store-chartContainer-selectsCont>div>p {
  font-size: .6vw;
  color: var(--black-mid);
  font-weight: 600;
}

.store-chartContainer-selectsCont>div:hover {
  background-color: var(--black-mid);
  width: 35%;
}

.store-chartContainer-selectsCont>div:hover p {
  color: var(--white);
}


.store-chartContainer-selectsCont>div:hover>svg {
  visibility: visible;
  opacity: 1;
}

.store-chartContainer-componentsCont {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  width: 100%;
  overflow: hidden auto;
  width: calc(100% - .01rem);
}

.store-chartContainer-componentsCont>section {
  height: 2.5vw;
  width: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem;
}

.store-chartContainer-componentsCont>section>img {
  height: 2vw;
  width: 2vw;
}

.store-chartContainer-componentsCont>section>div {
  width: 90%;
}

.store-chartContainer-componentsCont>section>div>h3 {
  font-size: .75vw;
  font-weight: 400;
  max-width: 95%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.store-chartContainer-componentsCont>section>div>p {
  font-size: .65vw;
  font-weight: 400;
  color: var(--warn);
}


.store-chartContainer-componentsCont>section>div>p>span {
  font-size: .65vw;
  font-weight: 800;
  color: var(--warn);
}

#store-chartsContainer-stockout {
  gap: .5rem;
}

.store-chartsContainer-stockout>button {
  width: 90%;
  height: 5.5vh;
  border: var(--border);
  background-color: transparent;
  font-size: var(--p-size);
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight:500 ;
  color: var(--black-mid);
}

.store-chartsContainer-stockout>button:hover {
  background-color: var(--black-mid);
  color: var(--white);
  border:  2px solid var(--black-mid);
}

.store-chartsContainer-columnWithGradientChart {
  width: 100%;
  height: 30%;
  display: flex;

}

.store-chartsContainer-columnWithGradientChart > section {
  display: flex;
  gap: var(--gap);
}

.store-chartsContainer-columnWithGradientChart > section > section{
  width: 65%;
}


.store-chartsContainer-columnWithGradientChart > section > div{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
}

.store-chartsContainer-columnWithGradientChart > section > div > p{
  font-size: var(--p-size);
  font-weight: 400;
  color: var(--black-mid);
}

.store-chartsContainer-smoothedLineChart > section{
  display: flex;
  align-items: center;
  gap: .5rem;
}

.store-chartsContainer-smoothedLineChart > section > p{
  transform: rotate(-90deg);
  font-size: .8vw;
  font-weight: 600;
  color: var(--grey-200);
}

#store-chartsContainer-stepcountChart{
  gap: .5rem ;
}


#store-chartsContainer-stepcountChart > #labels-stepCounter-indicators-storeModule{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

#labels-stepCounter-indicators-storeModule > span{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .8vw;
  width: 25%;
  color: var(--black-mid);
  font-weight: 400;
}

#labels-stepCounter-indicators-storeModule > span > div{
  height: .7vw;
  width: .7vw;
  border-radius: .1rem;
  background: #29ABE2;
}


#labels-stepCounter-indicators-storeModule > span > span{
  height: .1vw;
  width:  .5vw;
  background-color: var(--grey-100)
}

#store-chartContainer-gaugeChart-label{
  color: var(--black-mid) ;
  font-size: .8vw;
  font-weight: 400;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#store-chartContainer-gaugeChart-label-minMax{
  width: 50%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40%;
}


#dashboard-chartsContainer-gaugeChart-label-minMax > p{
  color: var(--black-mid);
  font-size: var(--p-size);
  font-weight: 600; 
}.store-nav {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-nav-leftSide {
  width: 40%;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.store-nav-leftSide > div {
  height: 2.7vw;
  width: 2.7vw;
  padding: (--padding);
  border-radius: var(--radius);
  border: 1px solid var(--black-mid);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  position: relative;
}

.store-nav-leftSide > div > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5vw;
}

.store-nav-leftSide > div > svg > g > g > path {
  transition: var(--transition);
}
.store-nav-leftSide > div:hover {
  background-color: var(--black-mid);
}

.store-nav-leftSide > div:hover > svg > g > g > path {
  fill: var(--white);
}

.store-nav-leftSide > section {
  width: 90%;
  height: 75%;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.store-nav-leftSide > section > svg {
  height: 2vw;
}

.store-nav-leftSide > section > svg > g > g {
  fill: var(--grey-100);
}

.store-nav-leftSide > section > div {
  height: 100%;
  width: 85%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.store-nav-leftSide > section > div > h3 {
  color: #000000;
  font-weight: 700;
  max-width: 98%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.store-nav-rightSide {
  width: 40%;
  max-width: 50%;
  height: 100%;
  display: flex;
  justify-content: end;
}

.store-nav-rightSide > span {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) - 0.2rem);
  border: var(--border);
  border-radius: var(--radius);
  height: 5.5vh;
  width: auto;
  max-width: 50%;
  padding: var(--padding);
  cursor: pointer;
  transition: var(--transition);
}

.store-nav-rightSide > span:hover {
  background-color: var(--black-mid);
  border: 2px solid var(--black-mid);
}

.store-nav-rightSide > span:hover p {
  color: var(--white);
}


.store-nav-rightSide>span:hover svg > path{
  fill: var(--white);
}

.store-nav-rightSide > span > p {
  font-size: var(--p-size);
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 95%;
}

.store-nav-rightSide > span > svg {
  height: 1.3vw;
}

.store-nav-rightSide > span > svg > g > path {
  fill: var(--black-mid);
}

.store-nav-leftSide > div > section {
  position: absolute;
  left: calc(100% + 0.5vw);
  top: -25%;
  height: auto;
  width: 28vw;
  max-width: 35vw;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  z-index: 100;
  box-shadow: 0px 5px 10px #00000032;
  padding: 1.5rem;
  gap: 1.5rem;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

#visualize-store-options {
  visibility: visible;
  opacity: 1;
}

.store-nav-leftSide > div > section > div {
  height: 5vh;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-left: 1rem;
}

.store-nav-leftSide > div > section > div > svg {
  height: 1.7vw;
  width: 1.7vw;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.store-nav-leftSide > div > section > div svg > g > g > path {
  fill: var(--grey-100);
}

.store-nav-leftSide > div > section > div > h2 {
  color: var(--black);
  font-size: var(--subtitle-size);
  font-weight: 700;
}

.store-nav-leftSide > div > section > section {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5vw, 1fr));
  grid-auto-rows: 15vh;
  gap: var(--gap);
}

.store-nav-leftSide > div > section > section > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  cursor: pointer;
}

.store-nav-leftSide > div > section > section > div > span {
  height: 3.5vw;
  width: 3.5vw;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-nav-leftSide > div > section > section > div > span > img {
  height: 90%;
}

.store-nav-leftSide > div > section > section > div > p {
  width: 75%;
  height: 40%;
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size) - 0.15rem);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

/* background of store options icons , the classes are based on the name of every element*/

.Inventory.Management {
  background-color: #29abe2;
}

.Inventory.Count {
  background-color: #22b573;
}

.Packing.and.Shipping {
  background-color: #f7931e;
}
.Dock.Receiving {
  background-color: #ff6554;
}

.Receiving {
  background-color: #4274c7;
}

.Prints {
  background-color: #ff6393;
}

.Reports {
  background-color: #25c2c0;
}

.Picklist.Management {
  background-color: #ebb000;
}
.notFound-main-cont{
    height: 100vh;
    width: 100vw;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
}


.notFound-main-cont > div{
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: var(--gap-2);
}

.notFound-main-cont > div.notFound-text-cont > p > span{
    font-size: calc(var(--app-small-size) + .5rem);
    font-weight: 500;
    color: var(--black-mid);
}

.notFound-main-cont > div.notFound-text-cont > p{
    color: var(--grey-200);
    font-size: calc(var(--app-small-size) - .7rem);
}

.notFound-main-cont > div.notFound-text-cont > button {
    border-radius: var(--button-radius);
    border: none;
    outline: none;
    height: 2rem;
    width: 6rem;
    padding: 0;
    cursor: pointer;
    background-color: var(--black-mid);
    color: var(--white);
    font-size: calc(var(--p-size) + .2rem);
    box-shadow: var(--box-shadow);
}


div.notFound-svg-cont{
    align-items: center;
}
.notFound-svg-cont > img{
    height: 60%;
}.inventory-transaction-component {
  display: flex;
  height: 100%;

  flex-direction: column;
  gap: 0.5rem;
  .main-content-wrapper {
    display: flex;
    flex-direction: column;
  }

  .nav-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
      .green-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: #00ce88;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;
      width: 7rem;
      > i {
        transition: all 0.3s;
        &.open {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      h2 {
        font-size: 0.8rem;
        font-weight: normal;
      }
    }
    .information-tooltip {
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      cursor: pointer;
      white-space: nowrap;
      b {
        font-size: 0.6rem;
      }
    }
    .nav-bar-component {
      .header-n-actions {
        gap: 1rem;
        /* justify-content: unset; */
      }

      .nav-leftSide {
        width: auto;
      }
    }
  }
}

.inventoryTransactiont-component-content {
  overflow: auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  height: 100%;

  hr {
    border-top: solid var(--grey-75) 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
}
.part-issue-header {
  padding-top: 1.5rem;
  .part-issue-form-row {
    display: grid;
    grid-template-columns: 12rem 12rem 12rem 12rem 12rem;
    gap: 1.2rem;
    .iconTextButton {
      width: 6rem;
    }
    .input-header-default {
      border: none;
      color: var(--grey-250);
      background-color: var(--disabled-input-bg);
      border-radius: var(--input-radius);
      height: var(--input-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--input-padding);
      font-size: var(--input-font-size);
      b {
        font-size: var(--input-font-size);
      }
    }
  }
}
.part-issue-body {
  width: 100%;
  padding-top: 0.8rem;

  --input-height: 1.708rem;
  --input-border: #efefef;

  .grid-view-header {
    display: grid;
    grid-template-columns: 20vw 20vw 11vw 12vw 12vw 12vw 2vw;
    gap: 0.3vw;
    .part-request-number {
      display: flex;
      text-align: center;
      gap: 1rem;
      padding: 0 0.625rem;
    }
    b {
      font-size: 0.6rem;
    }
  }
  .grid-view-body {
    margin-top: 0.5rem;
    background: #fafafa 0% 0% no-repeat padding-box;
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 0.2rem;
    flex-direction: column;
    height: calc(95dvh - 15rem);

    .grid-view-body-list {
      overflow-y: auto;
      height: 100%;
      flex-direction: column;
      display: flex;
      gap: 0.3rem;
    }
    .grid-view-row {
      display: grid;
      grid-template-columns: 20vw 20vw 11vw 12vw 12vw 12vw 2vw;
      gap: 0.3vw;
      align-items: center;
      .numberField {
        justify-content: center;
      }
      &.selected {
        .input-component {
          & input,
          & textarea {
            background: #e9f6ff !important;
            border: solid 1px #c6e8ff !important;
          }
        }
        .select > #select-partNumber {
          border: 1px solid #c6e8ff !important;
          background-color: #e9f6ff !important;
        }   
      }
      .part-request-info {
        cursor: pointer;
        position: relative;
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 1px solid #efefef;
        border-radius: 0.3rem;
        display: flex;
        height: 1.708rem;
        justify-content: center;
        align-items: center;
        color: var(--black-200);
        gap: 1rem;
        .part-request-icon {
          display: flex;
          gap: 0.5rem;
          .icon-task_icon_partRequest {
            font-size: 0.8rem;
          }
        }
        .icon-arrow-down {
          position: absolute;
          right: 10px;
          font-size: 0.55rem;
        }
      }
    }
  }
  .grid-view-footer {
    .input-component {
      --label-active-translate: -1.8rem;
    }
    &.selected {
      .input-component {
        & input,
        & textarea {
          background: #e9f6ff !important;
          border: solid 1px #c6e8ff !important;
        }
      }
      .select > #select-partNumber {
        border: 1px solid #c6e8ff !important;
        background-color: #e9f6ff !important;
      }   
    }
    display: flex;
    b {
      font-size: 0.6rem;
    }
    margin-top: 1rem;
    justify-content: space-between;
    .grid-view-footer-location {
      gap: 0.5rem;
      display: grid;
      grid-template-columns: 10vw 12vw 12vw 12vw;
      align-items: center;
    }
    .grid-view-footer-cost {
      align-items: center;
      gap: 0.5rem;
      display: grid;
      grid-template-columns: 7vw 12vw 12vw;
    }
  }
}
.order-management {
  /* background-color: red; */
  height: 97.5vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.order-management-nav {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* align-items: center; */
  border-bottom: var(--border);
  /* padding: 0 0 0.5rem 0; */
  /* margin-bottom: 1rem; */
  transition: var(--transition);
}

.orders-management-filters-btn {
  height: 1.5rem;
  width: 5rem;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  border-radius: var(--button-radius);
  border: none;
  background-color: transparent;
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 500;
  color: var(--black-mid);
  cursor: pointer;
}

.orders-management-filters-cont {
  transition: var(--transition);
  display: grid;
  grid-template-columns: repeat(7, minmax(3rem, 14%));
  grid-auto-rows: 1fr;
  align-items: center;
  gap: var(--gap-2);
  /* padding: 0 0 0.5rem .1rem; */
}

.orders-status-labels-cont {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  width: 100%;
  height: 1.5rem;
  margin-right: auto;
}

.orders-status-labels-cont > div {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 100%;
}

.orders-status-labels-cont > div > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size));
  font-weight: 400;
}

.orders-status-labels-cont > div > span {
  height: 1.3rem;
  width: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
}

.orders-status-labels-cont > div > span > i {
  color: var(--white);
  font-size: 0.9rem;
}

.orders-clear-filters-btn {
  background-color: var(--black-mid);
  height: 2rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  color: var(--white);
  border: none;
  transition: var(--transition);
}

.orders-clear-filters-btn:hover {
  box-shadow: var(--button-shadow);
}

.search-section {
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.search-section > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 600;
}

.search-section > div {
  background-color: var(--white);
  width: 40%;
  min-width: 10rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  height: calc(var(--input-height) + 0.1rem);
  border-radius: var(--input-radius);
  padding: 0 var(--input-padding) 0 0;
  border: 1px solid var(--input-border);
}

.search-section > div > input {
  height: var(--input-height);
  border-radius: var(--input-radius);
  border: none;
  font-size: var(--input-font-size);
  padding: var(--input-padding);
  flex-grow: 1;
  outline: none;
}

.search-section > div:focus-within {
  outline: 1px solid var(--black);
}

.order-list-cont {
  max-height: 75vh;
  overflow-y: auto;
  padding-bottom: 2rem;
  /* display: flex; */
  /* flex-direction: column; */
  /* gap: var(--gap); */
}

.list-order-main-cont {
  --list-item-display: grid;
  --list-item-template: 8% 6% 6% 5.5% 4.5% 8% 5.5% 7% 9% 7.5% 6% 7.5% 6.5% 3%;
  --list-item-justify: left;
  /* --list-item-padding : 0.5rem; */
  --list-item-gap: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.orders-clearAll-filters-header {
  margin-left: auto;
  margin-right: 0.8rem;
  color: #29abe2;
  text-decoration: underline;
  cursor: pointer;
  font-size: calc(var(--p-size) + 0.1rem);
}
.order-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  transition: var(--transition);
  border-radius: var(--button-radius);
  /* margin-bottom: .2rem; */
  padding: 0.3rem;
}

.orders-card-general-info-context-menu {
  height: 2rem;
  border-radius: 0.4rem;
  color: var(--black-mid);
  font-size: var(--p-size);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0.5rem;
  background-color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.orders-card-general-info-context-menu.view-info:hover,
.orders-card-general-info-context-menu.sent-vendor:hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.orders-card-general-info-context-menu.cancel-order:hover {
  background-color: var(--red-200);
  color: var(--white);
}

.order-card-header {
  background-color: #fbfbfb;
  width: 100%;
  height: var(--item-min-height);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding) var(--item-padding) var(--item-padding) 0.85rem;
  border: 1px solid #f1f1f1;
  cursor: pointer;
  transition: var(--transition);

  /* display: flex;
    gap: var(--gap);
    justify-content: space-between; */
  display: grid;
  grid-template-columns: 7% 6% 6% 5.5% 5% 8% 5% 8% 8% 8% 7% 3% 9.3% 2%;
  align-items: center;
  /* --list-item-padding : 0.5rem; */
  position: relative;

  gap: var(--gap);
}

.order-card-header:hover {
  background-color: #effcff;
}

.order-card-header.open {
  position: sticky;
  top: 0;
  z-index: 100;
}

.order-card-content {
  height: 0;
  transition: var(--transition);
  opacity: 0;
  background-color: transparent;
}

.order-card-content.open {
  opacity: 1;
  padding: 0;
  height: auto;
  width: 100%;
}

/* .order-card-status-span {
    background-color: #29ABE2;
    height: 1.3rem;
    width: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .2rem;
    position: relative;
} */

.order-card-status-span > p {
  /* color: var(--black-mid); */
  color: #29abe2;
  font-size: calc(var(--p-size));
  font-weight: 400;
  text-decoration: underline;
}

.order-card-status-span > i {
  color: white;
}

.order-card-status-span > i {
  font-size: calc(var(--p-size) + 0.1rem);
}

.order-card-type-order {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 2rem;
}

.order-card-type-order > i {
  font-size: calc(var(--p-size) + 0.3rem);
}

.order-card-header > p {
  font-weight: 400;
  color: var(--black);
  font-size: 0.6rem;
}

p.order-card-since-day {
  text-decoration: underline;
  font-weight: 500;
  color: #29abe2;
}

.order-card-content.open {
  background-color: var(--white-100);
  border-radius: 0.3rem;
  padding: 1rem;
  margin-bottom: 0.3rem;
}

.orders-card-general-information-cont {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.orders-cards-general-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
}

.orders-cards-general-info-top > span {
  height: 100%;
  width: 30%;
  min-width: 10rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.orders-cards-general-info-top > span > button {
  background-color: var(--white);
  height: 1.5rem;
  width: 1.5rem;
  border: 1px solid var(--input-border);
  border-radius: calc(var(--button-radius) - 0.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orders-cards-general-info-top > span > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 600;
}

.orders-cards-general-info-top > span > div {
  background-color: #aeeeff;
  font-size: calc(var(--p-size));
  font-weight: 500;
  border-radius: var(--button-radius);
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  color: #158baa;

  width: 45%;
  min-width: 4rem;
}

.orders-cards-general-info-status {
  width: 65%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--gap);
}

.orders-cards-general-info-status > .orders-card-general-user-active {
  height: 2rem;
  width: 35%;
  border-radius: var(--button-radius);
  padding: 0.3rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
  border: 1px solid #ffb300;
  background-color: #fff4d9;
}

.orders-card-general-user-active > span {
  height: 1.5rem;
  width: 1.5rem;
  background-color: var(--black-mid);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var(--p-size);
  font-weight: 500;
}

.orders-card-general-user-active > p {
  color: var(--black-mid);
  font-weight: 500;
  font-size: calc(var(--p-size) + 0.1rem);
}

.orders-cards-general-info-status > span {
  height: 100%;
  width: 50%;
  min-width: 10rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.orders-cards-general-info-status > span > button {
  background-color: var(--white);
  height: 1.5rem;
  width: 1.5rem;
  border: 1px solid var(--input-border);
  border-radius: calc(var(--button-radius) - 0.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orders-cards-general-info-status > span > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 600;
}

.orders-cards-general-info-status > span > div {
  background-color: #aeeeff;
  font-size: calc(var(--p-size));
  font-weight: 500;
  border-radius: var(--button-radius);
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  color: #158baa;

  width: 55%;
  min-width: 4rem;
}

.orders-cards-general-info-bottom {
  width: 100%;
  flex-grow: 1;

  display: flex;
  justify-content: space-between;
  gap: var(--gap);
}

.orders-cards-payment-terms-cont {
  width: 32%;
  height: 21rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-2);
}

.orders-cards-payment-terms-cont > div {
  display: flex;
  height: 2rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: var(--p-size);
  color: #656565;
}

.orders-cards-payment-terms-cont > div > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.1rem);
}

.orders-cards-payment-terms-cont > div > button.paymetn-term-config-button {
  height: 1.8rem;
  min-width: 4rem;
  border-radius: 0.3rem;
  border: none;
  background-color: var(--black-mid);

  font-size: var(--p-size);
  cursor: pointer;
  transition: var(--transition);
}

.orders-cards-payment-terms-cont
  > div
  > button.paymetn-term-config-button:hover {
  box-shadow: var(--button-shadow);
}

button.orders-btn-payment-terms {
  width: 60%;
  color: var(--white);
  padding: 0.3rem;
}

.orders-cards-payment-terms-cont > section {
  display: flex;
  /* justify-content: center;
    gap: var(--gap); */
  align-items: center;
  padding: 0 0 0 0.4rem;
}

.orders-cards-payment-terms-cont > section > button {
  height: 1.8rem;
  min-width: 4rem;
  width: 50%;
  border-radius: 0.3rem;
  border: none;
  background-color: var(--black-mid);
  transition: var(--transition);

  font-size: var(--p-size);
  cursor: pointer;
  color: var(--white);
}

.orders-cards-payment-terms-cont > section > button:hover {
  box-shadow: var(--button-shadow);
}

.orders-cards-payment-terms-cont > div > span {
  font-weight: 800;
  color: var(--black-mid);
}

.orders-cards-orders-footers-cont {
  width: 32%;
  min-width: 10rem;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
}

.orders-footers-notes {
  background-color: var(--white);
  height: 50%;
  border: 1px solid #efefef;
  border-radius: 0.5rem;
  padding: 0.5rem 0.8rem;
  width: 100%;
}

.orders-footers-notes > div {
  height: 1.5rem;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--input-border);
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 600;
}

.orders-footers-notes > section {
  height: 86%;
  overflow-y: auto;
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 400;
  line-height: 1.7;
}

/* .orders-cards-orders-footers-cont>button {
    width: 70%;
    min-width: 6rem;
    height: 1.8rem;
    border-radius: var(--button-radius);
    border: none;
    cursor: pointer;
    background-color: var(--black-mid);
    color: var(--white);
    text-decoration: underline;
    transition: var(--transition);

    font-size: calc(var(--p-size));
} */

.orders-cards-orders-footers-cont > button:hover {
  box-shadow: var(--button-shadow);
}

.orders-footers-notes-text-area-cont {
  background-color: var(--white);
  height: 50%;
  border: 1px solid #efefef;
  border-radius: 0.5rem;
  padding: 0.5rem 0.8rem;
  width: 100%;
}

.orders-footers-notes-text-area-cont > div {
  height: 1.5rem;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 600;
}

.orders-footers-notes-text-area-cont > textarea {
  width: 100%;
  height: 80%;
  resize: none;
  border-radius: 0.4rem;
  padding: 0.2rem;
  border: 1px solid var(--grey);
  font-size: calc(var(--p-size));
}

.order-card-timeLine-container {
  background-color: var(--white);
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  /* padding: .5rem 0 ; */
}

.order-card-part-list {
  --list-item-display: grid;
  --list-item-template: 10% 9% 10% 9% 9% 8% 9% 7% 13% 11%;
  --list-item-justify: left;
  /* --list-item-padding: 0 0 0 2rem; */
  --list-item-gap: var(--gap);
  width: 96%;
  /* place-content: center; */
}

.orders-cards-shipping-info {
  width: 32%;
  /* height: 17rem; */
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.orders-cards-shipping-info > button {
  height: 2rem;
  width: 100%;
  color: var(--white);
  cursor: pointer;
  border-radius: var(--button-radius);
  border: none;
  background-color: var(--black-mid);
  font-size: var(--p-size);
}

.orders-cards-shipping-info > h3 {
  height: 1rem;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 700;
}

.orders-cards-shipping-info > section {
  height: 50%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* gap: var(--gap-2); */
}

.level-authorization-orders-dots {
  height: 0.3rem;
  width: 0.3rem;
  background-color: #29abe2;
  border-radius: 50%;
  position: absolute;

  top: -0.4rem;
  border: 1px solid #29abe2;
}

.level-authorization-orders-dots.level-auth-order-1 {
  background-color: #29abe2;
  left: 0.05rem;
}

.level-authorization-orders-dots.level-auth-order-2 {
  background-color: #29abe2;
  left: 0.5rem;
}

.level-authorization-orders-dots.level-auth-order-3 {
  background-color: var(--white);
  left: 1rem;
}

.authorization-orders-tooltip-msg {
  width: 100%;
  height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.authorization-orders-tooltip-msg > span {
  font-weight: 600;
}

.authorization-orders-tooltip-msg > p {
  font-weight: 400;
  font-size: calc(var(--p-size) - 0.1rem);
}

.legacy-reference-section,
.authorized-user-section {
  background-color: var(--white);
  border: 1px solid #efefef;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.4rem;
  padding: 0.5rem;
}

.legacy-reference-section > p,
.authorized-user-section > p {
  color: #000000;
  opacity: 0.6;
  font-size: calc(var(--p-size));
}

.legacy-reference-section > span,
.authorized-user-section > span {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500 !important;
}

.order-management-editing-tag {
  background-color: var(--blue-300);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: var(--item-border-radius);
  border-bottom-right-radius: var(--item-border-radius);
  font-size: var(--p-size);
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  height: 0.8rem;
}

.edit-order-general-info {
  width: 6rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  background-color: var(--white);
  transition: var(--transition);
}

.edit-order-general-info:hover {
  background-color: var(--black-mid);
  color: var(--white);
}
.timeline-stepper-cont {
  width: 100%;
  height: 100%;
  min-height: 3rem;
  position: relative;
}

.connector-labels {
  position: absolute;
  top: .2rem;
  left: 0;
  width: 100%;
  padding: 0 3rem;
  pointer-events: none;
  
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(12, 1fr);
  
}

.connector-label {
  width: auto; 
  transform: translateX(0); 
  font-size: var(--p-size);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1rem;
  white-space: nowrap;
}


.timeline-stepper-label{
  font-size: calc(var(--p-size) - .1rem);
  font-weight: 400;
  position:absolute;
}.order-part-header {
  background-color: #fbfbfb;
  border: 1px solid #f1f1f1;
  width: 100%;
  height: var(--item-min-height);
  border-radius: var(--item-border-radius);
  padding: 0 var(--item-padding);

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 10% 9% 10% 11% 7.5% 9% 9% 7% 12.5% 5% 1%;
  align-items: center;
  gap: var(--gap);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
}

.order-part-header:hover {
  background-color: #effcff;
}

.order-part-header > div {
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-part-header > p {
  font-size: calc(var(--p-size) + 0.05rem);
  color: var(--black-mid);
  font-weight: 400;
}

.order-part-content {
  height: 0;
  transition: var(--transition);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.order-part-content.open {
  height: auto;
  opacity: 1;
}

.order-part-content > section {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.order-part-content > section > h3 {
  font-size: 0.8em;
  color: var(--black-mid);
  font-weight: 600;
}

.order-part-content > section > button {
  width: 5rem;
  height: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
  gap: var(--gap);

  border-radius: 0.5em;
  cursor: pointer;
  border: 1px solid var(--grey-600);
  background-color: var(--white);
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.1rem);
  transition: var(--transition);
}

.order-part-content > section > button:hover {
  box-shadow: var(--button-shadow);
}
.quote-tracking-component {
  display: flex;
  height: 88%;
  flex-direction: column;
  gap: 0.5rem;
  .main-content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .nav-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    > .filter-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: transparent;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;
      > i {
        transition: all 0.3s;
        &.open {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      h2 {
        font-size: 0.8rem;
      }
    }
  }
  .quote-tracking-component-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    --list-item-display: grid;
    --list-item-template: 5vw 15.5vw 10.5vw 15vw 11vw 15.6vw;

    --list-item-justify: left;
    --list-item-padding: 0 0 0 0;
    --list-item-gap: 0.5rem;
    >.sorting-header {
      .sorting-free-slot {
        /* padding-right: 1vw; */
        margin-right: 0.5rem;
        width: 0;
        /* width: 3.8vw; */
      }
    }
    .MuiCheckbox-root{
      padding: 0;
    }
    .sorting-component {
      margin: 0.4rem 0;
      b {
        font-size: 0.528rem;

        text-align: center;
      }
    }
    /* justify-content: space-between; */
    .content-header {
    }
    hr {
      border-top: solid var(--grey-75) 1px;
      border-bottom: none;
      border-left: none;
      border-right: none;
    }
    .quote-tracking-component-content-header {
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .search-bar-input {
        width: unset;
      }

      > .left-container {
        display: grid;
        grid-template-columns: min-content minmax(170px, 40vw);
        align-items: center;
        gap: 0.8rem;

        > i {
          font-size: 1.2rem;
        }

        > b {
          white-space: nowrap;
          font-size: 0.8rem;
        }

        button {
          /* white-space: nowrap;
        font-size: 11px;
        display: flex;
        align-items: center;
        gap: 8px; */
        }

        > .input-wrapper {
          position: relative;
          display: flex;
          align-items: center;

          > i {
            font-size: 1rem;
            position: absolute;
            right: 0.8rem;
          }

          > input {
            width: 100%;
            /* position: relative; */
            min-height: var(--input-height);
            border-radius: var(--input-radius);
            border: solid 1px var(--input-border);
            padding: 0 28px 0 12px;
            font-size: var(--input-font-size);
            color: var(--black-mid);

            &:focus-visible {
              outline: none;
            }

            &::placeholder {
              color: var(--black-mid);
            }
          }
        }
      }
    }
  }
}
.quote-list {
  height: 100%;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem 1.5rem 0;
  gap: 0.4rem;

  details[open] {
    .item-component {
      background-color: var(--blue-500);
      border: solid 1px var(--green-25);
    }
  }

  .expandable-details {
    overflow: visible;
  }
}

.item-quote-management-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns: 5vw 15.5vw 10.5vw 13vw 10vw 16.6vw 14vw;
  &.active {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
  }
    &.selected {
    border: 1px solid var(--green-300) !important;
    background-color: #dff5eb !important;
  }
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: 0 1rem;
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .image-container {
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    &.centerItem {
      width: 100%;
    }
    .tag-vendor-font {
      border-radius: 5px;
      background-color: #00ce88;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      width: 1rem;
      height: 1rem;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-date {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .bold-font-black {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
}
.quote-tracking-list-prn-container {
  --list-item-display: grid;
  --list-item-template: 5vw 15.5vw 10.5vw 8vw 8vw 11vw 16.6vw 8vw;
  position: sticky;
  margin: 0 0.5rem;

  --list-item-justify: left;
  --list-item-padding: 0 0 0 0;
  --list-item-gap: 0.5rem;
  > .sorting-header {
    .sorting-free-slot {
      margin-right: 0.5rem;
      width: 0;
      /* width: 3.8vw; */
    }
  }
  .MuiCheckbox-root {
    padding: 0;
  }
  .sorting-component {
    margin: 0.4rem 0;
    b {
      font-size: 0.528rem;

      text-align: center;
    }
  }
}

.item-quote-prn-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns: 5vw 15.5vw 10.5vw 6vw 10vw 11vw 15.6vw 8vw;
  &.active {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
  }
  &.selected {
    border: 1px solid var(--green-300) !important;
    background-color: #dff5eb !important;
  }
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: 0 1rem;
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .image-container {
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    &.centerItem {
      width: 100%;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-date {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .bold-font-black {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
}
.quote-tracking-list-vendor-container {
  --list-item-display: grid;
  --list-item-template: 12vw 4vw 5.5vw 7vw 6vw 5vw 5vw 6.5vw 6vw 6vw 10vw;
  
  margin: 0 0.5rem 0.5rem;

  --list-item-justify: left;
  --list-item-padding: 0 0 0 0;
  --list-item-gap: 1vw;
  > .sorting-header {
    .sorting-free-slot {
      padding-right: 1.7vw !important;
      margin-right: 0.5rem;
      width: 0;
      /* width: 3.8vw; */
    }
  }
  .MuiCheckbox-root {
    padding: 0;
  }
  .sorting-component {
    margin: 0.4rem 0;
    b {
      font-size: 0.528rem;

      text-align: center;
    }
  }
}
.item-quote-vendor-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 1vw;
  cursor: pointer;
  grid-template-columns: 12vw 4vw 5.5vw 7vw 6vw 5vw 5vw 6.5vw 6vw 6vw 10vw;
   &.disabled-item{
    pointer-events: none;
    opacity: 0.5;
   }
  padding: 0 var(--item-padding);
  min-height: var(--item-min-height);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .icon-favorite::before {
    color: #29abe2;
  }
  .tag-status-vendor {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    .icon-edit::before {
      color: #858585;
    }
    .icon-new-save::before {
      color: #858585;
    }
  }
  .input-component {
    & input,
    & textarea {
      font-size: var(--p-size);
      min-height: 1.5rem;
      max-height: 1.5rem;
    }
  }
  .select > #select-partNumber {
    font-size: var(--p-size);
    min-height: 1.5rem;
    max-height: 1.5rem;
  }
  .date-component {
    .MuiOutlinedInput-root {
      font-size: var(--p-size);
      min-height: 1.5rem;
      max-height: 1.5rem;
    }
         .icon-date {
        font-size: 0.8rem;
      }
  }
  .image-container {
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .score-container {
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    &.centerItem {
      width: 100%;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-date {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      color: var(--blue-300);
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .bold-font-black {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
}
.button-vendor-action{
  background-color: transparent;
  border: none;
  cursor: pointer;
  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  } 
}
.kodo-table {
  --icon-font-size: 0.5rem;
  --icon-default-color: var(--grey-200);
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  /* Menor que el ícono de eliminar */
}
.kodo-table-header-label {
  font-weight: 600;
  color: #646978;
  font-size: 0.7rem;
  line-height: 0.8rem;
}
.kodo-table-cell-content {
  color: #646978;
  font-size: 0.65rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kodo-table .MuiTableCell-body {
  border-bottom: 1px solid #ededed;
  padding: 11px 15px 11px 15px !important;
}

.aling-info-right {
  text-align: right !important;
  padding-right: 0.5rem;
}

.row-even {
  background-color: #f9f9f9;
}

.row-odd {
  background-color: #ffffff;
}

.arrow-button {
  cursor: pointer;
  display: grid;
  margin-left: 0.3rem;
  place-items: center;
  min-width: 0.96rem;
  aspect-ratio: 1;
  font-size: var(--icon-font-size);
  background-color: var(--white);
  border-radius: 0.2rem;
  color: #ededed;
  position: relative;
  border: 1px solid #ededed;
}
.arrow-button.active {
  background-color: var(--black-mid);
  color: var(--white);
}
.arrow-button > u {
  text-decoration: none;
  position: absolute;
  aspect-ratio: 1;
  width: 0.7rem;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  left: 0.6rem;
  top: -0.4rem;
  color: #ffffff;
  background-color: #fe5757;
  border-radius: -12rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-button:hover {
  border: 1px solid #404041;
}

.kodo-table .MuiTableHead-root .MuiTableCell-root {
  background-color: white;
  /* Importante para que se vea el header */
  position: sticky;
  top: 0;
  z-index: 100;
  padding-bottom: 12px !important;
}.quote-vendor-modal {
  width: calc(88vw);
  max-height: 80vh;
  height: 80vh;
  display: flex;
  flex-direction: column;
  h2 {
    font-size: 0.8rem;
    color: var(--black-mid);
  }
  hr {
    min-height: 1px;
    width: 100%;
    margin: 0.3rem 0;
    border: none;
    background-color: var(--grey-75);
  }
  > .quote-vendor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .quote-vendor-modal-header-right-side{
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .quote-vendor-modal-header-left-side {
      display: flex;
      align-items: center;
      gap: 1rem;
      .header-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        .icon-issue:before {
          color: var(--black-mid);
        }
      }
      .header-part-info {
        display: flex;
        align-items: center;
        padding: 0.4rem 1rem;
        gap: 1rem;
        border-radius: 0.4rem;
        border: 1px solid #f1f1f1;
        background-color: #fbfbfb;
        .header-part-info-data {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.7rem;

          b {
            font-size: 1em;
          }
        }
      }
    }
  }
}
.quote-vendor-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.item-quote-modal-management-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns: 5vw 10.5vw 9.5vw;
  &.active {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
  }
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: 0 1rem;
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .score-container {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    .icon-favorite {
      font-size: 0.7rem;
    }
      .icon-favorite::before {
        color: #29abe2;
      }
  }
  .image-container {
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    &.centerItem {
      width: 100%;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-date {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .bold-font-black {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
}
.quote-vendor-modal-content-right-side {
  width: 100%;
}
.quote-vendor-modal-content {
  display: flex;
  gap: 1rem;

  height: calc(80vh - 5rem);
  .quote-vendor-modal-content-left-side {
    height: 100%;
    display: flex;
    flex-direction: column;
    --list-item-display: grid;
    --list-item-template: 5vw 10.5vw 9.5vw;

    --list-item-justify: left;
    --list-item-padding: 0 0 0 0;
    --list-item-gap: 0.5rem;
    > .sorting-header {
      .sorting-free-slot {
        /* padding-right: 1vw; */
        margin-right: 0.5rem;
        width: 0;
        /* width: 3.8vw; */
      }
    }
  }
}
.vendor-selected-modal-quote-container-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  .vendor-selected-modal-quote-container-header-vendor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    .icon-favorite {
      font-size: 0.7rem;
    }
    .icon-favorite::before {
      color: #29abe2;
    }
    b {
      white-space: nowrap;
    }
  }
  .search-bar-input {
    width: 100%;
  }
}

.vendor-selected-modal-quote-container-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  --list-item-display: grid;
  --list-item-template: 5vw 4.5vw 6.5vw 7vw 12vw 7vw 6vw;

  --list-item-justify: left;
  --list-item-padding: 0 0 0 0;
  --list-item-gap: 0.5rem;
  > .sorting-header {
    .sorting-free-slot {
      /* padding-right: 1vw; */
      margin-right: 0.5rem;
      width: 0;
      /* width: 3.8vw; */
    }
  }
}
.vendor-selected-modal-quote-container-body-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
}
.item-quote-prn-vendor-modal-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns: 5vw 4.5vw 6.5vw 5vw 11vw 10vw 6vw;
  &.active {
    background-color: var(--blue-500);
    border: solid 1px var(--green-25);
  }
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: 0 1rem;
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
  .icon-task_icon_partRequest {
    font-size: 0.68rem;
    margin-top: 0.2rem;
  }
  .score-container {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    .icon-favorite {
      font-size: 0.7rem;
    }
    .icon-favorite::before {
      color: #29abe2;
    }
  }
  .image-container {
    color: var(--white);
    &.success {
      background: rgb(0, 206, 136);
    }
    &.warning {
      background: var(--yellow-100);
    }
    &.error {
      background: var(--red-50);
    }
  }
  .property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.26rem;
    max-width: 100%;
    &.centerItem {
      width: 100%;
    }
    .light-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font-date {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      overflow: hidden;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .bold-font {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
    .bold-font-black {
      text-align: center;
      font-size: var(--item-value-font-size, 0.609rem);
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      width: 100%;
    }
  }
}
.vendor-selected-score-container {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: #fbfbfb 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  padding: 0 0.3rem;
  .icon-favorite::before {
    color: #29abe2;
  }
  .icon-favorite {
    font-size: 0.5rem !important;
  }
  b {
    font-size: 0.6rem;
  }
}

.item-quote-prn-status{
  cursor: pointer;
  position: absolute;
    right: 25px;
    top: 17px;
}

.quote-vendor-currency-info-container {
  --input-height: 1.5rem;
  .date-component {
    .icon-date {
      font-size: 0.8rem;
      color: var(--black-mid);
    }
  }
  padding: 0.5rem;
  .quote-vendor-currency-info-container-header {
    display: grid;
    align-items: center;
    grid-template-columns: 7vw 8.5vw 6vw 6vw 6vw 6vw 6vw 6vw;
    gap: 0.5rem;
    b {
      text-align: center;
      font-size: 0.53rem;
    }
  }
  .quote-vendor-currency-info-container-body {
    display: grid;
    align-items: center;
    grid-template-columns: 7vw 8.5vw 6vw 6vw 6vw 6vw 6vw 6vw;
    gap: 0.5rem;
  }
}
.new-order-vendor-list {
  height: 100%;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem 0 0;
  gap: 0.4rem;
}
.new-order-vendor-list-container {
  transition: all 0.3s;
  display: grid;
  justify-items: left;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  cursor: pointer;
  grid-template-columns: 10vw 13.5vw 3.5vw 6.5vw 8vw 47vw;
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  padding: 0 1rem;
  min-height: var(--item-min-height);
  background-color: var(--item-background-color);
}
.new-order-vendor-list-container .score-container {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.new-order-vendor-list-container .score-container .icon-favorite {
  font-size: 0.7rem;
}
.new-order-vendor-list-container .score-container .icon-favorite::before {
  color: #29abe2;
}
.new-order-vendor-list-container.active {
  background-color: var(--blue-500);
  border: solid 1px var(--green-25);
}
.new-order-vendor-list-container.selected {
  border: 1px solid var(--green-300) !important;
  background-color: #dff5eb !important;
}
.new-order-vendor-list-container .icon-task_icon_partRequest {
  font-size: 0.68rem;
  margin-top: 0.2rem;
}
.new-order-vendor-list-container .image-container {
  color: var(--white);
}
.new-order-vendor-list-container .image-container.success {
  background: rgb(0, 206, 136);
}
.new-order-vendor-list-container .image-container.warning {
  background: var(--yellow-100);
}
.new-order-vendor-list-container .image-container.error {
  background: var(--red-50);
}
.new-order-vendor-list-container .property {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.26rem;
  max-width: 100%;
}
.new-order-vendor-list-container .property.centerItem {
  width: 100%;
}
.new-order-vendor-list-container .property .light-font {
  text-align: center;
  font-size: var(--item-value-font-size, 0.609rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.new-order-vendor-list-container .property .bold-font-date {
  text-align: center;
  font-size: var(--item-value-font-size, 0.609rem);
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.new-order-vendor-list-container .property .bold-font {
  text-align: center;
  font-size: var(--item-value-font-size, 0.609rem);
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
}
.new-order-vendor-list-container .property .bold-font-black {
  text-align: center;
  font-size: var(--item-value-font-size, 0.609rem);
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
}
.new-order-vendor-list-container-content {
  margin: 0 0.5rem 0.5rem;
}
.new-order-vendor-list .total-pns-container {
  background: #333333 0% 0% no-repeat padding-box;
  border-radius: 6px;
  height: 1rem;
  width: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.new-order-vendor-list .total-order-per-line {
  text-align: right;
  font-size: 0.53rem;
  width: 100%;
}

.new-order-vendor-header {
  display: grid;
  align-items: center;
  grid-template-columns: 10vw 13.5vw 3.5vw 6.5vw 8vw 48vw;
  gap: 0.5rem;
  padding: 0 1rem;
  margin: 0.5rem 0;
}
.new-order-vendor-header b {
  font-size: 0.53rem;
}
.new-order-vendor-header b:last-child {
  text-align: right;
  width: 100%;
}.package-intake-component .package-intake-header {
  display: grid;
  grid-template-columns: min-content auto min-content;
  max-width: 600px;
  gap: 0.5rem;
}
.package-intake-component .package-intake-header button {
  width: min-content;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0 1.5rem;
}
.package-intake-component .package-intake-header > b {
  white-space: nowrap;
}
.package-intake-component .package-intake-content {
  display: grid;
  grid-template-columns: 2fr 4fr 3fr;
  margin-top: 1rem;
  gap: 1rem;
  height: 100%;
  overflow: auto;
}
.package-intake-component .package-intake-content .awb-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  background-color: var(--item-background-color);
  padding: 0.3rem;
  gap: 0.2rem;
}
.package-intake-component .package-intake-content .awb-list .awb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  border: var(--item-border);
  padding: 0.2rem 0.4rem;
  font-size: 0.6rem;
  border-radius: var(--input-radius);
}
.package-intake-component .package-intake-content .awb-list .awb.selected {
  background-color: var(--blue-500);
  border: solid 1px var(--green-25);
}
.package-intake-component .package-intake-content .awb-list .awb .awb-info {
  display: flex;
  flex-direction: column;
}
.package-intake-component .package-intake-content .awb-list .awb .awb-info .notfound {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}
.package-intake-component .package-intake-content .awb-list .awb .awb-info .notfound i {
  color: var(--grey-250);
}
.package-intake-component .package-intake-content .awb-list .awb .awb-info .notfound [class*=icon] {
  font-size: 0.7rem;
}
.package-intake-component .package-intake-content .awb-list .awb b {
  font-size: 0.6rem;
}
.package-intake-component .package-intake-content .awb-list .awb button:not(.icon) {
  --input-height: 1.7rem;
  padding: 0 0.5rem;
  min-height: var(--input-height);
  transition: all 0.3s;
  min-width: 3.5rem;
  border-radius: 0.3rem;
}
.package-intake-component .package-intake-content .awb-list .awb button:not(.icon):active {
  opacity: 0.2;
}
.package-intake-component .package-intake-content .awb-list .awb button:not(.icon):hover {
  background-color: unset;
  box-shadow: unset;
}
.package-intake-component .package-intake-content .awb-list .awb button:not(.icon).filled.green {
  background-color: var(--green-250);
  border: solid 1px transparent;
}
.package-intake-component .package-intake-content .awb-list .awb button:not(.icon).outlined {
  color: var(--blue-400);
  border: solid 1px var(--blue-400) !important;
}
.package-intake-component .package-intake-content .awb-list .awb .awb-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.package-intake-component .package-intake-content .awb-list .awb .awb-actions .delete {
  width: 1.2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 0.2rem;
}
.package-intake-component .package-intake-content .awb-list .awb .awb-actions .delete:hover i::before {
  color: white;
}
.package-intake-component .package-intake-content .boxes-container {
  overflow: auto;
}
.package-intake-component .awb-detail-mobile {
  display: grid;
  grid-template-rows: 4fr 6fr;
  gap: 1rem;
  height: 100%;
}
.package-intake-component .sorting-component b {
  font-size: 0.56rem;
}
.package-intake-component .sorting-component .arrow-button {
  min-width: 0.8rem;
  font-size: 0.45rem;
  display: grid;
  place-items: center;
  padding: none;
  line-height: 0.9;
}

@media (min-width: 1024px) {
  .package-intake-component .qr-btn-container {
    display: none;
  }
  .package-intake-component .awb button.viewButton {
    display: none;
  }
}
@media (max-width: 1024px) {
  .package-intake-component .package-intake-header > b {
    font-size: 0.7rem;
  }
  .package-intake-component .package-intake-content {
    grid-template-columns: 1fr;
  }
  .package-intake-component .package-intake-content .awb-detail-container {
    display: none;
  }
  .package-intake-component .package-intake-content .boxes-container {
    display: none;
  }
}
.floating-main-button {
  --size: 3.5rem;
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  min-height: var(--size);
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50% !important;
  box-shadow: var(--pop-over-shadow);
  background-color: var(--white) !important;
  color: var(--black-mid) !important;
  border: none !important;
}
.floating-main-button i {
  color: var(--black-mid) !important;
  font-size: 2rem;
}
.floating-main-button i::before {
  color: var(--black-mid) !important;
}.boxes-component {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: auto;
  height: 100%;
}
.boxes-component .file-uploader-component i {
  font-size: 0.7rem;
}
.boxes-component .info-btn {
  font-size: 0.55rem;
  color: var(--grey-250);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.boxes-component .info-btn [class*=icon] {
  font-size: 0.7rem;
}
.boxes-component .box-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.boxes-component .box-header button {
  min-width: 5rem;
}
@media (max-width: 1024px) {
  .boxes-component .box-header b {
    font-size: 0.7rem;
  }
}
.boxes-component .boxbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: var(--input-height);
  aspect-ratio: 1;
  min-width: unset;
  font-size: 0.6rem;
  border-radius: 0.32rem;
}
.boxes-component .boxbtn i {
  font-size: 0.9rem;
}
.boxes-component .camerabutton {
  background-color: var(--green-250);
  border: none;
}
.boxes-component .camerabutton i {
  color: var(--white);
}
.boxes-component .boxes-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  background-color: var(--item-background-color);
  padding: 0.3rem;
  gap: 0.2rem;
  overflow: scroll;
}
@media (max-width: 1024px) {
  .boxes-component .boxes-list {
    background-color: unset;
    border: unset;
    padding: 0;
    border-radius: unset;
  }
}
.boxes-component .boxes-list .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  background-color: var(--white);
  border: var(--item-border);
  border-radius: var(--input-radius);
  padding: 0.2rem 0rem 0.2rem 0.8rem;
}
@media (max-width: 1024px) {
  .boxes-component .boxes-list .box {
    padding: 0.2rem 0rem 0.2rem 0.4rem;
  }
}
.boxes-component .boxes-list .box b {
  font-size: 0.56rem;
  min-width: 5ch;
}
.boxes-component .boxes-list .box .drpdwn {
  display: grid;
  grid-template-columns: min-content auto min-content;
  align-items: center;
  gap: 0.5rem;
  width: 19rem;
}
@media (max-width: 1024px) {
  .boxes-component .boxes-list .box .drpdwn {
    width: 100%;
  }
}
@media (max-width: 450px) {
  .boxes-component .boxes-list .box .drpdwn {
    grid-template-columns: min-content auto min-content;
    gap: 0.4rem;
    --input-height: 2.2rem;
  }
  .boxes-component .boxes-list .box .drpdwn .select,
  .boxes-component .boxes-list .box .drpdwn #select-partNumber {
    width: 100%;
  }
}
.boxes-component .boxes-list .box .drpdwn .label::before {
  content: "Box Condition";
}
@media (max-width: 450px) {
  .boxes-component .boxes-list .box .drpdwn .label::before {
    font-size: 0.5rem;
    content: "Condition";
  }
}
.boxes-component .boxes-list .box .drpdwn .boxactions {
  display: flex;
  align-items: center;
  gap: 0;
}
.boxes-component .boxes-list .box .drpdwn > span {
  font-size: 0.6rem;
  white-space: nowrap;
  color: var(--grey-250);
}
.boxes-component .boxes-list .box .actions {
  display: flex;
  align-items: center;
}
.boxes-component .photos-container {
  background-color: var(--white);
  margin: 0.4rem 0rem;
  padding: 0.5rem;
  border-radius: var(--input-radius);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
@media (max-width: 1024px) {
  .boxes-component .photos-container {
    padding: 0;
  }
}
.boxes-component .photos-container .ph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.4rem;
}
@media (max-width: 1024px) {
  .boxes-component .photos-container .ph-header .boxnumber {
    display: none;
  }
}
.boxes-component .photos-container .ph-header .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.boxes-component .photos-container .ph-header .title b {
  font-size: 0.65rem;
}
.boxes-component .photos-container .ph-header .actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.boxes-component .photos-container .filearray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@media (max-width: 1024px) and (orientation: portrait) {
  .boxes-component .photos-container .filearray {
    grid-template-columns: repeat(2, 1fr);
  }
}
.boxes-component .photos-container .filearray img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
}
.boxes-component .photos-container .ph-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
.boxes-component .photos-container .ph-content .boxbtn {
  background-color: var(--black-mid);
}
.boxes-component .photos-container .ph-content .boxbtn i {
  color: var(--white);
}
@media (min-width: 1024px) {
  .boxes-component .photos-container .ph-content .boxbtn {
    display: none;
  }
}.image-withbuttons-component{
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;

    .buttons-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .buttons{
        display: flex;
        align-items: flex-end;
        gap: 0.6rem;
        padding: 0.6rem 0 0.3rem 0;
        width: 100%;
        height: 30%;
       justify-content: center;
       background: linear-gradient(to top, #333A, transparent);
       transition: all 0.3s;

       
       &.hidden{
        opacity: 0;
        transition: all 0.3s;
        pointer-events: none;
        * {
            pointer-events: none;

        }
       }

       button{
        aspect-ratio: 1.1;
        /* min-width: 1rem; */
        i{
            font-size: 1.2rem;
        }
       }

        
    }

    .caption{
        background-color: var(--black-mid);
        color: var(--white);
        width: 100%;
        font-size: 0.65rem;
        padding: 0.3rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}.file-uploader-component{
    min-height: var(--input-height);
    height:  100%;
    width: 100%;
    border: dashed 1px var(--grey-150);
    border-radius: var(--input-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;

    color: var(--grey-150);

    font-size: 0.56rem;

    i {
        color: var(--green-250);
        font-size: calc(var(--p-size) + .65rem);
    }
}.awb-detail-component {
  display: flex;
  flex-direction: column;
  --list-item-display: grid;
  --list-item-gap: 0.4rem;
  --list-item-template: 2fr 2fr 5fr 5fr 1fr;
  gap: 0.3rem;
}
.awb-detail-component .order {
  width: 100%;
  padding: var(--item-padding);
  border: var(--item-border);
  background-color: var(--item-background-color);
  display: grid;
  grid-template-columns: var(--list-item-template);
  gap: var(--list-item-gap);
  border-radius: var(--input-radius);
}
.awb-detail-component .order * {
  font-size: 0.6rem;
}

@media (max-width: 450px) {
  .awb-detail-component {
    --list-item-template: 20% 10% 20% 20% 10%;
    overflow: hidden;
  }
  .awb-detail-component .sorting-general {
    display: none;
  }
  .awb-detail-component .order * {
    font-size: 0.5rem;
  }
}
@media (min-width: 450px) and (max-width: 1024px) {
  .awb-detail-component .sorting-general {
    display: none;
  }
}
@media (min-width: 1024px) {
  .awb-detail-component .sorting-mobile {
    display: none;
  }
}.mobile-modal-component {
  --fullsc-head-height: 2.7rem;
  --fullsc-head-margin: 0.7rem;
}
@media (max-width: 450px) {
  .mobile-modal-component {
    --fullsc-head-height: 2.2rem;
    --fullsc-head-margin: 0.4rem;
  }
}
.mobile-modal-component {
  position: fixed !important;
  top: 3.2rem !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100dvh - 4rem) !important;
  background-color: var(--white) !important;
  z-index: 100 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  padding: 0.5rem !important;
  pointer-events: none;
}
.mobile-modal-component * {
  pointer-events: none;
}
@media (min-width: 1024px) {
  .mobile-modal-component {
    display: none !important;
  }
}
@media (min-width: 450px) and (max-width: 1024px) {
  .mobile-modal-component {
    padding: 1rem 1.4rem !important;
  }
}
.mobile-modal-component.navbarshown {
  top: 7rem !important;
  height: calc(100dvh - 7rem) !important;
}
.mobile-modal-component.show {
  transition: all 0.3s;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.mobile-modal-component.show * {
  pointer-events: all;
}
.mobile-modal-component.fullscreen {
  top: 0 !important;
  height: 100dvh !important;
  padding-top: calc(var(--fullsc-head-height) + var(--fullsc-head-margin)) !important;
}
.mobile-modal-component .modal-header {
  position: absolute;
  top: 0;
  left: 0;
  min-height: var(--fullsc-head-height);
  margin-top: var(--fullsc-head-margin);
  width: 100%;
  padding: 0 1.4rem;
  display: grid;
  grid-template-columns: min-content auto min-content;
  gap: 0.7rem;
  align-items: center;
}
@media (max-width: 450px) {
  .mobile-modal-component .modal-header {
    padding: 0 0.5rem;
  }
}
.mobile-modal-component .modal-header [class*=one-way] {
  transform: rotate(-180deg);
}
.mobile-modal-component .modal-header button {
  --btn-width: 1.5rem;
  min-width: var(--btn-width) !important;
  max-width: var(--btn-width) !important;
  max-height: var(--btn-width) !important;
  min-height: var(--btn-width) !important;
}
.mobile-modal-component .modal-header > i {
  font-size: 1rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.mobile-modal-component .modal-header > b {
  font-size: 0.7rem;
}.camera-component {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  --glass-bg: #AAA9;
  --dark-glass-bg: #00000094;
}
.camera-component .result {
  font-size: 1rem;
  position: fixed;
  color: var(--white);
  bottom: 8rem;
  left: 50%;
  transform: translate(-50%, 3rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.camera-component .result > span {
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  border: none;
  background-color: var(--glass-bg);
  backdrop-filter: blur(5px);
  max-width: 90dvw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camera-component .result i::before {
  color: white;
  font-size: 1.5rem;
}
.camera-component .closebtn {
  color: rgba(255, 255, 255, 0.6666666667);
  border-radius: 0.5rem;
  position: absolute;
  right: 0.3rem;
  top: 0.5rem;
  width: 2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.camera-component .camera-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 80vh;
  width: 100vw;
}
.camera-component video {
  height: 100dvh;
  width: 100dvw;
  object-fit: cover;
}
.camera-component .qr-region {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  border-top: solid calc((100dvh - 100dvw - 2rem) / 4) var(--dark-glass-bg);
  border-bottom: solid 8rem var(--dark-glass-bg);
  border-left: solid 1rem var(--dark-glass-bg);
  border-right: solid 1rem var(--dark-glass-bg);
  background-color: transparent;
}
.camera-component .camera-actions {
  position: fixed;
  bottom: 1rem;
  left: 0;
  width: 100dvw;
  height: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
}
.camera-component .camera-actions i {
  font-size: 1.7rem;
  display: flex;
}
.camera-component .camera-actions .morebtn {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: solid 1px white;
  height: 2rem;
  aspect-ratio: 1;
  position: relative;
}
.camera-component .camera-actions .morebtn b {
  position: absolute;
  top: 65%;
  backdrop-filter: blur(5px);
  right: -0.3rem;
  background-color: var(--glass-bg);
  color: white;
  padding: 0 0.5rem;
  border-radius: 1rem;
}
.camera-component .camera-actions .morebtn i::before {
  font-size: 1rem !important;
}
.camera-component .camera-actions i::before {
  color: white;
}

.camera-component-scanElements {
  display: flex;
  flex-direction: column;
  color: var(--white);
  padding: 0.1rem 0.4rem;
  position: relative;
  backdrop-filter: blur(5px);
}
.camera-component-scanElements b {
  font-weight: normal;
  color: white;
  font-size: 0.7rem;
}
.camera-component-scanElements .scan-element {
  font-size: 0.7rem;
  padding: 0 0 0 0.3rem;
  height: 2.23rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0rem;
}
.camera-component-scanElements .scan-element i {
  height: 70%;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.camera-component-scanElements .scan-element i::before {
  color: white;
}
.camera-component-scanElements .scan-element:not(:last-child) {
  border-bottom: solid 1px rgba(255, 255, 255, 0.6666666667);
}

.blurFilter {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: blur(0.8);
}.modules-menu-component {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.7rem;
}
.modules-menu-component .icon-apps::before {
  color: var(--grey-250) !important;
}
@media (min-width: 1024px) {
  .modules-menu-component {
    display: none;
  }
}

.modules-menu-component-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem 0.2rem;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  z-index: 101;
  justify-items: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .modules-menu-component-grid {
    height: min-content;
  }
}
@media (max-width: 450px) {
  .modules-menu-component-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 450px) and (max-width: 1024px) and (orientation: landscape) {
  .modules-menu-component-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.modules-menu-component-grid .module-span-icon {
  min-height: 4.5rem;
  height: auto;
  width: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  /* Reduce el espacio entre el icono y el texto */
  position: relative;
}
.modules-menu-component-grid .module-span-icon i {
  height: 3.2rem;
  width: 3.2rem;
  /* padding: 0.65rem; */
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.5rem;
}
.modules-menu-component-grid .module-span-icon p {
  font-size: 0.6rem;
  font-weight: 400;
  text-align: center;
  min-height: 2rem;
  display: flex;
  align-items: center;
}.global-search-component {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  width: 100%;
}
.global-search-component .navbar-search-results-cont {
  display: flex;
  height: 100%;
  width: 100%;
}
.global-search-component .navbar-search-results-cont .all-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}
.global-search-component .navbar-search-results-cont .all-results .recent-searchs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.global-search-component .navbar-search-results-cont .all-results .recent-searchs .list-of-recents {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  column-gap: 0.5rem;
}
@media (max-width: 450px) {
  .global-search-component .navbar-search-results-cont .all-results .recent-searchs .list-of-recents {
    grid-template-columns: repeat(4, 1fr);
  }
}
.global-search-component .navbar-search-results-cont .all-results .recent-searchs .list-of-recents > span {
  width: 100%;
}
.global-search-component .navbar-search-results-cont .all-results .recent-searchs .list-of-recents > span > p {
  max-width: 6rem;
}
.global-search-component .navbar-search-results-cont .all-results .files-results {
  gap: 0.5rem;
}
.global-search-component .navbar-search-results-cont .all-results .transatcionts-results {
  gap: 0.5rem;
}@media (min-width: 1024px) {
  .global-search-btn-component {
    display: none;
  }
}

.span-recent-module {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
}
.span-recent-module i {
  color: white;
}

.recent-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recent-search-header-title {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.recent-search-header-title b {
  font-size: 0.69rem;
}
.recent-search-header-title i {
  font-size: 0.75rem;
  color: var(--black-mid);
}
.recent-search-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.recent-search-header-actions-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  border-radius: 7px;
  height: 1.5rem;
  background: #fafafa 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  transition: all 0.2s ease-in-out;
}
.recent-search-header-actions-container:hover {
  background: #404041;
}
.recent-search-header-actions-container:hover .icon-arrow-down {
  color: #fff;
}
.recent-search-header-actions-container.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.recent-search-header-actions-container.left .icon-arrow-down {
  transform: rotate(90deg);
  font-size: 0.65rem;
}
.recent-search-header-actions-container.right {
  margin-left: auto;
}
.recent-search-header-actions-container.right .icon-arrow-down {
  font-size: 0.65rem;
  transform: rotate(270deg);
}

.recent-search-expand-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: calc(100% - 2rem);
  bottom: 1rem;
}
.recent-search-expand-container-arrow {
  cursor: pointer;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  border-radius: 0.2rem;
  opacity: 1;
  width: 2rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.recent-search-expand-container-arrow .icon-arrow-down {
  font-size: 0.5rem;
  transition: all 0.2s ease-in-out;
  color: #707070;
}
.recent-search-expand-container-arrow.expanded .icon-arrow-down {
  transform: rotate(180deg);
}
.recent-search-expand-container-arrow:hover {
  background-color: #404041;
}
.recent-search-expand-container-arrow:hover .icon-arrow-down {
  color: #fff;
}

.recent-searchs {
  background: #fafafa 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  border-radius: 0.4rem;
  padding: 0.5rem;
  transition: all 0.5s ease-in-out;
  position: relative;
  opacity: 1;
}
.recent-searchs.expanded {
  height: 100%;
}
.recent-searchs.expanded .list-of-recents {
  overflow: auto;
}
.recent-searchs.hidden {
  height: 0%;
  opacity: 0;
  padding: 0;
  gap: 0rem;
}
.recent-searchs.hidden .recent-search-header {
  display: none;
}

.all-results-left {
  width: 50%;
}

.all-results-right {
  width: 50%;
}

.files-results {
  background: #fafafa 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  border-radius: 0.4rem;
  padding: 0.5rem;
  position: relative;
}

.transactions-results {
  background: #fafafa 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  border-radius: 0.4rem;
  padding: 0.5rem;
  position: relative;
}
.transactions-results.expanded {
  height: 100%;
}

.globalsearchbar-component {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 0.7rem;
}
.globalsearchbar-component .global-search-cont {
  z-index: 901;
  width: 100%;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  border: 1px solid transparent;
  position: relative;
  padding-right: 0.2rem;
}
.globalsearchbar-component .global-search-cont:focus-within {
  outline: 1px solid var(--grey-100);
}
.globalsearchbar-component .clear-search {
  color: var(--grey-250);
  font-size: 0.5rem;
  width: 1.3rem;
  height: 100%;
  cursor: pointer;
}
.globalsearchbar-component .searchicon {
  color: var(--grey-250);
  font-size: 0.85rem;
}
.globalsearchbar-component .searchswitch {
  display: grid;
  place-items: center;
  border-radius: 0.2rem;
  width: 1.5rem;
  aspect-ratio: 1;
  font-size: 0.7rem;
  color: var(--grey-250);
  margin-left: 0.4rem;
}
.globalsearchbar-component .searchswitch::before {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 0;
  transition: all 0.2s;
}
.globalsearchbar-component .searchswitch:hover {
  background-color: var(--black-mid);
  color: white;
  cursor: pointer;
}
.globalsearchbar-component .searchswitch.right::before {
  transform: rotate(-180deg);
  position: relative;
  bottom: 0.05rem;
}
.globalsearchbar-component .search-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.globalsearchbar-component .navbar-search-results-cont {
  height: 80dvh;
  width: calc(100% + 25rem);
  position: absolute;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  top: 2.2rem;
  border-radius: 0.5rem;
  z-index: 0;
  box-shadow: var(--box-shadow);
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
}
.globalsearchbar-component .navbar-search-results-cont.visible {
  opacity: 1;
  visibility: visible;
}

.category-file-container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.category-file-container .category-title-file b {
  font-size: 0.59rem;
}

@media (max-width: 1024px) {
  .globalsearchbar-component {
    display: none;
  }
  .globalsearchbar-component .global-search-cont {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .global-search-btn-component {
    display: none;
  }
}.receiving-management {
    height: 86%;
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.receiving-management>section {
    width: 100%;
}

.receiving-nav {
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border-bottom: 1px solid var(--grey-50);
}

.receiving-management-header-cont {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: end;
}

.receiving-management-header-cont>button {
    width: 5rem;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);

    font-size: calc(var(--p-size) * 1.3);
    font-weight: 600;
    color: var(--black-mid);
    cursor: pointer;
}

.receiving-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: 100%;
    transition: var(--transition);
}

.receiving-sorting-container {
    --list-item-display: grid;
    --list-item-template: 5% 7% 9% 5% 6.8% 5.5% 8% 10% 6% 5% 8% 10% 10.5% ;
    --list-item-justify: left;
    /* --list-item-padding : 0.5rem; */
    --list-item-gap: var(--gap);
}

.receiving-content>div {
    width: 100%;
}

.receiving-list-container {
    /* height: 90%; */
    /* display: flex;
    flex-direction: column; */
    overflow: hidden auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.receiving-filters-section {
    display: grid;
    grid-template-columns: repeat(7, 14%);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    /* gap: .5rem; */
}


.receiving-filters-section>div {
    width: 95%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reciving-clear-all-btn {
    width: 9.75rem;
    height: 1.8rem;
    border-radius: calc(var(--button-radius) - .1rem);
    border: none;
    background-color: var(--black-mid);
    color: var(--white);
    font-size: var(--p-size);
    cursor: pointer;
    position: absolute;
    right: 2.9rem;
}.receivingItem {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  margin-right: 0.2rem;
}

.receinving-item-header {
  width: 100%;
  height: var(--item-min-height);

  border-radius: var(--item-border-radius);
  cursor: pointer;
  position: relative;

  display: grid;
  grid-template-columns: 4% 8.5% 7% 8.6% 7% 5% 7% 13% 6.8% 6% 10% 9% 8%;
  place-items: center;
  position: relative;

}
.receiving-item-icon-warning{
  position: absolute;
  left: var(--padding);
  font-size: calc(var(--p-size) + .1rem);
}

.create-discrepancy-receiving {
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500;
  color: var(--black-mid);
  height: auto;
  width: auto;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* transition: var(--transition); */
  background-color: var(--white);
}

.create-discrepancy-receiving:hover {
  color: var(--white);
  background-color: var(--black-mid);
}
.receinving-item-header > p {
  font-weight: 400;
  color: var(--black);
  font-size: 0.6rem;
}

.receive-btn-form {
  font-size: calc(var(--p-size) + 1px);

  border: none;
  cursor: pointer;
  color: var(--white);
  background-color: var(--green-250);
  border-radius: 0.35rem;
  height: 1.9rem;
  width: 6rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.receiving-item-content-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.receiving-item-content-header > h3 {
  color: var(--black-mid);
}

.receiving-item-content {
  height: 0;
  max-height: 0;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}

.receiving-item-content.open {
  height: auto;
  max-height: 48rem;
  visibility: visible;
  opacity: 1;
  padding: 0 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: end; */
  gap: var(--gap);
  margin-bottom: 1rem;
}

/* form styles */

.receiving-item-form {
  height: 100%;
  width: 100%;
  border-radius: var(--radius);

  display: flex;
  justify-content: space-between;
  flex-direction: column;

  flex-wrap: wrap;
  gap: var(--gap);
}
.receiving-item-form > div {
  width: 100%;
  display: flex;
  gap: var(--gap);
}
.receiving-item-form > div > section {
  background-color: var(--white-100);
  width: calc(33%);
  border: 1px solid #f1f1f1;
  border-radius: 0.4rem;
  padding: 0.5rem;
  height: 23rem;
}

.receiving-item-form > div > section > h3 {
  color: var(--black-mid);
  font-size: calc(var(--subtitle-size) - 0.2rem);
}

.receiving-item-general-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap);
}

.receiving-item-general-info > div {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.receiving-item-general-info > div > .reciving-general-info-require-btn {
  height: 2rem;
  width: 50%;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  background-color: var(--green-250);
  color: var(--white);
  font-size: calc(var(--p-size));
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.receiving-item-life-exp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap);
}

.receiving-item-life-exp > div {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.receiving-item-life-exp > div > h2 {
  font-size: calc(var(--subtitle-size) - 0.2rem);
  color: var(--black-mid);
}

/* .receiving-item-additional-info-textarea {
  height: 6rem;
  width: 100%;
  resize: none;
  border-radius: 0.3rem;
  color: var(--black-mid);
  border: 1px solid #b8b8b8;
  padding: 0.3rem;
} */

.receiving-item-certificates {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap);
}

.receiving-item-certificates > div {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.receiving-item-certificates > div > h2 {
  font-size: calc(var(--subtitle-size) - 0.2rem);
  color: var(--black-mid);
}

.editing-status-receiving-span {
  background-color: var(--blue-300);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: var(--item-border-radius);
  border-bottom-right-radius: var(--item-border-radius);
  font-size: var(--p-size);
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.btn-edit-receiving {
  width: 6rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  background-color: var(--white);
  transition: var(--transition);
}

.btn-edit-receiving:hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.receiving-file-uploaded {
  height: 3rem;
  background-color: var(--white);
  width: 100%;

  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 0.5rem;
  border: 1px solid #50d999;
  border-radius: 0.5rem;
  position: relative;
}

.receiving-file-uploaded > a > p {
  color: var(--black-mid);
  text-decoration: underline;
  font-weight: 600;
  text-transform: capitalize;
  font-size: calc(var(--p-size) + 0.1rem);
  cursor: pointer;
  width: auto;
}

.receiving-warning-parts-discrepancy {
  color: var(--black-mid);
  font-size: calc(var(--p-size) - 0.05rem);
}

.receiving-item-NLA-cont {
  width: 100%;
  /* height: 23rem; */
  background-color: var(--white-100);
  border: var(--border);
  padding: var(--padding);
  border-radius: var(--radius);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.receiving-item-NLA-cont > div {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.receiving-item-NLA-cont > div > button:nth-child(1) {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 0.3rem;
  background-color: var(--white);
  border: 1px solid var(--black-mid);
  cursor: pointer;
}

.receiving-item-NLA-cont > div > button:nth-child(1):hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.receiving-item-NLA-cont > div > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - .15rem);
}

.receiving-NLA-import-file-btn {
  background-color: var(--green-250);
  padding: 0.4rem 1rem;
  max-width: 10rem;
  border: none;
  border-radius: var(--button-radius);
  color: var(--white);
  margin-left: auto;
  font-size: var(--p-size);
}

.receiving-item-NLA-cont > section {
  /* width: 100%;
    height: 93%; */
  flex-grow: 1;
  overflow: hidden auto;
}
.receiving-item-NLA-cont-pn-data {
      background-color: var(--white);
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    height: 2rem;
    border-radius: calc(var(--radius));
    padding: var(--padding);
    border: 1px solid var(--grey-300);
    flex-grow: .2;
}

.receiving-item-NLA-cont > section > div > p {
  font-weight: 600;
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.1rem);
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.receiving-item-NLA-cont > section > div > p > span {
    font-weight: 400;
    font-size: var(--p-size);
}   

.receiving-item-NLA-cont > section > span{
    height: 2.5rem;
    display: grid;
    padding: var(--padding) 1rem;
    align-items: center;
    grid-template-columns: 20% 18% 20% 20% 10%;
}


.receiving-item-NLA-cont > section > span > p{
    font-weight: 600;
    color: var(--black-mid);
}.new-discrepancy-modal {
  min-width: 18rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.1rem 0.5rem;
}

.new-discrepancy-modal > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-discrepancy-modal > div > h3 {
  color: var(--black-mid);
  font-size: calc(var(--subtitle-size) - 0.1rem);
  font-weight: 600;
}

.new-discrepancy-modal-close-btn {
  background-color: var(--white);
  color: var(--black-mid);
  border: 1px solid var(--black-mid);
  cursor: pointer;
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 0.3rem;
  transition: var(--transition);
}

.new-discrepancy-modal-close-btn:hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.new-discrepancy-modal > div > textarea {
  height: 100%;
  width: 100%;
  resize: none;
  border-radius: 0.3rem;
  border: 1px solid #b8b8b8;
  padding: 0.5rem;
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size) + 0.1rem);
}

.new-discrepancy-modal > div > p {
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size));
}

.new-discrepancy-incorrect-qty-cont-fields {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-discrepancy-incorrect-qty-cont-fields > p {
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size));
}

.new-discrepancy-send-btn {
  color: var(--white);
  background-color: #50D999;
  height: 1.8rem;
  width: 9rem;
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
}.text-area-component {
  height: 100%;
  width: 100%;
  position: relative;
}

.text-area-component-textArea {
  border-radius: var(--input-radius);
  border: var(--border);
  padding: var(--input-padding);
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 400;
  height: 100%;
  width: 100%;
}.NLA-expandable {
  width: 100%;
  align-items: center;
  display: flex;
  gap: calc(var(--gap) - 0.3rem);
  flex-direction: column;
}

.NLA-expandable-header {
  border: var(--border);
  border-radius: calc(var(--radius) + 0.3rem);
  width: 100%;
  height: var(--item-min-height);
  background-color: var(--white);
  display: grid;
  grid-template-columns: 15% 18% 23% 13% 15%;
  place-items: center;
  gap: var(--gap);
  position: relative;
  cursor: pointer;
}

.NLA-exp-bulllet-hierarchy {
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 50%;
  position: absolute;
}

.receiving-nla-exp-icon-warning {
  position: absolute;
  left: 0.58rem;
  top: 30%;
  font-size: calc(var(--p-size) + 0.2rem);
}

span.col {
  font-size: var(--p-size);
  font-weight: 500;
  color: var(--black-mid);
  text-align: left;
}

.NLA-expandable-toggle-btn {
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 0.3rem;
  border: none;
  outline: none;
  margin-left: auto;
  background-color: transparent;
  color: var(--black-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.35rem;
}

.NLA-expandable-children {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) - 0.3rem);
}

.nlaQty,
.etQty {
  background-color: var(--black-mid);
  padding: calc(var(--padding) - 0.1rem);
  color: var(--white);
  min-width: 1.3rem;
  min-height: 1.3rem;
  max-height: 1.3rem;
  max-width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: var(--p-size);
  font-weight: 500;
  color: var(--white);
}

.NLA-expandable-detail {
  background-color: var(--white);
  width: 100%;
  height: auto;
  min-height: 4rem;
  border-radius: var(--radius);
  padding: var(--padding);
  border: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--form-row-gap);
}

.NLA-expandable-detail > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2rem;
}

.NLA-expandable-detail > div > p {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--p-size) + 0.1rem);
}

.NLA-expandable-detail > section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.merge-grn-receiving-cont {
  padding-left: var(--padding);
  height: 2rem;
  flex-grow: 1;
  align-items: center;
  min-width: 8rem;
  border-radius: var(--radius);
  border: var(--border);
}

.NLA-expandable-detail > section > button {
  background-color: var(--black-mid);
  border-radius: var(--button-radius);
  width: auto;
  padding: 0 var(--padding);
  flex-grow: 1;
  min-width: 7rem;
  height: var(--input-height);
  border: none;
  color: var(--white);
  font-size: var(--p-size);
}

.btn-receiving-edit-nla {
  width: 6rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  background-color: var(--white);
  transition: var(--transition);
}.receiving-nla-modal {
  width: 95vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  padding: var(--padding);
}
.receiving-nla-modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: calc(var(--gap-2) + var(--gap));
  position: relative;
}
.receiving-nla-modal-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.receiving-nla-modal-content {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  height: 93%;
}
.receiving-nla-modal-content-left {
  padding: calc(var(--padding)) var(--padding) var(--padding) var(--padding);
  background: #fafafa 0% 0% no-repeat padding-box;
  border: 1px solid #f1f1f1;
  border-radius: var(--radius);
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.receiving-nla-modal-content-right {
  padding: 0;
  background: var(--white) 0% 0% no-repeat padding-box;
  border-radius: var(--radius);
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.receiving-nla-modal-header > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.15rem);
}

.receiving-nla-modal-header > P {
  color: rebeccapurple;
  font-weight: 600;
  color: var(--black-mid);
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.receiving-nla-modal-header > P > span {
  font-weight: 400;
}

.receiving-nla-modal-header > button {
  position: absolute;
  right: 0;
}

.receiving-nla-modal-content-left > div:not(.receiving-nla-modal-content-left-columns) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
}

.receiving-nla-modal-content-left > div > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.15rem);
}

.receiving-nla-modal-content-left > div > div {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--gap);
}

.receiving-nla-modal-content-left > div > div > p {
  color: var(--black-mid);
}

div.receiving-nla-modal-content-left-columns {
  --list-item-display: grid;
  --list-item-template: 30% 40% 30% 25% 30%;
  --list-item-justify: left;
  --list-item-padding:0 0 0 calc(var(--padding) * 7);
  --list-item-gap: var(--gap);
  width: 100%;
}

div.receiving-nla-modal-content-left-columns > p {
  font-weight: 600;
  color: var(--black-mid);
  width: 100%;
}

.receiving-nla-modal-content-right-pn-header {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  height: 2rem;
  border-radius: calc(var(--radius));
  padding: var(--padding);
  border: 1px solid var(--grey-300);
}

.receiving-nla-modal-content-right-pn-header > p {
  font-weight: 600;
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.1rem);
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.receiving-nla-modal-content-right-pn-header > p > span {
  font-weight: 400;
  font-size: var(--p-size);
}

.receiving-nla-modal-actuals-cont {
  background-color: var(--white-100);
  padding: var(--padding);
  border-radius: var(--radius);
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  height: 15%;
}

.receiving-nla-modal-actuals-cont > div {
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
}

.receiving-nla-modal-actuals-cont > div > h3 {
  color: var(--black-mid);
  font-weight: 800;
  font-size: calc(var(--p-size) + 0.1rem);
  margin-right: var(--padding);
}

.receiving-nla-modal-actuals-cont > div > p {
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size));
}

.receiving-nla-modal-et-cont {
  background-color: var(--white-100);
  border: var(--border);
  border-radius: var(--radius);
  height: 80%;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  overflow: hidden auto;
}

.receiving-nla-modal-et-cont > div {
  display: grid;
  grid-template-columns: 10% 30% 20% 20% 20%;
  width: 100%;
  place-items: center;
}

.receiving-nla-modal-et-cont > div > p {
  font-weight: 500;
  color: var(--black-mid);
  font-size: calc(var(--p-size));
  font-weight: 600;
}

.receiving-nla-modal-et-cont > section {
  width: 100%;
  flex-grow: 1;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) - 0.3rem);
}

.btn-receiving-edit-actuals {
  width: 6rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  background-color: var(--white);
  transition: var(--transition);
}

.receiving-nla-modal-part-without-sn {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--padding);
  gap: var(--gap-2);
  background-color: var(--white-100);
  border-radius: var(--radius);
  border: var(--border);
}

.receiving-nla-modal-part-without-sn > p {
  color: var(--black-mid);
  font-weight: 400;
  text-align: center;
  width: 85%;
}

.receiving-nla-modal-part-without-sn > button {
  font-size: calc(var(--p-size) + 0.1rem);
  padding: calc(var(--padding) - 0.1rem) calc(var(--padding) * 2);
  border-radius: var(--button-radius);
  border: none;
  background-color: var(--black-mid);
  color: var(--white);
  cursor: pointer;
}.receiving-et-expandable {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.receiving-et-expandable > .receiving-et-expandable-header {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  width: 100%;
  gap: var(--gap);
  height: 2.1rem;
  place-items: center;
  border-radius: var(--radius);
  padding: 0 var(--item-padding);
  cursor: pointer;
}

.receiving-et-expandable > .receiving-et-expandable-header > p {
  width: 100%;
  color: var(--black-mid);
}

.receiving-et-expandable-content {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: var(--padding);
  border: var(--border);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap));
}

.receiving-et-expandable-content > div {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--padding);
}

.receiving-et-expandable-content > div > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.15rem);
}

div.receiving-et-expandable-content-schedule {
  height: 2rem;
  gap: var(--gap);
}

.receiving-et-expandable-content-schedule > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 100%;
}

.receiving-et-expandable-check-cont {
  border: var(--border);
  border-radius: var(--radius);
  padding-left: var(--padding);
}

.receiving-et-expandable-content-schedule > div:nth-child(2) {
  justify-content: end;
  height: var(--input-height);
}

.receiving-et-expandable-content-schedule > div > p {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--p-size) + 0.1rem);
}

div.receiving-et-expandable-content-treshold-labels {
  display: grid;
  grid-template-columns: 5% 5% 5% 10% 11% 15% 20%;
  padding-left: calc(var(--padding) * 8);
  height: 1.3rem;
}

div.receiving-et-expandable-content-treshold-labels > p {
  color: var(--grey-400);
}

div.receiving-et-expandable-content-treshold-cont,
div.receiving-et-expandable-content-intervals-cont {
  border-radius: var(--radius);
  padding: var(--padding);
  display: flex;
  height: 2.5rem;
}

div.receiving-et-expandable-content-intervals-cont {
  border: var(--border);
}

div.receiving-et-expandable-content-treshold-cont > p,
div.receiving-et-expandable-content-intervals-cont > p {
  width: 100%;
  text-align: center;
  color: var(--black-mid);
  font-weight: 600;
}

div.receiving-et-expandable-content-effective-date-cont {
  height: 2.3rem;
  display: flex;
  gap: var(--gap);
}

div.receiving-et-expandable-content-effective-date-cont > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

div.receiving-et-expandable-content-effective-date-cont > div > p {
  color: var(--black-mid);
  font-weight: 800;
  font-size: calc(var(--p-size) + 0.1rem);
}

div.receiving-et-expandable-content-effective-date-cont > div:nth-child(2) span {
  font-size: calc(var(--p-size));
  display: flex;
  gap: var(--gap);
  align-items: center;
  color: var(--blue-300);
}

div.receiving-et-expandable-content-effective-date-cont > div:nth-child(2) span > i {
  font-size: calc(var(--p-size) + 0.2rem);
}

.receiving-et-expandable-content-completed-numb-cont {
  gap: var(--gap);
}

.receiving-et-expandable-content-completed-numb-cont > div {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.receiving-et-expandable-content-completed-numb-cont > div > p {
  color: var(--grey-400);
}

.btn-receiving-edit-et {
  width: 6rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  background-color: var(--white);
  transition: var(--transition);
}.receiving-nla-cont {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) - 0.3rem);
  height: 100%;
  width: 100%;
}.receiving-uploadFile {
  height: 90vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 var(--padding) var(--padding) var(--padding);
}

.receiving-uploadFile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7%;
  min-height: var(--input-height);
}

.receiving-uploadFile-header > h3 {
  color: var(--black-mid);
}

.receiving-uploadFile-header > button {
  padding: calc(var(--padding) - 0.1rem) calc(var(--padding) * 3);
  border-radius: var(--button-radius);
  border: none;
  color: var(--white);
  font-size: var(--p-size);
  background-color: var(--green-250);
}

.receiving-uploadFile-fileComponent-cont {
  height: 10%;
  display: flex;
  align-items: center;
}

.receiving-uploadFile-table-parent-cont {
  flex-grow: 1;
  display: flex;
  gap: var(--gap);
}

.receiving-uploadFile-table-parent-cont > div {
  width: 50%;
  height: 100%;
  border: var(--border);
  border-radius: var(--radius);
}

.receiving-uploadFile-table-preview > table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.receiving-uploadFile-table-preview > table > thead {
  padding: var(--padding);
  background-color: var(--white-100);
  font-size: calc(var(--p-size));
  height: 1.6rem;
  display: table;
  width: 100%;
  table-layout: fixed;
  position: sticky;
  top: 0;
  z-index: 2;
}

.receiving-uploadFile-table-preview > table tbody {
  display: block;
  max-height: 100%;
  overflow-y: auto;
  width: 100%;
  height: 93.5%;
}

.receiving-uploadFile-table-preview > table tbody.with-scroll {
  padding-right: 0.2rem;
}

.receiving-uploadFile-table-preview > table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.receiving-uploadFile-table-preview > table > tbody > tr > td {
  background-color: var(--white);
  border: var(--border);
  height: 1rem;
  font-size: var(--p-size);
  color: var(--black-mid);
  padding: 0 var(--padding);
}

.receiving-uploadFile-table-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.receiving-uploadFile > div {
  width: 100%;
  display: flex;
}

.receiving-uploadFile > div > h3 {
  width: 50%;
  font-size: calc(var(--p-size) + 0.2rem);
  color: var(--black-mid);
}

.receiving-uploadFile-columns-map-cont {
  display: flex;
  flex-direction: column;
}

.receiving-uploadFile-columns-map-cont > nav {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 40% 50%;
  grid-template-rows: 1fr;
  background-color: var(--white-100);
  height: 1.6rem;
  padding: var(--padding) calc(var(--padding) + 0.3rem);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: var(--border);
}

.receiving-uploadFile-columns-map-cont > section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--white-100);
}

.receiving-uploadFile-columns-map-cont > section > div {
  background-color: var(--white);
  display: flex;
  align-items: center;
  align-items: center;
  padding: 0 calc(var(--padding) + 0.3rem);
  height: var(--item-min-height);
  align-items: center;
  border-bottom: var(--border);
}.ExistingDiscrepancyModal {
  height: 65vh;
  width: 55vw;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.ExistingDiscrepancyModal > nav {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.ExistingDiscrepancyModal > nav > h3 {
  color: var(--black-mid);
  font-weight: 500;
  font-size: calc(var(--subtitle-size) - 0.1rem);
}

.ExistingDiscrepancyModal > nav > button {
  margin-left: auto;
}

.ExistingDiscrepancyModal > section {
  flex-grow: 1;
  display: flex;
  gap: var(--gap);
}

.ExistingDiscrepancyModal > section > div {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.ExistingDiscrepancyModal-disc-resolution-cont {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--gap);
  background-color: var(--white-100);
  padding: var(--padding);
  border-radius: var(--radius);
}

.ExistingDiscrepancyModal-disc-resolution-cont > div:not(.ExistingDiscrepancyModal-disc-resolution-msg) {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ExistingDiscrepancyModal-disc-resolution-cont > div > p {
  color: var(--black-mid);
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: 600;
}

.ExistingDiscrepancyModal-disc-resolution-cont > div > button:not(.ExistingDiscrepancyModal-confirm-btn) {
  background-color: var(--blue-300);
  color: var(--white);
  font-size: calc(var(--p-size) + 0.1rem);
  width: 8rem;
  min-width: 3rem;
  height: 1.8rem;
  padding: 0.2rem 0.5rem;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.ExistingDiscrepancyModal-disc-resolution-msg {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.ExistingDiscrepancyModal-confirm-btn {
  color: var(--white);
  background-color: #50d999;
  height: 1.8rem;
  width: 9rem;
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}.working-p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--title-size);
    color: var(--black-mid);
    font-weight: 600;
}

.order-details-component {
  padding: 0.1rem 0.5rem;
  --list-item-display: grid;
  --list-item-template: 2fr 4fr 4fr 3fr 4fr 3fr 3fr 3fr 3fr 3fr 3fr 3fr 4fr 4fr 4fr ;
  --list-item-gap: 0.2rem !important;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  position: relative;
  overflow: auto;
}
.order-details-component .sorting-component {
  position: sticky;
}
.order-details-component .details-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
}
.order-details-component .column {
  gap: 0.2rem !important;
}
.order-details-component .item-component .property {
  overflow: hidden;
}
.order-details-component .item-component .property:nth-child(4), .order-details-component .item-component .property:nth-child(7) {
  text-align: center;
  width: 100%;
}
.order-details-component .item-component .property:nth-child(8), .order-details-component .item-component .property:nth-child(9), .order-details-component .item-component .property:nth-child(10), .order-details-component .item-component .property:nth-child(11), .order-details-component .item-component .property:nth-child(12), .order-details-component .item-component .property:nth-child(13), .order-details-component .item-component .property:nth-child(14) {
  text-align: right;
  width: 100%;
}.vendor-approval-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  --list-item-display: grid;
  --list-item-template: 3fr 3fr 2fr repeat(6, 3fr) 3fr 3fr 4rem;
  --list-item-gap: 0.2rem !important;
  overflow: auto;
}
.vendor-approval-component .sorting-component .column b {
  font-size: 0.56rem;
}
.vendor-approval-component .ordersTable {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  overflow: auto;
  padding: 0 0.3rem 0;
}
.vendor-approval-component .ordertype {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}
.vendor-approval-component .ordertype i::before {
  color: var(--grey-250) !important;
}
.vendor-approval-component .ordertype span {
  font-size: 0.6rem;
}
.vendor-approval-component .v-app-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.5rem;
  overflow: auto;
  padding: 0rem 0.5rem 0rem 0rem;
}
.vendor-approval-component .highlight {
  color: #29ABE2;
  font-weight: bold;
}
.vendor-approval-component .bold {
  font-weight: bold;
}
.vendor-approval-component details[open] summary .item-component {
  background-color: #EFFCFF;
  border-color: #B9D8DF;
}
.vendor-approval-component .sent-indicator {
  color: #00CE88;
  font-size: 0.5rem !important;
  text-transform: capitalize;
}
.vendor-approval-component .item-component .property {
  overflow: hidden;
}
.vendor-approval-component .item-component .property:nth-child(10) {
  width: 100%;
}
.vendor-approval-component .item-component .property:nth-child(11) {
  width: 100%;
  text-align: right;
}
.vendor-approval-component .item-component .left-info, .vendor-approval-component .item-component .main-info {
  width: 100%;
}
.vendor-approval-component .item-component .tag-component {
  width: 100%;
  padding: 0;
}
.vendor-approval-component .item-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  justify-content: flex-end;
}
.vendor-approval-component .item-actions .orderactionbutton {
  display: grid;
  place-items: center;
  width: 1.7rem;
  aspect-ratio: 1;
  border-radius: 0.2rem;
  border: none;
}
.vendor-approval-component .item-actions .orderactionbutton i::before {
  color: white !important;
}
.vendor-approval-component .item-actions .orderactionbutton.ok {
  background-color: #00CE88;
}
.vendor-approval-component .item-actions .orderactionbutton.ok i {
  font-size: 1rem;
}
.vendor-approval-component .item-actions .orderactionbutton.cancel {
  background-color: #F75B5C;
}.cancel-order-component {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cancel-order-component .header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.cancel-order-component .header i {
  color: #F75B5C;
  font-size: 1.5rem;
}
.cancel-order-component .header b {
  font-size: 0.7rem;
}
.cancel-order-component .label {
  font-size: var(--input-active-label-font-size);
  margin-top: 0.5rem;
  padding: 0 var(--input-padding);
}
.cancel-order-component textarea {
  height: 7rem;
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  font-size: var(--input-font-size);
  border: solid 1px var(--input-border);
  color: var(--input-color);
}
.cancel-order-component textarea.errortxt {
  border: solid 1px var(--orange);
  outline: none;
}
.cancel-order-component .error {
  font-size: 0.6rem;
  color: var(--orange);
  display: flex;
  width: 100%;
  justify-content: flex-end;
  font-style: normal;
}
.cancel-order-component .actions {
  margin-top: 0.5rem;
  gap: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 2rem;
}
.cancel-order-component .actions button {
  width: 100%;
}
.cancel-order-component .actions button:disabled {
  background-color: #CCC !important;
  border: solid 1px transparent !important;
  pointer-events: none;
}.approve-order-component {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.approve-order-component .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.approve-order-component .header > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.approve-order-component .header i {
  color: #00CE88;
  font-size: 1.5rem;
}
.approve-order-component .header b {
  font-size: 0.7rem;
}
.approve-order-component .header button {
  min-width: 10rem;
}
.approve-order-component .app-order-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.approve-order-component .app-order-content b {
  font-size: 0.6rem;
}
.approve-order-component .app-order-content .order {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  --template: repeat(9, 1fr);
  --padding: 0 var(--input-padding);
  font-size: 0.6rem;
}
.approve-order-component .app-order-content .order .header-order {
  display: grid;
  grid-template-columns: var(--template);
  padding: var(--padding);
}
.approve-order-component .app-order-content .order .order-content {
  display: grid;
  grid-template-columns: var(--template);
  padding: var(--padding);
  height: var(--input-height);
  border-radius: var(--input-radius);
  background-color: #EFFCFF;
  border: solid 1px #B9D8DF;
  align-items: center;
}
.approve-order-component .app-order-content .order .order-content .bold {
  font-weight: bold;
}
.approve-order-component .app-order-content .order .order-content .hlght {
  font-weight: bold;
  color: #00CE88;
  text-decoration: underline;
}
.approve-order-component .app-order-content .order-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  --template: 1fr 3fr 3fr 1fr 3fr 2fr 2fr 3fr 3fr 3fr 3fr 3fr 3fr 3fr 3fr;
  --colgap: 0.2rem;
  font-size: 0.6rem;
}
.approve-order-component .app-order-content .order-details .order-detail {
  display: grid;
  grid-template-columns: var(--template);
  height: calc(0.9 * var(--input-height));
  column-gap: var(--colgap);
  align-items: center;
  border-top: solid 1px #F2F2F2;
}
.approve-order-component .app-order-content .order-details .order-detail:last-child {
  border-bottom: solid 1px #F2F2F2;
}
.approve-order-component .app-order-content .order-details .order-detail .bold {
  font-weight: bold;
}
.approve-order-component .app-order-content .order-details .center-selector > *:nth-child(6), .approve-order-component .app-order-content .order-details .center-selector > *:nth-child(4), .approve-order-component .app-order-content .order-details .center-selector > *:nth-child(7) {
  justify-content: center;
  text-align: center;
  width: 100%;
}
.approve-order-component .app-order-content .order-details .header-detail {
  display: grid;
  grid-template-columns: var(--template);
  column-gap: var(--colgap);
}.vendor-awb-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  --list-item-display: grid;
  --list-item-template: 1fr 2fr 2fr 1fr 4fr 2fr 3fr 3fr 2.7fr 2fr 3fr 3fr 3fr;
  --list-item-gap: 0.8rem !important;
  --item-value-font-size: 0.6rem;
  overflow: auto;
}
.vendor-awb-component .checkbox-component {
  display: flex !important;
}
.vendor-awb-component .expandable-details {
  overflow: visible !important;
}
.vendor-awb-component .details-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: auto;
  padding: 0 0.8rem 6rem 0;
}
.vendor-awb-component .general-info {
  display: flex;
  align-items: center;
  padding: var(--item-padding);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0.3rem 0.5rem 0.7rem 0.5rem;
  background-color: var(--item-background-color);
  border-radius: var(--item-border-radius);
  border: var(--item-border);
}
.vendor-awb-component .general-info .left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.vendor-awb-component .general-info b {
  font-size: 0.7rem;
}
.vendor-awb-component .general-info .input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vendor-awb-component .general-info .input-container b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.vendor-awb-component .general-info .input-container input {
  text-align: right;
}
.vendor-awb-component .sorting-component .column b {
  font-size: 0.56rem;
}
.vendor-awb-component .sent-indicator {
  color: #00CE88;
  font-size: 0.5rem !important;
  text-transform: capitalize;
}
.vendor-awb-component .line-value {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.vendor-awb-component .ordersTable {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.vendor-awb-component .ordertype {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}
.vendor-awb-component .ordertype i::before {
  color: var(--grey-250) !important;
}
.vendor-awb-component .ordertype span {
  font-size: 0.6rem;
}
.vendor-awb-component .selected-item {
  background-color: #E4FFF3;
  border: solid 1px #52D69B;
}
.vendor-awb-component .selected-item.sent-item {
  border: solid 1px #B9D8DF;
}
.vendor-awb-component .floating-panel {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.1607843137);
  padding: var(--input-padding);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.vendor-awb-component .floating-panel b {
  font-size: 0.7rem;
  color: var(--black-mid);
  white-space: nowrap;
}
.vendor-awb-component .floating-panel.active {
  opacity: 1;
  pointer-events: all;
}
.vendor-awb-component .floating-panel button {
  min-width: 7rem;
}
.vendor-awb-component .floating-panel .input-component {
  margin: 0.7rem 0;
}
.vendor-awb-component .floating-panel input {
  min-width: 8rem;
}
.vendor-awb-component .v-app-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.3rem;
  overflow: auto;
}
.vendor-awb-component .highlight {
  color: #29ABE2;
  font-weight: bold;
  font-size: 0.6rem;
}
.vendor-awb-component .highlight.awb {
  text-decoration: underline;
}
.vendor-awb-component details[open] summary .item-component {
  background-color: #EFFCFF;
  border-color: #B9D8DF;
}
.vendor-awb-component .bold {
  font-weight: bold;
}
.vendor-awb-component .bold b {
  font-size: 0.6rem;
}
.vendor-awb-component .item-component .property {
  font-size: var(--item-value-font-size);
  overflow: hidden;
}
.vendor-awb-component .item-component .property:nth-child(1), .vendor-awb-component .item-component .property:nth-child(10) {
  width: 100%;
}
.vendor-awb-component .item-component .left-info,
.vendor-awb-component .item-component .main-info {
  width: 100%;
}
.vendor-awb-component .item-component .tag-component {
  width: 100%;
  padding: 0;
}
.vendor-awb-component .item-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  justify-content: flex-end;
}
.vendor-awb-component .item-actions .orderactionbutton {
  display: grid;
  place-items: center;
  width: 1.7rem;
  aspect-ratio: 1;
  border-radius: 0.2rem;
  border: none;
}
.vendor-awb-component .item-actions .orderactionbutton i::before {
  color: white !important;
}
.vendor-awb-component .item-actions .orderactionbutton.ok {
  background-color: #00CE88;
}
.vendor-awb-component .item-actions .orderactionbutton.ok i {
  font-size: 1rem;
}
.vendor-awb-component .item-actions .orderactionbutton.cancel {
  background-color: #F75B5C;
}.delete-awb-component {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  --list-item-display: grid;
  --list-item-template: 1fr 1fr 1fr 1fr 0.8rem;
  --list-item-gap: 0.8rem !important;
  --item-value-font-size: 0.6rem;
  min-width: 30rem;
}
.delete-awb-component .bold b {
  font-size: 0.6rem !important;
}
.delete-awb-component .dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.delete-awb-component .awbActionBtn {
  display: grid;
  place-items: center;
  border-radius: var(--input-radius);
  min-height: var(--input-height);
  border: none;
  aspect-ratio: 1;
  background-color: transparent;
  transition: all 0.3s;
}
.delete-awb-component .awbActionBtn i {
  font-size: 0.9rem;
}
.delete-awb-component .awbActionBtn i[class*=cross] {
  font-size: 0.7rem;
}
.delete-awb-component .awbActionBtn.transparent:hover {
  background-color: var(--black-mid);
  color: var(--white);
}
.delete-awb-component .awbActionBtn.filledBtn {
  background-color: var(--black-mid);
  color: var(--white);
}
.delete-awb-component .awbActionBtn.filledBtn:hover {
  box-shadow: var(--button-shadow);
}
.delete-awb-component .awbActionBtn.dangerBtn {
  background-color: var(--red-200);
  color: var(--white);
}
.delete-awb-component .awbActionBtn.dangerBtn:hover {
  box-shadow: var(--button-shadow);
}
.delete-awb-component .delete-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.delete-awb-component .delete-header .title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.delete-awb-component .item-component .left-info {
  width: 100%;
}
.delete-awb-component .item-component .left-info .main-info {
  width: 100%;
}
.delete-awb-component .delete-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}.discrepancy {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  --list-item-display: grid;
  --list-item-template: 12% 8% 10% 9% 10% 11% 15% 11%;
  --list-item-justify: left;
}

.discrepancy-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.discrepancy-content {
  flex-grow: 1;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.discrepancy-filters {
  display: flex;
  width: 5rem;
  gap: var(--gap);
}.discrepancy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.discrepancy-item-header {
  width: 100%;
  height: var(--item-min-height);
  border-radius: var(--item-border-radius);
  cursor: pointer;
  padding: var(--item-padding) var(--item-padding) var(--item-padding) calc(var(--item-padding) + 0.5rem);
  position: relative;
  border: var(--item-border);
  transition: var(--transition);
  display: grid;
  grid-template-columns: 15% 13% 9% 13% 10% 13% 16% 11%;
  place-items: center;
  background-color: var(--item-background-color);
}

.discrepancy-item-header > p {
  font-weight: 400;
  color: var(--black);
  font-size: 0.6rem;
  width: 100%;
}

.discrepancy-item-content {
  height: 0;
  width: 98%;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  display: flex;
}

.discrepancy-item-content.open {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.Discrepancy-item-form {
  height: 30rem;
  padding: 0 0.5rem 0.5rem 0.5rem;
  width: 100%;
}

.Discrepancy-item-form > .discrepancy-item-edit-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 9%;
  width: 100%;
}

.discrepancy-item-edit-cont > h3 {
  font-weight: 500;
  color: var(--black-mid);
}

.discrepancy-item-edit-cont > button {
  width: 6rem;
  height: 1.8rem;
  border-radius: var(--button-radius);
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  background-color: var(--white);
  transition: var(--transition);
}

.discrepancy-item-edit-cont > button:hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.discrepancy-item-general-info-cont {
  background-color: var(--white-100);
  border: var(--border);
  width: 33%;
  border-radius: var(--radius);
  padding: var(--padding);
  gap: var(--gap-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.discrepancy-item-general-info-cont > section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.discrepancy-item-general-info-cont > section > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
}

.discrepancy-item-general-info-cont > div > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.3rem);
}

.Discrepancy-item-form > div > section {
  border-radius: var(--radius);
  width: 67%;
  display: flex;
  gap: var(--gap);
}

.discrepancy-item-disc-info {
  background-color: var(--white-100);
  border: var(--border);
  width: 33%;
  border-radius: var(--radius);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-2);
}

.discrepancy-info-title {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.3rem);
}

.discrepancy-item-disc-info > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  transition: var(--transition);
}

.discrepancy-item-disc-info > div > textarea {
  height: 100%;
  width: 100%;
  resize: none;
  border: 1px solid #f1f1f1;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: calc(var(--p-size) + 0.1rem);
  color: var(--black-mid);
}

.discrepancy-item-disc-info > div > p {
  color: var(--black-mid);
  font-weight: 500;
}

button.discrepancy-item-sent-btn {
  background-color: #00ce88;
  color: var(--white);
  font-size: calc(var(--p-size) + 0.1rem);
  height: 1.8rem;
  width: auto;
  max-width: 10rem;
  padding: 0.3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
}

.discrepancy-item-chat-vendor-cont {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-2);
  background-color: var(--white-100);
  padding: var(--padding);
  border-radius: var(--radius);
  border: var(--border);
  width: 33%;
}

.discrepancy-item-chat-vendor-cont > div > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.3rem);
}

.discrepancy-item-chat {
  flex-grow: 1;
  background-color: var(--white);
  border: 1px solid #f1f1f1;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  overflow: hidden;
  gap: var(--gap);
}

.discrepancy-item-mark-resold-btn {
  background-color: #00ce88;
  color: var(--white);
  font-size: calc(var(--p-size) + 0.1rem);
  width: 8rem;
  height: 1.8rem;
  padding: 0.2rem;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
}

.discrepancy-item-vendor-chat-btn {
  background-color: var(--blue-300);
  color: var(--white);
  font-size: calc(var(--p-size) + 0.1rem);
  width: 28%;
  min-width: 3rem;
  height: 1.8rem;
  padding: 0.2rem 0.5rem;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.discrepancy-item-vendor-chat-btn > span {
  background-color: var(--red-300);
  padding: 0.1rem;
  border-radius: 0.3rem;
  min-width: 1rem;
  min-height: 1rem;
  position: absolute;
  right: 0.35rem;
}

.discrepancy-item-resolution-inp-cont {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.discrepancy-item-resolution-inp-cont > textarea {
  height: 100%;
  width: 100%;
  resize: none;
  border: 1px solid #f1f1f1;
  border-radius: 0.3rem;
  padding: 0.5rem;
  font-size: calc(var(--p-size) + 0.1rem);
  color: var(--black-mid);
}.discrepancy-item-modal-chat {
  height: 85vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.discrepancy-item-modal-chat-title {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F1F1F1;
  padding: 0 0 0.45rem 0;
}

.discrepancy-item-modal-chat-title > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--subtitle-size) - 0.1rem);
}

.discrepancy-item-modal-chat-title > button {
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 0.3rem;
  cursor: pointer;
  border: 1px solid #333333;
  background-color: var(--white);
  transition: var(--transition);
  color: var(--black-mid);
}

.discrepancy-item-modal-chat-title > button:hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.discrepancy-item-modal-chat-messages-cont {
  flex-grow: 1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 1rem 0.8rem;
}

.item-discrepancy-msg {
  position: relative;
  max-width: 75%;
  background: #f1f1f1;
  border-radius: 8px;
  padding: 0.3rem 3.8rem 0.3rem 0.3rem;
}

.item-discrepancy-msg > h3 {
  color: var(--black-mid);
  font-weight: 600;
  font-size: calc(var(--p-size) + 0.15rem);
}

.item-discrepancy-msg > p {
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size));
}

.item-discrepancy-msg > span {
  font-size: calc(var(--p-size));
  font-style: italic;
  color: #404041;
  opacity: 0.62;
  font-weight: 400;
  position: absolute;
  right: 0.4rem;
  bottom: 0.2rem;
}

.item-discrepancy-msg.own-message {
  margin-left: auto;
  align-items: end;
  border-radius: 0.5rem;
  border-bottom-right-radius: 0;
  border: 1px solid #b9d8df;
  background-color: #effcff;
  max-width: 70%;
  text-align: end;
}

.item-discrepancy-msg.vendor-message {
  border-radius: 0.5rem;
  border-bottom-left-radius: 0;
  border: 1px solid #52d69b;
  background-color: #e4fff3;
  width: auto;
  max-width: 70%;
  min-width: 20%;
  margin-right: auto;
}

.user-message-inp-cont {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  position: relative;
}

.user-message-inp-cont > input {
  border-radius: 1rem;
  padding: 0.45rem 2.1rem 0.48rem 0.45rem;
  width: 100%;
  height: 2rem;
  border: var(--border);
  background-color: #fafafa;
  font-size: calc(var(--p-size));
  color: var(--black-mid);
  font-weight: 400;
  font-size: calc(var(--p-size) + 0.1rem);
}

.user-message-inp-cont > button {
  position: absolute;
  right: 0.4rem;
  height: 1.6rem;
  width: 1.6rem;
  font-size: var(--p-size);
  background-color: #29abe2;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-message-inp-cont > button > img {
  height: 0.8rem;
}.dashboard-tab-group {
  height: fit-content;
  max-width: calc(100vw - 6.54rem);
  margin: 0.5rem 0;
  flex: 1;

  .MuiTabs-indicator {
    display: none;
  }

  .MuiTabs-list {
    display: flex;
    gap: 0.6638rem;

    .dashboard-tab {
      width: 10rem;
      height: 2rem;
      max-width: 10rem;
      min-width: 10rem;
      background: #fbfbfb 0% 0% no-repeat padding-box;
      border: 1px solid #f1f1f1;
      border-radius: 7px;
      opacity: 1;
      font-size: 0.6rem;
      color: var(--black-mid);
      font-family: "Poppins", sans-serif;
      text-transform: unset;
      min-height: 2rem;
      justify-content: space-between;
      padding-right: 0.3rem;

      .tab-icon-container {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0.2rem 0.5rem;
        margin: 0;
        font-size: 0.9rem;
        border-radius: 7px;
        &:hover {
          background-color: var(--white);
          color: var(--black-mid);
        }
      }
    }
    .add-new-dashboard-btn {
      background-color: #00ce88;
      width: 2rem;
      min-width: 2rem;
      border-radius: 7px;
      color: var(--white);
      font-size: 0.7rem;
    }
    .Mui-selected {
      background: var(--black-mid);
      color: var(--white);
    }
    .add-new-dashboard-btn.Mui-selected {
      background: #00ce88;
      color: var(--white);
    }
  }
}
.dashboard-tab-group .MuiTabs-scroller.MuiTabs-fixed {
  margin-bottom: 0.6rem !important;
}

.dashboard-tab-group .MuiTabs-flexContainer {
  flex-wrap: nowrap;
}

.add-new-dashboard-btn {
  background-color: #00ce88;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 7px;
  color: var(--white);
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
}

.icon-tab-dashboard {
  width: 1rem;
  display: flex;
  justify-content: center;
}

.add-filter-panel-btn {
  background-color: #404041;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 7px;
  color: var(--white);
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
}
.tab-dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-dialog-header-title {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
}

.filled.tab-dialog-header-btn-save {
  font-size: 13px;
  min-width: 4.1rem;
  min-height: 1.9rem;
}

.outlined.tab-dialog-header-btn-close {
  padding: 0;
  font-size: 15px;
  min-height: -webkit-fill-available;
  min-width: 2rem;
}

.MuiDialog-paper .checkbox-field-component {
  border-radius: 7px;
  transition: all 0.2s ease;
  box-shadow: none;
  border: 1px solid #e6e6e6;
  background-color: transparent;
  outline: none;
}
.MuiDialog-paper .checkbox-field-component.checked {
  border: 1px solid #50d999;
  background-color: #e1fff5;
}
.MuiDialog-paper .checkbox-field-component:focus {
  outline: none;
}

.MuiDialog-paper .input-component input {
  border: 1px solid #e6e6e6;
}

.MuiDialog-paper .text-area-component-textArea {
  border: 1px solid #e6e6e6;
}.dashboard-welcome-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.dashboard-welcome-btn-container {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  button {
    border: none;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0.15rem;
    border-radius: 7px;
    color: var(--white);
    align-items: baseline;
    cursor: pointer;

    span {
      font-size: 0.35rem;
    }
  }
  .predefined-panel {
    background-color: #333333;
  }
  .new-panel {
    background-color: #00ce88;

    &:hover {
      opacity: 0.8;
    }
  }
}
.configure-panel-dialog-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  .title-info {
    display: flex;
    flex-direction: column;
    color: #333333;
    .title {
      font-size: 25px;
      font-weight: bold;
    }
    .subtitle {
      font-size: 16px;
    }
  }
}

.configure-panel-dialog-btns {
  display: flex;
  gap: 0.5rem;
  button {
    height: fit-content;
    font-size: 15px;
  }
}

.configure-panel-categories {
  display: flex;
  max-width: -webkit-fill-available;
  gap: 0.5rem;
}

.configure-panel-dialog-category-btn {
  position: relative;
  overflow: visible;
  border: 1px solid #dddddd;
  background: transparent;
  padding: 0.9rem;
  max-height: 60px;
  max-width: 60px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #636363;
  cursor: pointer;
  .icon-category {
    font-size: 1.3rem;
  }
}

.configure-panel-dialog-category-btn.selected {
  background-color: #e1fff5;
  border: 1px solid #00ce88;
}

.configure-panel-dialog-category-btn .icon-check-2 {
  display: none;
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  background-color: #00cf88;
  color: white;
  font-size: 0.5rem;
  border-radius: 50%;
  padding: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  align-items: center;
  justify-content: center;
}

.configure-panel-dialog-category-btn.selected .icon-check-2 {
  display: flex;
}

.configure-panel-dialog-btns .filled.no-selection {
  background-color: #b2b2b2;
  border: 1px solid #b2b2b2;
}

.categories-counter {
  background-color: var(--white);
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  color: #b2b2b2;
  margin-left: 0.5rem;
}

.configure-panel-config {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  height: calc(100vh - 13.5rem);
}

.panels {
  border: 1px solid #f1f1f1;
  flex: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
}

.panels-header {
  width: -webkit-fill-available;
  .title {
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    display: flex;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f1f1;
    margin: 0 0.5rem;
    justify-content: space-between;
    align-items: center;
  }
}

.panels-body {
  height: -webkit-fill-available;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-height: -webkit-fill-available;
  overflow-y: auto;
  padding: 0.5rem;
  gap: 0.5rem;
}

.panel-container-item {
  height: 11rem;
  background-color: white;
  width: 100%;
  padding: 0.5rem;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  &:hover {
    outline: 1px solid #00ce88;
    /* background: linear-gradient(to bottom, #00ce881a, transparent); */
    /* background-size: 100% 2rem;
    background-position: top;
    background-repeat: no-repeat; */
  }
}

.panel-container-item.panel-selected {
  outline: 1px solid #00ce88;
}

.panel-container-item.panel-disabled {
  outline: 1px solid #f65454;
  cursor: default;
}

.panel-container-item.panel-disabled:hover {
  outline: 1px solid #f65454;
}

.panel-item-header {
  font-size: 11px;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  height: 20%;
  .title {
    flex: 1;
  }
}

.icon-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #f65454;
}

.panel-item-body {
  /* height: 100%; */
  height: 80%;
  padding: 0.2rem;
}

.panel-item-chart-content {
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
  align-items: center;
  justify-content: center;
  color: #f65454;
  gap: 1rem;
  .info {
    font-size: 0.5rem;
    text-align: center;
    color: #f65454;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: -webkit-fill-available;
    justify-content: center;
    .icon-info {
      font-size: 0.6rem;
    }
  }
}

.chart-type {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.category-container-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  .title {
    font-size: 0.5rem;
    text-align: center;
  }
}
:root {
  --transition-duration: 0.2s;
  --transition-timing: ease;
}

.subcategory-container {
  width: 20rem;
  max-width: 20rem;
  min-height: 100%;
  max-height: 100%;
  background-color: #fafafa;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  transition: width var(--transition-duration) var(--transition-timing);
}

.subcategory-container.minwidth {
  width: 1.5rem;
  padding: 0;
  overflow: hidden;
}

.subcategory-container.fullwidth {
  width: 20rem;
  /* transition: var(--transition); */
  /* transition: width var(--transition-duration) var(--transition-timing); */
}

.subcategory-header {
  display: flex;
  padding: 0.3rem 0;
  border-bottom: 1px solid #dddddd;
  margin: 0 0.5rem;
  justify-content: space-between;
  align-items: center;
  height: 1.8rem;
  span {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
  }
  .icon {
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
  }
  .title {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0.1s, opacity 0.1s ease-in-out;
    /* transition: opacity var(--transition-duration) var(--transition-timing),
      visibility 0s var(--transition-duration); */
  }
}

/* .subcategory-container.minwidth .subcategory-header {
  margin: 0 0.3rem;
} */

.subcategory-container.minwidth .subcategory-header .title {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.1s, opacity 0.1s ease-in-out;
}

.subcategory-container.minwidth .subcategory-header .icon {
  position: absolute;
  transform: rotate(180deg);
}

.subcategory-container-item {
  background-color: white;
  margin: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #dddddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.subcategory-body {
  height: calc(100% - 1.8rem);
  overflow-y: scroll;
  visibility: visible;
  opacity: 1;
  /* transition: visibility 0s 0.2s, opacity 0.2s ease-in-out; */
  transition: opacity var(--transition-duration) var(--transition-timing)
      var(--transition-duration),
    visibility 0s var(--transition-duration);
}

.subcategory-container.minwidth .subcategory-body {
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  /* transition: visibility 0s 0.2s, opacity 0.2s ease-in-out; */
}

.subcategory-title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  .icon {
    font-size: 0.8rem;
  }
  .text {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
    flex: 1;
    text-wrap: nowrap;
  }
  .no-submodule {
    color: #333333;
    opacity: 0.49;
    font-size: 13px;
  }
}

.subcategory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  width: calc(20rem - 2.5rem);
  padding: 0 0.5rem;
}
.panel-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}.kpi-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  width: 100%;
  gap: 0.2rem;
}

.kpi-chart-icon {
  font-size: 2rem;
}

.kpi-chart-value {
  font-weight: 700;
}

.kpi-chart-unit {
  font-size: 1.1rem;
  margin-left: 0.2rem;
  color: #888;
}

.kpi-chart-label {
  font-size: 0.5rem;
  color: #585255;
  text-align: center;
}

.kpi-comparison-info {
  display: flex;
  gap: 0.3rem;
  font-size: 0.5rem;
}

.kpi-comparison-value {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  justify-content: center;
}

.kpi-comparison-icon {
  font-size: 0.35rem;
}/* Tooltip personalizado para el botón de panel predefinido */
.bg-green-tooltip {
  background-color: #00ce88 !important;
}
.bg-dark-tooltip {
  background-color: #404041 !important;
}
.grid-stack {
  /* background: #fafad2; */
  /* margin-bottom: 1.5rem; */
}

.grid-stack-item-content {
  text-align: center;
  /* background-color: #fbfbfb; */
  background-color: var(--white);
  border: 1px solid #f1f1f1;
  border-radius: 11px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: -webkit-center;
  padding: 0.5rem;
}

.grid-stack-item-removing {
  opacity: 0.5;
}
.trash {
  height: 100px;
  background: rgba(255, 0, 0, 0.1) center center
    url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
    no-repeat;
}

/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
  background: rgba(0, 0, 0, 0.1);
  inset: 8px 8px;
}
.grid-stack.grid-stack-nested {
  background: none;
  position: absolute;
  inset: 0; /* TODO change top: if you have content in nested grid */
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.gridstack-btns-container {
  position: fixed; /* Cambiado de absolute a fixed para que sea relativo al viewport */
  z-index: 4;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  /* flex-direction: column; */
  gap: 0.5rem;
}

.gridstack-add-panel-btn {
  border-radius: 0.5rem;
  height: 2rem;
  width: 2rem;
  box-shadow: 0px 3px 6px #00000042;
  opacity: 1;
  background-color: #00ce88;
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gridstack-add-panel-btn:hover {
  border-radius: 50%;
}

.gridstack-add-configure-panel-btn {
  background-color: #333333;
}

.panel-header-title {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-self: left;
  padding-left: 0.2rem;
  gap: 2px;
  span {
    font-weight: 600;
    font-size: 0.8rem;
    color: #585255;
  }
  p {
    color: #646978;
  }
}

.panel-close-button {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.2s ease;

  .icon-cross {
    font-size: 0.35rem;
    color: #707070;
    line-height: 1;
    transition: color 0.2s ease;
  }

  &:hover {
    background-color: #404041;
    border-color: #404041;

    .icon-cross {
      color: white;
    }
  }
}
.configure-panel-container {
  color: #333333;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .configure-panel-info-container {
    display: flex;
    margin-bottom: 1.8rem;
    text-align: justify;
    gap: 0.5rem;
    align-self: center;
    .configure-panel-text {
      display: flex;
      flex-direction: column;
    }
  }
  .info {
    margin-top: 1rem;
  }
}

.configure-panel-button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  gap: 0.15rem;
  color: var(--white);
  align-items: baseline;
  background-color: #00ce88;
  width: 231px;
  border-radius: 10px;
  align-self: center;

  span {
    font-size: 0.35rem;
  }
}
/**
 * gridstack SASS styles 12.3.0
 * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
 */
.grid-stack {
  position: relative;
}

.grid-stack-rtl {
  direction: ltr;
}
.grid-stack-rtl > .grid-stack-item {
  direction: rtl;
}

.grid-stack-placeholder > .placeholder-content {
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0;
  position: absolute;
  width: auto;
  z-index: 0 !important;
}

.grid-stack > .grid-stack-item {
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  width: var(--gs-column-width);
  height: var(--gs-cell-height);
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  margin: 0;
  position: absolute;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
  overflow-y: hidden;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}

.grid-stack-item > .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}
.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
  display: none;
}
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
.grid-stack-item > .ui-resizable-ne {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-sw {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-nw {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-se {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-nw {
  cursor: nw-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-n {
  cursor: n-resize;
  height: 10px;
  top: var(--gs-item-margin-top);
  left: 25px;
  right: 25px;
}
.grid-stack-item > .ui-resizable-ne {
  cursor: ne-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-e {
  cursor: e-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-se {
  cursor: se-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-s {
  cursor: s-resize;
  height: 10px;
  left: 25px;
  bottom: var(--gs-item-margin-bottom);
  right: 25px;
}
.grid-stack-item > .ui-resizable-sw {
  cursor: sw-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-w {
  cursor: w-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  left: var(--gs-item-margin-left);
}
.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  display: none !important;
}
.grid-stack-item.ui-draggable-dragging {
  will-change: left, top;
}
.grid-stack-item.ui-resizable-resizing {
  will-change: width, height;
}

.ui-draggable-dragging,
.ui-resizable-resizing {
  z-index: 10000;
}
.ui-draggable-dragging > .grid-stack-item-content,
.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

.grid-stack-animate,
.grid-stack-animate .grid-stack-item {
  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
}

.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
  transition: left 0s, top 0s, height 0s, width 0s;
}

.grid-stack > .grid-stack-item[gs-y="0"] {
  top: 0px;
}

.grid-stack > .grid-stack-item[gs-x="0"] {
  left: 0%;
}
.config-button .icon-double-arrow {
  display: inline-block;
  transform: rotate(180deg); /* Apunta hacia la derecha para cerrar */
}

.panel-filter-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%; /* Usar toda la altura del viewport */
  width: 20rem;
  min-width: 20rem;
  max-width: 20rem;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000; /* Menor que el botón flotante (z-index: 4) */
  gap: 0.6rem;
  box-sizing: border-box;
  transform: translateX(calc(100% + 1rem)); /* Extra margin para seguridad total */ /* Completamente fuera del viewport */
}

.panel-filter-sidebar.open {
  transform: translateX(1rem); /* Posición final con un pequeño margen */
}

.panel-filter-header {
  display: flex;
  align-items: center;
}
.panel-filter-header .spacer {
  flex: 1;
}
.panel-filter-header .icon-Filter_manager {
  font-size: 0.6rem;
  color: #808080;
}

.filter-item-drag-handle {
  width: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #fbfbfb;
  border-radius: 5px;
  border-radius: 5px 0px 0px 5px;
}
.filter-item-drag-handle span {
  cursor: move;
  font-size: 0.8rem;
}

.filter-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  background-color: #fbfbfb;
  border-radius: 0px 5px 5px 0px;
  width: 95%;
}

.panel-filter-title {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: #333;
}
.panel-filter-title label {
  font-weight: bold;
  font-size: 0.6rem;
}

.config-button {
  background: none;
  border: 1px solid #f1f1f1;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.config-button:hover {
  background: #404041;
}
.config-button:hover .icon-more-horizontal,
.config-button:hover .icon-double-arrow {
  color: #fff;
}

.icon-more-horizontal {
  font-size: 0.7rem;
  color: #333;
}

.icon-double-arrow {
  font-size: 0.5rem;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  width: 1.3rem;
  height: 1.3rem;
}
.close-button .icon-double-arrow {
  font-size: 0.6rem;
  color: #333;
}

.search-input-container {
  position: relative;
}
.search-input-container .search-input {
  width: 100%;
  height: 1.8rem;
  padding: 8px 40px 8px 12px;
  border: none;
  border-radius: 8px;
  outline: none;
  font-size: 0.6rem;
  font-family: inherit;
  color: #404041;
  background: var(--white-100);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input-container .search-input::placeholder {
  color: #404041;
  font-style: normal;
}
.search-input-container .search-input:focus {
  border-color: #404041;
  box-shadow: 0 0 0 3px rgba(0, 206, 136, 0.1);
}
.search-input-container .search-input:hover:not(:focus) {
  border-color: #c0c0c0;
}
.search-input-container .search-icon {
  position: absolute;
  right: 12px;
  top: 54%;
  transform: translateY(-50%);
  color: #999;
  font-size: 0.6rem;
  pointer-events: none; /* No interfiere con el input */
  transition: color 0.2s ease;
}
.search-input-container .search-input:focus + .search-icon {
  color: #404041;
}

.panel-filter-content {
  flex: 1;
  overflow-y: auto;
}

.btns-filters {
  display: flex;
  gap: 0.6rem;
}
.btns-filters button {
  flex: 1;
  padding: 7px 12px;
  border: none;
  border-radius: 7px;
  color: white;
  font-size: 0.55rem;
  font-weight: 300;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}
.btns-filters button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btns-filters button:active {
  transform: translateY(0);
}
.btns-filters button:first-child {
  background-color: #00ce88; /* Apply Filters - Verde */
}
.btns-filters button:last-child {
  background-color: #f75b5c; /* Clear Filters - Rojo */
}

.no-filters-found {
  color: #b9b9b9;
  font-size: 0.6rem;
  display: flex;
  align-self: center;
}

.filter-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem;
}

.filter-item-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.filter-item-title .filter-title-text {
  font-weight: bold;
  font-size: 0.6rem;
  color: #333333;
}
.filter-item-title .btn-apply-selection {
  flex: 1;
  padding: 7px 5px;
  border: none;
  border-radius: 7px;
  color: white;
  font-size: 0.55rem;
  font-weight: 300;
  background-color: #c0c0c0;
  min-width: 5rem;
  cursor: pointer;
}
.filter-item-title .clear-all {
  color: #29abe2;
  font-size: 0.5rem;
  text-decoration: underline;
  cursor: pointer;
}

.panel-filter-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.filter-item {
  width: 100%;
  display: flex;
  background-color: white;
  border-radius: 6px;
  border: 1px solid #f1f1f1;
  align-items: center;
}
.filter-item:hover {
  border: 1px solid #b9d8df;
}

.filter-item-header {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  padding: 0.5rem 0.5rem 0rem 0.5rem;
}

.filter-item-title-group {
  color: #404041;
  font-size: 0.6rem;
  font-weight: bold;
}

.loading-state,
.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}
.loading-state span,
.error-state span {
  font-size: 14px;
  color: #666;
}

.error-state span {
  color: #d32f2f;
}

.filters-container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.filters-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.unknown-filter {
  padding: 0.5rem;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  font-size: 12px;
  color: #856404;
}
.unknown-filter p {
  margin: 0.2rem 0;
}
.unknown-filter p:first-child {
  font-weight: 600;
}.filter-item-options-radios .outlineStyle label {
  height: 1.8rem;
  width: 50% !important;
}

.radio-group-component .MuiFormControlLabel-label {
  font-size: 0.55rem;
}

.filter-item-datePicker {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.filter-item-auto-range {
  position: relative;
  z-index: 50;
}
.filter-item-auto-range .filter-item-dropdown {
  position: relative;
}
.filter-item-auto-range .filter-item-dropdown .search-input-container {
  position: relative;
}
.filter-item-auto-range .filter-item-dropdown .search-input-container .search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.6rem;
  color: #404041;
  background-color: #fff;
  outline: none;
  transition: border-color 0.2s ease;
}
.filter-item-auto-range .filter-item-dropdown .search-input-container .search-input:focus {
  border-color: #00ce88;
  box-shadow: 0 0 0 2px rgba(0, 206, 136, 0.1);
}
.filter-item-auto-range .filter-item-dropdown .search-input-container .search-input:hover {
  border-color: #ccc;
}
.filter-item-auto-range .filter-item-dropdown .search-input-container .search-input::placeholder {
  color: #404041;
}
.filter-item-auto-range .filter-item-dropdown .search-input-container .search-icon {
  position: absolute;
  right: 0.5rem;
  top: 54%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  color: #999;
  pointer-events: none;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2px;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-option {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f5f5f5;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-option:hover {
  background-color: #f8f9fa;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-option.selected {
  background-color: rgba(0, 206, 136, 0.1);
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-option:last-child {
  border-bottom: none;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-option .option-label {
  flex: 1;
  display: flex;
  align-items: center;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-option .option-label .option-name {
  font-size: 0.55rem;
  color: #333;
  padding: 5px;
}
.filter-item-auto-range .filter-item-dropdown .dropdown-menu .dropdown-no-results {
  padding: 1rem;
  text-align: center;
  color: #999;
  font-size: 0.55rem;
  font-style: italic;
}

.filter-item-datePicker .date-component .MuiStack-root > .MuiTextField-root {
  /* min-width: 189px; */
  min-width: 120px;
}
.filter-item-datePicker .date-component .icon-date {
  font-size: 0.8rem;
  color: #a3a3a3;
}
.filter-item-datePicker .date-component label {
  color: #737373 !important;
  font-size: var(--label-active-font) !important;
  transform: translateY(-1.7rem) !important;
}
.filter-item-datePicker .date-component label.fixed {
  transform: none !important;
  font-size: var(--label-active-font) !important;
}
.filter-item-datePicker .date-component label.fixed.centered {
  left: none !important;
  transform: translateX(none) translateY(none) !important;
}
.filter-item-datePicker .date-component .MuiFormLabel-filled,
.filter-item-datePicker .date-component .MuiInputLabel-shrink {
  transform: translateY(none) !important;
  font-size: var(--label-active-font) !important;
}
.filter-item-datePicker .MuiOutlinedInput-root {
  font-size: 0.55rem !important;
  min-height: 1.8rem !important;
  max-height: 1.8rem !important;
  border: 1px solid #e0e0e0 !important;
}

.config-button {
  background: none;
  border: 1px solid #f1f1f1;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  width: 1.3rem;
  height: 1.3rem;
}
.config-button .icon-more-horizontal {
  font-size: 0.7rem;
  color: #333;
}

.config-button:hover {
  background: #404041;
}
.config-button:hover .icon-more-horizontal,
.config-button:hover .icon-double-arrow {
  color: #fff;
}
.filter-container {
  position: relative;
  width: 100%;
}
.filter-container .filter-item-dropdown {
  position: relative;
}
.filter-container .filter-item-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 340px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-header {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1001;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-header .apply-selection-btn {
  width: 100%;
  background-color: #00ce88;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 7px 16px;
  font-size: 0.55rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-header .apply-selection-btn:hover {
  background-color: #00b377;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-header .apply-selection-btn:active {
  background-color: #009966;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-options-container {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
  padding-bottom: 0.2rem;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option {
  display: flex;
  align-items: center;
  margin: 0px 12px;
  padding: 0px 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 6px;
  background-color: #fafafa;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option:hover {
  background-color: #e1fff5;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option.selected {
  background-color: #e1fff5;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option:not(:has(.option-checkbox)) .option-label {
  padding-left: 0;
  width: 100%;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option:last-child {
  border-bottom: none;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-checkbox {
  margin-right: 5px;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-checkbox input[type=checkbox] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
  appearance: none;
  border: 2px solid #ddd;
  border-radius: 3px;
  background-color: white;
  position: relative;
  transition: all 0.2s ease;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-checkbox input[type=checkbox]:checked {
  background-color: #00ce88;
  border-color: #00ce88;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-checkbox input[type=checkbox]:checked::before {
  content: "✓";
  position: absolute;
  color: white;
  font-size: 12px;
  font-weight: bold;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-checkbox input[type=checkbox]:hover {
  border-color: #00ce88;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-checkbox input[type=checkbox]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 206, 136, 0.2);
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  overflow: hidden;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-label .option-code {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-option .option-label .option-name {
  font-size: 12px;
  color: #666;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-no-results,
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-loading {
  padding: 12px;
  text-align: center;
  color: #999;
  font-style: italic;
}
.filter-container .filter-item-dropdown .dropdown-menu .dropdown-loading {
  color: #666;
}
.filter-container .search-input-container {
  position: relative;
  width: 100%;
}
.filter-container .search-input-container .search-input {
  width: 100%;
  padding: 8px 35px 8px 12px;
  border: 1px solid #ddd;
  color: #404041;
  border-radius: 8px;
  font-size: 0.6rem;
  outline: none;
  background-color: white;
  transition: border-color 0.2s ease;
}
.filter-container .search-input-container .search-input:focus {
  border-color: #00b377;
  box-shadow: 0 0 0 2px rgba(0, 206, 136, 0.2);
}
.filter-container .search-input-container .search-input::placeholder {
  color: #404041;
}
.filter-container .search-input-container .search-icon {
  position: absolute;
  right: 12px;
  top: 54%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
  font-size: 0.6rem;
}
.filter-container .filter-item-selected .selected-items .selected-count {
  font-size: 0.5rem;
  color: #666;
  display: block;
}
.filter-container .filter-item-selected .selected-items .selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: white;
  border: 1px solid #f1f1f1;
  border-radius: 6px;
  padding: 8px 4px;
  max-height: 140px;
  overflow: auto;
}
.filter-container .filter-item-selected .selected-items .selected-tags .selected-tag {
  display: inline-flex;
  align-items: center;
  background-color: #00ce88;
  border: none;
  border-radius: 7px;
  padding: 4px 5px;
  font-size: 0.5rem;
  color: white;
}
.filter-container .filter-item-selected .selected-items .selected-tags .selected-tag .remove-tag {
  background: none;
  border: none;
  margin-left: 6px;
  cursor: pointer;
  color: white;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.filter-container .filter-item-selected .selected-items .selected-tags .selected-tag .remove-tag:hover {
  background-color: rgba(0, 122, 204, 0.1);
}
.filter-container .filter-item-selected .no-selection {
  font-size: 0.5rem;
  color: #999;
  font-style: italic;
}
.filter-container .filter-item-title {
  display: flex;
  align-items: center;
}
.filter-container .filter-item-title .filter-title-text {
  font-weight: 600;
  color: #333;
}
.filter-container .filter-item-title .clear-all {
  font-size: 0.5rem;
  color: #007acc;
  cursor: pointer;
  text-decoration: underline;
}
.filter-container .filter-item-title .clear-all:hover {
  color: #005a9e;
}

.dropdown-loading {
  color: #b9b9b9;
  font-size: 0.6rem;
  display: flex;
  align-self: center;
}

.config-button {
  background: none;
  border: 1px solid #f1f1f1;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  width: 1.3rem;
  height: 1.3rem;
}
.config-button .icon-more-horizontal {
  font-size: 0.7rem;
  color: #333;
}

.config-button:hover {
  background: #404041;
}
.config-button:hover .icon-more-horizontal,
.config-button:hover .icon-double-arrow {
  color: #fff;
}.aircraft-configuration-component {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0.5rem;
  .main-content-wrapper {
    display: flex;
    flex-direction: column;
  }

  .nav-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    > .filter-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: transparent;
      border: none;
      font-size: 0.8rem;
      cursor: pointer;
      > i {
        transition: all 0.3s;
        &.open {
          transform: rotate(180deg);
          transition: all 0.3s;
        }
      }
      h2 {
        font-size: 0.8rem;
      }
    }
  }
}
.no-children {
  .btn-icon-aircraft-children {
    opacity: 0.5;
    pointer-events: none;
  }
  .btn-icon-aircraft-children,
  .btn-icon-aircraft-create {
    opacity: 0.5;
    pointer-events: none;
  }
}
.aircraft-view-button {
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .btn-icon-aircraft-children {
    height: max-content;
    width: max-content;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-icon-aircraft-create {
    height: max-content;
    width: max-content;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-icon-aircraft-edit {
    height: max-content;
    width: max-content;
    font-size: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-mid);
    .icon-edit {
      font-size: 0.9rem;
    }
  }
}
.aircraft-configuration-component-content {
  --list-item-display: grid;
  --list-item-template: 6.5rem 8.5rem 14rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  > .sorting-component {
    height: 3.5rem;
  }
  > .content-header > .aircraft-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;

    > .left-container {
      display: grid;
      grid-template-columns: min-content min-content minmax(170px, 40vw) min-content;
      align-items: center;
      gap: 0.8rem;

      > i {
        font-size: 1.2rem;
      }

      > b {
        white-space: nowrap;
        font-size: 0.8rem;
      }

      button {
        /* white-space: nowrap;
        font-size: 11px;
        display: flex;
        align-items: center;
        gap: 8px; */
      }

      > .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;

        > i {
          font-size: 1rem;
          position: absolute;
          right: 0.8rem;
        }

        > input {
          width: 100%;
          /* position: relative; */
          min-height: var(--input-height);
          border-radius: var(--input-radius);
          border: solid 1px var(--input-border);
          padding: 0 28px 0 12px;
          font-size: var(--input-font-size);
          color: var(--black-mid);

          &:focus-visible {
            outline: none;
          }

          &::placeholder {
            color: var(--black-mid);
          }
        }
      }
    }
  }

  > .type-series-list {
    /* min-height: */
    height: 100%;
    /* background-color: plum; */
    /* margin: 12px 0; */
    /* width: 100%; */
    display: flex;
    overflow: auto;
    flex-direction: column;
    padding: 0 0.3rem 0 0;
    gap: 0.4rem;

    details[open] {
      .item-component {
        background-color: var(--blue-500);
        border: solid 1px var(--green-25);
      }
    }

    .expandable-details {
      overflow: visible;
    }

    .item-component {
      .main-info {
        display: grid;
        grid-template-columns: 7rem 10rem 14rem;
        gap: 1rem;
        justify-items: left;
      }
    }
  }

  .item-component {
    padding-left: 0.9rem;
    padding-right: 24px;
  }
  .delete-part-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  .delete-part-button,
  .edit-part-button {
    font-size: 1rem;
  }
  .bullet-fix {
    border-radius: 0.438rem;
  }
  .aircraft-bullet-container {
    width: 6.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .active {
      background-color: var(--green-50, lightgreen);
      color: var(--green-400, teal);
    }
    .inactive {
      background-color: var(--pink-50, plum);
      color: var(--red-100, purple);
    }
    .hold {
      background-color: var(--yellow-50, bisque);
      color: var(--yellow-500);
    }
  }
  .button-actions-container {
    display: flex;
    align-items: center;
    gap: 0.938rem;
    i {
      color: #858585;
    }
    .add-aircraft-button {
      display: flex;
      align-items: center;
      gap: 0.938rem;
      .btn-icon-addNew-location {
        height: 1.5rem;
        width: 1.5rem;
      }
    }
  }
  .general-section-aircraft-form-header {
    display: flex;
    align-items: center;
    gap: 0.938rem;
  }
  .aircraft-configuration-grid-component {
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px 0;
    gap: 0.48rem;
    overflow: auto;
    margin: 0 0.6rem;
  }
  .general-info-aircraft {
    padding-top: 4px;
    display: grid;
    width: 50%;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.813rem;
    row-gap: 1.27rem;
  }
  .section-aircraft-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .general-section-aircraft-form-component {
    background-color: var(--white);
    border: 1px solid #e6e6e6;
    border-radius: 15px;
    padding: 1rem;
    position: relative;
  }
  .general-aircraft-section-form-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.188rem;

    .title-container {
      display: flex;
      align-items: center;

      b {
        font-size: 0.8rem;
        color: var(--black-mid);
      }
    }
    .general-aircraft-form {
      padding-top: 1.688rem;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 1.2rem;
      row-gap: 1.27rem;
    }
  }
  .general-aircraft-form-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    .info {
      font-size: 0.7rem;
      width: 100%;
      white-space: nowrap;
    }
  }
}
.general-aircraft-form-four {
  padding-top: 1.688rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1.2rem;
  row-gap: 1.27rem;
}
.general-aircraft-form-three {
  padding-top: 1.688rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1.2rem;
  row-gap: 1.27rem;
}
.general-aircraft-form-two {
  padding-top: 1.688rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.2rem;
  row-gap: 1.27rem;
}
/* .general-aircraft-form > :nth-last-child(2):nth-child(odd),
.general-aircraft-form > :last-child:nth-child(odd) {
  grid-column: span 2;
} */
.aircraft-bullet-container-item {
  border-radius: 0.7rem;

  padding: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--p-size);
  span {
    display: flex;
    gap: 0.2rem;
  }
  .icon-flight {
    font-size: 1rem;
  }
  p {
    font-weight: bold;
  }
}

/*AircraftStyles*/
.type-series-list {
  --list-item-display: grid;
  --list-item-template: 7.3rem 9.7rem 16rem;
  --list-item-justify: left;
  /* --list-item-padding : 0.5rem; */
  --list-item-gap: var(--gap-2);
  > .aircraft-list {
    --list-item-display: grid;
    --list-item-template: 8vw 12vw 12vw 12vw 12vw 12vw;
    --list-item-justify: left;
    --list-item-padding: 0 0 0 2.4vw;
    --list-item-gap: var(--gap-2);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0.3rem 0 0;
    gap: 0.4rem;

    details[open] {
      .item-component {
        background-color: var(--blue-500);
        border: solid 1px var(--green-25);
      }
    }

    .expandable-details {
      overflow: visible;
    }

    .item-component {
      padding-left: 2.4rem;
      .main-info {
        display: grid;
        grid-template-columns: 12vw 12vw 12vw 12vw 12vw;
        gap: 1rem;
        justify-items: left;
        padding: 0;
      }
    }
  }
}

.bulletChild {
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 50%;
  background-color: var(--blue-300);
  display: flex;
  position: relative;
  z-index: 2;
}
.parent-container-item {
  position: relative;
}
.active-class-parent {
  border: solid 2px rgb(175, 175, 175) !important;
  .item-component {
  }
}
.pluse-icon {
  font-size: 1rem;
}
.parent-container-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: min-content;
  background-color: magenta;
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  background-color: var(--item-background-color);
  display: var(--item-display);
  .item-component {
    border: none;
  }
  .general-aircraft-form-container {
    border-radius: var(--item-border-radius);
    background-color: var(--item-background-color);
    padding-top: 1.063rem;
    padding: 0.625rem 1.5rem 1.5rem;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.656rem;
  }
  .general-aircraft-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1.2rem;
  }
  .forms-aircraft-container {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 0.656rem;
  }
  .forms-aircraft-container-single {
    gap: 0.656rem;
  }
}

.general-info-etops {
  border-radius: 15px;
  padding: 0.713rem;

  margin-top: 1.688rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--white-100);
  p {
    font-size: 0.6rem;
  }
  .general-info-etops-container {
    display: flex;
    align-items: center;
    gap: 1.063rem;
    p {
      color: var(--red-100);
    }
    .general-info-etops-container-info {
      display: grid;
      grid-template-columns: 0.5fr 0.8fr;
      gap: 0.813rem;
    }
  }
}
.forms-warranty-container {
  display: flex;
  flex-direction: column;
  gap: 0.656rem;
}
.delete-aircraft-dialog-component{
    /* background-color: magenta; */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2px 0;
    position: relative;
  
    /* width: 20rem; */
    /* height: min-content; */
    /* aspect-ratio: 1.9; */
    >.header{
      span{
      font-size: 0.75rem;
      }
      button{
        position: relative;
        top: -12px;
        right: -12px;
      }
    }
  
    .properties-card-component{
      .property{
        gap: 2rem;
        >b{
          max-width: 15rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          /* color: magenta; */
        }
      }
    }
  
    >.buttons{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      justify-content: center;
      button{
        min-width: 6rem;
      }
    }
  
    .MuiDialogContent-root{
      padding: 0  !important;
    }
  }.flight-status-container {
  background-color: var(--white);
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  padding: 1rem;
  .flight-status-container-header {
    b {
      font-size: 0.8rem;
      color: var(--black-mid);
    }
    .flight-status-container-header-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      b {
        font-size: 0.69rem;
      }
      .flight-status-container-header-info-value {
        padding: 0.538rem;
        border-radius: 0.625rem;
        background-color: var(--white-100);
        justify-content: space-between;
        display: flex;
        gap: 1.125rem;
        align-items: center;
        .flight-status-container-header-info-value-icon {
          display: flex;
          align-items: center;
          gap: 0.594rem;
        }
      }
    }
  }
  .flight-status-container-body {
    padding: 1rem 0;
    b {
      font-size: 0.69rem;
    }
  }
  .flight-status-container-body-flight {
    border-radius: 15px;
    background-color: var(--blue-500);
    display: flex;
    justify-content: space-between;
    padding: 1.563rem 1.063rem;
    .flight-status-container-body-flight-date {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      .icon-date {
        font-size: 0.8rem;
      }
      b {
        font-size: 0.69rem;
      }
    }
    .flight-status-container-body-flight-info {
      display: flex;
      gap: 0.813rem;
      p {
        font-size: 0.6rem;
      }
    }
  }
  .flight-status-container-body-flight-kpi {
    margin-top: 1.125rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.813rem;

    .flight-status-container-body-flight-kpi-info {
      .icon {
        font-size: 1.5rem;
        color: var(--grey-200) !important;
      }
      gap: 1.063rem;
      border-radius: 15px;
      height: 9rem;
      display: flex;
      flex-direction: column;
      background-color: var(--white-100);
      align-items: center;
      justify-content: center;
      .flight-status-container-body-flight-kpi-info-text{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .flight-status-container-airport-info {
    background-color: var(--blue-500);
    display: grid;
    align-items: center;
    grid-template-columns: 0.9fr 1fr;
    padding: 20px 31px;
    border-radius: 15px;
    margin-top: 0.688rem;
    .flight-status-container-airport-info-icon {
      display: flex;
      align-items: center;
      gap: 1.875rem;
      .icon-airport {
        font-size: 1.5rem;
      }

      p {
        font-size: 0.69rem;
      }
    }
  }
}
.general-section-aircraft-seat-component {
  background-color: var(--white);
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  padding: 1rem;
  width: 100%;
  position: relative;
  .general-section-aircraft-seat-component-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    .general-section-aircraft-seat-component-title {
      display: flex;
      align-items: center;
      gap: 0.938rem;
      b {
        font-size: 0.8rem;
        color: var(--black-mid);
      }
  
    }
    .general-section-aircraft-seat-component-buttons{
      .general-section-aircraft-seat-component-title-selector {
        display: flex;
        gap: 0.625rem;
        width: 380px;
        align-items: center;
        p {
          opacity: 0.5;
          font-size: 0.6rem;
        }
      }
    
      .general-section-aircraft-seat-component-title-info {
        display: flex;
        align-items: center;
        gap: 0.313rem;
        .general-section-aircraft-seat-component-title-info-icon {
          mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBpZD0iR3JvdXBfNTY3MiIgZGF0YS1uYW1lPSJHcm91cCA1NjcyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTA0IC0xNDIwLjQyNykiPgogICAgPHRleHQgaWQ9ImkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxNCAxNDM4LjQyNykiIGZpbGw9IiMyYmFjZTIiIGZvbnQtc2l6ZT0iMTUiIGZvbnQtZmFtaWx5PSJQb3BwaW5zLVJlZ3VsYXIsIFBvcHBpbnMiPjx0c3BhbiB4PSIwIiB5PSIwIj5pPC90c3Bhbj48L3RleHQ+CiAgICA8ZyBpZD0iRWxsaXBzZV81MjIiIGRhdGEtbmFtZT0iRWxsaXBzZSA1MjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwNCAxNDIwLjQyNykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJiYWNlMiIgc3Ryb2tlLXdpZHRoPSIxLjUiPgogICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMiIgc3Ryb2tlPSJub25lIi8+CiAgICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjExLjI1IiBmaWxsPSJub25lIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);
          mask-size: cover;
          mask-repeat: no-repeat;
          mask-position: center;
          background-color: var(--blue-800);
          width: 24px;
          height: 24px;
        }
  
        
        p{
          color: var(--blue-800);
          cursor: pointer;
          text-decoration: underline;
        }
      }
      display: flex;
      gap: 1.25rem;
      align-items: center;
      .general-section-aircraft-seat-component-button-info{
        display: flex;
        align-items: center;
        gap: 0.313rem;
        p{
          color: var(--blue-800);
          cursor: pointer;
          text-decoration: underline;
        }
        .general-section-aircraft-seat-component-button-view-icon {
          mask-image: url("data:image/svg+xml,%3csvg%20id='Group_6463'%20data-name='Group%206463'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='22.974'%20height='16.771'%20viewBox='0%200%2022.974%2016.771'%3e%3cdefs%3e%3cclipPath%20id='clip-path'%3e%3crect%20id='Rectangle_1867'%20data-name='Rectangle%201867'%20width='22.974'%20height='16.771'%20fill='%2329abe2'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='Group_4341'%20data-name='Group%204341'%20clip-path='url(%23clip-path)'%3e%3cpath%20id='Path_2695'%20data-name='Path%202695'%20d='M14.733,8.386A3.246,3.246,0,1,1,11.487,5.14a3.25,3.25,0,0,1,3.246,3.246m6.383-.739a1.4,1.4,0,0,1,0,1.478,11.359,11.359,0,0,1-9.628,6,11.359,11.359,0,0,1-9.628-6,1.4,1.4,0,0,1,0-1.478,11.359,11.359,0,0,1,9.628-6,11.359,11.359,0,0,1,9.628,6m-4.731.739a4.9,4.9,0,1,0-4.9,4.9,4.9,4.9,0,0,0,4.9-4.9M22.539,6.81A12.989,12.989,0,0,0,11.487,0,12.989,12.989,0,0,0,.436,6.81a3.07,3.07,0,0,0,0,3.152,12.989,12.989,0,0,0,11.052,6.81,12.989,12.989,0,0,0,11.052-6.81,3.07,3.07,0,0,0,0-3.152'%20transform='translate(0)'%20fill='%2329abe2'/%3e%3c/g%3e%3c/svg%3e");
          mask-size: cover;
          mask-repeat: no-repeat;
          mask-position: center;
          background-color: var(--blue-800);
          width: 23px;
          height: 17px;
        }
        .general-section-aircraft-seat-component-button-info-icon{
          mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBpZD0iR3JvdXBfNTY3MiIgZGF0YS1uYW1lPSJHcm91cCA1NjcyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTA0IC0xNDIwLjQyNykiPgogICAgPHRleHQgaWQ9ImkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxNCAxNDM4LjQyNykiIGZpbGw9IiMyYmFjZTIiIGZvbnQtc2l6ZT0iMTUiIGZvbnQtZmFtaWx5PSJQb3BwaW5zLVJlZ3VsYXIsIFBvcHBpbnMiPjx0c3BhbiB4PSIwIiB5PSIwIj5pPC90c3Bhbj48L3RleHQ+CiAgICA8ZyBpZD0iRWxsaXBzZV81MjIiIGRhdGEtbmFtZT0iRWxsaXBzZSA1MjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwNCAxNDIwLjQyNykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJiYWNlMiIgc3Ryb2tlLXdpZHRoPSIxLjUiPgogICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMiIgc3Ryb2tlPSJub25lIi8+CiAgICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjExLjI1IiBmaWxsPSJub25lIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);
          mask-size: cover;
          mask-repeat: no-repeat;
          mask-position: center;
          background-color: var(--blue-800);
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .general-section-aircraft-seat-component-body{
    margin-top: 1.275rem;
    .general-section-aircraft-seat-component-body-template{
      background-image: url(/assets/template1-B7W3joij.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      
      height: 10rem;
    }
  }
}
.general-section-delivery-form-row-date {
  margin: 1.575rem 0;
  --input-height: 1.5rem;
  transition: background-color 0.5s ease-in-out;
  border-radius: 15px;
  background-color: var(--blue-500);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.663rem;
  .general-section-delivery-form-row-date-date {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    .icon-date {
      font-size: 0.8rem;
    }
    b {
      font-size: 0.69rem;
    }
  }
  .general-section-delivery-form-row-date-info {
    display: flex;
    gap: 0.813rem;
    p {
      font-size: 0.6rem;
    }
  }
}

b {
  font-size: 0.8rem;
  color: var(--black-mid);
}

.flight-status-container-body-flight-kpi {
  margin: 1.575rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.813rem;

  --input-height: 1.5rem;
  .flight-status-container-body-flight-kpi-info {
    .icon {
      font-size: 1.5rem;
      color: var(--grey-200) !important;
    }
    transition: background-color 0.5s ease-in-out;
    gap: 1.063rem;
    border-radius: 15px;
    height: 7.8rem;
    display: flex;
    flex-direction: column;
    background-color: var(--blue-500);
    padding: 0 0.3rem;
    align-items: center;
    justify-content: center;
    .flight-status-container-body-flight-kpi-info-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.disabled-from-row {
  .general-section-delivery-form-row-info {
    pointer-events: none;
    .general-section-delivery-nodashed-row{
      pointer-events: none;
      opacity: 0.5;
    }
    .general-section-delivery-dashed-row {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
.general-section-delivery-form-row {
  .general-section-delivery-form-row-info {
    margin-top: 1.575rem;
    .delivery-header {
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }
    .icon-engine {
      font-size: 33px;
      width: 33px;
    }
    .icon-landing {
      font-size: 25px;
      width: 33px;
    }
    .icon-apu {
      font-size: 33px;
      width: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .general-section-delivery-dashed-row {
      margin-top: 1.575rem;
      height: 2.3rem;
      border: 1px dashed #707070;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
.icon-delivery-landing {
  mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26.119'%20height='34.22'%20viewBox='0%200%2026.119%2034.22'%3e%3cg%20id='Group_8841'%20data-name='Group%208841'%20transform='translate(1.143%201.575)'%3e%3cg%20id='Group_6498'%20data-name='Group%206498'%20transform='translate(-1.393%20-1.825)'%3e%3cpath%20id='Path_4590'%20data-name='Path%204590'%20d='M13.31,7.488a13.06,13.06,0,1,1-9.234,3.825A12.974,12.974,0,0,1,13.31,7.488Zm0,24.439A11.38,11.38,0,1,0,1.929,20.548,11.393,11.393,0,0,0,13.31,31.927Z'%20transform='translate(0%200.864)'%20fill='%23707070'/%3e%3cpath%20id='Line_134'%20data-name='Line%20134'%20d='M.929,4.432H-.75V0H.929Z'%20transform='translate(16.258%205.14)'%20fill='%23707070'/%3e%3cpath%20id='Line_135'%20data-name='Line%20135'%20d='M.929,4.432H-.75V0H.929Z'%20transform='translate(10.182%205.14)'%20fill='%23707070'/%3e%3cpath%20id='Line_136'%20data-name='Line%20136'%20d='M12.152.929H0V-.75H12.152Z'%20transform='translate(7.234%201)'%20fill='%23707070'/%3e%3cpath%20id='Line_137'%20data-name='Line%20137'%20d='M12.152.929H0V-.75H12.152Z'%20transform='translate(7.233%205.051)'%20fill='%23707070'/%3e%3cpath%20id='Path_4591'%20data-name='Path%204591'%20d='M17.65.25a2.865,2.865,0,1,1-2.864,2.864A2.868,2.868,0,0,1,17.65.25Zm0,4.051a1.186,1.186,0,1,0-1.185-1.187A1.187,1.187,0,0,0,17.65,4.3Z'%20transform='translate(1.735)'%20fill='%23707070'/%3e%3cpath%20id='Path_4592'%20data-name='Path%204592'%20d='M6.794.25A2.865,2.865,0,1,1,3.93,3.114,2.867,2.867,0,0,1,6.794.25Zm0,4.051A1.186,1.186,0,1,0,5.609,3.114,1.187,1.187,0,0,0,6.794,4.3Z'%20transform='translate(0.439)'%20fill='%23707070'/%3e%3cpath%20id='Ellipse_529'%20data-name='Ellipse%20529'%20d='M6.165-.75A6.915,6.915,0,1,1-.75,6.165,6.923,6.923,0,0,1,6.165-.75Zm0,12.152A5.236,5.236,0,1,0,.929,6.165,5.242,5.242,0,0,0,6.165,11.4Z'%20transform='translate(7.144%2015.245)'%20fill='%23707070'/%3e%3cpath%20id='Path_4593'%20data-name='Path%204593'%20d='M12.222,16.595a2.865,2.865,0,1,1-2.864,2.864A2.868,2.868,0,0,1,12.222,16.595Zm0,4.051a1.186,1.186,0,1,0-1.185-1.187A1.187,1.187,0,0,0,12.222,20.646Z'%20transform='translate(1.087%201.951)'%20fill='%23707070'/%3e%3cpath%20id='Line_138'%20data-name='Line%20138'%20d='M.929,4.051H-.75V0H.929Z'%20transform='translate(13.22%2023.436)'%20fill='%23707070'/%3e%3cpath%20id='Line_139'%20data-name='Line%20139'%20d='M.929,4.051H-.75V0H.929Z'%20transform='translate(13.22%2015.334)'%20fill='%23707070'/%3e%3cpath%20id='Line_140'%20data-name='Line%20140'%20d='M3.133,2.83-.375.8.464-.65,3.973,1.375Z'%20transform='translate(15.019%2022.346)'%20fill='%23707070'/%3e%3cpath%20id='Line_141'%20data-name='Line%20141'%20d='M3.133,2.83-.375.8.464-.65,3.973,1.375Z'%20transform='translate(8.002%2018.296)'%20fill='%23707070'/%3e%3cpath%20id='Line_142'%20data-name='Line%20142'%20d='M.464,2.83-.375,1.375,3.133-.65,3.973.8Z'%20transform='translate(15.019%2018.296)'%20fill='%23707070'/%3e%3cpath%20id='Line_143'%20data-name='Line%20143'%20d='M.464,2.83-.375,1.375,3.133-.65,3.973.8Z'%20transform='translate(8.002%2022.346)'%20fill='%23707070'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--grey-300);
  width: 1.1rem;
  height: 1.4rem;
}
.icon-delivery-engine {
  mask-image: url(/assets/engine-CJcq4eEa.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--grey-300);
  width: 1.5rem;
  height: 1.1rem;
}
.icon-delivery-apu {
  mask-image: url("data:image/svg+xml,%3csvg%20id='Group_8843'%20data-name='Group%208843'%20xmlns='http://www.w3.org/2000/svg'%20width='18.79'%20height='28.601'%20viewBox='0%200%2018.79%2028.601'%3e%3cg%20id='Path_4099'%20data-name='Path%204099'%20transform='translate(-4.249%20-11)'%20fill='none'%3e%3cpath%20d='M21.834,19.737H17.225l3.495-6.989a1.255,1.255,0,0,0-.044-1.179A1.219,1.219,0,0,0,19.65,11H10.913a1.209,1.209,0,0,0-1.114.743l-5.46,13.1a1.237,1.237,0,0,0,.109,1.136,1.194,1.194,0,0,0,1,.524H9.384l-2.9,11.62a1.191,1.191,0,0,0,.633,1.354,1.234,1.234,0,0,0,1.463-.306L22.773,21.7a1.19,1.19,0,0,0-.939-1.944Z'%20stroke='none'/%3e%3cpath%20d='M%2011.10880851745605%2012.5%20L%205.897430419921875%2025.00731086730957%20L%2011.30557823181152%2025.00731086730957%20L%208.261363983154297%2037.18412780761719%20L%2021.2010498046875%2021.25836181640625%20L%2020.33393859863281%2021.25836181640625%20L%2020.33393859863281%2021.23651123046875%20L%2014.79837894439697%2021.23651123046875%20L%2019.16662979125977%2012.5%20L%2011.10880851745605%2012.5%20M%2010.91329956054688%2011%20L%2019.64980888366699%2011%20C%2020.06479835510254%2011%2020.45793914794922%2011.21841049194336%2020.67634963989258%2011.56787109375%20C%2020.8947582244873%2011.93918228149414%2020.8947582244873%2012.37600326538086%2020.72002792358398%2012.7473030090332%20L%2017.22542953491211%2019.73651123046875%20L%2021.83393859863281%2019.73651123046875%20L%2021.83393859863281%2019.75836181640625%20C%2022.2926082611084%2019.75836181640625%2022.72942924499512%2020.02045059204102%2022.92599868774414%2020.4354305267334%20C%2023.1225700378418%2020.85042190551758%2023.05704879760742%2021.3527717590332%2022.77310943603516%2021.70223236083984%20L%208.576278686523438%2039.17525100708008%20C%208.226818084716797%2039.59023284912109%207.615268707275391%2039.72128295898438%207.112918853759766%2039.48103332519531%20C%206.610569000244141%2039.24077224731445%206.348468780517578%2038.67290115356445%206.479518890380859%2038.12686157226562%20L%209.384408950805664%2026.50731086730957%20L%205.452978134155273%2026.50731086730957%20C%205.037998199462891%2026.50731086730957%204.666688919067383%2026.31073188781738%204.448278427124023%2025.98311233520508%20C%204.229869842529297%2025.63365173339844%204.186178207397461%2025.21867179870605%204.339069366455078%2024.84737205505371%20L%209.799388885498047%2011.74260330200195%20C%209.995969772338867%2011.28393173217773%2010.43278884887695%2011%2010.91329956054688%2011%20Z'%20stroke='none'%20fill='%23707070'/%3e%3c/g%3e%3c/svg%3e");
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--grey-300);
  width: 0.7rem;
  height: 1.2rem;
}
.general-section-delivery-nodashed-row {
  display: grid;
  grid-template-columns: 7rem 7rem 12rem 1rem;
  gap: 1rem;
  justify-items: left;
  border-radius: 10px;
  align-content: center;
  padding: 0 10px;
  margin-top: 1.575rem;
  height: 2.3rem;
  background: #fafafa 0% 0% no-repeat padding-box;
  border: 1px solid #e6e6e6;
  .dropdown-main-property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.56rem;
    max-width: 100%;
    > span {
      font-size: 0.6rem;
      text-align: center;
      color: var(--black-200);
      white-space: nowrap;
    }
    > b {
      text-align: center;
      font-size: 0.6rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .delete-part-button{
    cursor: pointer;
  }
}
.select {
  position: relative;
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  /* justify-content: center; */

  &.disabled {
    pointer-events: none;
    * {
      pointer-events: none;
    }
    & > #select-partNumber {
      border: none;
      color: var(--grey-250);
      background-color: var(--disabled-input-bg);
    }
    .selected-option-singleSelection {
      color: var(--grey-500);
    }
    label {
      color: var(--grey-500);
    }
  }

  .error-label {
    color: var(--input-error);
    position: absolute;
    right: calc(3 * var(--input-padding));
    font-size: var(--input-font-size);
    font-style: normal;
  }
}

.select > #select-partNumber {
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--p-size);
  width: 100%;
  height: var(--input-height);
  outline: none;
  cursor: pointer;
  background-color: var(--white);

  &.error {
    border: 2px solid var(--input-error);
    /* border-color: var(--input-error); */
  }
  /* padding-left: .3rem; */
}

.selected-options-container {
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  /* gap: var(--gap); */
  padding: 0 var(--input-padding);
}

.selected-option {
  width: auto;
  max-width: 100%;
  padding: calc(var(--padding) - 0.35em);
  height: 60%;
  margin-right: 0.2rem;
  border-radius: 0.2rem;
  background-color: #1ec496;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  color: var(--white);
  font-size: 0.5rem;
}

.selected-option-singleSelection {
  width: auto;
  max-width: 100%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  color: var(--black);
  font-size: var(--input-font-size);
  /* font-size: calc(var(--p-size) - .1rem); */
  /* background-color: blueviolet; */
}

/* Estilo para el contador de elementos ocultos */
.hidden-count {
  background-color: #1ec496;
  color: var(--white);
  padding: 0.3rem;
  border-radius: 6px;
  font-size: calc(var(--p-size) - 0.2rem);
  font-weight: 500;
  height: 60%;
  width: auto;
  /* max-width: 15%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.select > label {
  position: absolute;
  top: 50%;
  left: var(--input-padding);
  transform: translateY(-50%);
  font-size: var(--input-font-size);
  color: var(--input-color);
  transition: var(--transition);
  pointer-events: none;
  font-weight: 400;
}

.data-basic-filters-cont {
  background-color: var(--white);
  box-shadow: var(--box-shadow);
  padding: 0.5rem;
  width: 100%;
  /* position: absolute; */
  /* top: -15vh; */
  height: auto;
  /* max-height: 85vh; */
  max-height: 60vh;
  z-index: 100;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gap) + 0.3rem);
  overflow: hidden;
  z-index: 1000;
  min-width: 10rem;
}

.data-basic-filters-cont > button {
  width: 100%;
  height: 2rem;
  min-height: 2rem;
  border-radius: var(--radius);
  border: none;
  outline: none;
  cursor: pointer;
  font-size: var(--p-size);
  padding: var(--padding);
}

.data-basic-filters-cont > .data-basic-filters-cont-selectedFiltersName {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6rem;
  font-weight: 400;
}

.data-basic-filters-cont-selectedFiltersName > span {
  color: var(--green-300);
  text-decoration: underline;
  cursor: pointer;
}

.data-basic-filters-cont > .filter-options-selected {
  width: 100%;
  min-height: 4.5rem;
  max-height: 4.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  overflow-y: auto;
  outline: 1px solid #dfdfdf;
  border-radius: 5px;
  padding: 0.2rem;
}

.filter-options-selected > span {
  width: auto;
  max-width: 100%;
  height: 40%;
  padding: calc(var(--padding) - 0.15rem);
  border-radius: 6px;
  background-color: #1ec496;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.filter-options-selected > span > p {
  color: var(--white);
  font-size: calc(var(--p-size));
  font-weight: 400;
}

.data-basic-filters-cont > .filters-options-cont {
  width: 100%;
  height: auto;
  max-height: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  overflow: hidden auto;
}

.data-basic-filters-cont > .filters-options-cont::-webkit-scrollbar {
  width: 4px;
}

.filters-options-cont > .search-options-cont {
  width: 100%;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  height: 2rem;
  background-color: var(--white-100);
  padding: 0 0.5rem;
  font-size: 0.7rem;
}

.search-options-cont > input {
  background-color: transparent;
  height: 100%;
  border: none;
  outline: none;
  border-radius: var(--radius);
  padding: 0;
  font-size: 0.63rem;
  color: var(--black);
  font-weight: 400;
  flex: 1;
  &::placeholder {
    color: var(--grey-200);
  }
}

.search-options-cont > img {
  height: 0.8rem;
  cursor: pointer;
}

/* .filters-options-cont>.options {
    background-color: var(--white);
    width: 100%;
    border-radius: calc(var(--radius) - 3px);
    padding: calc(var(--padding) - .3rem);
    display: flex;
    align-items: center;
    gap: var(--gap);
    border: 2px solid var(--white-100);
} */

.options:hover {
  background-color: #dbffee !important;
}
.options > section {
  width: 100%;
  cursor: pointer;
}

.options > section > p:nth-child(1) {
  font-size: 0.63rem;
  color: var(--black);
  font-weight: 400;
}

.options > section > p:nth-child(2) {
  font-size: calc(var(--p-size) - 0.2rem);
  color: var(--grey-300);
  font-weight: 400;
}

/* [data-viewport-type="element"]{
    height: auto !important;
  } */

.dropdown-main-info {
  display: grid;
  grid-template-columns: 7rem 7rem 13rem;
  gap: 1rem;
  justify-items: left;
  .dropdown-main-property {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.56rem;
    max-width: 100%;
    >span {
        font-size: 0.6rem;
        text-align: center;
        color: var(--black-200);
        white-space: nowrap;
    }
    >b {
        text-align: center;
        font-size: 0.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
  }
}
.general-section-aircraft-warranty{
    margin-top: 0.813rem;
    margin-bottom: 1.25rem;
}.general-aircraft-balance {
  .first-row {
    padding-top: 1.425rem  !important;
  }

}
.subTitle {
    margin-bottom: 0.5rem;
  }.options-menu-component.menu-options {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.16rem 0;
}
.options-menu-component.menu-options .option {
  min-height: 2.2rem;
  padding: 0px 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.352rem;
  transition: var(--transition);
  font-weight: 500;
  color: var(--black-mid);
  cursor: pointer;
}
.options-menu-component.menu-options .option:hover {
  background-color: var(--grey-75);
}
.options-menu-component.menu-options .option span {
  font-size: 0.6rem;
}
.options-menu-component.menu-options .option i {
  font-size: 0.7rem;
}.globalnavbaractions-component {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.8rem;
}
.globalnavbaractions-component .searchbutton {
  display: none;
}
@media (max-width: 1024px) {
  .globalnavbaractions-component .searchbutton {
    display: grid;
  }
}
@media (max-width: 450px) {
  .globalnavbaractions-component .navbar-action:not(.navbar-menu-profile) {
    display: none;
  }
}
.globalnavbaractions-component > .navbar-action {
  height: 1.48rem;
  width: 1.48rem;
  position: relative;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: var(--transition);
  display: grid;
  place-items: center;
}
.globalnavbaractions-component > .navbar-action > i {
  font-weight: normal;
  font-size: 1rem;
  color: var(--grey-200);
}
.globalnavbaractions-component > div > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  transition: var(--transition);
}
.globalnavbaractions-component > div > svg > path {
  fill: var(--grey-200);
}
.globalnavbaractions-component > div > svg > rect {
  fill: var(--grey-200);
}
.globalnavbaractions-component > .navbar-action:hover {
  background-color: var(--black-mid);
}
.globalnavbaractions-component > .navbar-action:hover > i {
  color: var(--white);
}
.globalnavbaractions-component > div:hover svg > path {
  fill: var(--white);
}
.globalnavbaractions-component > div:hover svg > rect {
  fill: var(--white);
}
.globalnavbaractions-component .navbar-menu-profile {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: calc(var(--p-size) + 0.2rem);
  font-weight: bold;
}
@media (max-width: 1024px) {
  .globalnavbaractions-component .navbar-menu-profile.desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .globalnavbaractions-component .navbar-menu-profile.mobiletablet {
    display: none;
  }
}.context-menu-component{
	>.menu-options{
	display: grid;
	grid-template-columns: 1fr;	
	padding: 0.16rem 0;
}
}
.option{
	min-height: 2.2rem;
	padding: 0px 0.8rem;
	display: flex;
	align-items: center;
    gap: 0.352rem;
	transition: var(--transition);
	font-weight: 500;
    color: var(--black-mid);

	cursor: pointer;

	&:hover{
		background-color: var(--grey-75);
	}

	span{
		font-size: 0.6rem;
	}

	i {
		font-size: 0.7rem;
	}
}.snackbar-component {
  /* background: #FFFFFF 0% 0% no-repeat padding-box; */
  padding: 0.48rem;
  font-size: 0.8rem;
  border-radius: 0.7rem;
  display: grid;
  min-width: 25rem;
  align-items: center;
  gap: 0.48rem;
  grid-template-columns: min-content auto min-content;
  backdrop-filter: blur(0.3rem);
  background: rgba(255, 255, 255, 0.8666666667) 0% 0% no-repeat padding-box;
  -webkit-backdrop-filter: blur(0.3rem);
  max-width: calc(90vw - 5rem);
  /* border: none !important; */
  /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}
@media (max-width: 1024px) {
  .snackbar-component {
    min-width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }
}
.snackbar-component.error {
  border: solid 1px var(--red-450);
  /* >i {
      background-color: var(--red-400);
      color: var(--white);
  } */
}
.snackbar-component.error > .snackbar-content > b {
  color: var(--red-400);
}
.snackbar-component.success {
  border: solid 1px var(--green-550);
  /* >i {
      background-color: var(--green-500);
      color: var(--white);
  } */
}
.snackbar-component.success > .snackbar-content > b {
  color: var(--green-500);
}
.snackbar-component.warning {
  border: solid 1px var(--yellow-150);
  /* >i {
      background-color: var(--yellow-100);
      color: var(--white);
  } */
}
.snackbar-component.warning > .snackbar-content > b {
  color: var(--yellow-100);
}
.snackbar-component.info {
  border: solid 1px var(--blue-850);
  /* >i {
      background-color: var(--blue-800);
      color: var(--white);
  } */
}
.snackbar-component.info > .snackbar-content > b {
  color: var(--blue-800);
}
.snackbar-component > i:last-child {
  color: var(--grey-600);
  padding-right: 0.6rem;
  cursor: pointer;
  background-color: transparent;
}
.snackbar-component > .snackbar-content {
  display: flex;
  flex-direction: column;
}
.snackbar-component > .snackbar-content span {
  font-size: 0.6rem;
}.alert-component {
  display: flex;
  flex-direction: column;
  gap: 1.04rem;
  padding: 1.36rem;
  width: min-content;
  min-width: 28rem;
  max-width: 70vw;
  /* min-width: 11rem; */
}
@media (max-width: 1024px) and (orientation: portrait) {
  .alert-component {
    max-width: unset;
    min-width: unset;
    width: 100%;
    max-height: 90dvh;
  }
}
.alert-component .alert-header {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  justify-content: space-between;
}
.alert-component .alert-header .alert-title {
  display: flex;
  align-items: center;
  gap: 0.44rem;
}
.alert-component .alert-header .alert-title b {
  font-size: 0.8rem !important;
}
.alert-component p {
  margin: 0;
  font-size: 0.7rem;
  width: 100%;
  overflow-wrap: break-word;
  /* word-break:break-word; */
}
.alert-component .buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.alert-component .buttons-container button {
  width: min-content !important;
  min-width: 9rem !important;
  /* min-width: max(11rem, min-content) !important; */
}.quote-entry {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.quote-entry-filters {
  width: 10rem;
  display: flex;
  min-width: 10rem;
  gap: var(--gap);
  align-items: center;
}

.quote-entry-nav {
  width: 100%;
  --list-item-display: grid;
  --list-item-template: 5% 6.5% 7.8% 6% 7.7% 7% 8.5% 9% 6% 7.5% 5%;
  --list-item-justify: left;
  --list-item-padding: 0 0 0 1rem;
}

.quote-entry-send-quote-button {
  height: 2rem;
  width: 7rem;
  border-radius: var(--button-radius);
  border: none;
  cursor: pointer;
  background-color: #00ce88;
  font-size: calc(var(--p-size) + 0.3rem);
  font-weight: 500;
}

.send-quote-entry-cont {
  position: absolute;
  bottom: 2rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
}

.send-quote-entry-cont > span {
  height: 1.8rem;
  width: 7rem;
  background-color: #e4fff3;
  border: 1px solid #00ce88;
  border-radius: 0.4rem;
  padding: 0.3rem;
  font-size: calc(var(--p-size));
  font-weight: 600;
  color: var(--black-mid);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.send-quote-entry-cont > p {
  font-size: calc(var(--p-size));
  font-weight: 500;
  color: var(--black-mid);
}

.quote-entry-content {
  height: 80%;
  width: 100%;
}

.quote-entry-content > .quote-entry-order-list {
  overflow: hidden auto;
  height: 100%;
}.quote-entry-order-item {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote-entry-item-header {
  width: 100%;
  height: var(--item-min-height);
  border-radius: var(--item-border-radius);
  cursor: pointer;
  padding: var(--item-padding);
  position: relative;
  border: var(--item-border);
  transition: var(--transition);
  display: grid;
  grid-template-columns: 5% 9% 9% 9.5% 9.5% 9% 13% 9% 10% 7.5%;
  place-items: center;
}

.quote-entry-item-header > p {
  font-weight: 400;
  color: var(--black);
  font-size: 0.6rem;
}

.quote-entry-item-details {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.quote-entry-item-details.open {
  height: auto;
  opacity: 1;
  width: 97.5%;
  visibility: visible;
}

.quote-entry-item-sorting {
  --list-item-display: grid;
  --list-item-template: 7.5% 8% 7% 5% 6% 5% 6% 5.3% 4.3% 7% 3.5% 6% 6%;
  --list-item-justify: left;
}.quote-order-item-detail {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
}

.quote-order-item-header {
  height: var(--item-min-height);
  width: 100%;
  border-radius: var(--item-border-radius);
  cursor: pointer;
  padding: var(--item-padding);
  position: relative;
  border: var(--item-border);
  transition: var(--transition);
  display: grid;
  grid-template-columns: 11% 9% 9% 7% 8% 7.5% 8% 7.3% 6.3% 9% 5.8% 4% 6%;
  place-items: center;
  gap: 0.1rem;
}

.quote-order-item-header > p {
  font-weight: 400;
  color: var(--black);
  font-size: 0.6rem;
  width: 100%;
}

.quote-order-item-content {
  height: 0;
  visibility: hidden;
  transition: var(--transition);
  opacity: 0;
  width: 98%;
}

.quote-order-item-content.open {
  height: 10rem;
  visibility: visible;
  opacity: 1;
  margin-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quote-order-item-detail-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--white-100);
  border-radius: 0.7rem;
  padding: 0 0.6rem;
}

.quote-order-item-detail-form > div {
  display: flex;
  gap: var(--gap);
  align-items: center;
}

.quote-order-item-detail-form > div > p {
  color: var(--black-mid);
  font-weight: 500;
  font-size: calc(var(--p-size));
}

.quote-order-item-detail-edit-cont {
  width: 100%;
  height: 30%;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.quote-order-item-detail-edit-cont > h3 {
  color: var(--black-mid);
  font-weight: 600;
}

.quote-order-item-detail-edit-cont > button {
  color: var(--black-mid);
  font-weight: 500;
  padding: 0 2rem;
  height: 1.65rem;
  cursor: pointer;
  font-size: calc(var(--p-size) + 0.1rem);
  background-color: var(--white);
  border-radius: var(--button-radius);
  border: 1px solid var(--grey-400);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.quote-order-item-detail-edit-cont > button:hover {
  background-color: var(--black-mid);
  color: var(--white);
}.send-quote-warning {
  max-height: 13rem;
  width: 35vw;
}

.send-quote-warning-nav {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.send-quote-warning-nav > button {
  height: 1.8rem;
  width: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--black-mid);
  color: var(--black-mid);
  border-radius: 0.3rem;
  background-color: var(--white);
  transition: var(--transition);
}

.send-quote-warning-nav > button:hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.send-quote-warning-nav > h3 {
  color: var(--black-mid);
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 0.95rem;
}

.send-quote-warning > div {
  width: 100%;
  height: 3.5rem;
  display: flex;
  align-items: center;
}

.send-quote-warning > div > p {
  font-size: calc(var(--p-size) + 0.1rem);
  color: var(--black-mid);
}

.send-quote-warning > div > p > span {
  font-size: calc(var(--p-size) + 0.1rem);
  color: var(--black-mid);
  font-weight: 600;
}

.send-quote-warning > section {
  width: 100%;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.send-quote-warning > section > button {
  width: 6rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  border-radius: 0.3rem;
  cursor: pointer;
  transition: var(--transition);
}

.send-quote-warning > section > button:nth-child(1) {
  background-color: transparent;
  border: 1px solid var(--black-mid);
}

.send-quote-warning > section > button:nth-child(1):hover {
  background-color: var(--black-mid);
  color: var(--white);
}

.send-quote-warning > section > button:nth-child(2) {
  background-color: var(--warn);
  border: none;
  color: var(--white);
}.vendor-discrepancy-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  --list-item-display: grid;
  --list-item-template: repeat(5, 1fr) 1.2fr 1.2fr 1fr;
  --list-item-gap: 0.8rem !important;
  --item-value-font-size: 0.6rem;
  overflow: auto;
}
.vendor-discrepancy-component .checkbox-component {
  display: flex !important;
}
.vendor-discrepancy-component .general-info {
  display: flex;
  align-items: center;
  padding: var(--item-padding);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0.3rem 0.5rem 0.7rem 0.5rem;
  background-color: var(--item-background-color);
  border-radius: var(--item-border-radius);
  border: var(--item-border);
}
.vendor-discrepancy-component .general-info .left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.vendor-discrepancy-component .general-info b {
  font-size: 0.7rem;
}
.vendor-discrepancy-component .general-info .input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vendor-discrepancy-component .general-info .input-container b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.vendor-discrepancy-component .general-info .input-container input {
  text-align: right;
}
.vendor-discrepancy-component .sorting-component .column b {
  font-size: 0.56rem;
}
.vendor-discrepancy-component .sent-indicator {
  color: #00CE88;
  font-size: 0.5rem !important;
  text-transform: capitalize;
}
.vendor-discrepancy-component .line-value {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.vendor-discrepancy-component .ordersTable {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.vendor-discrepancy-component .ordertype {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}
.vendor-discrepancy-component .ordertype i::before {
  color: var(--grey-250) !important;
}
.vendor-discrepancy-component .ordertype span {
  font-size: 0.6rem;
}
.vendor-discrepancy-component .selected-item {
  background-color: #E4FFF3;
  border: solid 1px #52D69B;
}
.vendor-discrepancy-component .selected-item.sent-item {
  border: solid 1px #B9D8DF;
}
.vendor-discrepancy-component .floating-panel {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.1607843137);
  padding: var(--input-padding);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.vendor-discrepancy-component .floating-panel b {
  font-size: 0.7rem;
  color: var(--black-mid);
  white-space: nowrap;
}
.vendor-discrepancy-component .floating-panel.active {
  opacity: 1;
  pointer-events: all;
}
.vendor-discrepancy-component .floating-panel button {
  min-width: 7rem;
}
.vendor-discrepancy-component .floating-panel .input-component {
  margin: 0.7rem 0;
}
.vendor-discrepancy-component .floating-panel input {
  min-width: 8rem;
}
.vendor-discrepancy-component .v-app-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.3rem;
  overflow: auto;
  padding: 0rem 0.5rem 8rem 0rem;
}
.vendor-discrepancy-component .highlight {
  color: #29ABE2;
  font-weight: bold;
  font-size: 0.6rem;
}
.vendor-discrepancy-component .highlight.awb {
  text-decoration: underline;
}
.vendor-discrepancy-component details[open] summary .item-component {
  background-color: #EFFCFF;
  border-color: #B9D8DF;
}
.vendor-discrepancy-component .bold {
  font-weight: bold;
}
.vendor-discrepancy-component .bold b {
  font-size: 0.6rem;
}
.vendor-discrepancy-component .columns .column:nth-child(2), .vendor-discrepancy-component .columns .column:nth-child(4), .vendor-discrepancy-component .columns .column:nth-child(5), .vendor-discrepancy-component .columns .column:nth-child(8) {
  justify-content: center;
  width: 100%;
}
.vendor-discrepancy-component .item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}
.vendor-discrepancy-component .item-content .general-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--form-column-gap);
  row-gap: var(--form-row-gap);
}
.vendor-discrepancy-component .item-content .general-info-grid > *:nth-child(3),
.vendor-discrepancy-component .item-content .general-info-grid > *:nth-child(8) {
  grid-column: span 2;
}
.vendor-discrepancy-component .item-content .card-content-container {
  height: 100%;
}
.vendor-discrepancy-component .item-content .discr-info-grid {
  display: grid;
  grid-template-rows: min-content min-content auto;
  column-gap: var(--form-column-gap);
  row-gap: var(--form-row-gap);
  height: 100%;
}
.vendor-discrepancy-component .item-content .discr-info-grid .subform {
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: calc(0.6 * var(--form-column-gap));
}
.vendor-discrepancy-component .item-content .discr-info-grid .subform > div {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.vendor-discrepancy-component .item-content .discr-info-grid .subform > div span {
  font-size: var(--input-active-label-font-size);
  color: var(--grey-500);
  white-space: nowrap;
}
.vendor-discrepancy-component .item-content .discr-info-grid textarea {
  min-height: 100%;
  max-height: 100%;
  resize: none;
}
.vendor-discrepancy-component .item-content .resolution {
  height: 100%;
  width: 100%;
  background-color: #E4FFF3;
  color: var(--grey-250);
  border: solid 1px #52D69B;
  font-size: var(--input-font-size);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
}
.vendor-discrepancy-component .item-content .resolution-placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.vendor-discrepancy-component .item-content .resolution-placeholder img {
  width: 30%;
}
.vendor-discrepancy-component .item-content .resolution-placeholder b {
  font-size: 0.65rem;
}
.vendor-discrepancy-component .item-content .resolution-placeholder pre {
  font-size: 0.6rem;
  text-align: center;
}
.vendor-discrepancy-component .item-content .title-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.vendor-discrepancy-component .item-content .title-card .panel-name {
  display: flex;
  align-items: center;
}
.vendor-discrepancy-component .item-content .title-card .panel-name i {
  color: #00CE88;
  margin-right: 0.5rem;
}
.vendor-discrepancy-component .item-content .title-card button {
  width: min-content;
  gap: 0.4rem;
  padding: 0 0.5rem;
}
.vendor-discrepancy-component .item-content .title-card button span {
  white-space: nowrap;
  font-size: 0.6rem;
}
.vendor-discrepancy-component .item-content .title-card button .count {
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #F85858;
  border-radius: 0.2rem;
  height: 1rem;
}
.vendor-discrepancy-component .item-component .property {
  font-size: var(--item-value-font-size);
  overflow: hidden;
}
.vendor-discrepancy-component .item-component .property:nth-child(2), .vendor-discrepancy-component .item-component .property:nth-child(4), .vendor-discrepancy-component .item-component .property:nth-child(5), .vendor-discrepancy-component .item-component .property:nth-child(8) {
  width: 100%;
}
.vendor-discrepancy-component .item-component .left-info,
.vendor-discrepancy-component .item-component .main-info {
  width: 100%;
}
.vendor-discrepancy-component .item-component .tag-component {
  width: 100%;
  padding: 0;
}
.vendor-discrepancy-component .item-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  justify-content: flex-end;
}
.vendor-discrepancy-component .item-actions .orderactionbutton {
  display: grid;
  place-items: center;
  width: 1.7rem;
  aspect-ratio: 1;
  border-radius: 0.2rem;
  border: none;
}
.vendor-discrepancy-component .item-actions .orderactionbutton i::before {
  color: white !important;
}
.vendor-discrepancy-component .item-actions .orderactionbutton.ok {
  background-color: #00CE88;
}
.vendor-discrepancy-component .item-actions .orderactionbutton.ok i {
  font-size: 1rem;
}
.vendor-discrepancy-component .item-actions .orderactionbutton.cancel {
  background-color: #F75B5C;
}.engineering-task-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  --list-item-display: grid;
  --list-item-template: repeat(10, 1fr);
  --list-item-gap: 0.8rem !important;
  --item-value-font-size: 0.6rem;
  overflow: auto;
}
.engineering-task-component .checkbox-component {
  display: flex !important;
}
.engineering-task-component .general-info {
  display: flex;
  align-items: center;
  padding: var(--item-padding);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0.3rem 0.5rem 0.7rem 0.5rem;
  background-color: var(--item-background-color);
  border-radius: var(--item-border-radius);
  border: var(--item-border);
}
.engineering-task-component .general-info .left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.engineering-task-component .general-info b {
  font-size: 0.7rem;
}
.engineering-task-component .general-info .input-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.engineering-task-component .general-info .input-container b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.engineering-task-component .general-info .input-container input {
  text-align: right;
}
.engineering-task-component .sorting-component .column b {
  font-size: 0.56rem;
}
.engineering-task-component .sent-indicator {
  color: #00CE88;
  font-size: 0.5rem !important;
  text-transform: capitalize;
}
.engineering-task-component .line-value {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.engineering-task-component .ordersTable {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.engineering-task-component .ordertype {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}
.engineering-task-component .ordertype i::before {
  color: var(--grey-250) !important;
}
.engineering-task-component .ordertype span {
  font-size: 0.6rem;
}
.engineering-task-component .selected-item {
  background-color: #E4FFF3;
  border: solid 1px #52D69B;
}
.engineering-task-component .selected-item.sent-item {
  border: solid 1px #B9D8DF;
}
.engineering-task-component .floating-panel {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.1607843137);
  padding: var(--input-padding);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.engineering-task-component .floating-panel b {
  font-size: 0.7rem;
  color: var(--black-mid);
  white-space: nowrap;
}
.engineering-task-component .floating-panel.active {
  opacity: 1;
  pointer-events: all;
}
.engineering-task-component .floating-panel button {
  min-width: 7rem;
}
.engineering-task-component .floating-panel .input-component {
  margin: 0.7rem 0;
}
.engineering-task-component .floating-panel input {
  min-width: 8rem;
}
.engineering-task-component .v-app-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.3rem;
  overflow: auto;
  padding: 0rem 0.5rem 8rem 0rem;
}
.engineering-task-component .highlight {
  color: #29ABE2;
  font-weight: bold;
  font-size: 0.6rem;
}
.engineering-task-component .highlight.awb {
  text-decoration: underline;
}
.engineering-task-component details[open] summary .item-component {
  background-color: #EFFCFF;
  border-color: #B9D8DF;
}
.engineering-task-component .bold {
  font-weight: bold;
}
.engineering-task-component .bold b {
  font-size: 0.6rem;
}
.engineering-task-component .item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}
.engineering-task-component .item-content > div:first-child {
  grid-row: span 2;
}
.engineering-task-component .item-content > div:nth-child(2), .engineering-task-component .item-content > div:nth-child(3) {
  grid-column: span 2;
}
.engineering-task-component .item-content .gschedule-content {
  display: flex;
  flex-direction: column;
  gap: var(--form-sections-gap);
  justify-content: space-between;
  height: 100%;
}
.engineering-task-component .item-content .gschedule-content .repeat-n-date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-column-gap);
  align-items: center;
}
.engineering-task-component .item-content .gschedule-content .repeat-n-date .schedule-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.engineering-task-component .item-content .gschedule-content .repeat-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.engineering-task-component .item-content .gschedule-content .repeat-container .checks {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.engineering-task-component .item-content .gschedule-content .repeat-container .input-component {
  max-width: 20ch;
}
.engineering-task-component .item-content .gschedule-content .schedule-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.engineering-task-component .item-content .gschedule-content .schedule-date b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.engineering-task-component .item-content .gschedule-content .schedule-date .input-component {
  max-width: 20ch;
}
.engineering-task-component .item-content .gschedule-content .sub-card {
  border: var(--item-border);
  background-color: var(--white);
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  display: grid;
  grid-template-columns: 6ch repeat(6, 1fr);
  align-items: center;
  column-gap: var(--form-column-gap);
  row-gap: 1rem;
}
.engineering-task-component .item-content .gschedule-content .sub-card .input-component {
  margin-top: 0.5rem;
}
.engineering-task-component .item-content .gschedule-content .sub-card label {
  white-space: nowrap;
}
.engineering-task-component .item-content .gschedule-content .sub-card b {
  font-size: 0.6rem;
}
.engineering-task-component .item-content .gschedule-content .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.engineering-task-component .item-content .gschedule-content button {
  width: min-content;
  white-space: nowrap;
}
.engineering-task-component .item-content > *:nth-child {
  grid-column: span 2;
}
.engineering-task-component .item-content .general-info-container .ata-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--item-padding);
  align-items: center;
  border: var(--item-border);
  background-color: var(--white);
  margin-top: var(--form-sections-gap);
  border-radius: var(--input-radius);
}
.engineering-task-component .item-content .general-info-container .ata-container button.filled {
  width: min-content;
  white-space: nowrap;
}
.engineering-task-component .item-content .general-info-container .ata-container .inputs-container {
  display: grid;
  grid-template-columns: min-content auto min-content;
  width: 100%;
  align-items: center;
  gap: var(--form-column-gap);
}
.engineering-task-component .item-content .general-info-container .ata-container .inputs-container i {
  font-style: normal;
  text-decoration: underline;
  color: var(--blue-300);
  font-size: 0.6rem;
}
.engineering-task-component .item-content .general-info-container .ata-container .inputs-container .inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 0.5rem 0;
}
.engineering-task-component .item-content .general-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--form-column-gap);
  row-gap: var(--form-row-gap);
}
.engineering-task-component .item-content .general-info-grid > *:nth-child(3) {
  grid-column: span 2;
}
.engineering-task-component .item-content .ref-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--form-column-gap);
  row-gap: var(--form-row-gap);
}
.engineering-task-component .item-content .thrd-col {
  display: grid;
  grid-template-rows: auto min-content;
  gap: 0.5rem;
}
.engineering-task-component .item-content .schedule-card {
  display: grid;
  grid-template-columns: min-content auto auto;
  align-items: center;
}
.engineering-task-component .item-content .schedule-card .more-options-container i {
  font-size: 0.6rem;
}
.engineering-task-component .item-content .schedule-card .pn-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: var(--input-radius);
  padding: 0.5rem;
  color: white;
  background-color: #00CE88;
  font-size: 0.6rem;
}
.engineering-task-component .item-content .schedule-card .pn-indicator b {
  font-size: 0.6rem;
  color: white;
}
.engineering-task-component .item-content .schedule-card .pn-indicator .pn-count {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.engineering-task-component .item-content .schedule-card .pn-indicator .pn-count i {
  font-style: normal;
  background-color: white;
  color: #00CE88;
  padding: 0.07rem 0.35rem;
  border-radius: 0.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.engineering-task-component .item-content .technical {
  grid-column: span 3;
  display: grid;
  grid-template-columns: min-content 2fr min-content 1fr repeat(4, min-content);
  gap: var(--form-column-gap);
  align-items: center;
}
.engineering-task-component .item-content .technical b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.engineering-task-component .item-content .technical .checkbox-field-component {
  white-space: nowrap;
  font-size: 0.6rem;
}
.engineering-task-component .item-content .technical .radio-group-component .MuiFormControlLabel-label {
  font-size: 0.6rem !important;
}
.engineering-task-component .item-content .gschedule-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.engineering-task-component .item-content .ata-list {
  background-color: white;
  border: var(--item-border);
  border-radius: var(--item-border-radius);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
}
.engineering-task-component .item-content .ata-item {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.4rem;
  grid-template-columns: 7ch auto 1.5rem;
  background-color: var(--item-background-color);
  border-radius: var(--input-radius);
  border: var(--item-border);
}
.engineering-task-component .item-content .ata-item b {
  font-size: 0.6rem;
}
.engineering-task-component .item-content .ata-item .inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 0.5rem 0;
}
.engineering-task-component .item-content .ata-item i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-250);
}
.engineering-task-component .item-content .card-content-container {
  height: 100%;
}
.engineering-task-component .item-content .discr-info-grid {
  display: grid;
  grid-template-rows: min-content min-content auto;
  column-gap: var(--form-column-gap);
  row-gap: var(--form-row-gap);
  height: 100%;
}
.engineering-task-component .item-content .discr-info-grid .subform {
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: calc(0.6 * var(--form-column-gap));
}
.engineering-task-component .item-content .discr-info-grid .subform > div {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.engineering-task-component .item-content .discr-info-grid .subform > div span {
  font-size: var(--input-active-label-font-size);
  color: var(--grey-500);
  white-space: nowrap;
}
.engineering-task-component .item-content .discr-info-grid textarea {
  min-height: 100%;
  max-height: 100%;
  resize: none;
}
.engineering-task-component .item-content .resolution {
  height: 100%;
  width: 100%;
  background-color: #E4FFF3;
  color: var(--grey-250);
  border: solid 1px #52D69B;
  font-size: var(--input-font-size);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
}
.engineering-task-component .item-content .resolution-placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.engineering-task-component .item-content .resolution-placeholder img {
  width: 30%;
}
.engineering-task-component .item-content .resolution-placeholder b {
  font-size: 0.65rem;
}
.engineering-task-component .item-content .resolution-placeholder pre {
  font-size: 0.6rem;
  text-align: center;
}
.engineering-task-component .item-content .title-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.engineering-task-component .item-content .title-card .panel-name {
  display: flex;
  align-items: center;
}
.engineering-task-component .item-content .title-card .panel-name i {
  color: #00CE88;
  margin-right: 0.5rem;
}
.engineering-task-component .item-content .title-card button {
  width: min-content;
  gap: 0.4rem;
  padding: 0 0.5rem;
}
.engineering-task-component .item-content .title-card button span {
  white-space: nowrap;
  font-size: 0.6rem;
}
.engineering-task-component .item-content .title-card button .count {
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #F85858;
  border-radius: 0.2rem;
  height: 1rem;
}
.engineering-task-component .item-component .property {
  font-size: var(--item-value-font-size);
  overflow: hidden;
}
.engineering-task-component .item-component .property:nth-child(2), .engineering-task-component .item-component .property:nth-child(4), .engineering-task-component .item-component .property:nth-child(5), .engineering-task-component .item-component .property:nth-child(8) {
  width: 100%;
}
.engineering-task-component .item-component .left-info,
.engineering-task-component .item-component .main-info {
  width: 100%;
}
.engineering-task-component .item-component .tag-component {
  width: 100%;
  padding: 0;
}
.engineering-task-component .item-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  justify-content: flex-end;
}
.engineering-task-component .item-actions .orderactionbutton {
  display: grid;
  place-items: center;
  width: 1.7rem;
  aspect-ratio: 1;
  border-radius: 0.2rem;
  border: none;
}
.engineering-task-component .item-actions .orderactionbutton i::before {
  color: white !important;
}
.engineering-task-component .item-actions .orderactionbutton.ok {
  background-color: #00CE88;
}
.engineering-task-component .item-actions .orderactionbutton.ok i {
  font-size: 1rem;
}
.engineering-task-component .item-actions .orderactionbutton.cancel {
  background-color: #F75B5C;
}.schedule-dialog-component {
  display: flex;
  flex-direction: column;
  gap: var(--form-sections-gap);
  min-height: 80dvh;
  max-height: 80dvh;
  overflow: auto;
}
.schedule-dialog-component .tabswitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .tabswitch button {
  background-color: var(--item-background-color);
  height: var(--input-height);
  border-radius: var(--input-radius);
  font-weight: bold;
  font-size: 0.65rem;
}
.schedule-dialog-component .tabswitch button.active {
  background-color: var(--black-mid);
  color: var(--white);
}
.schedule-dialog-component .subtitle {
  display: flex;
  align-items: center;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .subtitle b {
  font-size: 0.65rem;
}
.schedule-dialog-component .dialog-header {
  display: flex;
  align-content: center;
  justify-content: space-between;
  min-width: 50rem;
}
.schedule-dialog-component .dialog-header .title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.schedule-dialog-component .dialog-header button.icon {
  max-width: 1.64rem !important;
  max-height: 1.64rem !important;
  aspect-ratio: 1 !important;
}
.schedule-dialog-component .dialogContent {
  --list-item-display: grid;
  --list-item-template: repeat(5, 1fr) 1.5rem;
  --list-item-gap: 0.8rem !important;
  --item-value-font-size: 0.6rem;
  overflow: auto;
}
.schedule-dialog-component .dialogContent.sorting2 {
  --list-item-display: grid;
  --list-item-template: repeat(4, 1fr) 1.5rem;
  --list-item-gap: 0.8rem !important;
  --item-value-font-size: 0.6rem;
}
.schedule-dialog-component .dialogContent.sorting2 .grid-template {
  display: var(--display);
  grid-template-columns: var(--template);
  gap: var(--gap);
  padding: 0 var(--input-padding);
}
.schedule-dialog-component .dialogContent.sorting2 .grid-template > *:nth-child(3), .schedule-dialog-component .dialogContent.sorting2 .grid-template > *:nth-child(4) {
  text-align: center !important;
}
.schedule-dialog-component .dialogContent.sorting2 .exp-content2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .dialogContent.sorting2 .exp-content2 > *:nth-child(3) {
  grid-column: span 2;
}
.schedule-dialog-component .dialogContent.sorting2 .exp-content2 .typeseries-container {
  display: grid;
  grid-template-columns: min-content auto min-content auto min-content;
  align-items: center;
}
.schedule-dialog-component .dialogContent.sorting2 .exp-content2 .typeseries-container b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.schedule-dialog-component .dialogContent .item-component .property {
  font-size: var(--item-value-font-size);
  overflow: hidden;
}
.schedule-dialog-component .dialogContent .item-component .property:nth-child(4) {
  width: 100%;
}
.schedule-dialog-component .dialogContent .item-component .icon-delete-new {
  color: var(--grey-250);
}
.schedule-dialog-component .dialogContent .item-component .left-info,
.schedule-dialog-component .dialogContent .item-component .main-info {
  width: 100%;
}
.schedule-dialog-component .dialogContent .item-component .tag-component {
  width: 100%;
  padding: 0;
}
.schedule-dialog-component .repeat-container {
  display: flex;
  margin: 0.3rem 0;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  border: solid 1px var(--blue-900);
  background-color: #EFFCFF;
  padding: 0.3rem 0.3rem 0.3rem 0.5rem;
  border-radius: calc(1.2 * var(--input-radius));
}
.schedule-dialog-component .repeat-container .input-component {
  max-width: 10ch;
}
.schedule-dialog-component .repeat-container i {
  font-style: normal;
  font-weight: bold;
  font-size: 0.56rem;
  color: var(--black-mid);
  white-space: nowrap;
}
.schedule-dialog-component .exp-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 var(--input-padding);
}
.schedule-dialog-component .exp-content > .general-card-component {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.schedule-dialog-component .exp-content .pn-selector {
  display: grid;
  align-items: center;
  grid-template-columns: min-content 10rem 12rem;
  width: min-content;
}
.schedule-dialog-component .exp-content .pn-selector b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.schedule-dialog-component .exp-content .ranges {
  display: grid;
  grid-template-columns: auto min-content;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .exp-content .threshold {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.schedule-dialog-component .exp-content .threshold .input-component {
  min-width: 12ch;
  margin-top: 0.5rem;
}
.schedule-dialog-component .exp-content .threshold .input-component label {
  white-space: nowrap;
}
.schedule-dialog-component .exp-content .threshold .schedule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: span 2;
}
.schedule-dialog-component .exp-content .threshold .schedule b {
  font-size: 0.5rem;
  white-space: nowrap;
  color: var(--grey-250);
}
.schedule-dialog-component .exp-content .threshold .checkboxes {
  grid-column: span 3;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 17rem;
}
.schedule-dialog-component .exp-content .threshold .checkboxes .checkbox-field-component {
  white-space: nowrap;
}
.schedule-dialog-component .exp-content .threshold .checkboxes > .input-component {
  position: relative;
  bottom: 0.2rem;
}
.schedule-dialog-component .exp-content .threshold b {
  grid-column: span 3;
  font-size: 0.6rem;
}
.schedule-dialog-component .exp-content .threshold i {
  font-weight: bold;
  color: var(--grey-250);
  font-size: 0.56rem;
  font-style: normal;
  white-space: nowrap;
}
.schedule-dialog-component .general-card-component:first-child,
.schedule-dialog-component .general-card-component:nth-child(2) {
  margin-top: 0.4rem;
}
.schedule-dialog-component .card-content {
  display: flex;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .actuals-container {
  display: grid;
  grid-template-columns: min-content auto min-content;
  gap: var(--form-column-gap);
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.schedule-dialog-component .actuals-container b {
  font-size: 0.65rem;
}
.schedule-dialog-component .actuals-container .schedule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--form-column-gap);
  align-items: center;
  padding: 1.2rem 0 0.5rem 0;
  max-width: 23rem;
}
.schedule-dialog-component .actuals-container .schedule label {
  white-space: nowrap;
}
.schedule-dialog-component .sect-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--form-column-gap);
}
.schedule-dialog-component .sect-1 .schedule-inp {
  display: flex;
  align-items: center;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .sect-1 b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.schedule-dialog-component .sect-1 .checkbox-field-component {
  white-space: nowrap;
}
.schedule-dialog-component .sect-1 .checks {
  display: flex;
  align-items: center;
  gap: var(--form-sections-gap);
}
.schedule-dialog-component .card-content-container {
  gap: 0.8rem;
}
.schedule-dialog-component .effective {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--form-column-gap);
}
.schedule-dialog-component .effective .left {
  display: flex;
  flex-direction: column;
  gap: var(--form-sections-gap);
  width: min-content;
}
.schedule-dialog-component .effective .eff-inp {
  display: flex;
  align-items: center;
  gap: var(--form-column-gap);
  min-width: 16rem;
}
.schedule-dialog-component .effective .eff-inp b {
  white-space: nowrap;
}
.schedule-dialog-component .effective b {
  font-size: 0.6rem;
}
.schedule-dialog-component .effective .flat-schedule {
  display: grid;
  grid-template-columns: min-content auto min-content auto min-content auto;
  align-items: center;
  gap: calc(1.5 * var(--form-sections-gap));
  max-width: 23rem;
  width: 100%;
}
.schedule-dialog-component .effective .flat-schedule i {
  font-size: 0.6rem;
  color: var(--grey-250);
  font-style: normal;
  position: relative;
  left: 0.2rem;
}
.schedule-dialog-component .et-table {
  --display: grid;
  --template: 9ch var(--form-column-gap) repeat(3, 1fr) var(--form-column-gap) repeat(3, 1fr);
  --padding: 0 var(--input-padding);
  display: flex;
  flex-direction: column;
  --gap: 0.2rem;
  gap: var(--gap);
}
.schedule-dialog-component .et-table .header i {
  font-size: 0.6rem;
  color: var(--grey-250);
  font-style: normal;
}
.schedule-dialog-component .et-table .grid-template {
  display: var(--display);
  grid-template-columns: var(--template);
  gap: var(--gap);
  padding: 0 var(--input-padding);
}
.schedule-dialog-component .et-table .grid-template > *:nth-child(3), .schedule-dialog-component .et-table .grid-template > *:nth-child(4), .schedule-dialog-component .et-table .grid-template > *:nth-child(5), .schedule-dialog-component .et-table .grid-template > *:nth-child(7), .schedule-dialog-component .et-table .grid-template > *:nth-child(8), .schedule-dialog-component .et-table .grid-template > *:nth-child(9) {
  text-align: center;
}
.schedule-dialog-component .et-table .item {
  height: var(--input-height);
  align-items: center;
  border: var(--item-border);
  background-color: var(--white);
  border-radius: var(--input-radius);
}
.schedule-dialog-component .et-table .item * {
  font-size: 0.6rem;
}
.schedule-dialog-component .time-control {
  display: flex;
  background-color: white;
  border: var(--item-border);
}
.schedule-dialog-component .time-control .title {
  display: flex;
  align-items: center;
  gap: var(--form-column-gap);
}
.schedule-dialog-component .time-control .title b {
  font-size: 0.6rem;
}
.schedule-dialog-component .time-control .title i {
  font-size: 0.6rem;
  color: var(--grey-250);
}
.schedule-dialog-component .time-control .controls {
  display: grid;
  grid-template-columns: 1fr 0.5rem 1fr 0.5rem 1fr;
  gap: var(--form-column-gap);
}
.schedule-dialog-component .time-control .progress-chart-component {
  padding: 0;
}
.schedule-dialog-component .card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.schedule-dialog-component .card-title b {
  font-size: 0.65rem;
}.range-selector-component {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}
.range-selector-component .selection {
  display: grid;
  grid-template-columns: min-content auto;
  align-items: center;
  gap: 0.5rem;
}
.range-selector-component .selection [class*=MuiTypography] {
  font-size: 0.6rem;
  font-weight: bold;
}
.range-selector-component .selection .checkbox-field-component {
  width: min-content;
  white-space: nowrap;
}
.range-selector-component .right-h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.range-selector-component .right-h .input-component {
  /* max-width: 30%; */
}
.range-selector-component .right-h b {
  font-size: 0.6rem;
  white-space: nowrap;
}
.range-selector-component .right-h i {
  background-color: white;
  display: grid;
  place-items: center;
  height: 1.5rem;
  aspect-ratio: 1;
  font-size: 0.8rem;
  color: var(--grey-250);
  border-radius: 0.2rem;
}
.range-selector-component .right-h i.rotated {
  transform: rotate(90deg);
}
.range-selector-component .right-h i.active {
  background-color: var(--black-mid);
  color: white;
}
.range-selector-component .right-h i.active::before {
  color: white;
}
.range-selector-component .right-h .all-selectors {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  min-width: 50%;
  gap: 0.5rem;
}
.range-selector-component .right-h .all-selectors button {
  border-color: var(--grey-250) !important;
}
.range-selector-component .right-h .all-selectors button b {
  /* color: var(--grey-250); */
  font-size: 0.56rem;
}
.range-selector-component .right-h .all-selectors button:hover b {
  color: var(--white);
}
.range-selector-component .right-h .all-selectors button.selectall {
  background-color: var(--green-250);
  border: solid 1px var(--green) !important;
}
.range-selector-component .right-h .all-selectors button.selectall b {
  color: var(--white);
}
.range-selector-component .right-h .all-selectors button.deselectall {
  background-color: var(--black-mid);
}
.range-selector-component .right-h .all-selectors button.deselectall b {
  color: var(--white);
}
.range-selector-component .right-h .all-selectors > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.range-selector-component .ranges-selector {
  display: grid;
  grid-template-columns: 20rem auto;
  gap: 0.5rem;
  height: 100%;
}
.range-selector-component .ranges-selector .left-range-s {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.7rem;
  border-radius: var(--item-border-radius);
  background-color: var(--item-background-color);
}
.range-selector-component .ranges-selector .left-range-s b {
  font-size: 0.6rem;
}
.range-selector-component .ranges-selector .left-range-s .range-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.range-selector-component .ranges-selector .left-range-s .range-list b,
.range-selector-component .ranges-selector .left-range-s .range-list span {
  font-size: 0.54rem;
}
.range-selector-component .ranges-selector .left-range-s .range-list .range {
  display: grid;
  grid-template-columns: 3rem auto 1.5rem;
  align-items: center;
  gap: 0.5rem;
  background-color: white;
  border: var(--item-border);
  border-radius: var(--input-radius);
  min-height: calc(1.3 * var(--input-height));
  padding: 0.3rem var(--item-padding);
}
.range-selector-component .ranges-selector .left-range-s .range-list .range i {
  display: flex;
  justify-content: flex-end;
}
.range-selector-component .ranges-selector .left-range-s .range-list .range > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
  /* justify-content: ; */
  position: relative;
}
.range-selector-component .ranges-selector .left-range-s .range-list .range > div > span {
  color: var(--orange);
  font-size: 0.5rem;
}
.range-selector-component .ranges-selector .left-range-s .range-list .range > div > div {
  display: grid;
  align-items: center;
  grid-template-columns: min-content auto min-content auto;
  gap: 0.4rem;
}
.range-selector-component .ranges-selector .left-range-s .range-list .range > div > div.error input {
  border: solid 1px var(--orange);
}
.range-selector-component .ranges-selector .left-range-s .range-list .range > div > div .input-component {
  position: relative;
  right: 0.1rem;
}
.range-selector-component .ranges-selector .left-range-s .range-list .range > div > div .input-component input {
  min-height: calc(0.8 * var(--input-height));
}
.range-selector-component .ranges-selector .right-range-s {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.7rem;
  border-radius: var(--item-border-radius);
  background-color: var(--item-background-color);
}
.range-selector-component .ranges-selector .right-range-s b {
  font-size: 0.6rem;
}
.range-selector-component .array-container {
  background-color: white;
  border: var(--item-border);
  border-radius: var(--input-radius);
  padding: 0.5rem;
  height: 100%;
  min-height: 7rem;
}
.range-selector-component .array {
  /* FIXME: auto calculate columns */
  display: grid;
  /* grid-template-columns: repeat(7, 1fr); */
  /* gap: 0.2rem 0.5rem; */
  position: relative;
}
.range-selector-component .array .placeholder-component {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.range-selector-component .array .array-item {
  border: solid 1px var(--grey-75);
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
  gap: 0.2rem;
}
.range-selector-component .array .array-item i {
  font-size: 0.9rem;
  color: transparent;
}
.range-selector-component .array .array-item span {
  font-size: 0.6rem;
}
.range-selector-component .array .array-item.active {
  background-color: #E3F9EF;
}
.range-selector-component .array .array-item.active i {
  color: #50D999;
}
.range-selector-component .manual-selector {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1rem;
  border-radius: var(--item-border-radius);
  background-color: var(--item-background-color);
}
.range-selector-component .manual-selector .array-item {
  cursor: pointer;
}.specific-schedule-component {
  display: grid;
  grid-template-columns: 15rem auto;
  gap: var(--form-sections-gap);
}
.specific-schedule-component .serials .serial-list {
  display: flex;
  flex-direction: column;
  padding: 0 0.2rem;
  gap: 0.3rem;
  max-height: 10rem;
  overflow: auto;
}
.specific-schedule-component .serials .serial-list .serial-item {
  border: var(--item-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  background-color: var(--white);
  font-size: 0.6rem;
}
.specific-schedule-component .general-card-component {
  padding: 0.7rem;
}
.specific-schedule-component .general-card-component:nth-child(2) {
  padding: 0.3rem 0.7rem;
}
.specific-schedule-component .schedule .schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.specific-schedule-component .schedule .schedule-header .title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.specific-schedule-component .schedule .schedule-header .title b {
  font-size: 0.6rem;
  margin-right: 0.5rem;
  white-space: nowrap;
}
.specific-schedule-component .schedule .schedule-header .title .checkbox-field-component {
  white-space: nowrap;
}
.specific-schedule-component .schedule .schedule-header .repeat-container {
  height: var(--input-height);
  padding: 0 var(--input-padding);
  border-radius: var(--input-radius);
  display: grid;
  grid-template-columns: min-content auto min-content;
  background-color: var(--white);
  border: var(--item-border);
}
.specific-schedule-component .schedule .schedule-header .repeat-container b, .specific-schedule-component .schedule .schedule-header .repeat-container i {
  color: #29ABE2;
}
.specific-schedule-component .schedule .schedule-header .repeat-container b {
  font-size: 0.56rem;
}
.specific-schedule-component .schedule .schedule-header .repeat-container i {
  font-size: 1rem;
}
.specific-schedule-component .schedule .schedule-header .repeat-container .count {
  font-size: 0.6rem;
  font-weight: bold;
  display: grid;
  place-items: center;
  background-color: #29ABE2;
  color: var(--white);
  border-radius: 0.2rem;
  padding: 0.1rem 0.3rem;
}
.specific-schedule-component .schedule .schedule-grid {
  align-items: center;
  gap: var(--form-sections-gap);
  display: grid;
  grid-template-columns: min-content 1fr 1fr 1fr 2rem 1fr 1fr 1fr 2rem 1fr;
}
.specific-schedule-component .schedule .schedule-grid hr {
  background-color: var(--grey-75);
  height: 1px;
  border: none;
  grid-column: span 10;
}
.specific-schedule-component .schedule .schedule-grid b {
  font-size: 0.6rem;
  margin-right: 0.5rem;
}.ata-dialog-component .dialog-header {
  display: flex;
  align-items: center;
  min-width: 28rem;
  justify-content: space-between;
}
.ata-dialog-component .dialog-header .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ata-dialog-component .ata-list {
  background-color: white;
  border-radius: var(--item-border-radius);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
}
.ata-dialog-component .ata-item {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.4rem;
  min-height: var(--input-height);
  grid-template-columns: 7ch auto 1.5rem;
  background-color: var(--item-background-color);
  border-radius: var(--input-radius);
  border: var(--item-border);
}
.ata-dialog-component .ata-item b {
  font-size: 0.6rem;
}
.ata-dialog-component .ata-item .inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 0.5rem 0;
  width: 20rem;
}
.ata-dialog-component .ata-item i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-250);
}
.ata-dialog-component .ata-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  background-color: var(--white);
  margin-top: var(--form-sections-gap);
  border-radius: var(--input-radius);
}
.ata-dialog-component .ata-container button.filled {
  width: min-content;
  white-space: nowrap;
}
.ata-dialog-component .ata-container .inputs-container {
  display: grid;
  grid-template-columns: min-content auto min-content;
  width: 100%;
  align-items: center;
  gap: var(--form-column-gap);
}
.ata-dialog-component .ata-container .inputs-container i {
  font-style: normal;
  text-decoration: underline;
  color: var(--blue-300);
  font-size: 0.6rem;
}
.ata-dialog-component .ata-container .inputs-container .inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 0.5rem 0;
}#root {
  height: 100dvh;
  width: 100vw;
}

details > summary::-webkit-details-marker {
  display: none;
}

summary:focus {
  outline: none;
}

body [class^=icon-] > [class^=path] {
  font-size: 1em;
  /* Styles for children with class starting with 'path-' */
  font-family: "icomoon" !important;
}

.MuiDialog-container .MuiPaper-root {
  max-width: 99vw;
  margin: 0;
}
@media (max-width: 1024px) {
  .MuiDialog-container .MuiPaper-root {
    max-height: 100dvh;
  }
}
@media (max-width: 1024px) and (orientation: portrait) {
  .MuiDialog-container .MuiDialog-paper {
    min-width: unset !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

.alert-indicator-icon {
  color: var(--white);
  background-color: #407bff;
  font-size: 1rem;
  display: grid;
  place-items: center;
  min-width: 1.64rem;
  max-width: 1.64rem;
  aspect-ratio: 1;
  border-radius: 0.48rem;
}
.alert-indicator-icon[class*=success] {
  background-color: var(--green-500);
}
.alert-indicator-icon[class*=warning] {
  background-color: var(--yellow-100);
}
.alert-indicator-icon[class*=error] {
  background-color: var(--red-400);
}
.alert-indicator-icon[class*=info] {
  background-color: var(--blue-800);
}

input:disabled {
  border: none;
}

button {
  font-size: 0.68rem;
}
button.outlined {
  min-height: 2.28rem;
  min-width: 2.28rem;
  background: transparent;
  border: solid 1px var(--black-mid) !important;
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  color: var(--black-mid);
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0 1rem;
}
button.outlined:hover {
  background-color: var(--black-mid);
  color: var(--white);
}
button.outlined.mid-size {
  min-width: 1.82rem;
  /* min-height: 1.82rem; */
  min-height: var(--input-height);
  padding: 0 0.64rem;
  font-size: 0.6rem;
  border-radius: var(--radius);
  /* border-radius: calc(0.9 * var(--button-radius)); */
  /* border-color: var(--grey-200); */
  border: var(--border);
}
button.outlined.mid-size.round {
  border-radius: 10rem;
}
button.outlined.small-size {
  min-height: 1.64rem;
  min-width: 1.64rem;
  font-size: 0.6rem;
  padding: 0 0.572rem;
  border-radius: 0.32rem;
}
button.outlined.small-size > i {
  font-size: 0.8rem;
}
button.outline {
  min-height: 2.28rem;
  min-width: 2.28rem;
  border: solid 1px var(--black-mid);
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0 1rem;
  color: var(--black-mid);
  background: var(--white);
}
button.outline.mid-size {
  min-width: 1.82rem;
  /* min-height: 1.82rem; */
  min-height: 5.5vh;
  padding: 0 0.64rem;
  font-size: 0.6rem;
  border-radius: var(--radius);
  /* border-radius: calc(0.9 * var(--button-radius)); */
  /* border-color: var(--grey-200); */
  /* border: var(--border); */
}
button.outline.small-size {
  min-height: 1.64rem;
  font-size: 0.6rem;
  padding: 0 0.572rem;
  border-radius: 0.32rem;
}
button.outline.small-size > i {
  font-size: 0.8rem;
}
button.outline:hover {
  border: solid 1px var(--black);
  color: var(--white);
  background: var(--black);
  box-shadow: var(--pop-over-shadow);
}
button.outline.danger {
  background-color: var(--orange-100);
  border: unset;
}
button.outline.danger:hover {
  background-color: var(--red-200);
}
button.filled {
  min-height: var(--input-height);
  min-width: var(--input-height);
  border: solid 1px var(--black-mid);
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0 1rem;
  background-color: var(--black-mid);
  color: var(--white);
}
button.filled > i::before {
  color: var(--white);
}
button.filled.mid-size {
  min-width: 1.8rem;
  min-height: 1.8rem;
  /* min-height: 5.5vh; */
  padding: 0 0.64rem;
  font-size: 0.6rem;
  border-radius: var(--radius);
  /* border-radius: calc(0.9 * var(--button-radius)); */
  /* border-color: var(--grey-200); */
  /* border: var(--border); */
}
button.filled.small-size {
  min-height: 1.64rem;
  font-size: 0.6rem;
  padding: 0 0.572rem;
  border-radius: 0.32rem;
}
button.filled.small-size > i {
  font-size: 0.8rem;
}
button.filled.tiny {
  border-radius: 0.28rem;
  min-height: 1.57rem;
  padding: 0 0.4rem;
  gap: 0.4rem;
}
button.filled.tiny > span {
  font-size: 0.52rem;
}
button.filled.tiny > i {
  font-size: 0.7rem !important;
}
button.filled:hover {
  border: solid 1px var(--black);
  /* color: var(--black-mid); */
  background: var(--black);
  box-shadow: var(--pop-over-shadow);
}
button.filled.danger {
  background-color: var(--orange-100);
  border: unset;
}
button.filled.danger:hover {
  background-color: var(--red-200);
}
button.filled.blueButton {
  background-color: #29ABE2 !important;
  border: 1px solid #29ABE2 !important;
}
button.round {
  border-radius: 10rem;
}
button.iconTextButton {
  /* min-width: 95px; */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
button.iconTextButton > i {
  font-size: 1rem;
}
button.icon {
  padding: 0 !important;
  transition: all 0.3s;
  color: var(--black-mid);
}
button.icon.mid-size {
  min-width: 1.8rem;
  max-width: 1.8rem;
  max-height: 1.8rem;
  min-height: 1.8rem;
}
button.icon.tiny {
  min-width: 1.3rem;
  max-width: 1.3rem;
  max-height: 1.3rem;
  min-height: 1.3rem;
  border-radius: 0.3rem;
}
button.icon.tiny > i {
  font-size: 0.6rem;
}
button.icon:hover {
  background-color: var(--black-mid);
  color: var(--white);
}
button.icon > i {
  font-size: 0.8rem;
  line-height: normal;
}
button.transparent {
  background: none;
  border: none;
}

.hidden-element {
  opacity: 0;
}

.search-bar-input {
  position: relative;
  display: flex;
  align-items: center;
}
.search-bar-input > i {
  font-size: 1rem;
  position: absolute;
  right: 0.5rem;
}
.search-bar-input > input {
  width: 100%;
  /* position: relative; */
  min-height: var(--input-height);
  border-radius: var(--input-radius);
  border: solid 1px var(--input-border);
  padding: 0 28px 0 12px;
  font-size: var(--input-font-size);
  color: var(--black-mid);
}
.search-bar-input > input:focus-visible {
  outline: none;
}
.search-bar-input > input::placeholder {
  color: var(--black-mid);
}

.ribbons-container {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  /* font-size: 10rem; */
  font-weight: bold;
  color: #fff;
  background-color: var(--blue-300);
}
.ribbon.small {
  font-size: 0.52rem !important;
  font-weight: normal !important;
  border-radius: var(--input-radius) 0 var(--input-radius) 0;
}

/* .ribbon {
  --r: .4em;
  --c: #FA6900;

  position: absolute;
  top: 20px;
  left: calc(-1*var(--r));
  line-height: 1.8; 
  padding: 0 .5em calc(2*var(--r));
  border-radius: var(--r) 0 0 var(--r);
  background: 
    radial-gradient(100% 50% at left,var(--c) 98%,#0000 101%)
     100% 0/.5lh calc(100% - 2*var(--r)),
    radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 
     0 100%/var(--r) calc(2*var(--r)),
    conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)),#0000 25%,var(--c) 0)
     0 0/calc(101% - .5lh) 100%;
  background-repeat: no-repeat;   
} */
.ribbon {
  position: relative;
  top: 0;
  left: 0;
  padding: 0 0.5rem;
  font-size: var(--p-size);
  color: var(--white);
  border-radius: calc(0.5rem + 1px) 0 calc(0.5rem + 1px) 0;
  display: grid;
  place-items: center;
  font-weight: 500;
  z-index: 3;
}
.ribbon:not(:last-child) {
  padding-left: 0.7rem;
}

.session-exp-modal-cont {
  /* background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(100px); */
  width: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* gap: .5rem; */
  /* background-color: #fff; */
  height: 30vh;
  padding: 1rem 0.5rem;
}
@media (max-width: 1024px) and (orientation: portrait) {
  .session-exp-modal-cont {
    width: 95vw;
  }
}

.session-exp-modal-cont > .session-exp-modal-cont-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  width: 90%;
}

.session-exp-modal-cont-header > button {
  height: 2rem;
  width: 2rem;
  border-radius: 0.5rem;
  outline: none;
  background-color: #ffa724;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-exp-modal-cont-header > button > i {
  color: var(--white);
  font-size: 1rem;
}

.session-exp-modal-cont-header > p {
  color: var(--black-mid);
  font-weight: 700;
  font-size: calc(var(--p-size) + 0.3rem);
}

.session-exp-modal-cont > div {
  width: 90%;
  font-size: calc(var(--p-size) + 0.1rem);
  font-weight: 500;
  color: var(--black-mid);
  height: 5rem;
}

.session-exp-modal-cont > button {
  background-color: var(--black-mid);
  width: 7rem;
  height: 2rem;
  border-radius: var(--radius);
  color: var(--white);
  border: none;
  outline: none;
  cursor: pointer;
}

::-webkit-details-marker {
  display: none;
}

/* general purpose simple placeholder */
.placeholder-component {
  display: flex;
  justify-content: center;
  align-items: center;
}
.placeholder-component i {
  background-color: var(--white-100);
  color: var(--grey-200);
  font-size: 0.7rem;
  min-height: var(--input-height);
  border-radius: var(--input-radius);
  display: grid;
  width: max-content;
  padding: var(--input-padding);
  place-items: center;
  white-space: nowrap;
}
.placeholder-component.white > i {
  background-color: var(--white);
}
.placeholder-component.small > i {
  font-size: 0.6rem;
}
.placeholder-component.transparent > i {
  background-color: transparent !important;
  color: inherit;
}

.dashboard-config-container {
  display: flex;
  width: 100%;
  flex-direction: row-reverse;
}@font-face {
  font-family: 'icomoon';
  src:  url('/assets/icomoon-DwN_02qi.eot?an189h');
  src:  url('/assets/icomoon-DwN_02qi.eot?an189h#iefix') format('embedded-opentype'),
    url('/assets/icomoon-Cc2jftsa.ttf?an189h') format('truetype'),
    url('/assets/icomoon-ByNxwQ5y.woff?an189h') format('woff'),
    url('/assets/icomoon-C9IPhQEm.svg?an189h#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-business:before {
  content: "\e9ac";
}

.icon-general_info:before {
  content: "\e977";
}

.icon-download:before {
  content: "\e99d";
}

.icon-Sorting_button:before {
  content: "\e99a";
}

.icon-Filter_manager:before {
  content: "\e999";
}

.icon-qr-code:before {
  content: "\e998";
}

.icon-icon_Received:before {
  content: "\e996";
}

.icon-certificate:before {
  content: "\e997";
}

.icon-upload:before {
  content: "\e992";
}

.icon-package-intake:before {
  content: "\e993";
}

.icon-broken-box:before {
  content: "\e994";
}

.icon-eye:before {
  content: "\e995";
}

.icon-add-photo:before {
  content: "\e991";
}

.icon-terms-condition:before {
  content: "\e990";
}

.icon-quote-track:before {
  content: "\e98f";
}

.icon-new-save:before {
  content: "\e98e";
}

.icon-approve_order:before {
  content: "\e98d";
}

.icon-confirmation:before {
  content: "\e98a";
  color: #00ce88;
}

.icon-check-3:before {
  content: "\e98b";
  color: #52d69b;
}

.icon-quote:before {
  content: "\e98c";
}

.icon-check-2:before {
  content: "\e989";
}

.icon-menu:before {
  content: "\e988";
}

.icon-supply-chain:before {
  content: "\e986";
}

.icon-airport-new:before {
  content: "\e987";
}

.icon-general_info_orders:before {
  content: "\e985";
  color: #808080;
}

.icon-cart_stock:before {
  content: "\e984";
  color: #808080;
}

.icon-active_icon_timeLine_stepper .path1:before {
  content: "\e981";
  color: rgb(255, 255, 255);
}

.icon-active_icon_timeLine_stepper .path2:before {
  content: "\e982";
  margin-left: -1em;
  color: rgb(41, 171, 226);
}

.icon-active_icon_timeLine_stepper .path3:before {
  content: "\e983";
  margin-left: -1em;
  color: rgb(41, 171, 226);
}

.icon-hands_greeting_icon:before {
  content: "\e97c";
  color: #808080;
}

.icon-inProgress_icon:before {
  content: "\e97d";
}

.icon-cart_icon:before {
  content: "\e97e";
  color: #808080;
}

.icon-service_icon:before {
  content: "\e97f";
  color: #808080;
}

.icon-tools_icon:before {
  content: "\e980";
  color: #808080;
}

.icon-return:before {
  content: "\e97b";
  color: #818181;
}

.icon-repair:before {
  content: "\e978";
}

.icon-map:before {
  content: "\e979";
}

.icon-favorite:before {
  content: "\e97a";
}

.icon-status-draft:before {
  content: "\e970";
  color: #158baa;
}

.icon-configuration_module_icon:before {
  content: "\e96b";
}

.icon-custom_dashboard_icon:before {
  content: "\e96c";
}

.icon-customers_module_icon:before {
  content: "\e96d";
}

.icon-engineering_module_icon:before {
  content: "\e96e";
}

.icon-finance_module_icon:before {
  content: "\e96f";
}

.icon-maintenance_module_icon:before {
  content: "\e971";
}

.icon-planning_module_icon:before {
  content: "\e972";
}

.icon-reliability_module_icon:before {
  content: "\e973";
}

.icon-shop_maintenance_module_icon:before {
  content: "\e974";
}

.icon-store_module_icon:before {
  content: "\e975";
}

.icon-technical_records_module_icon:before {
  content: "\e976";
}

.icon-pinn:before {
  content: "\e96a";
  color: #707070;
}

.icon-required_inspeccion .path1:before {
  content: "\e94c";
  color: rgb(41, 171, 226);
}

.icon-required_inspeccion .path2:before {
  content: "\e967";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.icon-required_inspeccion .path3:before {
  content: "\e968";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.icon-unserviceable .path1:before {
  content: "\e964";
  color: rgb(255, 110, 110);
}

.icon-unserviceable .path2:before {
  content: "\e965";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.icon-unserviceable .path3:before {
  content: "\e966";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.icon-icon_view_childs:before {
  content: "\e963";
  color: #858585;
}

.icon-hyphen:before {
  content: "\e962";
}

.icon-issued2:before {
  content: "\e960";
}

.icon-issued:before {
  content: "\e961";
}

.icon-hierarchy-view:before {
  content: "\e95e";
  color: #707070;
}

.icon-tabular-view:before {
  content: "\e95f";
  color: #707070;
}

.icon-issue:before {
  content: "\e95d";
}

.icon-filter:before {
  content: "\e95c";
}

.icon-stock:before {
  content: "\e95b";
}

.icon-finding_error_icon:before {
  content: "\e959";
  color: #f16f6f;
}

.icon-task_icon_partRequest:before {
  content: "\e95a";
  color: #656565;
}

.icon-part_request_icon:before {
  content: "\e958";
}

.icon-tabs:before {
  content: "\e955";
}

.icon-outgoing:before {
  content: "\e956";
  color: #ff5d57;
}

.icon-incoming:before {
  content: "\e957";
  color: #50d999;
}

.icon-list:before {
  content: "\e954";
  color: #707070;
}

.icon-info-text:before {
  content: "\e953";
  color: #29abe2;
}

.icon-expandable:before {
  content: "\e950";
}

.icon-reiparable:before {
  content: "\e951";
}

.icon-kits:before {
  content: "\e952";
}

.icon-arrowdown:before {
  content: "\e94e";
}

.icon-arrowup:before {
  content: "\e94f";
}

.icon-home_icon:before {
  content: "\e94d";
}

.icon-new-apu:before {
  content: "\e94a";
  color: #707070;
}

.icon-new-landing:before {
  content: "\e94b";
  color: #707070;
}

.icon-notes:before {
  content: "\e948";
}

.icon-draggable:before {
  content: "\e949";
}

.icon-delivery:before {
  content: "\e944";
}

.icon-landing:before {
  content: "\e945";
}

.icon-apu:before {
  content: "\e946";
}

.icon-engine:before {
  content: "\e947";
}

.icon-light-cross:before {
  content: "\e943";
}

.icon-error:before {
  content: "\e93f";
}

.icon-info:before {
  content: "\e940";
}

.icon-success:before {
  content: "\e941";
}

.icon-warning:before {
  content: "\e942";
}

.icon-add-aircraft:before {
  content: "\e93c";
}

.icon-aircrafts:before {
  content: "\e93d";
}

.icon-delete-new:before {
  content: "\e93e";
}

.icon-flight-info:before {
  content: "\e900";
}

.icon-flight-total:before {
  content: "\e901";
}

.icon-flight-hours:before {
  content: "\e902";
}

.icon-flight-cycles:before {
  content: "\e903";
}

.icon-total-breaks:before {
  content: "\e904";
}

.icon-date:before {
  content: "\e905";
}

.icon-airport:before {
  content: "\e935";
}

.icon-moon:before {
  content: "\e934";
}

.icon-aircraft-children:before {
  content: "\e933";
}

.icon-flight:before {
  content: "\e932";
}

.icon-aircraft:before {
  content: "\e931";
}

.icon-two-way:before {
  content: "\e92f";
}

.icon-one-way:before {
  content: "\e930";
}

.icon-add-new:before {
  content: "\e92e";
}

.icon-locations:before {
  content: "\e92d";
}

.icon-edit:before {
  content: "\e92c";
}

.icon-gear:before {
  content: "\e92b";
}

.icon-notification:before {
  content: "\e928";
}

.icon-help:before {
  content: "\e929";
}

.icon-screen:before {
  content: "\e92a";
}

.icon-prints:before {
  content: "\e920";
}

.icon-receiving:before {
  content: "\e921";
}

.icon-dock-receiving:before {
  content: "\e922";
}

.icon-inventory-count:before {
  content: "\e923";
}

.icon-picklist-magements:before {
  content: "\e924";
}

.icon-inventory-management:before {
  content: "\e925";
}

.icon-packing-and-shipping:before {
  content: "\e926";
}

.icon-reports:before {
  content: "\e927";
}

.icon-maintenance:before {
  content: "\e916";
}

.icon-stores:before {
  content: "\e917";
}

.icon-engineering:before {
  content: "\e918";
}

.icon-custom-dashboard:before {
  content: "\e919";
}

.icon-finance:before {
  content: "\e91a";
}

.icon-planning:before {
  content: "\e91b";
}

.icon-customers:before {
  content: "\e91c";
}

.icon-technical-records:before {
  content: "\e91d";
}

.icon-reliability:before {
  content: "\e91e";
}

.icon-shop-maintenance:before {
  content: "\e91f";
}

.icon-user-key:before {
  content: "\e913";
}

.icon-user:before {
  content: "\e914";
}

.icon-apps:before {
  content: "\e915";
}

.icon-coloredwarning .path1:before {
  content: "\e911";
  color: rgb(255, 213, 0);
}

.icon-coloredwarning .path2:before {
  content: "\e912";
  margin-left: -1em;
  color: rgb(0, 0, 0);
}

.icon-search:before {
  content: "\e910";
}

.icon-bin:before {
  content: "\e90e";
}

.icon-save:before {
  content: "\e90f";
}

.icon-arrow-down:before {
  content: "\e90d";
}

.icon-cross:before {
  content: "\e90c";
}

.icon-receive:before {
  content: "\e908";
}

.icon-loop:before {
  content: "\e909";
}

.icon-report-checked:before {
  content: "\e90a";
}

.icon-airplane-gear:before {
  content: "\e90b";
}

.icon-warehouse:before {
  content: "\e906";
}

.icon-more-horizontal:before {
  content: "\e907";
}

.icon-settings:before {
  content: "\e936";
}

.icon-windows:before {
  content: "\e937";
}

.icon-default:before {
  content: "\e938";
}

.icon-consumable:before {
  content: "\e939";
}

.icon-part:before {
  content: "\e93a";
}

.icon-airplane-installed:before {
  content: "\e93b";
}

.icon-globe-search:before {
  content: "\e99b";
}

.icon-switch:before {
  content: "\e99c";
}

.icon-pinned:before {
  content: "\e969";
}

.icon-add-panel:before {
  content: "\e99e";
}

.icon-add-configure-panel:before {
  content: "\e99f";
}

.icon-trash:before {
  content: "\e9a0";
}

.icon-tab-config:before {
  content: "\e9a1";
}

.icon-more-vertical:before {
  content: "\e9a2";
}

.icon-double-arrow:before {
  content: "\e9a3";
}

.icon-table:before {
  content: "\e9a4";
}

.icon-Pie:before {
  content: "\e9a5";
}

.icon-heat-map:before {
  content: "\e9a6";
}

.icon-display-form:before {
  content: "\e9a7";
}

.icon-xy-charts:before {
  content: "\e9a8";
}

.icon-recents:before {
  content: "\e9a9";
}

.icon-transactions:before {
  content: "\e9aa";
}

.icon-file-icon:before {
  content: "\e9ab";
}

.icon-doc-alert:before {
  content: "\e9ad";
}

.icon-box-transfer:before {
  content: "\e9ae";
}

.icon-calendar-time:before {
  content: "\e9af";
}

.icon-box-check:before {
  content: "\e9b0";
}

.icon-delivery-time:before {
  content: "\e9b1";
}

.icon-chat:before {
  content: "\e9b2";
}

.icon-awb:before {
  content: "\e9b3";
}

.icon-dragdrop:before {
  content: "\e9b4";
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:focus {
  outline: 1px solid var(--grey-100);
}

:root {
  /* css variables for colors */
  --white: #fff;
  --white-100: #fafafa;
  --dark-teal: #055865;
  --black-200: #00000099;
  --black: #000000;
  --black-mid: #333333;
  --green: #00ff97;
  --green-extra-light: #29e26d24;
  --green-25: #b9d8df;
  --green-50: #abffdd;
  --green-100: #40e492;
  --green-150: #30db98;
  --green-200: #29e286;
  --green-250: #50d999;
  --green-250-16: #50d99928;
  --green-350: #35e28b;
  --green-300: #22b573;
  --green-400: #2d9e71;
  --green-500: #3fcc8a;
  --green-550: #3fcc8a4d;
  --green-600: #d9fff0;
  --grey: #cccccc;
  --disabled-input-bg: #efefef;
  --grey-25: #efefef;
  --grey-50: #e6e6e6;
  --grey-75: #e5e5e5;
  --grey-100: #999999;
  --grey-150: #93a2a7;
  --grey-200: #808080;
  --grey-250: #7d7d7d;
  --grey-300: #707070;
  --grey-400: #666666;
  --grey-500: #4e4e4e;
  --grey-600: #b2b2b2;
  --blue: #0063f1;
  --blue-50: #29abe25c;
  --blue-100: #29abe280;
  --blue-150: #158baa;
  --blue-200: #008da4;
  --blue-250: #1eb0d5;
  --blue-300: #29abe2;
  --blue-400: #4274c7;
  --blue-500: #effcff;
  --blue-600: #aeeeff;
  --blue-700: #abc2cc;
  --blue-800: #407bff;
  --blue-850: #407bff4d;
  --blue-900: #B9D8DF;
  --orange: #ff6554;
  --orange-100: #f75b5c;
  --orange-200: #fc6555;
  --orange-250: #ff8000;
  --orange-300: #ffebe1;
  --purple: #b6bfff;
  --purple-100: #7374c7;
  --purple-150: #7396de;
  --purble-200: #ecf1ff;
  --pink: #f8c6c6;
  --pink-50: #ffc1c3;
  --red-50: #ff5d57;
  --red-100: #e64f69;
  --red-200: #ff5353;
  --red-300: #f16f6f;
  --red-400: #ff6464;
  --red-450: #ff64644d;
  --input-error: #ff7e7e;
  --aqua: #25c2c0;
  --warn: #f75b5c;
  --yellow-50: #ffecc1;
  --yellow-100: #ffa724;
  --yellow-150: #ffa7244d;
  --yellow-200: #fff8e8;
  --yellow-250: #dba741;
  --yellow-300: #dfb050;
  --yellow-350: #ffbb30;
  --yellow-500: #c99936;

  /* Hierarchy tree colors */
  --hierarchy-0: #29abe2;
  --hierarchy-1: #50d999;
  --hierarchy-2: #e29e29;
  --hierarchy-3: #bd68f6;
  --hierarchy-4: #f66868;
  --hierarchy-5: #a7d11a;

  --border-color: #f1f1f1;

  /* variables for sizing */
  font-size: clamp(2vh, 2.61vh, 5vh);

  --title-size: 1.3rem;
  --subtitle-size: 1rem;
  --p-size: 0.56rem;
  --input-height: 2rem;
  --input-padding: 0.56rem;
  --input-radius: 0.36rem;
  --input-font-size: 0.63rem;
  --input-active-label-font-size: 0.52rem;
  --input-border: #7d7d7d8c;
  --input-color: #000000;

  --item-border: solid 1px var(--grey-50);
  --item-border-radius: 0.6rem;
  --item-padding: 0.48rem;
  --item-min-height: 2.72rem;
  --item-background-color: var(--white-100);
  --item-display: flex;
  --item-gap: 1rem;
  /* --button-radius: 0.5rem; */
  --button-radius: var(--radius);

  --app-small-size: 1.85rem;
  --app-small-radius: 0.4rem;
  --app-small-icon-font-size: 0.45rem;
  --app-size: 2.58rem;
  --app-radius: 0.5rem;
  --app-icon-font-size: 1.3rem;
  --checkbox-radius: 0.24rem;

  --form-column-gap: 1.2rem;
  --form-row-gap: 1.27rem;
  --form-sections-gap: 0.48rem;

  /* others */

  /* not all elements  use this variables  beacuse can change depending the element. example :  some elements use a border radius greater than the radius variable , this and the behind , they are just a base and the most common styles in the app */
  --transition: all 0.3s ease-in-out;
  /*use to apply the same transition in all elements than have transition property*/
  --box-shadow: 0px 7px 40px #00000020;
  --pop-over-shadow: 0px 3px 6px #00000029;
  --button-shadow: 0 5px 5px #33333355;
  /*use to apply the same box-shadow on the elements in the app ( not all elements with box-shadow have this variable because can vary*/
  --border: 1px solid var(--border-color);
  /*apply in borders*/
  --radius: 0.36rem;
  --padding: 0.5rem;
  /*apply to get the same padding*/
  --gap: 0.5rem;
  --gap-2: 1rem;
}

/* bg-color variables */

.bg-white {
  background-color: var(--white);
}

.bg-white-100 {
  background-color: var(--white-100);
}

.bg-dark-teal {
  background-color: var(--dark-teal);
}

.bg-black {
  background-color: var(--black);
}

.bg-black-mid {
  background-color: var(--black-mid);
}

.bg-green {
  background-color: var(--green);
}

.bg-green-extra-light {
  background-color: var(--green-extra-light);
}

.bg-green-100 {
  background-color: var(--green-100);
}

.bg-green-200 {
  background-color: var(--green-200);
}

.bg-green-300 {
  background-color: var(--green-300);
}

.bg-grey {
  background-color: var(--grey);
}

.bg-grey-100 {
  background-color: var(--grey-100);
}

.bg-grey-200 {
  background-color: var(--grey-200);
}

.bg-grey-300 {
  background-color: var(--green-300);
}

.bg-grey-400 {
  background-color: var(--grey-400);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-blue-100 {
  background-color: var(--blue-100);
}

.bg-blue-200 {
  background-color: var(--blue-200);
}

.bg-blue-300 {
  background-color: var(--blue-300);
}

.bg-blue-400 {
  background-color: var(--blue-400);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-orange-100 {
  background-color: var(--orange-100);
}

.bg-orange-200 {
  background-color: var(--orange-200);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-purple-100 {
  background-color: var(--purple-100);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-aqua {
  background-color: var(--aqua);
}

.bg-warn {
  background-color: var(--warn);
}

/* text-color variables */

.txt-white {
  color: var(--white);
}

.txt-white-100 {
  color: var(--white-100);
}

.txt-dark-teal {
  color: var(--dark-teal);
}

.txt-black {
  color: var(--black);
}

.txt-black-mid {
  color: var(--black-mid);
}

.txt-green {
  color: var(--green);
}

.txt-green-extra-light {
  color: var(--green-extra-light);
}

.txt-green-100 {
  color: var(--green-100);
}

.txt-green-200 {
  color: var(--green-200);
}

.txt-green-300 {
  color: var(--green-300);
}

.txt-grey {
  color: var(--grey);
}

.txt-grey-100 {
  color: var(--grey-100);
}

.txt-grey-200 {
  color: var(--grey-200);
}

.txt-grey-300 {
  color: var(--green-300);
}

.txt-grey-400 {
  color: var(--grey-400);
}

.txt-blue {
  color: var(--blue);
}

.txt-blue-100 {
  color: var(--blue-100);
}

.txt-blue-200 {
  color: var(--blue-200);
}

.txt-blue-300 {
  color: var(--blue-300);
}

.txt-blue-400 {
  color: var(--blue-400);
}

.txt-orange {
  color: var(--orange);
}

.txt-orange-100 {
  color: var(--orange-100);
}

.txt-orange-200 {
  color: var(--orange-200);
}

.txt-purple {
  color: var(--purple);
}

.txt-purple-100 {
  color: var(--purple-100);
}

.txt-pink {
  color: var(--pink);
}

.txt-aqua {
  color: var(--aqua);
}

.txt-warn {
  color: var(--warn);
}

h1 {
  font-size: var(--title-size);
}

h2,
h3 {
  font-size: var(--subtitle-size);
}

p {
  font-size: var(--p-size);
}

.size-title {
  font-size: var(--title-size);
}

.size-subtitle {
  font-size: var(--subtitle-size);
}

.size-p {
  font-size: var(--p-size);
}

.padding {
  padding: var(--padding);
}

.border {
  border: var(--border);
}

.shadow {
  box-shadow: var(--box-shadow);
}

.radius {
  border-radius: var(--radius);
}

.gap {
  gap: var(--gap);
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 98%;
}

::-webkit-scrollbar-thumb {
  background-color: var(--grey);
  border-radius: 1rem;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 5px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

#accordion-summary-filtersApplied .css-eqpfi5-MuiAccordionSummary-content {
  height: 6.5vh;
  display: flex;
  align-items: center;
  gap: calc(var(--gap) + 0.3rem);
}

/* Cambiar el fondo del tooltip */

.custom-tooltip .MuiTooltip-tooltip {
  background-color: black !important;
  color: white !important;
  font-size: 14px;
  border-radius: 5px;
  padding: 8px 12px;
}

.custom-tooltip .MuiTooltip-arrow {
  color: black !important;
}

/* use when you newd that an item or element dont pass the top of the parent container */

.item-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* use when an item is open */

.item-open-header {
  background: var(--blue-500);
  border: 1px solid var(--green-25);
}

/* use when an item is closed */

.item-closed-header {
  background-color: var(--item-background-color);
  border: var(--item-border);
}

.item-status-tag {
  height: 1.7rem;
  width: 7rem;
  /* min-width: 6rem; */
  max-width: 10rem;
  border-radius: 0.5rem;
  position: absolute;
  right: 0.38rem;
  font-size: var(--p-size);
  font-weight: 400;
}

.item-status-tag-green {
  border: 1px solid #52d69b;
  background-color: #e4fff3;
  color: #00ce88;
}

.item-status-tag-orange {
  border: 1px solid #dfb050;
  background-color: #fff5df;
  color: #dfb050;
}

.item-status-tag-blue {
  border: 1px solid var(--blue-300);
  background-color: #effcff;
  color: var(--blue-300);
}

.item-status-tag-red {
  border: 1px solid #f16f6f;
  background-color: #ffebeb;
  color: #f16f6f;
}

.item-status-tag-purple {
  border: 1px solid #9d84cc;
  background-color: #f4f3ff;
  color: #9d84cc;
}

.container-check-checked {
  border: 1px solid var(--green-250);
  background-color: #dff5eb;
  border-radius: var(--radius);
  height: 100%;
  padding-left: var(--padding);
}

.item-selected {
  border: 1px solid var(--green-250);
  background-color: #dff5eb;
}

/* Tooltip redondo reutilizable */

.rounded-tooltip {
  color: #fff !important;
  border-radius: 1rem !important;
  font-size: 12px;
  text-align: center;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100 !important;
}

/* Ocultar solo el icono de la flecha, pero mantener el área de resize y el cursor */

.grid-stack .ui-icon {
  display: none !important;
  opacity: 0 !important;
}

.grid-stack .ui-resizable-handle {
  background: transparent !important;
  opacity: 0.01 !important;
}

.grid-stack .ui-resizable-n {
  cursor: n-resize !important;
}

.grid-stack .ui-resizable-e {
  cursor: e-resize !important;
}

.grid-stack .ui-resizable-s {
  cursor: s-resize !important;
}

.grid-stack .ui-resizable-w {
  cursor: w-resize !important;
}

.grid-stack .ui-resizable-ne {
  cursor: ne-resize !important;
}

.grid-stack .ui-resizable-nw {
  cursor: nw-resize !important;
}

.grid-stack .ui-resizable-se {
  cursor: se-resize !important;
}

.grid-stack .ui-resizable-sw {
  cursor: sw-resize !important;
}
/* roboto-cyrillic-ext-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-cyrillic-ext-300-normal-CUPJdUZp.woff2) format('woff2'), url(/assets/roboto-cyrillic-ext-300-normal-D2-2MTar.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-cyrillic-300-normal-BoeCr7ev.woff2) format('woff2'), url(/assets/roboto-cyrillic-300-normal-Cb01H779.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(data:font/woff2;base64,d09GMgABAAAAAA5IABIAAAAAGuQAAA3lAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhw0BmA/U1RBVFoAXgiBfgmfBhEMCoJsgnMLFAABNgIkAyQEIAWFDgcgDIVOG5oZsxEVbBxAII6nAfzXB9wYAjW0/xjhZUReItjgvOppioDbX2Nvjwhbwzmvg8YaOKyTn16iEX1dG9v8n64gjJBk1v//78rf51wUR4grYE/oitg96LemArM7cQfGqwf7D/DXm/J7U03SrdK76UgZvEmHtGe3IlItRS0OwE0BREnOHm6p5/Wb3C4fqXRu1ai5BFJEj5cnogLQAwcKrGsjfFHpTKVcEHBbSYjujnuJUKh3n1R8IhPCEgxsUNWacx9C9bHYY3Sq1odZiTPiVPGsJ835mrMEjY/7pvbSWcn6p19KSTFKB6whGEI8s96zZsdy0a9r53yl+i7trkupNrLvB5WK8ngeb62jTgMDMAyg0U0saj/KYKuaxOMW8Wo6uAibFLc9loIAuAgcwWyK2oCNuqtNAwePrGKsJFkWRQCwcYcucn6h+lNXL5mH2jOXTJ8bHZg3edkCTdvB985SlFMZFKBOqo4ANUhnxHuYwQBiH+wTvQjGhsTjQ+a3bTBKowaYYZxkeKBzgl+uhwoBeBCg8hO3FKY+Thl45bRls4iAlTNnLSOA/hXmcxCD0QjF0BBgMLWwytI8QYrKYMg3m2PaBbgkXSi9U2K4y4bZRVMtz4KH86dicQcM6Emjf/F1NPPzJ/ytaTMaKFIhCuNQ9jgGRD+P1vjoH46L8vRPAJ7yrDP3zscdk+aQ9jZPuoW+3EkfeMCJPsfR+cPdyMEmd5232xGPuaEEh7hLrsUuF3w6dMbDkvjyhouIuWc8XhvtVaO9/f0+cMAJdzzg6V6j/+W7IThepXUgH53LXkQobatdDuf8kOrFSpDAVKzCemxmeH/NP/Oiuz70ac2wFjsdcsYVD84e5PrDxf/Hjx3dvm3rls2b0qmNr7/vfe7rPPZtXeZpHPqubeqqLPIsTeIoDHzPdWzLNHRNlSVR4DmvRr/X7bSL99/KtjYbaXTaN3wz32o2kmh30mh7LEqhAwbiqyBuCP7Q6v7I5i2ltVOs4UOSx1NhJlORkavgpDKBFvNy/TH3h6WlXCbNiPZNIIameog3uXPgyB0Gm333Cwzp2NYbSrJh2IsyAQnJzCIE3LivImXeXMXPAeLGMaYY1mzn+lQ0tTOZ+Jtng/tiKbXBQXVuMvU3VZ9zTXOqtPD8wnUqxsEgWjKu0Zm/zX8qD68igoanAysNQW9WsJ0jyy/9UdKQNTlXR89J1x+JdbMRWdexcXpfHv30vrK0dW4C777K/sJp6cZfu9iELzDg+b5X4NAAb3xBMiLtj7zmiFO1L/dTXlXcZ7yqSXC/CQ8hKcfloTKvGbKKc7Ky4FAyZ+Zy0EKZXu6iB3BKcCsGSUTtvNXl1urlxuXm5c7S7pKKBOZfxgv+RUqslPzqpt2UgpQ/Gqkp36efUzUJq36qTA+VzXsT6+7CIncVje/5zIrbJkv7q6vdpFKostfBEzQbeeSl4aZd8OfAEEBj3ikGgWDqY/DHln7UK+1czbXqvxEBCbI8V+xi4QuyKEfccJy89q430tCoeZ3j7PhkIOhWXHgqB4njLpyqbsljijfpKGWFSBpeFTi+F4ojV96JVH0nPU/OIxVrO7Bn82s4s2vsnovkwtNg3AAqff1b55zTK89kKk+J4A/snVq4AK+CzwFydq2i1LXW7pW02aA8YrRpNRv9YfQ/NYOnllwwQ5JpETq78m6ownlZSyvWgn5s41bLcUV5b4eXofKqMHdaJDPxpoM40Az+EBICKjlNypLv60xKK+6fZzy20b+UyVQFRZVTElR+Hmk1G6mDpGd1TDKbXerpjmoRLK29ZOp5Cnx0eP627t3MC2XHknBPpU771JbhnM9UFEdh3k7EyGqauYbyeJGwc0d4dRonCBS0JPcEEhAOPI8i4d028I0t4gs8JE/0lpiE30VjjsI8Z8heKiA1JfEyPuaEFqDa0GaVZFJVAAPd/hBUvbVkp0o7SPeKtLrCQKyk7ZFYYMS+BBNobzUYk9JIDcg78p6BTU2rWKkGLUIDo8HWDmzCcGdpyQWprE8Q9JxRGHsrPjdnjRBcnG+pdkj9h+kBlRaoIxmWML1AUhRkCMrQ7ibxZBYZDnN4XmfkNeJHaVk8RBJnVM7akbjIn+S8sZo1TfxclTQOhPHeQHEg+eIdSfUDxmcJpKtbb1hTRgVVdz0o5JB4WXfCnTQbxKGFlqGjuxjzTRy//g60OJ9aaBg2mV5JQIVFgkyMBdS8xQY8OhSQAxbRtrSQlZVAkNS6vhb8RCsJ4wTeL7F82S57rKAgc9q6wNODZfYdo1h05LtggTmywECWGhJrmDQoV+dPJwwfiHixEWikLiasp2IPaEjmr+KXIBkB4zH4geOXUHX07JqF7zlOnCuCmMqIS4sXOZPR9Di/6Q7CliLPka4ZHSixFzHKjbwxq085v+TBZh096z19NjfCDgme90zT92A6zCrPOOO1UdwRVadJ1XAfI/XUas16XRGKlwZCpZGp9pWfe7bcGyEwuxOlBScF1JZBcQI07qSJkcQDzToYKuUy/AsrbfLhFVoLI6d1UDkgvUK2uyNTWab62dfz/IEFuqlTmhwClrJe2lhhGKiyq2rFXSa0sbJaxSkiGtyQxR+oGN605jwgoHwDNGidwnb+Dc4HIbOhEExxImvNekR6AN54lpcrqdmDTJaXpHPP00L9OpHM8NaI4/d6qXN9wM1/BJsjGJ5Kqv0zu84ACfViQvU1mVhjYqfq6myTnOnl7+aNkDJAi6Kkm6uj6L8bDuMINPrgMSRGAr2tsbCbtojZf7aYi70JDVyKOkf+kgqwaOlCUGWB9GVfZqkGUovU325iV9Sqg23KIDj26ai3YWA16SHa2njXU8AtyWx/B9A29wD4yS7loyIQ4DOB9abZkMxGD7vuBkZ2T6amq7tpQpguMWsHnNiH4aC1ViNY9gSKn/4fd+5F4hxP3QsEpvUKzLEP7DMLDX9gmBHM6r7snNifyFvuf3CsqKGsY6vcRxp1Oz+90Oze8k/aBJtEYnRlomcBMlJOJvm88wJV4NEDnZNMIGzIFg9eoldm0h/tE7/CuLScUXqanB4CxXx08SEsQWJP1ZEDvevoB6l7aElox/Mm4lF2QKfFewT6YKuZgRSG38QEbUrM8D0lGVqyILOzJCPGkD4Oi7Ymb83SYdX9Pm5ILMnIgmY1ZvG32h/zakzg7zQ1j+HRF1b6IsCjGPW6kwzdtvEx1KlbmyICIGjXUNrtz5R4oF4/A8H9FxKmnzq6JWWteyANK3WuIo/Cuu6Z1OwSuqV0dFJp+vFuQOPCIGz0z5dxMoY1C2zN6n9MmQgG2c1QNnt4/EuDwDBhRkAOgk0WwnyENsIqhIfE2T+/aHWAvmHtDgZEri9QXKzttcgmZ3XIOZ5X5/W1q+JoDTqyFqm9dtiZjw8QpT/Z4ez6KKpOESwwSDsgZQVDS6+lsQ6qp5Dz1iIJzdp2R8IuH10kUCH6+MW0o+VrmPn6K+OaFi3rYS2oZbkXHv1Bs1Mn4v8duvfd4/TGNnP03vL/ToA7E/8eCTemC/Ebxv9d0/FMuoew5MCVUbNnXRoVr+0lpM9s6v2/9ABQmzXH/60XH+jxX1D09basrb3fip7unPpp4uJgYOvJ/2J444ot+RNoBjUYZEDX1AGkoOa16GfVUb3rW8113TyxRFtLEIt1yOvYrv3DSmUZzAbadmyb+1aHtuiv/4jgNnlA/j2IdeoEAiB4tL/w0JmJOb3+aSoTAPDiO+gB4IvlhRrkvQoSvgCtMebVuAnUfYoQVQTtDC5jid2YhlP0V5xRc7GBH8GkvOYWkvvhyqDRCxKMXLTFSeBvc5YjNF81Fy8TIGkN3V9xPk8oRU2ekY3f8wJt8HyvpMsrNMNp1lywJZ+NLhidz4WL/hfnwUa3jYRc2UaioJHioLhX8ajmga1avDhQgYWYj8lYgJuvZELn51oK2HS77tLu4iuMaxlf51xt+1hlLYUvPLAEw33VHkaQjY17de2OG90oZqXSyoyJVWt/VUqvRTrv6JhWS12Co7iq2H67gBASORf6fjemnbNqNbpnIblq48mrOC3naMqrU5IqfesBDTU62XE7ypbBdTcJbg3ducHKJU8zgfOcdO14dIreQ82qOpXjXJhc1gZhuNtuqWq59h0zXD9tlb20Ak0Yr44bDAuuDw1XXjD+X+/L/xzF0+PDx+9/i4cnzv2LuzdCbrdxcDfYuwpzrUJf6O/onUL3ROc4oX0IrQPNw0IaxzKpr6jNqM7CzYLrCVcjLsc/XIxVznuc9e84HXAy8DjucNTisMFBLezX2KsnsFthp8R2oSZbhYVs2hM2LNbtH9YcVt07Vgwq2kTK+g8ljaLeoaBNJK+QE8gKmoxEWtKkQDLnkcgRzxCTIhLi2R/DITcJeiYR8NL4vav4vEri9fBwOeM47DQ2axGTMY5ONAKtRk80LonoyIhniWqUEB0pERRUhFD+5cUjli1EvgTZIqSL45C4RNLD0L0oPYxzXvCf44mii59OgQNVfjKvfW4yP8gNsjq5SdVJJt1ABg3kRMk5cqP8TYqcCdlJp5OdNDrpJLVHMjuwAx1s1NRWx/VCLfrqiXqjFgjagtpiIX4jrE5mUnTipBlw0IAnMufwRv6NhfB9RY/S/rAqNuJRI9oYEVqJsSHtCJtuRvTzmlqonw+N5Jix1fcR7Q227tmDev1HhPsrq+8XSKPAzvGAckEoRWrpMsQQi8Vi9I3liJ1pM0gD66WVHpYiQjNtFTOc3bJbEetczc3MHroHthQAAAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAWsAA8AAAAABvwAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABQAAAAUAA8ACUdQT1MAAAFsAAAAHgAAAB5EdEx1R1NVQgAAAYwAAAAzAAAANJMNggJPUy8yAAABwAAAAE0AAABgc6bgxlNUQVQAAAIQAAAAQQAAAFpe9kARY21hcAAAAlQAAABAAAAAXj5j4n9nYXNwAAAClAAAAAwAAAAMAAgAGWdseWYAAAKgAAABJwAAAS7SLFJAaGVhZAAAA8gAAAA2AAAANgkvYTFoaGVhAAAEAAAAAB8AAAAkCqkFk2htdHgAAAQgAAAAHwAAACQXOQALbG9jYQAABEAAAAATAAAAFAFRAaltYXhwAAAEVAAAABwAAAAgACkBIW5hbWUAAARwAAABJwAAAmo2I2JRcG9zdAAABZgAAAATAAAAIP9tAGQAAQAAAAwAAAAAAAAAAQAIAAEAAQABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBiMAJCFhc3nxAGueTKohwGqfSi1GwGqZzEkjwGKQYQYAER//+DSADdjQkeAHjaY2BhKWHUYWBlYGCdxWrMwMAoD6GZLzKkMTEwMAAxFDgABRmQgLu/vztIUN6XjeEfA0Ma+ywmBgUGxvkgORYr1g1ASoGBGQC5Zgm5AAAAeNoFwTECAUAQBLDMHmihVgIeBQA68H2JiIGGiYaN+h3f14Tf5foOub13z5TSMzIVVOaOiJBuNmhKZQHCH3CfBqIAAAB42mNgYGACYmYgFgGSjGCahcELSPMxcADl2MAqeBkUGBbI+/7/D+Sh8EE6/n/7/+R/+oPdYN08DAjABADQpg35AAEAAgAIAAj//wAPeNodD7NiLUH0zOyd5L1Ym1SxzW2iJrZto4ptdbFtlNvHNvY7YnPnBscGEMgEYMwIDwzIwH9QAGUApKqvShAy/s/o/8eMmeiKO+gtUhWXkCJ9RBaUYkYUEUaI8B+hhI8Ua8QaBVyBK0RPcYb8ME4GwFAnvZJckx1gwRIAsRpK2NDABnOckzt2dNDBDOdk8xNRwiyrofMTcceS69A+obFeGAwPGxDqG4WB0GqX4oW83LliN/eSudz8uSIXxmR0+I1PTubfhkeHX3+NV3oy3njWExzcc9Y43nTxa1z8bk+VVOEMIgD5+4hTd2QZY86R1dDUkjUxQclt9et0pdDGzj4gQtKmiNxZenSVEueZbmpv1CqV0kPpFXEkF2ACxBtAFmRoHsA3ruZiQgAAAQAAAAMCTtsyCUJfDzz1ABsIAAAAAADE8BEuAAAAAOHUAm/6H/3VCRsIcwAAAAkAAgAAAAAAAHjaY2BkYGDP+cfDwMBp8Uv+nyunNFAEFXACAGxCBEoAeNpj7mFIYYACxs8QzJrNUMe0nSEBzN747yQAbIsIVAB42mNgYNCFwxyGbiCcDgATZAL7AHjaY2BkYGDgZFjJIMpQxsAO5iEAMwMjAB3kAUt42mJgYOBjWMfAzMDIwglkb2LkgrIZGSQYPkHZTEA1TyBsIKnHsA1QBznoVhiFQXBqN26c/EFtK6htxqnda75FH7mTXCtHs5v9jvLcWpZpY4i/PLfrZ/LczxJbOW6CXlWOm+hmIs/N+kGe2/QH8jys353nEQmuCPPLIyHOpBgyP5zwyTsfJDh06KifuXd+UX9Ir8WEwxYhzhrTtrD8Sog3KUQiX6tj4pUpPMVKz+XJkXBMlp13ZyZGXG01AfNWzNhWWVfNSXMsVLj7nNv2pQZ76r9KSX54JFaRCspS2+oIWRN5J3/erC3gRueVgMrqC9NhvnjlGfNseoo/oucb1CM1v/Pu7ibMPTFllb+PLmHbOz+8Fv8trh+reNEzvkDf35FH/wF1DFm0AHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-greek-300-normal-Cnub06j7.woff2) format('woff2'), url(/assets/roboto-greek-300-normal-BMtCIBFp.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-math-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-math-300-normal-BMxwzQmU.woff2) format('woff2'), url(/assets/roboto-math-300-normal-9fozW1Ii.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* roboto-symbols-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-symbols-300-normal-BtHl5mYl.woff2) format('woff2'), url(/assets/roboto-symbols-300-normal-zmF1mPr_.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* roboto-vietnamese-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-vietnamese-300-normal-CNeuLW5X.woff2) format('woff2'), url(/assets/roboto-vietnamese-300-normal-CBwYb71Q.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-latin-ext-300-normal-BOz0oSmX.woff2) format('woff2'), url(/assets/roboto-latin-ext-300-normal-9Myisv2Z.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-300-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/roboto-latin-300-normal-CztWkFGs.woff2) format('woff2'), url(/assets/roboto-latin-300-normal--FIRE8Jd.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* roboto-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-cyrillic-ext-400-normal-DzMWdK87.woff2) format('woff2'), url(/assets/roboto-cyrillic-ext-400-normal-5IDvadIC.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-cyrillic-400-normal-DAIM1_dR.woff2) format('woff2'), url(/assets/roboto-cyrillic-400-normal-C5q4FMUG.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAA5cABIAAAAAGtgAAA38AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhw0BmA/U1RBVF4AXgiBfgmfBhEMCoJ0gnQLFAABNgIkAyQEIAWEeAcgDIVOG4kZIxHmlLUCwF8V2MbMoa4AxWgkRCthOLSyMZeTQC5uuOJg8u6E3LDs4xbJUqAc5hwClMNy/OePZYQksz9fV/beV6lD19AduEZiD8BOMgHVE619Io7rU3LbKR6I/eb7XiLXiZBIeONoXDeJWimViYW8pUXLJnW3vOum0Jq2rJBTxgHxjUABglAv/FCYGVNlZkz8z7H9YZ5Md+9lxCLcImIaGnXUht+bapJuld5NR8rgTTqoPbsVUTVFbb0AnQKIkp093FLP6ze5XT5S6dxqfBzN+b2dJM29HAELQ0qeMZ3ZbpvZTQo53PYR9R3muDnMU+QOPrARxCzkl19oC6hLwh3l21mn+wJJmOo2nHRQZhKIQpC1L6cDArD4Mkg2C+sAqvWrjvWohAxGMZYzTBMAJA52zcLTbez1tDbA2lFrZX02Z17a3iR4U3Kvz6I6PIQDvktCADCXT9A7qAoBADrABjHUV2d0Ozk6vOamloB5qrIzIejwSPFzlbgDgI7C+pO0Xp57L77IuqK9BhGga1TTjgD4X2E+BBIg3K0kUAQJPFuFmIVTBB7aRy7xaDUPqOACUrCgMT+ViTMLybwW25kL6C7lEludwgFeYb7gp7n522s+z8ckSQFWJA7LoRfvWATMvzvmvfmc4xV1418A8Ia3nT+nvuqk9njVJ73uLvpcZ3zpsdPBb3AivLPbgQajHrhkv+NecdsqR7n1++xz2S8t5z3TxNcecAUxfusd6qNmnbHXfuRLh51232NvBp/g//pNtFNdwgby/sXqGTiMmLDPsZqfqp5plRTlug0YY/hQz6/zige+8kvgDn1mHHXedU/iAxaX406fOnlianJifGx0ZHhocKC/r7enu6uzo72ttaXZ1tTYUF9XW1NdVdmEzKpp8F9/9eUXN6Wzz66fTsbDweefffpJv9fttFsfvpNtrOdp1AJXfDXfaORJVIOlv3mdkkIYSIRPg2RDMIZW90e2aCqtnWINAwwF7A0zKSf6roOTzghCzXP1x9wflpYKKQmIDptgJE9pny5Lh0BMbRBlHldfIDqVrJhUKMayPCMTYCL2WQQnuC5DRSy8Mjc/5yLZOEaZYc12rm+IsmyVJv7qOcbyTCm1QQzVi5NpPFo94xpDQ2mh+1vX6egCBwBOG9fQ5G/LH8hDr4ggwNOBFSfghRVu6sjys1+VOLEm52rznez2DbFu5JHIZXRJ71Ojkd6nl7ZenEC/z7C/ELVw5S9ddOWzDOiOYTsoEcIuLk3i0/7I9rU7VRtyZ9h2affpqmoUvOODBw8lQ4KYMdsdWYtkWLErYbGMnLGupyXbi095AIdKcMt9RRF659XON5bP187Xz7cWthdURDT/cj3tXyiJopJfLWo7pWDYGbXXaOf0dVWjwOXTsvQAm3+PI3K1Mt8ducYPedqKCzNL+6tFtpXKoUpdfj1MIy8iGRke2tl4CAQEYKd3ilFAmbwTxtjyd3ilXfjcrtnICTAhy3PFLi5/SZoLJBuOpSvveyMDjYbXIc4OdwIU3YpbnsuAIXAXbqiuyaPMm7KDspZIqnoVJL4SxCNxvhfR9V56mpxGdKxsQdXzS2j6kjrjLDmzBUjNwLivf+GCC3rtuZTzlAjGwN6pWxegVzA4gOlLFZlcau1eSxs5FRFGptnI+8NofG4GNxYFXEJib9LA0vuhCuczmlqxFvJ9XZpNJ+UXXnech8qrvMIJlczEK0ZyoBmMIRgIMOcyKku5zzIprVgePOOxjca5lFIVFFVOSW7l5/ZmI08DJEOW1ySZ1MJMN6huk9NrPZl6niLvGLq/jXgX+FaZihH3TIq8g3WJ42KmIuiHmaBmZDXNHOf9y4CJnbu0I3YRKAy0yuIjjIt44b4Dcdylpm9UCy71YHgiUkRSfoVGnUKDM2zPFjA8JdEzPuSMUGC1oc28SAxXAQQQ4w9Bq3c+2anSDoxelFGH10FGa7dHk1H7LEzAhdUgaFIjhgfkHXnPwLSsVW7xKt2GAUaLrRq0CdOppSUTJL0/gu3M6YC0sOJDc9YI4bXzLfUOmX8nPcDcAjJiZ3GkWzC0GhIETgh2s7gTzYbDHLq36etG8igNxEOksV8VrB2Ji/xJzuusiUwz31UlLoFQ6A049mSp6AeS8wDHLAFjde0Na8qoRd1dCQqZJ3rW7XZHjZzZUyB0CHAF0Whi4ep72FzYZzMC42SeTYCZRQqbliLwWIsBSewLyAGn4Ky0YJ0VgbKUu74XjEgrDV0Esoghe6mueKiwwDJCuS9b5+vsaNKwFsCxgAJye5MBa5UsSmpSXq8o708xckDDlkbgIHMhUW0eekSVYf7K/QhSI2DcCSMwfBZVm29PLAzPMHKuClo2RlJCvZYzNZoeo8vuIGoB2JruNiNF0mrUUr2Rl80axp1f8GCtNt/2njjLG1FbKF7MTDn3oBJqgplkuLKKG6Jq16ga7mM03FitWa8qwiKnB0K6kfL2BS88G/RWCKwuo7TFSQs8JSCeAHQnzbQnOnCWQbwpTfAvRFIf71/Bf3IkahUYX5CeJ9veknKWcj/7eY4PLKCjjmlyCCiW8uxEp2HAwi6rJXfxBRp0datmjpjyCVl8g6LkTSWHJgHuSCBAUI7C6GuSt4B9zSDIWgNKCWJFugmuPYPFTqr1wLLBgnbuRYo0ryOxL2/VWLgzS42Fe1z8EVQcQIpUU+GfgX4DmJjXMlZco4ltTKh1XQWbJGd6/ffwRsiSQGjFSTdTm+bvLiWkI3DQB7dkkRroraTIbqoWZH+rVsjNJhxgIZBe+QsmQKE4CEOJFdKPfcBaJaYc0V9rYpfUsoNKykBx6FOfnyxhZdkhmuh93+ZAWsW++RtA6fADiJHsUt4hbAX5eGDANHKxr4WpI65R9PZJ9nRpO08EOSUGVAPN7MNw0CplEJzxBBw//b/uXIPBOTa/Biil9TXIax+oB2xG3iVUuTWDx6kT+xN5y/wPkltY5dSQ1b9PWBTjfL/N7N7yT9oIoyox25LoeQAzKUclvmz0QB24xUJnxB4IFYq5gxf/tRn1R/vEzzMuLWeUHifHh0AhH12cYAkMlkgeOOClNv/Irlm0RWjD2ER0yvboRtEfAa+YMNNlmvFHmSDIiRW+9omdl1qQ2FqQ+DEYj8P8jckbs3BYdcOnDIsiHUmgruHD32p/xGo48XeaijF0+sJKnwHwh+GbTux0KpdjqH3XNkcMgFCpKu32ZwoykBvOSAj9BnGk19q862Vtu+kHX1EqyiO7dv+eAkbeZzmwV2n+rg5AVwZhaT8uBZLHmgUMzsZb1kngYGHNwdwftvTsgAiZ/E+LfI1TeEt5Ki+Dd4y3kGexKJiwHUGAacZPs3KlUPtgYaD1pLwock9d6evO/V707fbB8OtXX6n2529+QBz5+PZbbd/T199n3P6zZRn/8ZgDMPyUNf/FGvswX4OcLmqv8u4MzfmBxx1b7FvWAU8xhlcPE3T0MnHP6wVutvYdoxX4ovT0KWei4FoqPX3+TfHEiPWfe5pJr4FzMsjZC29k4q/4zLM08ub/6qj1o8qpI5GFeYciq6a2fjS6Orb145rpQ5F5RYcjK6ZDPl62xnV8SVvoeyt+2d3zf+bN5BivzXMx24Xv0uzSBeCONwEzEH8+0jCY35h/8xT+jaF4iPVLaKtQWsEnH7wkJDDoGecLJEIkCCgELP4iOCAw6CVK/JcALO2AT9EKCICGSbMvPr26tmjXc59HBgCA97/3cgAAvz8SmwX9bQ9pcgE8T5rPW2TAbxUe5BA2/bWREu1XYR/+wATf6oqcoLkspDXqfWe+hF0YYrEAZwD5WtSBUNh6oQcojJWWR8Hq50pkCSxMdO78SirY5yuZ9RwrOXd2FpzbtGKhLbadgQAWvnElgsqZibkrQ2GPguXhquxZPTNAGptGpZokVbq1fLhBrPZnvVa57MUVGNdUXFlztal2iGvtZm12CGCbxys1qWLLwnZ5wnLb0P76dbVFLotWO/shXIlzh55LFZzl3Nqha7UYXUgnB55mu52IH7wwDrdq2YWeljLRks+7Hm2n3TQmza3DW8U9jGy1rAcHnUaXgULlYDXiFDc2dawul6mF6vCWtrXtjnWenqtWq+VC7UAZf+X9QRT8MjbVq1TpU27jhre2RpXXHIdu83aXF+prT2YdVHja/RgcrNyL/j3sa45eb+vP0NPcgasWdrW04qKqRUcT25s2cdo4jpNGttSxuaFma2BT/Sr262uvof5/b319Fjv1TmxXWFNidalWVWZlkRUFlhd+cStsYiPHktwTznkW5SUcsyzIMD/NvFQtN8WclA7ZSWYlmBmPYCaexXR0FVNRpkZ/MYkxOfaEUYSJ4TRGwr/ohxkXnsVgOI2BEKMDjAqcoDfIiOAJusEwv4Sen4aPe73c3Sx1/O9qrqCpqsf2uhM01I2jvi6EuqqEeqkDxcIJ8rkhpFMdiLtUcI8mEC17XMsRtxlhtXvNcshFp0ArAg1O+zKcWfgd3GDnersW68ou75KzYvcuuc+243fH5mqzfyxaimZhKhqFecG4oLNaBLcyYclluZtUa4wsYkPsP0YXFS3M1KyqkKxCYBBk6nPVXJE7JDBAjAuboHvFmhgSFFxehgFgk/2HKlZZUCsRci7J3aRYI2QRGSL/EUoNg+PL6SFkpIf/JHM27FBS8h04Dbd57pMak3kOMQ0Qi/k5c4iz7v3AAfBVhx2H0ucfUXi+o4U5QsJTc+YYnXWn7eDDJ5/+wFjtAJ8zJUmUuKHyjR5KfpkKPvCQLwrpIo5UlOT8TQZbNvimnA==) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAXEAA8AAAAABxQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABQAAAAUAA8ACUdQT1MAAAFsAAAAHgAAAB5EdEx1R1NVQgAAAYwAAAAzAAAANJMNggJPUy8yAAABwAAAAE0AAABgdArg2VNUQVQAAAIQAAAASQAAAF5e+0M1Y21hcAAAAlwAAABAAAAAXj5j4n9nYXNwAAACnAAAAAwAAAAMAAgAGWdseWYAAAKoAAABNgAAATZnhEGkaGVhZAAAA+AAAAA2AAAANglAYTFoaGVhAAAEGAAAAB8AAAAkCroFqmhtdHgAAAQ4AAAAHwAAACQX6f/DbG9jYQAABFgAAAATAAAAFAFZAbFtYXhwAAAEbAAAABwAAAAgACkBIW5hbWUAAASIAAABJQAAAng3dGTWcG9zdAAABbAAAAATAAAAIP9tAGQAAQAAAAwAAAAAAAAAAQAIAAEAAQABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBiMAJCFhc3nxAGueTKohwGqfSi1GwGqZzEkjwGKQYQYAER//+DSADdjQkeAHjaY2BhaWecwMDKwMA6i9WYgYFRHkIzX2RIY2JgYABiKHAACjIgAXd/f3eQoLwvG8M/BoY09llMDAoMjPNBcixWrBuAlAIDMwDj2QowAAAAeNoNx7EBQVEQALDcPdDCAgAwFADowBoGMpzfJUJoKegpWMnP/nmO4HM6P4O4PDf3SKmhYyCQMbVHEZUb8SV/KLL6DAR/orwHzQAAAHjaY2BgYAJiZiAWAZKMYJqFwQtI8zFwAOXYwCp4GRQYFsj7/v8P5KHwQTr+f/v/5H/6g91g3TwMCMAEANCmDfkAAQACAAgACP//AA8ABQBkAAADKAWwAAMABgAJAAwADwAAAREhEQUBASUJAyEJAgMo/TwCjv7vARH9qAEN/vMBKv7+AgP9/QECAQEFsPpQBbBU/Xz9fAwCeAJ4/UT9ogVE/aICXgAAAgB3/+wFCgXEABUAKwAAARUUAgYGIyImJgI1NTQSNjYzMhYWEgM1NC4CIyIOAhUVFB4CMzI+AgUKUprXhYHXnVZVnNeBhdebU781ZpNdWpFnODhpkVpekmU0AwZcpP78tmBgtgEEpFykAQO3YGC3/v3/AF6CyIhGRojIgl6DyYlGRonJAAACAHAEcQLJBdcABQAPAAABNRMzFQMlNTMVFBYXByYmAZJ0w9/+hqcqKklWXASEEQFCFf7C/lVPSGgtOi2P///+eP/sBVAF1gAmAAVGAAAHAAb+CP//AAAAAQAAAAMCTqtYHyJfDzz1ABsIAAAAAADE8BEuAAAAAOHUAm/6Gv3VCTEIcwAAAAkAAgAAAAAAAHjaY2BkYGDP+cfDwMDp9UvqnxenIVAEFXACAG+cBHIAeNpj7mFIYYACxj8QzNrIUM6syFAAZh//VwEAaU4HvgB42mNgYNCFwwKGfiCcDQATpAMLAHjaY2BkYGDgZFjJIMpQxsAO5iEAMwMjAB3kAUt42n2QRVYDQBBEK+7Z4e7uDhvcXbdxd88VuAt6Dq6E1BsaJ3ljv2tm2gA4cQsdNHoL+VFTL6yBXWMX1vLNi7AOk3gS1qMZ98IG9OJa2Eg9IezELObfWQPYMSysgRWdwlrqtcLGr1iaPupW4X4ScIok4nDT+yEpoziGHeTUGYYXV9x9tEMkPzlIyoGLI4UsFjHGkST76SVASiAnf6kgy31U+Q6qaB6uHNcILT+1PN+6eXtJK8PXYeWhHVP8Nc6xgCVak6RJTP/w0P7Tw48fWzji2CJVi/nb+nq5pioqU5WKJYcJjnacU/Gj/Vc2x3ydRIQ3XvV+hZ7ZKVV7lnb/n64FEVYv8vQyCi9fxpWa5AgyK/9nP7PUMz8q8aqssxxh8sAbFBtciwAAAHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-greek-400-normal-jFM2czAU.woff2) format('woff2'), url(/assets/roboto-greek-400-normal-DwVopRQH.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-math-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-math-400-normal-B3wgz80t.woff2) format('woff2'), url(/assets/roboto-math-400-normal-BRMeFL5Z.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* roboto-symbols-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-symbols-400-normal-fF1SLJBj.woff2) format('woff2'), url(/assets/roboto-symbols-400-normal-B2LMqLB2.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* roboto-vietnamese-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-vietnamese-400-normal-CDDxGrUb.woff2) format('woff2'), url(/assets/roboto-vietnamese-400-normal-BYP5tVVv.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-latin-ext-400-normal-ZYmyxeOy.woff2) format('woff2'), url(/assets/roboto-latin-ext-400-normal-BG57dRWO.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/roboto-latin-400-normal-CNwBRw8h.woff2) format('woff2'), url(/assets/roboto-latin-400-normal-BX2H0A0_.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* roboto-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-cyrillic-ext-500-normal-B7rQpwPu.woff2) format('woff2'), url(/assets/roboto-cyrillic-ext-500-normal-aAFKCR76.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-cyrillic-500-normal-hCeO1jFL.woff2) format('woff2'), url(/assets/roboto-cyrillic-500-normal-DhPqGoNQ.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(data:font/woff2;base64,d09GMgABAAAAAA5sABIAAAAAGvQAAA4KAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhw0BmA/U1RBVFoAXgiBfgmfBhEMCoJ0gnQLFAABNgIkAyQEIAWFFgcgDIVOG6MZsxEVbByAILK7AP7LBG4MBfug7sEH00ksWBAwvcIrw8A1d9ddP5LhKpEo+yhMJYZllANlIsgjEon/D9SMkGTWf54u/XPfvHmDjStNwW3iwlNG2m0zgTZkwbhtVFD7LY697ufrH6EibO70AN2S6gGBMMtsZ90IiFM/2wKa86Tdur1Xm7SmapG2YEHAbSUhujvuJeL3ppqkW6V305EyeJMOac9uRaRailocgJsCiJKcPdxSz+s3uV0+UuncqtXvp4GCQnjtFRCChDMR/qsKw0pH6o2Pn9bstW92k3/7EUoQVRaOlKwxeW8yl30zu4E5nOSI9n5p73iLiUruuxLbemJ2tZUV2lZWTXSd4wxCgcZDMj8espV10cIYISxOP1aCAPhg5QiqCEoAHSNnQstWJLgQzVlW2TYBFo5Qw8cXG71b11CF4aeG4krv2L2gqUbytsi9O5cq6VfIgHxYjgRoDJ6RXkJJCAD6YBPoxGoqepocPb7jmInA/0BJdpjBQCcUv9Jc2QvAIIG2n6TNQOyTTMfWFDWVEQFrTmVNBNC/wnwBYmAYZzABCQyMpnilaZwhhX6lId6cjKILsLJ2Q/h+jjjnB1WN4FrtC8PJItHjFhqom9m/41M7+eE98e6dskwAgxIvBsIgnns62N9O/u/t3zAeFPM3mtznQcfO/Xc7YCZTki73upJ9pcNecYtDwYfYP360S4EDba47qdc+d7lkiD3YeTfoccr7o8fcronPLjiNOfeAu2tdv8Pyzjd7xS6HXHOL+4On6D/9LtrBKmkD8fBE9BK8WnXqsTfm21gvNUQKj7U2aUd4Z80/87TrXvV+MAkbbLfHMefcGvdBLBNpPg8e2L+1q7Ojva21Zcvmfq/babeajXqtWimXioV8LptJp5KJeCwaCYeCAb/P63G7nA67zWo2GQ16nVajVim9HcX7b2Vbm400OoI3fDPfajaSqIfCcLsvSyEMlIyvg2RDMIdW90c2bymtnWINExw5nAsz8WSGroKTSguh5pX6Y+4PS0u55I+Y7ZpQFE/1MF+lhsFM7LDCrFteILpl2SqGZVvsSzIBY+meRbgmYtOmipR4a9n8bCHZOEahYc12zt8UVdkZO/E31zafl0qpDWaoDkim9urqc65p3FRaGH7hOhXTcCYCrBjXaPG36c/kYVREEODpwMpY0JkVbf/I8stflIxlTc7V9kNs/olYNxuRyXUcn96nRjO9Ty9tHZDAuHfZX5hauvHXLk7AiwgYvuk5tBDBK52VxKf9keefcKo26X6L5zbuM13VJHTfDw8BIceiuDFvEqKC5XilLyF4Ts3Z/BShegHLHuBQgltpZSNK5+0ut1YvNy43L3eWdpdUJDL/0l/0L5JEo+RXH7WbQtDijyZqsjfxE1WTQNVTWHoIq947mNxSWeiOkvMdn3lxfXdpf/WRXVIYsvT16kmajTyyoeGqXbTDYACAprxTTAKJSadgji3/pFfamZpr1X8rAsZkea7YxYEvSF2OZMOxYO1db6SiUfUa5ux4ZyChW3HhuRw4DHfTw9UtdVfoTThJWSGUhlEFiR+ERGSudyK530nPk/NIztoOdD2/hkNf5x66SC48AcoIKBHrvzjnnF55Jh6eEsEc2Du1cAFGBZMDuL5Wkcu11u6VtNmgPGJoWs1GfxjNT83gqc0CnUnS3aLFlXdDFc6rWlqxluyHj2+1nFSYa+K9DJVnBbmTKpmBt1zOgWYwh+AgYMahLUu5bzIprfjcecZjG81LKaAqKKqcEquK80Sr2UgNJB2rfZJa9FJLd6gWzsraSKaep8R7h+FvW96NvGC2TJZ7JiXuUyJxnM9YBMMwMpIZWU0zx/noMjC2c7dcmqYJEgyMScAJJU/Ycd+LeO+Wnm90Ac/y4HgiF0tSfjONCoUqZ9heLqBlSmJkfMyIVCDa0GY5yLRUAQwQ9Q+ToreR7FRpB06tSK3DPsRp7Z6oMWpfhgk0txoMLm1Gy4C8I+8RmNS08oXcoEWoYNTZ6oFP6O4vLbkg6fUWm5YzCWVuycNz1hmiGxdbKh0y/1F6wMwCWelm8aYbcBQFGYJMCHZR3Jk6w2EOw9sMDSF5pEYSIdKYqJy1o1mGeFLwpmomU+SXqmR8IOR4AxkHEiTGkWQ84JAl4KxuvWFNGRVU3PWgMieLkXVn3EmzwRxokDokuBlRbWLO+jvU0thfawR2qFxLwNQihc0oE8ipegOWPCRQAJbRtLTghWUhsdS6vhZMq5WGaQKbTzF/6a54rKjAc0K7lad7t9l3KMNGAN8HNFAnagx4qWLRiku9emV6IMXIgRTXO4GNzMWU68mxJzQ45q/SlyA5AeMpmIHhy6jaftBkYXqG1rlNMKoxkpLqjZzJaXqcWA0H5ZaB5zBdN1qyjD4ZZbsRV251ycEvR7BZ2w9GT57VjXJHJTxvmartQTGURTPJeK0Xd0TVblI13MfY9NRqzXpdAYKtDIR0Ix7/oueRjXo9BEY3obTgpIC8ZJBIAN1JkYnEAI0amPakGf6FSary4RW0pZGpdVCiQ3qVbHdHPCweP/t6Tg8s0FWnMAUENKG9PLHaMDC3q2rFXUKRjdYUqyFGTL0LovgFFSWaWh17BGRfAQGCMBpPvCF5J3RvGATVOIDWRtkj3QFuPKPlQmr2wNFoSTv3LE3Urq10d2+NmLPXSp0PD7D0I+g4gmJpS2V8FjcaYGzeqFR5tRPrTOwoujq2Qc745u/qjSmhgDCKk26utu3fXUmoQGCjD27FojTQWysTu6ELyP7WxVhqTdjAh0Brz182ARpNbRiqrJC+7CPWqii1SPpOE7uiVh10UgYJxzEN+WQlV5O5pN2+dz0Z2Jh0b38H0HL8AWImu5T3io0Qnw1sMs2GdG9EcrfcyDG7J1XS1V2cMlSTWNQNHGYfhgNXa5Vg1RPI+On/fudWOILjybcCKWfsFah9H+iDtUY+TyjJl7Wf9k/sTxQt9z+YL6ghU0NW/z5pUdbzgVqze8s/cS3aVKJ3caJnAdykbPN92hmBKnDLjs5JdwB0SJYOXsJXhu2P9olfZVxazig9TU4PgWI+uvgIlsBhT9WRA51r+yvmLpos2jA1EYOyA3izGI9AF3SakeeG6VczQZATI/z0SzcveZDZWZL4MTiPw8KtwVujfFh1uw8aFk06siBd483f6nikahz5Ow2lGAZ9YakvAfwxeN1JN516/DFU/63FiAEIqg2l3f5MWQby3UyE8L8Qb3qp7SuMte2eH3xlqiKP4rziF1U7SztMgj6l+ae7gN4YTCv7acmWTNZM4MKttknSINoE58Pb8/JJiiVsYMNGGxHDaoeGIEigI3AJ9or9fn4xFkHcsHYfA0w8v8jgwULfAD9yrHPZ3/K6uL5hrR+uz37YDWj5vV7Vu1//vE3U+s73DUfPa++3XHf4uhSR8NXjGNDyLkr4hmzeQFkOZGzJ8an1XJyNYfu8M7tnjoDsoo0fxR01r0fSU85lTxzUNLeNQW5KfajUJ1Iebvn4He+tt3a9uz51R4Z8Ljmxip+88651bQU+xIk7V/K/f52uD7k7c3O7mZ7eavrDoXev1zND78luaQXX39tqCblnwNBbOwbWL3xq0EcLtvxZXnQtmViwPyE6aXJWb5AvJpFXgBSI/1UbLPxfZX8re+TXTW2yGBkoNQitAc4yIjAyLPx2WfZVGFMQ2gkNeC4idPz2d0gsJBAImsHZjQIBkFjSffv65+T5z//NP0IFADz6P+gB4KMXq7Vg3ighwy5AG5Sq/3cA+SlGADdRW1cX0KReFOmn/2BGbkdxNAJFaSltSO9Hm05gPg6GAKEOA/vcvzlD4yUDPE4CcW305mD0s0AYHvACgx9+H5cQJtPJ+QoyJjlZEBiuq+CHmVIKAXywjANbbvZ2Qn56gaBjHDPJD+5UZjE5r4spLw2kqVWtQI2kyDTMx6vEasKTch6rJhfluCzi4phLxTVJFC5a3FxFerjQQhPl40rXaTRX6Mm1cVKsRolCjdJLVG70TIjd7lIt3cH6eWXjBr4p1+EMkXUcdro55mXCiIm2OyrHRUt+3d9o8zSLNC6NHlmlQAPvZQ2z1IexdRp8V3Y5/HQGVxaK2+lwKRqUK1DjkWku1hxBU+vLvRumxKlZqpzLNStsxlMqiKDPtXO8SnEEuRHrbvBMe/zAZhpjOz2VhNWV2RUo8qI3i7B57f+9d3QfG3S+P6H9iGi9aL5v1NjG6XOjdiepXkYqF8o7Suew9kThCJA/4qDq+BDZ44wyxzKlV6RmJGcsKFlq8Un+F8ZGRMd/KhyThHuE+gHlDQgMHOV08LXwNvDUQ6uGq56gVQVHCXuxS7bijKw2gMXCbP8pxcHoBpRkoNcnpNP/FK+h0Q7U+oRUCkoBhaggl5DJClIgyTlanEOU4YPh7YUTfT3/5Zae7yapd1/h8d7Iw/023d9xFHkt4uqywsW5hpNjEQcrI8S9Q9q7WVvxmdVZ2hldTfvUCrY232jzcXnRx/IZbSxhfRFscZyyNyvMG94uMm989oL/HG/lffHLMwBteJA7MDzAHWQFWL5RPm45irt9LG6N4Xmc+fMt/Acu+ef6uR1RuluJEm4Khzu3dEtYWwSFimRRK6RFIk9sERKsBigUtX4gaVGqW4pibtVi1hiWx5g/28J+YJJkmjLdSTu9Lmf8nYptifdqKVle2uadmI59VTM10yu2eeFeZWXcRNRvdfb1YdQ43rszPeNmCddHsm5ibGlqxk1c6rcam+DkLJ0PtI1mOM+0qExF66SZHpoAZXOwhFNJtkvuhrN1Vjc1emi/0kMBAAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAW4AA8AAAAABwgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABQAAAAUAA8ACUdQT1MAAAFsAAAAHgAAAB5EdEx1R1NVQgAAAYwAAAAzAAAANJMNggJPUy8yAAABwAAAAE0AAABgdG7g5VNUQVQAAAIQAAAAQwAAAFpe+EDZY21hcAAAAlQAAABAAAAAXj5j4n9nYXNwAAAClAAAAAwAAAAMAAgAGWdseWYAAAKgAAABNAAAATRvqliEaGVhZAAAA9QAAAA2AAAANgl8YTFoaGVhAAAEDAAAAB8AAAAkCvYFwmhtdHgAAAQsAAAAHwAAACQX6v+ZbG9jYQAABEwAAAATAAAAFAFXAa9tYXhwAAAEYAAAABwAAAAgACkBIW5hbWUAAAR8AAABJwAAAnI2oGOwcG9zdAAABaQAAAATAAAAIP9tAGQAAQAAAAwAAAAAAAAAAQAIAAEAAQABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBiMAJCFhc3nxAGueTKohwGqfSi1GwGqZzEkjwGKQYQYAER//+DSADdjQkeAHjaY2Bhmcz4hYGVgYF1FqsxAwOjPIRmvsiQxsTAwADEUOAAFGRAAu7+/u4gQXlfNoZ/DAxp7LOYGBQYGOeD5FisWDcAKQUGZgAL0AqgAAAAeNoFwbEBAQEUBbC8f6CFWgkYCgB0YHEDXCJioMFEg436Hd/XhN/l+g65vXfPlNIzMhVU5o6IkH7+aJTKAoQWf6EHbAB42mNgYGACYmYgFgGSjGCahcELSPMxcADl2MAqeBkUGBbI+/7/D+Sh8EE6/n/7/+R/+oPdYN08DAjABADQpg35AAEAAgAIAAj//wAPAAUAZAAAAygFsAADAAYACQAMAA8AAAERIREFAQElCQMhCQIDKP08Ao7+7wER/agBDf7zASr+/gID/f0BAgEBBbD6UAWwVP18/XwMAngCeP1E/aIFRP2iAl4AAAIAZf/sBR0FxAAVACsAAAEVFAIGBiMiJiYCNTU0EjY2MzIWFhIHNTQuAiMiDgIVFRQeAjMyPgIFHVaf3oeG3aJZWKHdhofeoFf7L1uEU1OCWzAwXYJTVIJaLwMAUKX++rhhYbgBBqVQpQEFuWFhuf779VJ6u39BQX+7elJ6vIFBQYG8AAIAZARwAsYF1wAFAA8AAAE1EzMVAyU1MxUUFhcHJiYBi3LJ4v6AqCYqTU9cBIQUAT8V/sL5WlRCYidIKI3///5s/+wFYwXWACYABUYAAAcABv4I//8AAQAAAAMCTpsD+JZfDzz1ABsIAAAAAADE8BEuAAAAAOHUAm/6Jv3VCWEIcwAAAAkAAgAAAAAAAHjaY2BkYGDP+cfDwMCZ90vtnx1nIlAEFXACAHbIBMYAeNpj7mFIYYACxr8QzNrMkMoszZACZp/8lwMAZ/8HlQB42mNgYNCFw3yGPiCcBQATlAMHAHjaY2BkYGDgZFjJIMpQxsAO5iEAMwMjAB3kAUt42nWQA24FQBRFT227QW1bQW0zTu1+ex3dRhl3SV1B495MpvjK6MzNnXkACnkmjZT0HPF7SqnlFGr5spwqz6flNPr5sJz+z5NBK4+WM6VHLBcyyjyGUyCfccsp5NJrOVV6o+UscaXlNnGu5XYR7OLkgRMcbIo8hu/Z4IJzbvDrvoLPaDecccSNdB/XogvxlciHloYLL5P0aTjFFzi4FDnw2bdS8GrvNXGuTORTLZ9WT1TEQ7FH3hvzvp4heunXmGBKt0HRIMNR6hJbGkui5L/uiq9E95zgifLVR/nmTP5heWx9NuaARj37Ui50Rr/fltvJLRecGf8MftMXp6mjnva4Hl1xYxx+TunlTM4Hozo1rrjn4rd7XumeqKrOTA1ejRtxxzf9r1uQAHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-greek-500-normal-BJMS0heP.woff2) format('woff2'), url(/assets/roboto-greek-500-normal-B0wzjI_J.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-math-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-math-500-normal-CFNaIMFC.woff2) format('woff2'), url(/assets/roboto-math-500-normal-nGmytUgK.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* roboto-symbols-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-symbols-500-normal-BXFTxrNR.woff2) format('woff2'), url(/assets/roboto-symbols-500-normal-B3xPS0M7.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* roboto-vietnamese-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-vietnamese-500-normal-HYpufUYk.woff2) format('woff2'), url(/assets/roboto-vietnamese-500-normal-CUzdRVXb.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-latin-ext-500-normal-C_ARlJGk.woff2) format('woff2'), url(/assets/roboto-latin-ext-500-normal-EUd9mLnZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-500-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/roboto-latin-500-normal-CkrA1NAy.woff2) format('woff2'), url(/assets/roboto-latin-500-normal-CoDN7ZW2.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* roboto-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-cyrillic-ext-700-normal-D_fA0fHY.woff2) format('woff2'), url(/assets/roboto-cyrillic-ext-700-normal-y_8Eg3F3.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* roboto-cyrillic-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-cyrillic-700-normal-CzEIZVQR.woff2) format('woff2'), url(/assets/roboto-cyrillic-700-normal-BmXeMSnZ.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* roboto-greek-ext-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(data:font/woff2;base64,d09GMgABAAAAAA5MABIAAAAAGrwAAA3pAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbHhw0BmA/U1RBVFoAXgiBfgmfBhEMCoJ0gnQLFAABNgIkAyQEIAWEYAcgDIVOG20ZsxEVbBwIgI7nA/wfErghQ6yhf1lCWsMKP1jQwRxxrwhfIu6zeUlWmJNCpZ8KmhJDMxW/Oo5Y9OUvU/DbHYEZIcms//07tXMfSYYgWgF0wi6wFkPoThQsg1MGFxjWi4x/W/HAc7l/Ywkd4IziXuQLF0hC2zwbCygOpA6++jn3kpRApRbfGt2Z82UHrMT3e1NN0q3Sm3SkDN6kQ9qzWxFVt6itF6BTAFGSs7cc+3n9JrfLRyqdW1XYXCqH4XLREl+7+kdzCqQ2Pf6MsAiQcNtPSiB8jKzSk/riIz+A1I90Zu1IsnMKQsVQlFSVaRrNrNfW7Eo+3QbXDpHvQndsBXUVdUmeoCmIbD8BFdWXX9QtoNqwXSkwcerok9TvNWan+WMLIiNxfPUFAdwyS3RxqAY4pc4ajW6vb0eUYOln2wQkrlAtQqP08YvnzUDy5HkTp3sLZowNzBK8GblXF9E09ggkyK2sBKjEU/yCSQwA9MAmMFL2C1Q1NVXBADwNCjdgknaYwQCdAEAMZQiAAY4QHQfEYj9cEdh6QmAKEbBw8pQAATQJjJ1BDEwm4qFwDAvyW6UoHKeCPUJDvJqHCTdgJe2a8JlCrQ2nq1Zc/cMYOFk+bnGGBnGV/R98Y5Nf8HcxplkKxMkQYqEvhi4E7F+O3PD2vxjHxfU/A3jUE47tMx9yQOd9ahs84kr2mQ57290OBV9gf3hrlwIX1rjupK32edAlCdiDrbsUW5zy2YFj7tPEZw84jTn7uIdq7XaH5ZXv8rZdDrnmbo8FL9L/+m0VDlYJG4iHJ6ImQlZbb4u9Md/LapaAZozHIizHWoR31vw6T7vuHZ8FuViKzfY45px74m2INGsPHTywf+OG9evWrlkt2W0369VyMZ9NJ2NJxKPhQOA5lqEp0g8yn03LSfBfffnF5zeFs8+vn41Hg/7TJ48f9bqddqv5yfvZxnotja7hFV/NNuq1JDpHYbjZe6VQCa3i46DJEMyB1b2hzRtKa6dYw4QghyfDVMZXhq6Ck0oDpeaZeiPuDQpLuYwJmB01pkie9v16WdoHlrHF7ea49gZVmeRUZ0K5hqUpE9AswWkEBztmqkiFl5b5s4Um4xjjDGu2M35d1LW1Gvurc4K7WUotsKQqMpnYs+VzrijUFRaGn7t2xTEwAPqMKgzgb8vvycMoiaDgSd9KBujNijZzaLn1R0kGa3Kusp+8274i1vVaZLqMWeldSzTTu7bCVpEJjLt2+wuLhSt/6WI2HiBgeKZbUSKCu1yS1KW9ods/7FRl0r1VbqPd71hZkeheH+59Uo5Fc2NuLqIOy4nyTsIROT1X8vmO7kb2ugeLBI9CZiJ65+XON5bP187Xz7cWthdUJDL/0hv+RUockfzqju0UglXe8HBF5U7+WVWRsOHDKfSCUvxOYrpWWei2QuNHPGvFxf7C/urWdigMWeoye4R6LY9sb3hoB3YfGADQUe8Uk4Az6VGYI8t/xCvtTOIa9Z+KgGayPFPsYuyrMidHk+E4duUjb2Sg0fDax9nhSoHTKbnpuSwEhjvpuvKaPMZ5Ex6hrCmUilEGiS+E+MjqDyM1H6anyWmkamULzs3sEq7NZe2cs+TMVaDtB7W+/olzzunNFzKeJ0Qw+/ZWzV2AUcLkALG5VFHoUmv3ZlqvUR7RaBr1Wm8Qzaemf2OzQItJgg3qXPoolOHar6EVa6m+f1aj4aTCXGuh81B6lp87oZIZeMnbONAU5gACAto4NEUh90nGhRX3n6c8stE8l7FUBkWlU2KVfj7cqNdSA8mI5TVJJrUw0y3l3OlbGcnE84R45zD8Y8zbwHNmJhrumhS4RzWp5XzKIhiGkeI5tJqmjvOBZaDZzlzako4ROAYOSuQRJU/Ycd2JhG5T29eqCZd4CB6KZEzKr9KYpjDDGbZWAasmJEbGh4wIBU4LWiyD1KoygAE1/jDpdIeSnSjtIKxlGXVBx1zJ2h0xy6htwQS6Wg1Gk+qxqk/ekfcInBKtfEdWaB4GGC22qt8mdGcWlmyQtnoDa+YcgXa15H0z1hmi73KuB2g/X1LQBdoskCJBllDaO2gWpAjSUO6guFJzDIcZDG8zNITkkRqJh0hjTeWsHc0w/EnOO1oxTZBvqpSsQOjxBpI9iRbjQDru0ZMlEC6vvWFNGTWpu5OgMuQI1QmJO5ICs+9A6BDgKmOmiT2rH1ILYddsIzBJ90ACWi2a2bQWQXaba8AW+wRyQC86Fxaisww4S9LxtWAarTQcI7BrjMVHdcRjRQWRU8plri7us+eShrUCnhscoCezjASlkkVpTSrqFeXdzUYOeDy3EdjIXEy1row9oSKYfQp/gtQIGB2FGRi2UJX9RNLC9AyNc7ugdWMkJdRruVKj6TW+7g6qLQHXpTvNyFRpZ9TafiMumzVKOr/kwWplP+E9cZUPqj3AeTkz5dyDiTAlmkrGK6u4JSpXlcrBMUbdjdWa9aoCHNY3ENqMjG9f9NKzUXeFwOgKSpucNCFTCvEJkNVOkcOJARoJmLalKf6FKe3z/h0GPSOLVVC7ID1Ltr0l41nG++nfc/e+BQarY5gcAg7H0dpYYBhot8tqyd1ClY0Wdqs2RkzFhCi+QVnzptJDm4D0NFCgCKMw/prkrRBcMwi6dgHlCGJFugVee0eLnVTtQqDRgnbuWoo0r40El7dK7NmZpdbtPaz7Azg5gGZpT4V/OpcZoNk861l5N2PbmNjVdR1sgpzx9d/DG1OOBkorTnrYyra/u5SQjsBGP1ySRWqgr9Iiu6GakP2lmqEwm7CBm0B25S+ZAAfFYRjaWSH92UesVVKSSPpKY7uklh2cpgycQ5+GvrOWS2QoaWrvI1cCOyjBzf8ASl33gJkcUt4pLCE+EVhu6jUJrk1qx1yr0dsX2dPt2zhVyCnR6Uy48hiGA1c5BkG/h5D89P+6cx2Bc1x5HfCag29CX/vAuWe2kc8bJuWnDB9nju1P5C37P5jvUEVaQ1Z/n7Aoxvnu2ebwln/iGqxRid7mRC8CRKZsxviyNQJV4BILnZVgAFQoFk5ewjeH6Q2PiZ9lVFjOKD1Ojk+BYj67eAuWILDH6sCB3pX94507KRpasNtYDMr24HoxHoA+WG9GXmimn2WCMidG+NolQV5qQWprQepGED4PCzcGb4zSadVNHzQsinSkQZsKU/hb7Y9uFXr5Ow11Yxj0uaU2AR5AwztOgrSrrHOoXdcWIwYgKKso7Y5nSjKQNpqJ4P4NEko/lX3ljrXtttWwUJTK8grm9ifTsDN0wwTYqTT/scFA1s5gWtrvLt3SyZoJnH7JfRI0CK9C+OUWVG4Nwuj0Hsxkkxz8aLxnJ6AdwF5AOMANqICSYe0MBjoODeLjlXMpwgPXYpcjLC+OO5Yu8sMl2Te7FKve77zjDL733kdEqz9+/33Xlnff/XDMFb4nARK+sy0AVj0CCd+X+qXU5ULHOHK9khHtnKFl+0IDZaCCdNHGz+CW+pcg3T85150TFxjaDkIuSo1bv5qft7QzD3w1NrhZGp17oFM7f9sFS5198Eo2ByXw30SnKvm5KlBwR8vC/uH19YHhzQvjoYGq+QWhlkX9I5KBJk2L2l9KzJvtaxO/GfZa3Ncj1/9bv9gxMrP7ZEtrVVbXpuht5EKOQRnUv2+DAjfG2b/IgHzPdOSp1Cg+TznmweutiKosK79PyjCNMQ2llaWRr1aUlpXfz1lJFBA9Gl6fDwTgYWNJ5uc1fRHD/+2n6ACAZ757BQC+vLPZFvh9ftWBsTQi0OY33IA8dx9tRM1mGziirZiAXfSDKbnBaJ6AzrKQVsT9nSqCMhwCE4lSHAb2iegHQ4Bw13EUOwDcFSCuIG7/rGB0v6zgivDECiEel1dIuVjHCsvPWh5uIAb3I8CtKKwgOGUyk3x87LBHwcnLOzk/ag7cKG2A1yKIRxrfujghEl6jdRQmd3NMRdyLmRQlQZxrDonMFDzQWo+gr4EXS/JEZbHpP/2atMht60j2l1uZU5vXY7AoJG8JmhpW7tbEkgnVE+1orfwEIstvAxL73Qmw2JJ4lkN79v7gHG6dtMqq3RKyWegNZ98mYZ8ZVHdkqi5jr+hBS+6c8OGhConmQm5X25+O3xFBnwfzEKfnOxax0bgF3Jncalr06rFPx7IdAaOrobPfDNb/yg7Lx/qL70eYP07MXpi+NjTZzsc3SDcJ8UoAXzDaYXj+D04Qjjr4I/a5402wxy9ijitEr0ANIAfm92fS6/K/sNug0/bajUSrQLPsNCrUq6yWoZqgEqEc/ksBiuGi4CHvIGdfUNb+ooyuI60hpfeSBhJmJ64gJr9RVO5FJIRlHiH5jYICAgz8DMPHwcsxPAA3lbkoOAk47sBmkdtq0SKz7tKkxzDqEzDon5BeJ9OonVApMRR/YXx/OfGOWpLw5Obke3IqU5K6s5OjPVkyOak7M8nmxgiPMTgxvtuTWOxJT7BJvL3Ea56UyqTUrkRffGpX8tVN+N2JSxoZf74zpjzaH1Ue6Y+2Iq0wn9svfcLvtoTlEX2CRYiV4nfBI3rD/S6f06/5lJ/K4Q+3nJayVioqVU1qtuKjVJ9aqTisUlCF2fgdL3y6n/uYX7eY5WF9jEWwlex3xrlpSnqAdobavXUPaHa6LuRo7grRplDOCPuoZktnSG0Kwd/Z1XEn0XZr/bZtSLu5LrSzreMujvMtWXcydktLx52Cb7fmB+CF1+u9oa30w3ulJCslbSRt9FJ0mwkvcJMfEbJFGWWU1cWHDC6G31QiAAAA) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAWsAA8AAAAABvgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABQAAAAUAA8ACUdQT1MAAAFsAAAAHgAAAB5EdEx1R1NVQgAAAYwAAAAzAAAANJMNggJPUy8yAAABwAAAAEsAAABgdTbg0FNUQVQAAAIMAAAAQwAAAFpe+kGhY21hcAAAAlAAAABAAAAAXj5j4n9nYXNwAAACkAAAAAwAAAAMAAgAGWdseWYAAAKcAAABMQAAATZvegfraGVhZAAAA9AAAAA2AAAANgmwYTFoaGVhAAAECAAAAB8AAAAkCykF1WhtdHgAAAQoAAAAHwAAACQX6P92bG9jYQAABEgAAAATAAAAFAFZAbFtYXhwAAAEXAAAABwAAAAgACkBIW5hbWUAAAR4AAABHwAAAmA0U2IscG9zdAAABZgAAAATAAAAIP9tAGQAAQAAAAwAAAAAAAAAAQAIAAEAAQABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBiMAJCFhc3nxAGueTKohwGqfSi1GwGqZzEkjwGKQYQYAER//+DSADdjQkeAHjaTcW7DUBQAADA8z6M4e2gU+lUYgtDKVjBAJawkChE4pqT0hZOmbzmjqp9j5clIPgMRD/jPI8K7VS7WZo1KKodUp8PFPEB+BQKVAB42gXBsQEBARQFsLx/QAm1EjAUAOjAcoaTiOhpMNZgrb6H1yXhe768Qq6v7SOldAxNBJWZAyKkXz80SmUOwh97twc3AHjaY2BgYAJiZiAWAZKMYJqFwQtI8zFwAOXYwCp4GRQYFsj7/v8P5KHwQTr+f/v/5H/6g91g3TwMCMAEANCmDfkAAQACAAgACP//AA942h2PNVQDQRRF//xlEtwjDe5OtIk0uLv7HnrcqXDvW5xyUyYV1uLWn9DhrjuLPK0vUGgF4GKpABzIwA08wQeA+IX5UUKi3LgwN+RiRTMusDviJ24QL/ZE4hlDThQJEkKFz2IqlIvD4rAn9mO/mC4u0d9iIwBCpXRNk+kuKCABgCgCUSaLCI+ORoNB72806rRKpT816JMxItwbFYrAYNRprUiTa1ecM9POtbraVef0jHO1jh3Fl/bm5/eUxP9/b3E8fmassXc7z9uJ61rGOpE7eN7BPq6zuoV+i6Vf6M7qsg1YrQM2AIRal3bcpRdA/8kMAToFF2XQKQKVKnl0NBnv2L9kgxsRCaXZ9S6jamJWsK3XxmprQ1hZ5LQkMf6XoZueQzTQTAA5yJirJP0AwXdhkAAAAAABAAAAAwJOnZybkl8PPPUAGwgAAAAAAMTwES4AAAAA4dQCb/ox/dUJiQhzAAEACQACAAAAAAAAeNpjYGRgYM/5x8PAwNnzy/CfMWcnUAQVcAIAfMQFDAB42mPuYUhhgALGvxDM2sIQxizOEAVmn/qXBABmvgdwAHjaY2Bg0IXDAoZ+IJwNABOkAwsAeNpjYGRgYOBkWMkgylDGwA7mIQAzAyMAHeQBS3jabZA1VgRAEAULd0JS3N0twd01hXV3zbkMLifgQIQcgP9mh0XftFTbGNDIA2WUlNeIX0qwXEI975ZLqeatwLIDvFoup4kbyxV0cWW5UvmI5UammClwCdQzYLmEWtoslyrfZLnm8yxxt/K1lntEcESUMJdE2BMlDIfYJGW8Hyfnsi7FPpFb7BWlkGrFSDLHsFZU7CaCRxRRxcyaTFJ2yOztNac5pCnpIEuyIVycqSOhPr+ZbWFc/SNas8wrGhONMfFjtqU4+713nX2tddH/51j/o7psbp4nUXxZ4cRRrRZOlHHL/zz7gIR8QBWn6V8kjX5EOb1Ccc+f3/HiNx1pHAzhNH+urHxUNoS7+G9J5RM/bu9U/VJ5/Y+49wPc81e/AHjaY2BmAIP/WQwpDFgAACofAdEA) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* roboto-greek-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-greek-700-normal-DpKAje7q.woff2) format('woff2'), url(/assets/roboto-greek-700-normal-DXrPs8of.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* roboto-math-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-math-700-normal-xbpggnJp.woff2) format('woff2'), url(/assets/roboto-math-700-normal-yuY-ZMbs.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* roboto-symbols-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-symbols-700-normal-DKkQdRpM.woff2) format('woff2'), url(/assets/roboto-symbols-700-normal-D_8z4JZ9.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* roboto-vietnamese-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-vietnamese-700-normal-BFWtvCOj.woff2) format('woff2'), url(/assets/roboto-vietnamese-700-normal-7YosmkaU.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* roboto-latin-ext-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-latin-ext-700-normal-BNPgmEQS.woff2) format('woff2'), url(/assets/roboto-latin-ext-700-normal-DGcaX69F.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* roboto-latin-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/roboto-latin-700-normal-DZr4b_KL.woff2) format('woff2'), url(/assets/roboto-latin-700-normal-D74k8Kh_.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}