body {
   margin: 5mm;
}
.helvetica-neue {
   font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.inter-font {
   font-family: "Inter";
}
.dark-teal-background {
   background-color: rgb(30, 70, 86);
}
.dark-teal-text {
   color: rgb(30, 70, 86);
}
.white-text {
   color: white;
} 

.header {
   font-size: 20px;
    font-weight: 600;
    height: 50px;
    display: block;
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
}
.sub-header {
   font-size: 16px;
   font-weight: 500;
}
.clinic-name-input {
   width: 100%;
   padding: 10px 8px;
   font-size: 20px;
   box-sizing: border-box;
   margin-bottom: 10px;
}
.print-page {
   width: 210mm;
   margin: auto;
   max-width: 100%;
}
.contents {
   display: flex;
   gap: 40px;
   justify-content: space-between;
   margin-top: 10px;
   line-height: 1.5;
}
.left-column, .right-column {
   flex: 1;
   display: flex;
   flex-direction: column;
}
.step-divider {
   border-left: 1px solid;
}
input {
   padding: 8px;
   background-color: #d3d3d341;
   border: none;
}
.qr-div{
   width: 100%;
   height: 140px;
   background-color: #d3d3d341;
   margin: auto;
}
.step {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-top: 10px;
}
.step-5 {
   margin-top: 20px;
}
.step>span {
   color: rgb(30, 70, 86);
   font-weight: 600;
   font-size: 13px;
}
.step>p {
   font-size: 12px;
   font-weight: 500;
   color: rgb(30, 70, 86);
}
img {
   margin: auto;
   border: 1px solid;
   margin-top: 10px;
   margin-bottom: 5px;
}
.step-2>img {
   width: 180px;
}
.step-5>img {
   width: 220px;
}
.step-3>img, .step-4>img {
   width: 155px;;
}
.tip-div {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 80px;
   margin-top: 30px;
   background-color: #d3d3d341;
   padding: 10px;
}
.tip-div>span {
   font-size: 12px;
   font-weight: 600;
   color: rgb(30, 70, 86);
   padding-right: 15px;
}
.need-help {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-top: 20px;
}
.need-help>span {
   font-size: 12px;
   font-weight: 600;
}
.green-text {
   color: rgba(0, 128, 128, 0.797);
   font-size: 12px;
}
.hda-logo>img {
   border: none;
   margin-top: 40px;
   width: 150px;
   float: right;
}
.tip-div>img {
   border: none;
   width: 50px;
   height: 50px;
   margin-right: 5px;
}
.no-print {
   position: fixed;
   bottom: 5%;
   left: 50%;
   transform: translate(-50%);
   background-color: black;
   padding: 20px;
   color: white;
   border-radius: 0.25rem;
   cursor: move;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   justify-content: center;
}
.no-print:hover {
   background-color: #333;
}
.no-print select {
   padding: 5px;
   font-size: 14px;
   border: none;
}
.no-print button {
   padding: 8px 12px;
   font-size: 14px;
   background-color: white;
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
}
.no-print button:hover {
   background-color: #ddd;
}
@page {
   size: A4;
   margin: 0;
}
@media print {
   body, html {
      margin: 0;
      padding: 0;
      height: 297mm;
      overflow: hidden;
   }
   body>* {
      -webkit-print-color-adjust: exact; 
      print-color-adjust: exact;         
   }
   .print-page {
      width: 190mm;
      height: 297mm;
      page-break-after: always;
      overflow: hidden;
      padding: 10mm;
   }
   .contents {
      line-height: 1;
   }
   .no-print {
      visibility: hidden;
   }
}