.a4-page-wrapper {
  padding: 1cm;
  width: 21cm !important;
  height: 29.7cm !important;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
}

.a5-page-wrapper {
  padding: 1cm;
  width: 14.8cm !important;
  height: 21cm !important;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
}

.label-page-wrapper {
  padding: 2mm;
  width: 101mm !important;
  height: 152mm !important;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
}

.thermal-page-wrapper {
  padding: 5mm;
  width: 80mm !important;
  height: 200mm !important;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
}

.text-bold {
  font-weight: bold;
}

.text-right {
  text-align: right;
}

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

.text-left {
  text-align: left;
}

* {
  font-family: 'Open Sans', sans-serif;
}

th,
td,
tr {
  font-size: small;
  color: #000000 !important;
}

p {
  padding: 0;
  margin: 0;
}

/*
 * Bootstrap-like Table Styling
 * This CSS provides a clean, responsive, and structured look for tables.
 */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
}

/* --- Table Headers (thead) --- */
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  background-color: #f8f9fa;
  color: #495057;
}

/* --- Table Cells (tbody) --- */
.table tbody td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

/* --- Basic Striping (Bootstrap 'table-striped') --- */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* --- Hover Effect (Bootstrap 'table-hover') --- */
.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
  transition: background-color 0.2s ease-in-out;
}

/* --- Bordered Table (Bootstrap 'table-bordered') --- */
.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

/* --- Small Table (Bootstrap 'table-sm') --- */
.table-sm th,
.table-sm td {
  padding: 0.1rem !important;
}

.table-border-none {
  border: none !important;
}

.table-border-none th,
.table-border-none td {
  border: none !important;
}

.table-border-none thead th,
.table-border-none thead td {
  border: none !important;
}

/* --- Responsive Table Wrapper (Bootstrap 'table-responsive') --- */
/* This wrapper ensures the table scrolls horizontally on small screens */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive>.table {
  margin-bottom: 0;
}


/* --- Bootstrap-like Grid System --- */

/* 1. Containers (Center content and provide horizontal padding) */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* 2. Row (Enables Flexbox and negative margins to offset column padding) */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-left: -8px;
}

/* 3. Base Column Padding */
/* Apply padding to all column classes for internal spacing (gutters) */
.col {
  padding-right: 8px;
  padding-left: 8px;
}

/* 4. Default Column Sizing (Mobile First / < 768px) */
.col {
  flex-grow: 1;
  /* Allows columns without explicit size to fill space */
  max-width: 100%;
}

/* Explicit widths for mobile/small screens (col-1 to col-12) */
.col-1 {
  width: 8.333333%;
}

.col-2 {
  width: 16.666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.333333%;
}

.col-5 {
  width: 41.666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.333333%;
}

.col-8 {
  width: 66.666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.333333%;
}

.col-11 {
  width: 91.666667%;
}

.col-12 {
  width: 100%;
}

/* 5. Medium Breakpoint (md - approx 768px) */
@media (min-width: 768px) {

  /* Container max width for medium screens */
  .container {
    max-width: 720px;
  }

  /* Resetting base column behavior and applying flex basis for md-* classes */
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}