body {
	background-color: #ffffff;
	color: #333;
	font-family: 'Source Sans Pro', Arial, sans-serif;
  /*font-family: 'Calibri', sans-serif;*/
	margin: 10px;
	padding: 0;
}

.container {
	width: 80%;
	margin: 0 auto;
	padding: 50px 0;
}
select:focus {
  border-color: #b81e40;
}
a:link, a:visited {
	color: #2196F3;
	text-decoration: none;
	transition: all .3s ease;
}

a:hover, a:active {
	color: #0D47A1;
}

table {
	border-collapse: collapse;
	/*#width: 76%;*/
	margin: 25px auto;
	box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
}

th, td {
	border: 1px solid #ddd;
	text-align: left;
	padding: 10px;
	font-size: 0.85em;
}

th {
	background-color: #2196F3;
	color: white;
}

tr {
	background-color: #e2e2e2;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

input[type="text"]:active,
input[type="number"]:active,
select:active,
textarea:active {
  border-color: #b81e40;
}

input[type="submit"] {
	background-color: #4CAF50;
	color: white;
	padding: 10px 15px;
	margin-top: 0px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	float: right;
}

input[type="submit"]:hover {
	background-color: #45a049;
}

/* function code */

.switch {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 80px;
    height: 34px;
  }

  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }

.input-field-isbn {
    width: 40%;
}
.input-field-qty {
  width: 20%;
}

  /* Layout styles */
.layout-row {
  display: flex;
  width: 100%;
  margin-bottom: 10px; /* Spacing between rows */
}

.layout-row input[type="text"],
.layout-row input[type="number"],
.layout-row select,
.layout-row textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.layout-row input[type="text"]:focus,
.layout-row input[type="number"]:focus,
.layout-row select:focus,
.layout-row textarea:focus {
  border: 1px solid #b81e40 !important;
}

.layout-row button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.layout-row button:hover {
  background-color: #45a049;
}

.layout-box {
  flex: 1;
  border: 1px solid transparent; /* Invisible border */
  box-sizing: border-box;
  padding: 10px;
}

.layout-box-outer {
  flex-basis: 20%;
}

.layout-box-inner {
  flex-basis: 30%;
  max-width: 400px; /* Add this line */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.layout-box-inner-input {
  flex-basis: 12%;
  max-width: 140px; /* Add this line */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.layout-box-inner-small {
  max-width: 80px; /* Add this line */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.layout-merged-inner {
  flex-basis: 60%;
  text-align: center;
  max-width: 800px; /* Add this line */
}

/* Helper class for merged boxes in the first two rows */
.first-two-rows .layout-box-inner {
  display: none; /* Hide inner boxes in the first two rows */
}

.first-two-rows .layout-merged-inner {
  display: block; /* Show merged box in the first two rows */
}


.container {
  padding-top: 10px; /* Adjust this value as needed */
}
#head-logo {
  height: 90px;
  position: absolute;
  top: 10px;
  left: 20%;
}
#head-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#head-logo img {
  height: 80px;
  width: 230px;
}