:root {
  --product-change-popup-width: 80vw;
  --products-area-height: 50vh;
  --product-change-popup-row-gap: 10px;
}

@media screen and (max-width: 1280px) {
  .product-change-popup {
    --product-change-popup-width: 95vw;
    --dxbl-popup-body-padding-x: 0.25rem;
  }
}
@media screen and (max-height: 1000px) {
  .product-change-popup {
    --products-area-height: 60vh;
    --dxbl-popup-body-padding-y: 0.25rem;
    --product-change-popup-row-gap: 5px;
  }
}
.pp-productcombobox-dropdown {
  transform: scale(var(--scalefactor));
  transform-origin: left top;
}

.pp-productcombobox .pp-label, .pp-productpopup .pp-label {
  margin-bottom: unset;
}

.pp-productcombobox .product-combobox {
  height: 100%;
}
.pp-productcombobox .product-combobox .dxbl-btn span.oi {
  padding-inline: 0.25rem;
}

.pp-productpopup .product-row {
  height: 100%;
}
.pp-productpopup .product-row .product-textbox {
  align-content: center;
}

.product-textbox {
  width: 100%;
  background-color: var(--card-background-color);
  color: var(--table-text-color);
  --dxbl-text-edit-padding-x: 0.25rem;
  --dxbl-text-edit-padding-y: 0.1875rem;
  border-radius: var(--card-border-radius);
  padding: var(--dxbl-text-edit-padding-y) var(--dxbl-text-edit-padding-x);
  --dxbl-text-edit-disabled-opacity: 100%;
  --table-background-color: var(--card-background-color);
}

.product-flex-column {
  display: flex;
  flex-direction: column;
  row-gap: var(--product-change-popup-row-gap);
}
.product-flex-column .products-area {
  min-height: 200px;
  height: var(--products-area-height);
  max-height: 800px;
}

.product-change-popup {
  min-width: 400px;
  --dxbl-popup-width: var(--product-change-popup-width);
  --dxbl-popup-max-width: 1200px;
}
.product-change-popup .dxbl-modal-body {
  padding-top: 0px !important;
}

.product-row {
  display: flex;
  flex-direction: row;
  background-color: var(--card-background-color);
  border-radius: var(--card-border-radius);
  border: 1px solid var(--dxbl-body-bg);
}

.seperator {
  height: inherit;
  width: 1px;
  background-color: var(--dxbl-body-bg);
}

.pp-product-button {
  background-color: var(--card-background-color);
  min-width: 30px;
  border: unset;
  color: var(--table-text-color);
  margin: 3px;
}
.pp-product-button:hover {
  background-color: #414955 !important;
  color: var(--table-text-color) !important;
}

.column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.active-new-product-row {
  display: flex;
  flex-direction: row;
  font-size: 1.5rem;
}
.active-new-product-row .product {
  width: 100%;
}
.active-new-product-row .product .pp-label {
  font-size: 1rem;
}
.active-new-product-row .arrow {
  padding-inline: 20px;
  font-size: 2rem;
}