/*
*
* Specify the author/owner/developer of the code and provide
* contact information for reference
*
* author: MRISHO ABEID OMARY
* country of origin: TANZANIA, UNITED REPLUBLIC OF
* nationality: TANZANIAN;
* company: MENET CORP <https://www.menetcorp.com> // website currently under development
* job title: LEARNING TECHNOLOGIST
* project:  Thomas Layton Book Collection
* contact me:  https://menetcorp.com/u-p/m
*
* license: CAN BE RE-USED WITHOUT AUTHOR'S APPROVAL
*
*/

/*  ************ IMPORT FONT STYLES FROM AN EXTERNAL STYLESHEET ************  */
@import url('fonts.css');

/*  ************ IMPORT MEDIA STYLES FROM AN EXTERNAL STYLESHEET ************  */
@import url('csv.css');

/*  ************ IMPORT .CSV STYLES FROM AN EXTERNAL STYLESHEET ************  */
@import url('media.css');

:root {
	--theme: rgba(149, 65, 49, 1);
	--info: hsl(37.65, 100.00%, 49.00%);
	--info-bg: hsl(46.00, 70.00%, 94.12%);
	--error: hsl(4.11, 89.62%, 58.43%);
	--error-bg: hsl(351.00, 100.00%, 96.08%);
	--active: rgba(255, 235, 238, .6);
	--light-bg: rgba(149, 65, 49, .1);
}

.updated-book {
	padding: 3pt;
	font-size: 70%;
	border-radius: 3pt;
	margin-bottom: 13pt;
	color: var(--theme);
	display: inline-block;
	text-transform: capitalize;
	background-color: var(--active);
}

.temporary {
	display: block;
	margin-bottom: 20pt;
	text-align: center;
}

.display-none {
	display: none !important;
}

.no-margin-top {
	margin-top: 0;
}

.no-margin-bottom {
	margin-bottom: 0;
}

.margin-bottom-10 {
	margin-bottom: 10pt;
}

.display-block {
	display: block;
}

.padding-top-30 {
	padding-top: 30pt;
}

*, html {
	font-size: 100%;
	font-family: SegoeUI;
	box-sizing: border-box !important;
}

h1, h2, h3, h4, h4, h6 {
	font-family: SegoeUIBold;
	font-weight: bolder;
}

h2.theme-color {
	margin-bottom: 25pt;
	color: var(--theme) !important;
}

a {
	display: inline-block;
	text-decoration: none;
	color: var(--theme);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

body {
	margin: 0;
	padding: 0;
}

header {
	position: sticky;
	top: 0;
	z-index: 4;
	background-color: var(--theme);
	box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, .07);
}

header a {
	color: #FFF !important;
}

header section {
	width: 100%;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
}

header section .links .show-menu {
	color: #FFF !important;
}

header section .links .some {
	display: flex;
	align-items: center !important;
	justify-content: space-between;
}

header section .links .some a {
	display: flex;
}

header section .links .some a.first {
	margin-top: -4pt !important;
}

header section .links .some .last {
	border: 0;
	padding: 0;
	color: #FFF;
	cursor: pointer;
	background-color: transparent;
	margin-left: 10pt !important;
}

.important {
	text-align: right;
	display: inline-block;
}

.important a:first-child {
	color: red !important;
	margin-right: 10pt !important;
}

header section h1 {
	margin: 0;
	padding: 0;
}

.container, .book {
	width: 95%;
	margin: 0 auto;
}

.logo {
	width: 20em;
}

.logo-container {
	display: flex;
	justify-content: space-around;
}

.logo-img {
	display: inline-block;
	width: 6em !important;
	text-align: center !important;
	margin-bottom: 10pt !important;
}

.logo-text {
	margin: 0;
	padding: 15pt;
	font-size: 180%;
	font-weight: bolder;
	font-family: SegoeUIBold;
}

main {
	padding-bottom: 40pt;
}

.add-more .align-self-center {
	display: flex;
	align-items: center;
}

.main {
	padding-bottom: 30pt;
	background-color: #FFF;
}

.developer {
	font-size: 50%;
	text-align: center;
	color: rgba(255, 255, 255, .7);
}

.message {
	display: block;
	padding: 100pt auto;
	text-align: center;
	margin-bottom: 10pt;
}

.error {
	margin: 0;
	font-size: 80%;
	padding: 5pt 10pt;
	text-align: center;
	border-radius: 10pt;
	color: var(--error);
	display: inline-block;
	background-color: var(--error-bg);
}

.last-updated {
	font-size: 80%;
	margin-top: 20pt;
	color: rgba(0, 0, 0, .5);
}

.bg {
	height: 100vh;
	background-position: center;
	background: linear-gradient(225deg, rgba(0, 0, 0, .4) 0%, rgba(0,36,61,0.6) 50%), url("../img/bookstore.jpg") no-repeat;
	background-size: cover;
}

main div.container, main div.book {
	padding: 15pt 5pt;
}

.img-src {
	position: absolute;
	bottom: 5pt;
	left: 10pt;
	margin: 0;
	font-size: 80%;
	padding: 5pt 10pt;
	border-radius: 2pt;
	color: var(--link);
	background: rgba(255, 255, 255, .8);
}

.main-form {
	margin: auto 10pt;
	border-radius: 10pt;
	grid-area: main-form;
}

.tag-line {
	padding: 7pt;
	font-size: 80%;
	color: var(--info);
	text-align: center;
	border-radius: 10pt;
	display: inline-block;
	background-color: var(--info-bg);
}

.form-content {
	padding: 15pt;
	background: #FFF;
	border-radius: 10pt 10pt 0 0;
}

.form-content a img {
	margin: 0 auto;
}

.main-form img {
	display: inline-block;
	width: 350px;
	height: auto;
}

.main-form input {
	display: block;
	width: 100%;
}

input, select, textarea {
	padding: 10pt;
	margin-bottom: 10pt;
	border-radius: 4pt;
	border: .5pt solid rgba(0, 0, 0, .4);
}

textarea {
	margin-bottom: 0;
}

input:last-child {
	margin: 0;
}

input[type="submit"] {
	border: 0;
	cursor: pointer;
	color: var(--theme) !important;
}

input.submit {
	color: white !important;
	background: var(--theme) !important;
}

.date {
	display: grid;
	grid-gap: 5pt;
	grid-template-columns: auto minmax(10pt, 15pt) auto;
}

.date input {
	margin-bottom: 0;
}

.form-footer {
	padding: 15pt;
	display: grid;
	grid-gap: 10pt;
	border-radius: 0 0 10pt 10pt;
	grid-template-columns: repeat(2, 1fr);
	background: hsl(0.00,0.00%,96.08%);
}

.form-footer input {
	margin: 0;
}

span.add-more {
	display: flex;
	align-items: center;
	color: var(--theme) !important;
}

span.add-more .material-symbols-outlined {
	margin-right: 8pt;
}

.characters {
	font-size: 95%;
	margin-top: -105pt !important;
	color: rgba(0, 0, 0, .7);
}

.breadcrumbs {
	grid-area: breadcrumbs;
}

div.button {
	width: 100%;
	display: none;
	text-align: center;
	margin-bottom: 30pt;
}

div.button span {
	color: #FFF;
}

div.button button {
	border: 0pt;
	color: #FFF;
	cursor: pointer;
	padding: 10pt 20pt;
	border-radius: 3pt;
	background-color: var(--theme);
}

.results-form, nav {
	position: sticky;
	top: 120px;
}

.results-form {
	padding: 15pt;
	border-radius: 5pt;
	grid-area: form;
	background-color: var(--light-bg);
	border: 1pt solid rgba(0, 0, 0, .1);
	box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, .07);
}

.form-content-results input,
.form-footer-results input {
	display: block;
	width: 100%;
}

.form-footer-results {
	margin-top: 10pt;
}

.results {
	grid-area: results;
	border-radius: 10pt;
	border: 1pt solid rgba(0, 0, 0, .1);
	box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, .07);
}

.result {
	display: flex;
	padding: 25pt 20pt;
	background-color: #FFF;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1pt solid rgba(0, 0, 0, .1);
}

p.options {
	display: flex;
	flex-direction: column;
}

.result:nth-child(even) {
	background-color: rgba(250, 250, 250, 1);
}

.result > * {
	margin: 0;
	padding: 0;
}

.result:first-child {
	border-radius: 10pt 10pt 0 0;
}

.result:last-child {
	border-radius: 0 0 10pt 10pt;
}

.result-details {
	width: 80%;
}

.result-title {
	margin: 0;
	padding: 0;
	font-size: 130%;
	color: var(--theme);
	font-family: SegoeUI;
	font-weight: lighter;
}

.result-title:hover {
	cursor: not-allowed;
	text-decoration: underline;
}

.result-author {
	font-size: 105%;
	margin-bottom: 0;
	color: rgba(0, 0, 0, .6);
}

.result-year {
	font-size: 130%;
	color: var(--theme);
	font-family: SegoeUI;
	color: rgba(0, 0, 0, 1);
	text-transform: lowercase !important;
}

.options {
	font-size: 100%;
	font-weight: lighter;
	font-family: SegoeUIBold;
}

.more {
	display: grid;
	grid-column-gap: 25pt;
	grid-row-gap: 15pt;
}

.by {
	margin: 0;
	padding: 10pt;
	border-radius: 3pt;
	background-color: rgb(250, 250, 250);
	border: 1pt solid rgba(0, 0, 0, .07);
}

.book-info-grid {
	display: grid;
	grid-gap: 20pt !important;
}

div.book-info {
	padding: 10pt;
	border-radius: 3pt;
	border: .2pt solid rgba(0, 0, 0, .1);
	background-color: rgba(250, 250, 250, 1);
}

div.book-info:last-child {
	border: 0;
	padding: 0;
	background-color: transparent;
}

.book-info-grid .book-info h3 {
	margin: 0;
	margin-bottom: 10pt;
}

.detail-info {
	margin: 0;
	font-size: 105%;
	margin-bottom: 5pt;
	color: var(--theme);
	font-family: SegoeUI;
}

.book-info-value span a {
	text-decoration: underline;
}

.book-info-value {
	font-size: 110%;
	display: inline-block;
	margin-bottom: 15pt;
}

.title-two {
	font-size: 130%;
	font-family: SegoeUIBold;
	font-weight: lighter;
	color: rgba(0, 0, 0, .8);
}

.more-by .title-two {
	margin-top: 40pt !important;
}

.title-three {
	font-size: 110%;
	font-family: SegoeUI;
	color: rgba(0, 0, 0, .8);
}

.title-four {
	margin: 0;
	font-size: 100%;
	font-family: SegoeUI;
}

.update-grid {
	display: grid;
	grid-gap: 20pt 30pt;
	margin-bottom: 35pt !important;
	grid-template-columns: repeat(2, 1fr);
}

.update-field > * {
	width: 100%;
}

.more-values {
	color: var(--theme);
	font-size: 80%;
	padding: 3pt 10pt;
	display: inline-block;
	border-radius: 10pt;
	margin-bottom: 4pt;
	background-color: rgb(255, 241, 242);
}

nav {
	display: block;
}

nav a {
	font-size: 95%;
	display: flex;
	padding: 13pt 8pt;
	align-items: center;
}

nav a.active {
	border-radius: 4pt;
	font-weight: bolder !important;
	background-color: var(--active);
}

nav span.material-symbols-outlined {
	font-size: 120%;
	margin-right: 10pt;
}

.settings input {
	display: block;
	min-width: 250pt;
}

input:read-only {
	color: rgba(0, 0, 0, .5);
	background-color: rgba(250, 250, 250, 1);
}

label {
	display: block;
	margin-bottom: 5pt;
	color: rgba(0, 0, 0, .5);
}

.admin-search {
	padding: 20pt;
	margin-bottom: 30pt;
	border-radius: 5pt;
	border: 1pt solid rgba(0, 0, 0, .1);
	box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, .07);
	background-color: rgba(250, 250, 250, 1);
}

.admin-search-grid {
	display: grid;
	grid-gap: 20pt;
	grid-template-columns: repeat(3, minmax(auto, 1fr));
}

.admin-search-grid input:first-child {
	grid-column: 1/3;
}

.admin-search-grid input {
	margin-bottom: 0;
}

.date-search {
	display: grid;
	grid-gap: 10pt;
	grid-template-columns: repeat(2, minmax(auto, 1fr)) !important;
	grid-template-areas:
		"from to";
}

.date-search input:first-child {
	grid-area: from;
}

.date-search input:last-child {
	grid-area: to;
}

.delete-book-details {
	padding: 25pt;
	margin: 20pt 0;
	border-radius: 3pt;
	background-color: rgb(250, 250, 250);
	border: .5pt solid rgba(0, 0, 0, .2);
}

table {
	margin: 0;
	width: 100%;
	padding: 0;
	border-collapse: collapse;
}

.alignment tr td {
	vertical-align: top !important;
}

thead.thead {
	color: #FFF;
}

th {
	text-transform: capitalize;
	background-color: var(--theme) !important;
}

th:first-child {
	border-radius: 10pt 0 0 0;
}

th:last-child {
	border-radius: 0 10pt 0 0;
}

.p-margin tr td p {
	margin: 0 !important;
	padding: 0 !important;
	margin-bottom: 4pt !important;
}

th {
	text-align: left;
}

tr {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	border-radius: 6pt !important;
	border-bottom: .5pt solid rgba(0, 0, 0, .2);
}

tr:first-child {
	border-radius: 6pt 6pt 0 0;
}

tr:last-child {
	border-radius: 0 0 6pt 6pt;
}

tr:nth-child(even) {
	background-color: rgb(250, 250, 250);
}

th, td {
	padding: 15pt 12pt;
}

.txt-centre {
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.author-year {
	color: rgba(0, 0, 0, .6);
}

.pagination {
	margin-top: 20pt;
}

.pagination > * {
	width: auto;
	min-width: 3em;
	padding: 10pt 12pt;
	border-radius: 3pt;
	text-align: center;
}

.pagination a.active {
	color: #FFF;
	background-color: var(--theme) !important;
}

.pagination a {
	color: rgba(0, 0, 0, .6);
	background-color: rgba(0, 0, 0, .1);
}

.pagination a:hover {
	color: #FFF;
	background-color: var(--theme);
	transition: background 280ms ease-in;
	-o-transition: background 280ms ease-in;
	-ms-transition: background 280ms ease-in;
	-moz-transition: background 280ms ease-in;
	-webkit-transition: background 280ms ease-in;
}

footer {
	padding: 20pt 0;
	font-size: 70%;
	color: rgba(0, 0, 0, .3);
	text-align: center;
	border-top: .3pt solid rgba(0, 0, 0, .2);
}

footer section p a {
	text-decoration: underline;
	color: inherit;
}



/*  STYLES ADDED TO THE .CSV CSS FILE  */
.multiple {
	margin-bottom: 50pt;
}

.multiple form {
	padding: 30pt;
	border-radius: 3pt;
	background-color: rgb(250, 250, 250);
	border: 1.5pt dashed rgba(0, 0, 0, .3);
}

input[type="file"] {
	width: 100%;
	display: block;
	padding: 20pt;
	border: .5pt solid rgba(0, 0, 0, .3);
}

font {
	color: #6600FF;
	font-weight: bolder;
}

.csv-template {
	font-size: 85%;
	color: rgba(0, 0, 0, .7);
}

.added {
	margin: 0;
	color: #FFF;
	font-size: 90%;
	padding: 2pt 10pt;
	border-radius: 3pt;
	background-color: var(--theme);
}

.proposed, .existing, .new-page {
	color: #FFF;
	padding: 3pt 7pt;
	margin-top: 14pt;
	border-radius: 3pt;
	display: inline-block;
}

.proposed {
	background-color: rgb(211, 47, 47);
}

.existing {
	background-color: rgb(25, 118, 210);
}

.new-page {
	background-color: rgb(56, 142, 60);
}