/* GITHUB-INSPIRED DESIGN SYSTEM - BookAdmin PWA */
/* See main.css for full design system documentation */

:root {
	--color-primary: #1F6FEB;
	--color-primary-light: #388BFD;
	--color-primary-lighter: #54AEFF;
	--color-secondary: #FB8500;
	--color-secondary-light: #FCA311;
	--color-surface: #FFFFFF;
	--color-surface-variant: #F6F8FA;
	--color-border: #D0D7DE;
	--color-text-primary: #24292F;
	--color-text-secondary: #57606A;
	--color-text-tertiary: #6E7681;
	--color-success: #1A7F37;
	--color-error: #DA3633;
	--color-warning: #9E6A03;
	--color-header-bg: #24292F;
	/* --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 18px;
	--font-size-2xl: 20px;
	--font-size-3xl: 24px;
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 16px;
	--spacing-xl: 24px;
	--spacing-2xl: 32px;
	--shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.01);
	--shadow-md: 0 3px 12px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
	--transition-fast: 80ms ease-in-out;
	--transition-base: 160ms ease-in-out;
	--transition-slow: 240ms ease-in-out;
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-full: 9999px;
}

.navbar {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--color-header-bg) !important;
	box-shadow: var(--shadow-sm);
	padding: var(--spacing-md) 0 !important;
	border-bottom: 1px solid var(--color-border);
}

.navbar-text {
	font-size: 14px;
	text-align: left;
	color: var(--color-text-secondary);
}

.nav-item {
	font-size: 14px;
	text-align: left;
}

.nav-link {
	/* color: var(--color-text-secondary) !important; */
	font-weight: 500;
	transition: all var(--transition-fast);
}

.nav-link:hover {
	color: white !important;
}

.table {
	font-family: var(--font-family);
	border-collapse: collapse;
	width: 95%;
	background-color: var(--color-surface);
}

.table thead {
	background-color: var(--color-surface-variant);
	border-bottom: 1px solid var(--color-border);
}

.td,
.th {
	border: none;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	padding: var(--spacing-md);
	color: var(--color-text-primary);
}

.table thead .th {
	font-weight: 600;
	background-color: var(--color-surface-variant);
}

.tr:nth-child(even) {
	background-color: white;
}

.tr:nth-child(odd) {
	background-color: white;
}

.tr:hover {
	background-color: var(--color-surface-variant);
}

.tbtext {
	background: #333;
	font-size: 14px;
	text-align: left;
	color: silver;
}

.btngrid {
	width: 50px;
	height: 18px;
	margin: 0px;
	border-radius: 9px;
	border: 1px solid #333;
	background-image: linear-gradient(180deg, #fff, #ddd 50%, #ccc);
	display: inline-block;
	text-align: center;
	font-size: 12px;
	color: black;
	box-shadow: 1px 1px 4px gray;
}

.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	height: 25px;
}

.footer {
	position: fixed;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: auto;
	background-color: #333;
	padding: 5px;
	color: silver;
	text-align: center;
	font-size: 12px;
	text-shadow: black 1px 1px 3px;
}

.card {
	margin: 4px 0px 10px 0px;
	/* box-shadow: 2px 2px 5px 1px gray; */
	border-radius: 15px;
	border-color: #5c6664;
	padding: 0%;
	background-color: #F6F8FA;
	min-width: 350px;
	max-width: 390px;
}

.card-title {
	color: darkslategray;
	font-size: 20px;
	text-align: left;
	position: relative;
	text-decoration-thickness: 0.01em;
	text-shadow: gray 1px 1px 3px;
}

.title2 {
	font-size: 15px;
	color: darkslategray;
	width: 100%;
	text-align: right;
	text-shadow: white 1px 1px 1px;
	text-decoration: underline;
}

.approvetext {
	float: right;
	color: darkgoldenrod;
	font-size: 14px;
	text-align: right;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-right: 0px;
	text-shadow: 1px 1px 2px silver;
}

.card-text {
	text-align: left;
	text-indent: 10%;
	font-size: 16px;
	color: darkslategray;
	width: 100%;
}

.statustext {
	text-align: left;
	text-indent: 10%;
	font-size: 16px;
	width: 100%;
	color: maroon;
}

.card-text2 {
	font-size: 14px;
	color: #5c6664;
	width: 100%;
	text-align: left;
	margin: 2px;
}

input[type="text"],
select,
textarea {
	width: 100%;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	font-size: 14px;
	color: darkslategray;
	display: flex;
	line-height: 1;
}

input[type="date"],
select,
textarea {
	width: flex;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	font-size: 14px;
	color: darkslategray;
	display: flex;
	line-height: 1;
}

.select {
	position: static;
	display: flex;
	line-height: 1;
	background: #5c6664;
	overflow: hidden;
	border-radius: 0.25em;
	width: flex;
	background-color: #ccc;
}

select {
	box-shadow: none;
	border-color: silver;
	background: white;
	background-image: none;
	flex: 1;
	color: darkslategray;
	cursor: pointer;
	font-size: 14px;
	display: block;
}

input[type="number"] {
	width: 100%;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	font-size: 14px;
	font-weight: 800;
	color: darkslategray;
	display: flex;
}

.btn {
	/* width: 140px; */
	margin: 2px;
	border-radius: 20px;
	border: 1px solid #333;
	display: inline-block;
	text-align: center;
}



.btn2 {
	float: right;
	margin: 2px;
	border-radius: 20px;
	border: 1px solid #333;
	/* display: inline-block; */
	text-align: center;
}

.btn2:hover:not(:disabled) {
	background-color: var(--color-btn-hover-bg);
	border-color: rgba(31, 35, 40, 1);
	color: white;
}

.btn3 {
	position: absolute;
	top: 30%;
	left: 0%;
	width: 35px;
	height: 18px;
	margin: 0px;
	border-radius: 0px 9px 9px 0px;
	display: inline-block;
	padding-top: 2px;
	font-size: 12px;
	color: #5c6664;
	box-shadow: 1px 1px 4px gray;
}

.shadowbox {
	padding: 1px;
	margin: 0px 10px 0px 10px;
}

.notify {
	border: 1px solid gray;
	border-left-width: 0px;
	border-right-width: 0px;
	background: center no-repeat url("/img/notify.png");
	background-size: 25%;
}

.container .row {
	padding: 5px;
	display: inline-box;
	position: relative;
}

body {
	margin: 0;
	background: white;
	font-family: "Helvetica Neue", "Graphik", sans-serif;

	font-size: 12px;
	line-height: 1.33337;
	letter-spacing: -0.01em;
}

.masthead {
	color: white;
	min-height: 15em;
	height: 100vh;
}

.index {
	width: auto;
	height: auto;
}

.booknr {
	font-size: 12px;
	color: gray;
	width: 100%;
	text-align: left;
	margin: 2px;
}

.booknr2 {
	position: absolute;
	top: 5%;
	left: 90%;
	font-size: 12px;
	color: gray;
}

.bookamount {
	text-align: center;
	font-size: 16px;
	width: 100%;
	color: goldenrod;
	text-shadow: white 1px 1px 4px;
}

.info {
	font-size: 20px;
	color: darkslategray;
	width: 100%;
	text-align: center;
	margin: 0;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.h6 {
	font-size: 20px;
	text-align: left;
}

.welcome {
	text-shadow: black 2px 2px 3px;
	color: goldenrod;
}

.welcome2 {
	text-shadow: white 1px 1px 2px;
	min-width: 300px;
	font-size: 18px;
	color: black;
}

.top-label {
	color: goldenrod;
	text-shadow: black 0px 1px 1px;
	min-width: 300px;
	background-position: center;
	background-size: cover;
	background-color: #343a40;
	padding-bottom: 10px;
}

@media (min-width: 900px) {
	.masthead h1 {
		font-size: 5vw;
		text-shadow: black 0px 0 5px;
	}
}