/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

.limited-width-form {
  max-width: 600px;
}


.bg-dull {
  background-color: #E7EAEF!important;
}

/* CASH REGISTER */
.secondary-currency {
  width: auto;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: end;
}

.catalogue-item, .table-element {
  min-height: 128px;
  min-width: 128px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
  flex-direction: column;
}

.catalogue-item:hover, .table-element:hover {
  cursor: pointer;
}

.catalogue-item img, .catalogue-item span, .table-element span {
  display: block;
}

.catalogue-item span, .table-element span {
  word-wrap: break-word;
  word-break: break-word;
  font-weight: bold;
}

.catalogue-item .price-label, .table-element .price-label {
  text-align: end;
  padding-top: 0.25rem;
  margin-top: auto;
}



#selected-products-list .product-selection {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

#selected-products-list .product-selection:not(:first-child) {
  border-top: 1px solid #dee2e6;
}

@keyframes bg {
  0% { background: #107360; }
  100% { background: rgba(255, 255, 255, 0); }
}

#newly-selected {
  animation: bg 0.5s linear;
}

#selected-products-list .price-label {
  font-weight: 700;
  display: block;
  text-align: right;
}

#selected-products-list .secondary-price-label {
  display: block;
  text-align: right;
}

















.newly-selected {
  background-color: #C3CCCC;
}



.dataTables_length {
  display: inline-block;
  margin-right: 1em;
}



.symboled-number-input {
  position: relative;
}

.symboled-number-input > input {
  padding-right: 40px;
}

.symboled-number-input > span {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
  right: 15px;
  color: gray
}

/* Chrome, Safari, Edge, Opera */
.symboled-number-input > input::-webkit-outer-spin-button, .symboled-number-input > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#quantity-input {
  font-size: 2em;
  font-weight: bold;
}

#terminal-selector .terminal {
  background-color: #107360;
  display: inline-block;
  width: 120px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  box-sizing: initial;
  color: white;
  position: relative;
}

#table-selector .table {
  display: inline-block;
  width: 120px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  box-sizing: initial;
  position: relative;
}

.grid-modal {
  user-select: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
}

#weekdays-selector input {
  display: none!important;
}

#weekdays-selector input[type=checkbox] + label {
  display: inline-block;
  background: #dddddd;
  margin-right: 0.2em;
  line-height: 3em;
  text-align: center;
  cursor: pointer;
  border-radius: .25rem;
}

#weekdays-selector input[type=checkbox]:checked + label {
  background: #28a745;
  color: #ffffff;
}

#weekdays-selector input[type=checkbox]:not(:checked) + label {
  opacity: 0.4;
}


.table-color-display {
  min-height: 24px;
  border: 1px solid black;
}


.multiplier.active-multiplier, .multiplier.active-multiplier:focus, .multiplier.active-multiplier:hover {
  background-color: #107360;
}

/* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
#full-catalogue {
  user-select: none;
  /**
  * User input values.
  */
  --grid-layout-gap: 10px;
  --grid-column-count: 8; /* This gets overridden by an inline style. */
  --grid-item--min-width: 120px; /* This gets overridden by an inline style. */
  
  /**
  * Calculated values.
  */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-auto-rows: 1fr;
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 25vw, 200px), 1fr));
}


/* Select2 bootstrap */
span.select2-container {
  display: block;
}

.select2-selection {
  border: var(--bs-border-width) solid var(--bs-border-color)!important;
  border-radius: var(--bs-border-radius)!important;
  height: auto!important;
  min-height: 38px;
}

.select2-selection span[role="textbox"] {
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5!important;
  color: var(--bs-body-color)!important;
}

.select2-selection .select2-selection__arrow {
  top: 6px!important;
}