/* Add spacing for the content to move below the fixed header */
.content-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 80px;
  margin-left: 120px;
} 

.index-button span {
    font-weight: bold;
    font-size: 16px;
}


.page-content-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 80px;
  margin-left: 420px;
} 

.filter-content-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 80px;
  margin-left: 420px;
} 

.button-content-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 2px;
  margin-left: 420px;
} 
.second-content-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 380px;
} 

.predict-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-column: 3; /* Place this item in the second column */
}

.subscription-wrapper {
  margin-left: 240px;
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-column: 2; /* Place this item in the second column */
}

.select-content-wrapper {
  justify-content: center;
  align-items: center;
  text-align: center;
} 

.border-wrapper {
  border: 1px solid rgb(155, 3, 171); /* You can adjust the color and width of the border as needed */
  padding: 10px; /* Add padding inside the border to separate the content from the border */
}

.index-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: auto;
  text-align: center;
}

.landing-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: auto;
  text-align: center;
  padding-left: 300px;
}

.promo-content-wrapper {
  display: grid;
  grid-template-columns: auto; /* Two columns */
  grid-template-rows: auto; /* Auto-sized rows */
  border: #b6b6b6;
  text-align: center;
  float: center;
}

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

.reagent_reports {
  grid-column: 1; /* Place in the first column */
  padding-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.reagent_management {
  grid-column: 2; /* Place in the second column */
  padding-top: 80px;
  display: flex;
  align-items: left;
  justify-content: left;
  width: 100%;
}

.layout_management {
  align-items: center;
  justify-content: center;
}

.reagent_management {
  grid-column: 2; /* Place this item in the first column */
}

.layout_management {
  grid-row: 3; /* Place this item in the second row */
}

.reagent_reports {
  grid-column: 1; /* Place this item in the second column */
}

.sub_column {
  grid-column: 2; /* Place this item in the second column */
}

.column_set {
  grid-column: 2; /* Place this item in the second column */
}

.dept-align {
  align-items: center;
  justify-content: center;
  margin-left: 120px;
}

/* Reset default margin and padding */
body, div {
  margin: 0;
  padding: 0;
}
/* Apply a background color and padding to the header */
.header-wrapper {
  background-color: #7121aa; /* Facebook blue color */
  padding: 2px;
  width: 100%;
  display: block;
  position: fixed; /* Fixed position to keep it independent of grid layout */
  top: 0; /* Position at the top of the viewport */
  left: 0; /* Position at the left of the viewport */
  z-index: 999; /* Ensure it's above other content */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent),
                      linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
  }

/* Style the header elements */
.header {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center; /* Center text horizontally */
  margin: 0 auto; /* Center the flex container horizontally */
}

.modal {
  display: none;
  /* ... other styles ... */
}

/* Apply common label styles */
.label {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem; /* Updated to use rem units for better scalability */
  font-weight: 400; /* Using numeric values for font-weight for consistency */
  color: #4a4a4a; /* Dark gray color for better readability */
  margin-bottom: 8px; /* Increased margin for better spacing */
  font-family: 'Roboto', sans-serif; /* Using a more modern font */
  border-radius: 5px; /* Adding a subtle border-radius for rounded corners */
}

.text_blob {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 50px;
  padding: 10px;
  font-family: 'Roboto', sans-serif; /* Using a more modern font */
}

.criteria {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem; /* Updated to use rem units for better scalability */
  font-weight: 400; /* Using numeric values for font-weight for consistency */
  color: #7400aa; /* Dark gray color for better readability */
  margin-bottom: 10px; /* Increased margin for better spacing */
  font-family: 'Roboto', sans-serif; /* Using a more modern font */
  padding: 15px; /* Increased padding for better visual appeal */
  border-radius: 5px; /* Adding a subtle border-radius for rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adding a subtle box-shadow for depth */
  transition: all 0.3s ease; /* Adding smooth transition for hover effects */
  background: linear-gradient(45deg, #ffffff, #f0f0f0); /* Gradient from white to light gray */
}
.discard_info {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem; /* Updated to use rem units for better scalability */
  font-weight: 400; /* Using numeric values for font-weight for consistency */
  color: #7400aa; /* Dark gray color for better readability */
  margin-bottom: 10px; /* Increased margin for better spacing */
  font-family: 'Roboto', sans-serif; /* Using a more modern font */
  padding: 15px; /* Increased padding for better visual appeal */
  border-radius: 5px; /* Adding a subtle border-radius for rounded corners */
}

/* Hover effect for the label */
.label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.title {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem; /* Updated to use rem units for better scalability */
  font-weight: 400; /* Using numeric values for font-weight for consistency */
  color: #8e07b7; /* Use hex color for consistency */
  margin-bottom: 8px; /* Increased margin for better spacing */
  font-family: 'Roboto', sans-serif; /* Using a more modern font */
  border-radius: 5px; /* Adding a subtle border-radius for rounded corners */
}

.index-text {
  font-size: 1.8rem;
  font-weight: 400;
  color: #6a6a6a;
  font-family: Arial, Helvetica, sans-serif;
  grid-column: 1;
  width: 600px;
  margin-right: 80px;
  text-justify: left;
  text-align: left;
}

.support-text {
  font-size: 1.8rem;
  font-weight: 400;
  color: #6a6a6a;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  text-justify: center;
}

.bold-text {
  font-size: 3.2rem;
  font-weight: 800;
  color: #6a6a6a;
  font-family: Arial, Helvetica, sans-serif;
  grid-column: 1;
  width: 600px;
  margin-right: 80px;
  text-justify: left;
  text-align: left;
}

.bottom-text {
  font-size: 3.2rem;
  font-weight: 800;
  color: #6a6a6a;
  font-family: Arial, Helvetica, sans-serif;
  width: 600px;
  margin-right: 80px;
  text-justify: center;
  text-align: center;
  display: inline-block;
}

.disclaimer {
  font-size: 1rem;
  font-weight: 200;
  color: #020000;
  font-family: Arial, Helvetica, sans-serif;
  text-justify: left;
  text-align: left;
  width: 100%;
  margin-left: 20px;
}

.index-tag {
  font-size: 1.8rem;
  font-weight: 500;
  color: #6a6a6a;
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin-top: 100px;
  align-items: center;
  text-align: center;
  font-style: italic;
}

.promo-wrapper.show {
  opacity: 1;
}

.promo-wrapper {
  display: flex;
  margin: 30px;
  margin-left: 100px;
  margin-top: 100px;
  opacity: 0;
  transition: opacity 1s ease;
}

.logo img {
  height: 36px;
  width: 120px;
  border-radius: 6px;
}

/* Style the clickable text fields */
.account, .logout, .help {
  color: white;
  font-size: 18px;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 10px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  float: right;
  align-items: center;
  padding: 10px;
  background: rgb(114, 114, 114);
  border-radius: 6px;
}

/* Style the clickable text fields */
.username, .facility {
  color: white;
  font-size: 18px;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 10px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  float: left;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
}

/* Add hover effect to clickable elements */
.account:hover, .help:hover, .logout:hover, .fa-flask:hover {
  text-decoration: underline;
}

.logo {
  float: left;
  padding: 10px;
}


/* Apply common button styles */
.submit-button {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #7121aa;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  color: #7121aa;
  background-color: #f5f2f7;
  margin: 0 auto; /* Center horizontally */
  display: block; /* Change the display property to block */
}

.submit-button:hover {
  background-color: #7121aa;
  color: #f5f2f7;
  border-color: #7121aa;
}

/* Define the default button style */
.submit-button.default {
  background-color: #7121aa; /* Facebook blue color */
  color: white;
}

/* Define the hover effect */
.submit-button.default:hover {
  background-color: #5e4471; /* Darker shade of Facebook blue color */
}

.vote-button {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #7121aa;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  color: #7121aa;
  background-color: #f5f2f7;
  margin: 0 auto; /* Center horizontally */
  display: block; /* Change the display property to block */
}

.vote-button:hover {
  background-color: #7121aa;
  color: #f5f2f7;
  border-color: #7121aa;
}

.support-button {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #7121aa;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  color: #7121aa;
  background-color: #f5f2f7;
  margin: 0 auto; /* Center horizontally */
  /*display: block;  */
  width: auto;
  font-family: 'Roboto', sans-serif; 
}

.support-button:hover {
  background-color: #7121aa;
  color: #f5f2f7;
  border-color: #7121aa;
}

/* Define the default button style */
.support-button.default {
  background-color: #7121aa; /* Facebook blue color */
  color: white;
}

/* Define the hover effect */
.support-button.default:hover {
  background-color: #5e4471; /* Darker shade of Facebook blue color */
}

/* Define the disabled button style */
.submit-button.default:disabled {
  background-color: #af66e3; /* Lighter shade of Facebook blue color */
  color: #b6b6b6; /* Light gray color */
  cursor: not-allowed;
}

.manage-button {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #7121aa;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  color: #7121aa;
  background-color: #f5f2f7;
  margin: 0 auto; /* Center horizontally */
  display: block; /* Change the display property to block */
}


.manage-button:hover {
  background-color: #7121aa;
  color: #f5f2f7;
  border-color: #7121aa;
}

/* Define the default button style */
.manage-button.default {
  background-color: #7121aa; /* Facebook blue color */
  color: white;
}

/* Define the hover effect */
.manage-button.default:hover {
  background-color: #5e4471; /* Darker shade of Facebook blue color */
}

/* Define the disabled button style */
.manage-button.default:disabled {
  background-color: #af66e3; /* Lighter shade of Facebook blue color */
  color: #b6b6b6; /* Light gray color */
  cursor: not-allowed;
}


.index-button {
  display: inline-block;
  padding: 12px 24px;
  margin-left: 80px;
  border: 2px solid #7121aa;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  color: #7121aa;
  background-color: #f5f2f7;
  margin: 0 auto; /* Center horizontally */
  display: block; /* Change the display property to block */
}

.index-button:hover {
  background-color: #7121aa;
  color: #f5f2f7;
  border-color: #7121aa;
}

/* Define the default button style */
.index-button.default {
  background-color: #7121aa; /* Facebook blue color */
  color: white;
}

/* Define the hover effect */
.index-button.default:hover {
  background-color: #5e4471; /* Darker shade of Facebook blue color */
}

/* Define the disabled button style */
.index-button.default:disabled {
  background-color: #af66e3; /* Lighter shade of Facebook blue color */
  color: #b6b6b6; /* Light gray color */
  cursor: not-allowed;
}

/* styles.css */

/* Apply common text box styles */
.text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.text-box:focus {
  border-color: #4a90e2; /* Accent color */
  box-shadow: 0 0 10px rgba(74, 75, 76, 0.6); /* Light shadow on focus */
}

.fix-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  margin: 0 auto;
  padding: 4px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fix-text-box:focus {
  border-color: #4a90e2; /* Accent color */
  box-shadow: 0 0 10px rgba(74, 75, 76, 0.6); /* Light shadow on focus */
}

.discard-button button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  color: #f5f2f7;
  background-color: #7121aa;
}

.drop-down {
  display: flex;
  flex-direction: column; /* Align children vertically */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  color: #000000;
  width: 100%;
  max-width: 300px; /* Set a maximum width if desired */
  transition: border-color 0.3s, box-shadow 0.3s;
  margin: 0 auto; /* Center horizontally */
}

.predict_table {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #39075c;
  border-radius: 5px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 10px;
  margin-right: 20px;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-content: center;
  width: auto
}

.landing-table {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #39075c;
  border-radius: 5px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 2px;
  margin-right: 0px;
  justify-content: right;
  align-items: right;
  justify-items: right;
  align-content: right;
  width: 100%;
}

.landing-table-values {
  text-align: center;
  font-size: medium;
  padding: 10px;
}

/* Apply styles to table headers */
.landing-table th {
  background-color: #f5f5f5;
  text-align: left;
  padding: 10px;
  font-weight: bold;
}

/* Apply alternating row colors */
.landing-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Apply styles to table data cells */
.landing-table td {
  padding: 10px;
}

/* Apply hover effect to rows */
.landing-table tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

/* Apply styles to table links */
.landing-table a {
  text-decoration: none;
  color: #7121aa; /* Blue link color */
}

.dept-table {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #39075c;
  border-radius: 5px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 0 auto;
}

.dept-table td {
  text-align: center;
  border: 1px solid #d5d9da;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 80px;
  padding-right: 80px;
  width: 200px;
}
/* Apply styles to table headers */
.dept-table th {
  background-color: #f5f5f5;
  text-align: center;
  padding: 12px;
  font-weight: bold;
}

/* Apply alternating row colors */
.dept-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Apply styles to table data cells */
.dept-table td {
  padding: 12px;
}

/* Apply hover effect to rows */
.dept-table tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

/* Apply styles to table links */
.dept-table a {
  text-decoration: none;
  color: #7121aa; /* Blue link color */
}

.inst-table {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #39075c;
  border-radius: 5px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 0 auto;
}

.inst-table td {
  text-align: center;
  border: 1px solid #d5d9da;
  padding: 12px;
  width: 180px;
}
/* Apply styles to table headers */
.inst-table th {
  background-color: #f5f5f5;
  text-align: center;
  padding: 12px;
  font-weight: bold;
  width: 220px;
}

/* Apply alternating row colors */
.inst-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Apply styles to table data cells */
.inst-table td {
  padding: 12px;
}

/* Apply hover effect to rows */
.inst-table tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

/* Apply styles to table links */
.inst-table a {
  text-decoration: none;
  color: #7121aa; /* Blue link color */
}

.rgnt-table {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #39075c;
  border-radius: 5px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 0 auto;
}

.rgnt-table td {
  text-align: center;
  border: 1px solid #d5d9da;
  padding: 12px;
}
/* Apply styles to table headers */
.rgnt-table th {
  background-color: #f5f5f5;
  text-align: left;
  padding: 12px;
  font-weight: bold;
  width: 200px;
}

/* Apply alternating row colors */
.rgnt-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Apply styles to table data cells */
.rgnt-table td {
  padding: 12px;
}

/* Apply hover effect to rows */
.rgnt-table tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

/* Apply styles to table links */
.rgnt-table a {
  text-decoration: none;
  color: #7121aa; /* Blue link color */
}

.table {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #39075c;
  border-radius: 5px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 2px;
  margin-right: 10px;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-content: center;
  width: 100%;
}

.table-values {
  text-align: center;
  font-size: medium;
  padding: 6px;
}

/* Apply styles to table headers */
.table th {
  background-color: #f5f5f5;
  text-align: left;
  padding: 12px;
  margin-right: 10px;
  margin-left: 10px;
  font-weight: bold;
}

/* Apply alternating row colors */
.table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Apply styles to table data cells */
.table td {
  padding: 12px;
}

/* Apply hover effect to rows */
.table tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

/* Apply styles to table links */
.table a {
  text-decoration: none;
  color: #7121aa; /* Blue link color */
}

/* Center content vertically and horizontally */
.chart-container {
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  background-color: #f5f5f5; /* Optional background color */
  width: 100%; /* Adjusted width for responsiveness */
  max-width: 800px; /* Ensure the chart doesn't exceed 800px width */
  height: auto;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); /* Increased shadow effect */
  margin: 25px auto; /* Center the container horizontally with auto margins */
  border-radius: 10px;
}

.predict-chart-container {
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5; /* Optional background color */
  width: 100%; /* Adjusted width for responsiveness */
  height: auto;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); /* Increased shadow effect */
  margin: 25px auto; /* Center the container horizontally with auto margins */
  border-radius: 10px;
}

.message {
  display: flex;
  flex-direction: column; /* Align children vertically */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin: 0 auto; /* Horizontally center the element */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.3s;
}

.error-message {
  color: red; /* Set the color to your desired value */
  font-weight: bold; /* Adjust styles as needed */
  display: flex;
  flex-direction: column; /* Align children vertically */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  font-size: 1.6rem; /* Updated to use rem units for better scalability */
  font-weight: 600; /* Using numeric values for font-weight for consistency */
  margin-bottom: 10px; /* Increased margin for better spacing */
  font-family: 'Roboto', sans-serif; /* Using a more modern font */
  padding: 15px; /* Increased padding for better visual appeal */
  border-radius: 5px; /* Adding a subtle border-radius for rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adding a subtle box-shadow for depth */
  transition: all 0.3s ease; /* Adding smooth transition for hover effects */
  background: linear-gradient(45deg, #ffffff, #f0f0f0); /* Gradient from white to light gray */
}

.pc_pic {
  border-radius: 10px;
  width: 600px;
  height: 500px;
  grid-column: 2;
}

.barcode_scanner {
  border-radius: 10px;
  width: 500px;
  height: 360px;
  grid-column: 2;
}

.barcode_box {
  border-radius: 10px;
  width: 300px;
  height: 300px;
  grid-column: 2;
}

.logo_purple {
  border-radius: 10px;
  width: 600px;
  height: 150px;
}