#card-front, #card-back {
    width: 64.3mm;
    height: 102.4mm;
  position: relative; 
  overflow: hidden;     
  box-sizing: border-box; 
  border: 9px solid #000; 
  padding: 1mm; 
  border-style:double;
}
html, body {
    width: 133.6mm;
    height: 102.4mm;
    overflow: hidden;
    margin: 0;
}

#card-front .emp-value,#card-back .emp-value {
    font-size: 8pt;
    font-weight: bold;
    text-align: center;
}
#card-front .emp-no-box hr {
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}
#card-back .address-section .emp-value {
    margin-top: 2mm;
}

#card-front .emp-no-box span {
    margin-top: 0;
    display: block;
}


.emergency-name {
  margin-top : 2mm;
}
#card-front p, #card-front span {
font-size: 7pt;
margin: 0;
padding: 0;
line-height: 1.3;
}
#card-back p {
font-size: 7pt;
margin: 0;
padding: 0;
line-height: 1.3;
}

body {
    display: flex;
    flex-direction: row;
    gap: 5mm;
    padding: 0;
}
#card-back {
display: flex;
flex-direction: column; 
}

#card-front {
display: flex;
flex-direction: column;
}

#card-front .card-header {
  width: 100%;
  height: 18mm;
  text-align: center;
  overflow: hidden;
 
}

#card-front .card-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2mm;
  padding-top: 8mm;
  padding-right: 2mm;

}

#card-front .photo-box {
  width: 22mm;
  height: 22mm;
  border: none;
  box-shadow: 0 0 0 0.2px #000;
  
}

.photo-box img {
      width: 22mm;
      height: 22mm;
      object-fit: cover;   
}


#card-front .emp-no-box {
  flex: 1;
  text-align: center;
}
#card-front .card-header img {
width: 100%;
height: auto;
}
#card-front .emp-no-box img {
width: 15mm;
height: auto;
}

#card-front .company-logo-box {
  text-align: center;
}
#card-front .card-info{
  margin-top: 2mm;
  padding-top: 1mm;
  border-top:0.3mm solid #000;
}




#card-back .card-message{
    font-size: 8pt;
    font-style: italic;
    text-align: center;
    padding-top:3mm;
    padding-left: 2mm;
    padding-right: 2mm;
}
#card-back .signatory-title {
    font-style: italic;
}
#card-front .card-signature {
  margin-top: auto;
  margin-bottom: 3mm  ;
  text-align: center; /* pushes to bottom */
}

#card-back .address-section {
margin-bottom: 2mm;

}
#card-back .emergency-section {
margin-bottom: 2mm;
}
#card-back .signatory-section {
text-align: center;
margin-top: auto;
margin-bottom: 3mm;


}
#card-back .signature img {
    width: 24mm;
    position: absolute;
    top: -3mm;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: multiply;
   
}
#card-back .name-block {
    position: relative;
    padding-top: 8mm;
    text-align: center;
}



hr {
    border: none;
    height: 1px;           /* Set a base height */
    background-color: #000;
    transform: scaleY(0.2); /* Squeezes the height by 80% */
    margin: 0.1mm 0;
}

.status.placeholder-notice {
    background: #FEF9C3;
    color: #854D0E;
    border: 1px solid #FDE047;
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: bold;
}


.text-normal { font-size: 8pt; }
.text-medium { font-size: 7pt; }
.text-small  { font-size: 6pt; }

.control-number {
    font-size: 5pt;
    text-align: right;
    color: #555;
    padding-right: 1mm;
}
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
@page {
  margin: 0; 
}