:root {
  --main-bg: #F6F6F6;
  --orange: #FF6200;
  --item-selected: #fff3e0;
}

#id-order-recess-container .order-recess-border {
  background: white;
  border: 1px solid #D8D8D8;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#id-order-recess-container .order-recess-search-row {
  gap: 10px;
}

#id-order-recess-container .order-recess-products-container {
  max-height: 320px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 296px,
    transparent 320px
  );
  mask-image: linear-gradient(
    to bottom,
    black 296px,
    transparent 320px
  );
}

#id-order-recess-container .border-element:hover {
  border: 1px solid var( --orange );
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#id-order-recess-container .border-element:not(:hover):not(.select-element) {
  border: 1px solid #BDBDBD;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  opacity: 1;
}

#id-order-recess-container .select-element {
  background: var( --item-selected );
  border: 1px solid var( --orange );
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#id-order-recess-container .order-recess-product-disabled {
  opacity: 0.5;
  pointer-events: none;
}

#id-order-recess-container .order-recess-product-check {
  width: 25px;
}

#id-order-recess-container .order-recess-product-img img {
  border-radius: 4px;
}

#id-order-recess-container .order-recess-product-name {
  word-break: break-word;
}

#id-order-recess-container .order-recess-select {
  border: 1px solid #BDBDBD;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#id-order-recess-container .order-recess-select-selected {
  border: 1px solid var( --orange );
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#id-order-recess-container .order-recess-select:hover:not(:disabled) {
  border: 1px solid var( --orange );
}

#id-order-recess-container .order-recess-select > option :hover {
  border: 1px solid var( --orange );
}

#id-order-recess-container .order-recess-input-text {
  border: 1px solid #DDDDDD;
  border-radius: 5px;
  width: 100%;
}