body{
  font-family:Arial,sans-serif;
  margin:0;
  background:#f5f6fa;
}

/* HEADER */

.header{
  background:#000;
  color:#FFD700;
  padding:12px 20px;
  display:flex;
  justify-content:space-between;
  font-weight:bold;
}

.sub-header{
  text-align:center;
  font-size:22px;
  font-weight:bold;
  margin:10px 0;
}

/* INPUTS */

.container{
  display:flex;
  gap:20px;
  padding:0 20px;
}

textarea{
  flex:1;
  height:180px;
  padding:10px;
  box-sizing:border-box;
}

/* BUTTONS */

.controls{
  text-align:center;
  margin:15px 0;
}

button{
  padding:12px 25px;
  margin:5px;
  border:none;
  background:#000;
  color:#FFD700;
  font-weight:bold;
  cursor:pointer;
}

/* OUTPUT */

.page{
  width:210mm;
  margin:auto;
  background:#fff;
  padding:10mm;
  box-sizing:border-box;
}

.row{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.label{
  flex:1;
  border:3px solid #000;
  min-height:180px;
  padding:8px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.label-title{
  width:100%;
  font-weight:bold;
  font-size:14px;
  margin-bottom:10px;
}

.barcode-box{
  width:100%;
  text-align:center;
}

canvas{
  max-width:100%;
}

.label-text{
  margin-top:10px;
  font-weight:bold;
  text-align:center;
  word-break:break-all;
}

.rider-text{
  font-size:22px;
  font-weight:bold;
  text-align:center;
  word-break:break-word;
}

@media print{

  .header,
  .sub-header,
  .container,
  .controls,
  hr{
    display:none;
  }

  .page{
    width:100%;
    margin:0;
    padding:0;
  }

  .row{
    display:flex !important;
  }

  .label{
    flex:1 !important;
  }
}