.user_reallocate {
  box-sizing: border-box;
}

.user_reallocate.outer {
  border: 2px groove;
  background: rgb(159, 159, 159);
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 3em 1fr;
  grid-template-columns: 50% 50%;
}

.user_reallocate .title {
  font-weight: bold;
  background: rgb(159, 159, 159);
  color: black;
  text-align: center;
  margin: 2px;
  padding: 0.5em;
  vertical-align: middle;
  font-size: 1.5em;
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 3;
}

dialog.user_reallocate {
  box-sizing: border-box;
  background: #DDD;
  height: 90%;
  display: flex;
  padding: 0;
}

.user_select_container,
.user_list_container {
  color: black;
  padding: 1em;
  background: #DDD;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  min-height: 0px;
}

.user_select_container .select_title {
  color: black;
  text-align: center;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 1.5em;
  font-weight: bold;
  background: #DDD;
}

.user_select_container .search,
.user_list_container .search {
  flex: 0 0 auto;
}

.user_select_container .list,
.user_list_container .list {
  flex: 1 1 auto;
  overflow-y: auto;
  background-color: white;
}

.user_select_container .user,
.user_list_container .user {
  user-select: none;
  padding: 0.16em;
  display: grid;
  grid-template-columns: 4em 1fr;
}

.user_select_container .user {
  cursor: pointer;
}

.user_select_container .user:hover {
  background-color: #DEF;
}

.user_list_container .user.selected {
  background-color: #DEF;
}

.user .user_id,
.user .user_products {
  font-size: 90%;
}

.user .user_id {
  text-align: center;
}

.user_allocation_container {
  background: #DDD;
  color: black;
  padding: 0 1em 1em 1em;
  grid-row: 2;
  grid-column: 1;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  border-right: 1px dashed #AAA;
}

.user_allocation_container .title {
  flex: 0 0 auto;
  background: #DDD;
  font-weight: normal;
}

.user_allocation_container .list {
  flex: 1 1 auto;
  overflow-y: auto;
  background-color: white;
}

.user_allocation_container .product {
  user-select: none;
  padding: 0.16em;
  display: grid;
  grid-template-columns: 5em 1fr;
}

.user_allocation_container .product.selected {
  background-color: #F0F9FF;
}

.user_allocation_container .product:hover {
  background-color: #DEF;
}

.product .fin_number,
.product .product_name {
  font-size: 90%;
}

.product .fin_number,
.product .select_box {
  display: flex;
  align-items: center;
  justify-content: center;
}