/* Font imports */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,600,700&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)

   The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  background: #ECE9F3;
  color: #283149;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  padding-top: 40px;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong {
  font-weight: 600;
}

/* Fix layout - 1200px wide */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Helpers*/
.clearfix {
  clear: both;
}

.centered {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.alignright {
  float: right;
  margin-left: 20px;
}

.alignleft {
  float: left;
  margin-right: 20px;
}

.separation {
  background: #404b69;
  height: 3px;
  margin: 50px 0;
}

.message {
  margin: 10px 0 20px 0;
  padding: 10px 10px;
  border-radius: 5px;
  background: #404b69;
  color: #ffffff;
  border: 2px solid #283149;
  line-height: 1.2;
}

p strong,
.message strong {
  color: #f73859;
}

.message.error {
  color: #f73859;
}

i.info {
  cursor: help;
}

/* Default style for links, to avoid horrible the blue/purple browser's default */
a {
  color: #f73859;
  text-decoration: none;
  display: inline-block;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-color: #ECE9F3;
}

/* Default style for buttons */

input[type="submit"],
.button {
  background: #d9374f;
  color: #ECE9F3;
  text-transform: uppercase;
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #d9374f;
  cursor: pointer;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}

input[type="submit"]:hover,
.button:hover {
  background: #404b69;
}

/* Default style for lists in text content - UL, OL */
ul {

}

ol {

}

/* Default style for tables in text content */
table {

}

table th {

}

table td {

}

/* Default style for form elements */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  display: inline-block;
  padding: 6px 10px;
  margin: 5px 0;
  outline: none;
  width: 300px;
}

label {
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
  line-height: 1.5;
}

.checkbox label {
  font-weight: 400;
}

form {

}

.form-item {
  margin: 10px 0;
}

.form-item.checkboxes > label {
  margin-bottom: 10px;
}

.form-item p {
  margin: 0;
}

/* Headings */

h1 {
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 20px 0;
  line-height: 1.2;
}

h2 {
  font-size: 30px;
  font-weight: 300;
  margin: 0 0 20px 0;
}

h2::after {
  content: " ";
  display: block;
  height: 3px;
  background: #d9374f;
  width: 100px;
  margin: 15px 0 30px 0;
}

.popup h2::after {
  margin: 15px auto 30px auto;
}

p {
  margin: 10px 0;
  line-height: 1.4;
}

/* POPUP */
.popup {
  position: absolute;
  top: 200px;
  left: calc((100% - 800px) / 2);
  width: 800px;
  height: auto;
  max-height: calc(100vh - 300px);
  z-index: 999;
  padding: 40px;
  background: #ECE9F3;
  display: none;
}

.popup#rate_book_popup,
.popup#random_read_popup {
  text-align: center;
}

.popup > i {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 26px;
  cursor: pointer;
}

.popup > i:hover {
  color: #d9374f;
}

body.overlay {
  position: fixed;
  width: 100%;
}

body.overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 998;
}

/* HEADER */
header {
  padding: 0;
  margin: 0 0 40px 0;
}

.top_header .logout {
  float: right;
  line-height: 40px;
  font-size: 14px;
}

.top_header {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #283149;
  color: #ECE9F3;
}

#header {
  clear: both;
  background: url(../images/header2.jpg) no-repeat center center;
  background-size: cover;
  height: 400px;
  position: relative;
}

#header::before {
  content: "";
  position: absolute;
  background: rgba(0,0,0,0.4);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#header h1 {
  position: absolute;
  z-index: auto;
  background: rgba(255,255,255, 0.2);
  padding: 0 40px;
  margin: 0 auto;
  height: 100px;
  width: 360px;
  text-align: center;
  line-height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - (360px / 2));
  font-weight: 700;
  color: #ECE9F3;
}

#header button {
  position: absolute;
  z-index: auto;
  top: calc(50% + 70px);
  width: 280px;
  left: calc(50% - (280px / 2));
}

footer {
  padding: 20px 0;
  text-align: center;
  background-color: #404b69;
  color: #ECE9F3;
  margin: 60px 0 0 0;
  font-size: 14px;
}

/* MENU */

#menu {
  float: left;
  line-height: 40px;
}

#menu ul li {
  display: inline-block;
  margin-right: 20px;
}

#menu ul li.mobile_only {
  display: none;
}

#menu ul li a {
  text-transform: uppercase;
  color: #ECE9F3;
}

#menu ul li a i {
  margin-right: 5px;
}

#menu ul li a.highlight {
  color: #d9374f;
}

#menu ul li.active a,
#menu ul li a:hover {
  border-color: #d9374f;
}

#menu .mobile_menu_button {
  display: none;
}

/* GENERAL */
.section {
  margin: 40px 0;
}

#sidebar_home {
  float: right;
  margin-left: 40px;
  width: 400px;
}

.box {
  padding: 30px;
  background: rgb(40, 49, 73);
  color: #ECE9F3;
}

.box + .box {
  margin-top: 30px;
}

.box > *:first-child {
  margin-top: 0;
}

.box > *:last-child {
  margin-bottom: 0 !important;
}

.box h2 {
  font-size: 24px;
  text-align: center;
  padding: 15px 0;
  background: #636e8a;
}

.box h2:after {
  display: none;
}

/* BOOK */

.book {
  margin: 0 0 30px 0;
}

.book h3 {
  font-weight: 600;
  margin: 0 10px 4px 0;
  font-size: 22px;
  display: inline-block;
  line-height: 1.3;
  position: relative;
}

.book h3::before {
  font-family: "Font Awesome 5 Free";
  content: '\f02e';
  font-size: 16px;
  color: #d9374f;
  margin-right: 10px;
  vertical-align: unset;
}

#current_reading_list .book.read {
  opacity: 0.5;
}

.book.reading h3::before {
  content: '\f02e';
  font-weight: 400;
}
.book.unread h3::before {
  color: #636e8a;
}

#current_readings h3 {
  padding-left: 30px;
}

#current_readings h3 i {
  margin-right: 5px;
}

#current_readings h3::before {
  content: "\f0c8";
  font-size: 22px;
  font-weight: 400;
  position: absolute;
  left: 0;
  opacity: 0.5;
  color: inherit;
}

#current_readings .author {
  margin-left: 30px;
}

.book h3 span.mark_read {
  font-size: 14px;
  color: inherit;
  border: 0;
  display: inline-block;
  opacity: 0;
  cursor: pointer;
  padding: 3px;
  position: absolute;
  left: 0;
  top: 2px;
}

.book h3 span.mark_read:hover {
  opacity: 1;
}

.book .author span {
  color: #283149;
  opacity: 0.5;
  font-style: normal;
}

.book .author {
  font-style: italic;
}

.book span.categories {
  font-size: 13px;
  background: #404b69;
  padding: 5px 10px;
  display: inline-block;
  color: #ECE9F3;
  vertical-align: text-bottom;
  line-height: 1.2;
}

.grid {
  overflow: hidden;
}

.grid .book {
  float: left;
  width: calc(100% / 3 - 20px);
  margin: 0 30px 30px 0;
  border: 2px solid #283149;
  border-left-width: 20px;
  padding: 50px 20px 20px 20px;
  height: 300px;
  position: relative;
  background: #fff;
}

.grid .book.reading {
  border-left-color: #f73859;
}

.grid .book:nth-child(3n+3) {
  margin-right: 0;
}

.grid .book h3 {
  display: block;
  background: #ECE9F3;
  padding: 15px;
  margin: 0 0 10px 0;
}

.grid .book h3 a {
  color: #283149;
}

.grid .book h3 a:hover {
  color: #f73859;
}

.grid .book h3::before {
  display: none;
}

.grid .book .info_actions a {
  color: #283149;
  opacity: 0.5;
  padding: 0;
}

.grid .book .info_actions i {
  font-size: 20px;
}

.grid .book .info_actions i.highlight {
  color: #f73859;
}

.grid .book .info_actions a:hover {
  opacity: 1;
}

.grid .book .author {
  margin: 15px 0 10px 0;
  font-size: 14px;
}

.grid .book .rating {
  /*position: absolute;
  top: 14px;
  left: 20px;*/
}

.rating .full {
  color: #f73859;
}

.rating .empty {
  color: #ECE9F3;
}

.grid .book .categories {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.grid .book .info_actions {
  position: absolute;
  top: 10px;
  right: 20px;
  left: 20px;
  margin-top: 5px;
}

.grid .book .info_actions > div div {
  display: inline-block;
}

.grid .book .date_read {
  margin-right: 10px;
}

.list {
  margin-top: 30px;
}

.list .book.read h3::before {
  color: #ECE9F3;
  content: "\f02d"; /* book */
}

.list .book.unread h3::before {
  color: #ECE9F3;
  content: "\f02d"; /* book */
}

.list .book.read {
  opacity: 0.5;
}

.section.light,
#random_reads {
  background: #ECE9F3;
  color: #283149;
  margin: 60px 0;
}

.popup #random_reads {
  margin: 0;
}

#random_reads .book h3::before {
  color: #283149;
  content: "\f02d";
}

#bookshelf h2 span {
  font-size: 18px;
  font-weight: 300;
}

#register,
#login.section {
  text-align: center;
}

#login.section h2::after {
  margin-right: auto;
  margin-left: auto;
}

/* Edit book, add book forms */

.form_book {
  overflow: hidden;
}

.form_book > div:first-child {
  width: calc(60% - 20px);
}

.form_book > div:nth-child(2)  {
  width: calc(40% - 20px);
}

.form_book .form-buttons  {
  margin-top: 30px;
}

.form_book .form-item input[type="text"],
.form_book .form-item input[type="number"],
.form_book .form-item input[type="email"],
.form_book .form-item input[type="password"],
.form_book .form-item textarea {
  width: 100%;
}

/* My Profile */

#edit-profile_form {
  display: table;
  width: 100%;
}

#edit-profile_form .form-item.image_upload {
  display: table-cell;
  position: relative;
  cursor: pointer;
  width: 170px;
}

#edit-profile_form .form-item.image_upload input:hover ~ .profile_image {
  background-image: url(../images/placeholder_upload.png) !important;
}

#edit-profile_form .form-item.image_upload input {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  opacity: 0;
  cursor: pointer;
}

#edit-profile_form .form-items-wrapper {
  display: table-cell;
  vertical-align: top;
}

#bookshelf {
  clear: both;
}

#profile_stats {
  display: none;
  margin: 0 0 40px 0;
}

#profile_stats h2 {
  overflow: hidden;
}

.profile_image {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #283149;
  width: 150px;
  height: 150px;
  background: url(../images/placeholder_profile.png) no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  float: left;
  margin-right: 40px;
}

#profile_stats .stat {
  line-height: 1.4;
}

#profile_stats .stat span {
  font-size: 20px;
  font-weight: 600;
}

#rate_book_popup div.rating {
  margin: 20px 0;
}

#rate_book_popup div.rating label {
  display: inline-block;
  margin-right: 10px;
}

#sort_archive {
  margin: 0 0 20px 0;
}

#sort_archive .form-item {
  display: inline-block;
  margin-left: 10px;
}

#grid_view_switch {
  line-height: 46px;
}

/* View book */

#view_book .alignleft {
  width: calc(60% - 20px);
}

#view_book .alignright {
  width: calc(40% - 20px);
}
#view_book .categories,
#view_book .author {
  margin: 0 0 20px 0;
  display: block;
}

#view_book .categories .category {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  background: #404b69;
  padding: 5px 10px;
  color: #ECE9F3;
  vertical-align: text-bottom;
  line-height: 1.2;
}

#view_book .synopsis h3 {
  display: block;
  margin-bottom: 20px;
}

#view_book .synopsis {
  line-height: 1.3;
}

#view_book .box h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}

#view_book .box .rating {
  margin-bottom: 20px;
}

#view_book .date_read {
  margin-bottom: 20px;
}

#view_book .date_read span {
  font-weight: 600;
}

#view_book .box .comment {
  font-style: italic;
  line-height: 1.5;
}

#view_book .box .comment::after,
#view_book .box .comment::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-style: normal;
  font-size: 16px;
  opacity: 0.7;
}

#view_book .box .comment::before {
  content: "\f10d";
  margin-right: 8px;
}

#view_book .box .comment::after {
  content: "\f10e";
  margin-left: 8px;
}

#view_book .related_books {
  margin-top: 50px;
}

#user_year .stat {
  margin: 15px 0;
  text-align: center;
}

/*#user_year .stat:nth-of-type(even) {
  text-align: right;
}*/

#user_year .stat span {
  font-size: 24px;
  font-weight: 600;
}

/* Reading list */

#current_reading_list {
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  background: #636e8a;
  height: 40px;
  margin: 20px 0 40px 0;
  position: relative;
}

.progress-bar .bar span {
  line-height: 32px;
  margin-right: 10px;
}

.progress-bar .bar {
  height: 32px;
  background: #d9374f;
  position: absolute;
  left: 4px;
  top: 4px;
  text-align: right;
}

.progress-bar .bar.reading {
  background: rgb(236, 233, 243);
}