:root {
  --A4-width: 210mm;
  --A4-height: 292mm;
}

@page {
  size: A4;
  margin: 6rem;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* Number of lines to show before ellipsis */
  -webkit-box-orient: vertical;
  line-height: 1.2;
  /* Adjust as needed for line height */
  max-height: calc(1.2em * 4);
  /* Adjust as needed for line height and number of lines */
}

.flex-basis-50 {
  flex-basis: 50%;
}


#order-slip-content {
  overflow: hidden;
  /*height: calc(var(--A4-height)/2);*/
  /*width: calc(var(--A4-width)/2);*/
  margin: 0 auto;
}

#order-slip-content .container {
  position: relative;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 18em auto auto;
  gap: 0rem 0rem;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "."
    ".";
  min-width: var(--A4-width);
  min-height: var(--A4-height);
  border-width: medium;
  border-color: #9a6e3a;
  border-style: solid;
  padding: 0rem;
  font-size: 15px;
  transform: scale(.58) translate(-50%, -50%);
  transform-origin: 0 0;
}

#kt_body img {
  /* Make sure the image doesn't exceed the container width */
  max-width: 100%;
}

.container_footer {
  display: grid;
  grid-template-columns: 30% 70%;
}

#order-slip-content .container_footer {
  display: grid;
  grid-template-columns: 30% 70%;
}

#order-slip-content .footer-block {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.highlighted-text {
  font-weight: bold;
  line-height: 3rem;
}

#order-slip-content .highlighted-text {
  font-weight: bold;
  line-height: 3rem;
}

.large-text {
  font-size: x-large;
}

#order-slip-content .large-text {
  font-size: x-large;
}

.number-box {
  float: right;
  font-size: xx-large;
  width: 4.5rem;
}

#order-slip-content .number-box {
  float: right;
  font-size: xx-large;
  text-align: center;
  width: 4.5rem;
}

.bold {
  font-weight: bold;
}

#order-slip-content .bold {
  font-weight: bold;
}

.max-width-100 {
  max-width: 100% !important;
}

/*set modal height and width:*/
.modal-height {
  max-height: 655px !important;
}

@media (min-width: 576px) {
  #printModal .modal-dialog {
    max-width: 515px !important;
  }
}

@media screen and (max-width: 525px) {
  .modal-height {
    max-height: 570px !important;
  }

  #order-slip-content .container {
    transform: scale(.5) translate(-50%, -50%);
  }
}

@media screen and (max-width: 465px) {
  .modal-height {
    max-height: 485px !important;
  }

  #order-slip-content .container {
    transform: scale(.42) translate(-50%, -50%);
  }
}

@media screen and (max-width: 405px) {
  .modal-height {
    max-height: 400px !important;
  }

  #order-slip-content .container {
    transform: scale(.34) translate(-50%, -50%);
  }
}

@media screen and (max-width: 345px) {
  .modal-height {
    max-height: 315px !important;
  }

  #order-slip-content .container {
    transform: scale(.26) translate(-50%, -50%);
  }
}