body {
	margin: 0px!important;
}
a{
	font-family: 'Brawler', serif;
	text-decoration: none;
	font-size: 18px;
	color:rgba(0, 0, 0, 0.4);
}
a:hover {
	color:rgba(0, 0, 0, 0.9);
}
h1 {
	color:#686868;
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
}
h2 {
	color:#fff;
	font-size: 27px;
	font-weight: 400;
}
h3 {
	color:#fff;
	font-size: 19px;
	font-weight: 400;
}

  .book-title,
  .book-category,
  .book-type,
  .book-author,
  .book-publication-year {
    font-family: 'Brawler', sans-serif;
  }

  
input[type=text], input[type=email], input[type=tel], input[type=password] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  font-size: 16px;
  text-align: center;
}
input[type=submit] {
	padding: 10px;
    margin: 20px;
    background-color: #a7b99a;
    color: #fff;
    border-radius: 10px;
    border: 0px;
    font-size: 18px;
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
    transition: all 0.3s ease 0s;
}
input[type=submit]:hover  {
	transform: scale(1.05);

}
textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  font-size: 16px;
  text-align: center;
}
button[type=submit] {
    background-color: #a7b99a;
    color: #fff;
    border: 0px;
    font-size: 18px;
    padding: 4px 10px;
    transition: all 0.3s ease 0s;
}
button[type=submit]:hover  {
	transform: scale(1.05);
}
.contact-form{
	width: 75%;
	margin: auto;
	padding-bottom: 30px;
	padding-top: 30px;
}
td {
	text-align: left;
	padding:10px;
}
		.container {
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: auto 250px 1fr auto;
			grid-gap: 0px;
			grid-template-areas:
				"topbar"
				"header"
				"content"
				"footer";
			min-height: 100vh;
			font-family: 'Brawler', serif;
		}
		.header {
			grid-area: header;
			text-align: center;
			padding-top:20px;
		}
		.content {
			grid-area: content;
			margin:10px;
		}
		.footer {
			grid-area: footer;
			background-color: #a7b99a;
			color:#fff;
			font-weight:400;
			display:grid;
			justify-content:center;
			grid-auto-flow: column;
			gap:10%;
		}
		.footer1 {
			margin-left: 10px;
		}
		.content {
			text-align:center;
		}
		.topbar {
			grid-area: topbar;
			background-color: #a7b99a;
			color:#fff;
			font-weight:400;
			display:grid;
			grid-auto-flow: column;
			justify-content: center;
			gap:20px;
			align-items: center;
			font-size: 18px;
		}
		#book_table {
		display:grid;
    background-color: #cdd9c5;
    border-radius: 10px;
}
			.srform {
				margin:20px;
			}
			.book-table{
				line-height: 2;
			}
			.book-table tr.even {
    background-color: #ffffff;
}
.book-table tr.odd {
    background-color: #deebd5;
}


/* Set the table to display as a block on small screens */
@media screen and (max-width: 600px) {
  table {
    display: block;
    width: 95%;
    margin: 0 auto; /* Center the table */
  }

  
  /* Stretch the tbody element to fill the available space */
  tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* Set the table cells to display as blocks */
  table tr, table th, table td {
    display: block;
  }

  /* Set the table header cells to not display */
  table th {
    display: none;
  }

  /* Add some styling to the table cells */
  table td {
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
    text-align: center;
  }

  /* Add some margin to the table cells */
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
    text-transform: uppercase;
  }
}

/* CSS for sortable column arrows */
.book-table th {
  position: relative;
  cursor: pointer;
}

.book-table th .arrow {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000 transparent transparent transparent;
}

.book-table th .arrow.asc {
  border-color: transparent transparent #000 transparent;
  top: 30%;
}

.book-table th .arrow.desc {
  border-color: #000 transparent transparent transparent;
  top: 70%;
}
.book-table th .arrow {
  /* Existing styles */
  width: 8px;
  height: 8px;
}
.sort-icon {
  display: inline-block;
  margin-left: 5px;
}

.sort-icon i {
  font-size: 10px;
}

.fa-sort-up:before {
  content: "\f0d8";
}

.fa-sort-down:before {
  content: "\f0d7";
}