*{
	margin: 0;
	padding: 0;
	font-family: 'Gilda Display', serif;
}

body{
	background-image: url('./img/subtle/sayagata-400px.png');
	background-repeat: repeat;
}

a{
	text-decoration: none;
	color: inherit;
}

form{
	padding: 2%;
}

.container{
	padding-top: 2%;
	padding-bottom: 40px;
	background-color: snow;
	//background-color: #f4e5e5;
	min-height: calc(100vh - 77px - 40px);
	box-shadow: 0 0 2px slategray;
	margin-top: 20px;
	margin-bottom: 20px;
}

footer{
	margin-top: 20px;
	background-color: white;
	text-align: center;
}

.alert{
	margin-bottom: 0;
}

.navbar-brand{
	font-family: 'Castoro Titling', serif;
	//font-family: 'Gilda Display', serif;
	color: rgb(200, 218, 174);
}

.navbar-brand:hover, .navbar-brand:focus{
	color: rgb(200, 218, 174);
	filter: grayscale(100%);
}

.bc-list{
	border-left: 5px solid;
	//border-top-left-radius: 10px;
	//border-bottom-left-radius: 30px;
	border-color: rgb(200, 218, 174, 1.0) !important;
	transition: background-color 0.5s;
}

.bc-list:hover{
	background-color: rgb(238, 229, 240) !important;
}

.bc-list small{
	color: rgb(180, 180, 180, 1.0);
}

.bc-list hr{
	//border-color: rgb(255, 193, 7);
	opacity: 0.2;
	width: 15%;
	margin: 0;
	position: relative;
	top: -1px;
}

.description{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0.7;
}

h1, h2, h3, h4, h5, h6{
	margin-bottom: 0;
}

.landing-main{
	text-align: center;
	background-image: url('./img/absinthe.jpg');
	color: rgb(200, 218, 174);
}

.landing-main h1, .landing-main h3{
	padding: 2%;
	font-weight: bolder;
	text-shadow: 0 0 10px black;
}

.landing-main a{
	padding: 1%;
	padding-top: 5%;
	display: inline-block;
}

.bumper{
	display: inline-block;
	height: 20vh;
}

.manage{
	float: right;
	position: relative;
	top: -30px;
	right: 15px;
}

.hide{
	display: none;
	transition: all 1s;
}

.carousel-inner{
	width: 75%;
	margin-left: 12.5%;
}

#bookDisplay{
	text-align: center;
	background-color: whitesmoke;
	box-shadow: 0 0 2px inset slategray;
	padding-top: 3%;
}

#bookDisplay img{
	width: 50%;
	//height: 35vh;
	margin-bottom: 4%;
}

.show-link{
	text-decoration: underline;
	text-decoration-color: rgb(0, 0, 0, 0);
	opacity: 0.8;
	transition: text-decoration-color 0.5s, opacity 0.5s;
	cursor: pointer;
}

.show-link:hover{
	text-decoration-color: rgb(0, 0, 0, 1.0);
	opacity: 1;
}

.book-details hr{
	margin-top: 0.5rem;
}

.voting-bubble{
	width: 20px;
	height: 20px;
	border: 1px solid black;
	border-radius: 10px;
	display: inline-block;
	background-color: snow;
}

.user-bubbles{
	position: relative;
	display: inline-block;
	width: 15px;
}

.user-vote{
	position: relative;
	top: 4px;
	left: -3px;

	width: 20px;
	height: 20px;
}

.user-bubbles .user-vote{
	position: absolute;

	width: 12px;
	height: 12px;
}

.user-bubbles .user-vote:nth-child(1){
	top: -18px;
	left: 0;
}
.user-bubbles .user-vote:nth-child(2){
	top: -4px;
	left: -8px;
}
.user-bubbles .user-vote:nth-child(3){
	top: -4px;
	left: 8px;
}

.voting-filled{
	background-color: limegreen;
}

.voting-other{
	background-color: slategrey;
}

.reading-bubble:before{
	content: "";
	position: absolute;
	border-radius: 50%;
	inset: 0;
	--darken:#ccc;
	background: conic-gradient(var(--darken) 0,
							   var(--c) calc(var(--p)*0.25%),
							   var(--c) calc(var(--p)*0.75%),
							   var(--darken) calc(var(--p)*1%),
							   #0000 0);
	background: conic-gradient(#000 0,
							   var(--c) calc(var(--p)*0.1%),
							   var(--c) calc(var(--p)*0.9%),
							   #000 calc(var(--p)*1%),
							   #0000 0);
	background: conic-gradient(var(--c) calc(var(--p)*1%),
							   var(--dc) 0);
}

.hidden{
	visibility: hidden;
	display: none;
}

.bk-summary{
	overflow: scroll;
	height: 146px;
    padding-left:8px;
    padding-right:8px;
}

.voted-for{
	height: 38px;
}

#search-results{
	visibility: hidden;
	background-color: snow;
	box-shadow: 0 0 2px slategray;
	position: absolute;
	z-index: 2;
	height: auto;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding-bottom: 0 !important;
	margin-top: -5px;
	margin-left: 10px;
	padding-top: 1%;

	max-height: 360px;
	overflow: scroll;
}

#search-results hr:last-of-type{
	display: none;
}

#search-results hr{
	padding: 0;
	margin: 0;
}

#search-results h6{
	padding-top: 10px;
	padding-left: 20px;
}

#search-results p{
	padding-left: 20px;
	margin-bottom: 0;
}

#bk-searchbar{
	z-index: 3;
	position: relative;
}

.searchbar-results{
	padding: 1%;
	transition: all 0.5s;
	margin: 0 !important;
}

.searchbar-results:last-of-type{
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.book-result:hover{
	background-color: rgb(20, 210, 220, 1.0);
}

.book-result:active{
	background-color: rgb(20, 185, 195, 1.0);
}

#loader {
	visibility: hidden;
	border: 3px solid #f3f3f3; 
	border-top: 3px solid #3498db; 
	border-radius: 50%;
	width: 25px;
	height: 25px;
	animation: spin 2s linear infinite;
	position: absolute;
	top: -32px;
	z-index: 4;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.tt .tt-text{
	//width: 120px;
 	//bottom: 100%;
 	//left: 50%; 
 	//margin-left: -120px;
}

.tt{
	width: 286px;
	transition: opacity 0.3s;
	background-color: rgba(50, 50, 50, 0.7);
	color: white;
	border-radius: 10px;
	padding: 10px;
	top: -50px;
	left: -90px;
	text-align: center;
	z-index: 3;
}

.tt .tt-text::after {
	content: " ";
	position: absolute;
	top: 100%; 
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: rgba(50, 50, 50, 0.7) transparent transparent transparent;
}

.search-tt{
	//left: 19%;
	//top: -60px;
	width: 386px;
	left: 117px;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .container{
  	margin-top: 0 !important;
  	margin-bottom: 0 !important;
  }

  .search-tt{
  	left: -10px;
  }

  .user-bubbles{
  	left: 15px;
  	width: 30px;
  }
}