:root{
  --id-cont-padding-top: 3.5em;
  --id-footer-height: 50px;
  --id-footer-margin-top: 10px;
  --classname-pagetitle-height: 45px;
  --classname-book_img-max-width: 310px;
  --classname-author_img-max-width: 310px;
  --classname-author-book_img-max-width: 160px;
}

body{
  background-color: #eef3fb;
}

/* header nav menu */

.menu-wrapper{
  position: fixed;
  width: 100%;
  z-index: 777;
  background-color: #4582af;
  -webkit-font-smoothing: antialiased;
  height: 2.8em;
  overflow: hidden;
  transition: height 0.5s;
}

.menu-wrapper.open{
  height: 9em;
}

.menu-wrapper .pure-menu-link,
.menu-wrapper .pure-menu-heading{
  color: #fff;
}

.menu-wrapper .pure-menu-link:hover,
.menu-wrapper .pure-menu-link:focus{
  color: #ccc;
  background-color: #4582af;
}

.menu-wrapper .pure-menu-heading,
.menu-wrapper .pure-menu-link {
  padding: 0.8em 1em;
}
.menu-brand{
  margin-left: 39px;
}
.menu-3{
  text-align: right;
}

.menu-toggle{
  width: 34px;
  height: 34px;
  position: absolute;
  top: 3px;
  right: 7px;
  display: none;
}

.menu-toggle .bar{
  background-color: #fff;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 100px;
  position: absolute;
  top: 18px;
  right: 7px;
  transition: all 0.5s;
}

.menu-toggle .bar:first-child{
  transform: translateY(-6px);
}

.menu-toggle .bar:last-child{
  top: 24px;
}

.menu-toggle.x .bar{
  transform: rotate(45deg);
}

.menu-toggle.x .bar:first-child{
  transform: rotate(-45deg);
}

.menu-toggle.x .bar:last-child{
  display: none;
}

@media (max-width: 47.999em){
  .menu-3{
    text-align: left;
  }

  .menu-toggle{
    display: block;
  }
}


/* left sidebar toggle menu */
a#left-menu-toggle.menu-toggle{
  display: block;
  left: 5px;
}

.left-menu-open .left-menu-side{
  left: 0;
}

.left-menu-side{
  background-color: #588fb7;
  color: white;
  position: fixed;
  top: 0;
  left: -230px;
  width: 230px;
  height: 100%;
  margin: 0;
  padding-top: 45px;
  z-index: 776;
  transition: left 300ms ease-in-out;
}

#left-menu-toggle{
  margin: 0;
  padding: 0;
}

.left-menu-side ul{
  padding-top: 34px;
  margin: 0;
  padding-left: 20%;
}

.left-menu-side ul li{
  list-style: none;
  margin-bottom: 22px;
  font-size: 1.2em;
  cursor: pointer;
  font-family: sans-serif;
  padding-left: 10px;
  border-left: 5px solid transparent;
}

.left-menu-side ul li:hover{
  border-left: 5px solid #4582af;
}
.left-menu-side ul li a{
  text-decoration: none;
  color: white;
}


/* buttons */
.button-xsmall{
  font-size: 70%;
}
.button-small{
  font-size: 85%;
}
.button-large{
  font-size: 110%;
}
.button-xlarge{
  font-size: 125%;
}

.button-success,
.button-error,
.button-warning,
.button-secondary{
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success{
  background: rgb(28, 184, 65); /* this is a green */
}
.button-error{
  background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning{
  background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary{
  background: rgb(66, 184, 221); /* this is a light blue */
}

/* for tags groups, non clickable */
.just-span{
  cursor:auto;
}
.just-span:hover,
.just-span:focus{
  background-image: none;
}

/* HR with centered text */
.hr-text{
  width: 100%;
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: 0.5;
}
.hr-text:before{
  content: "";
  background: linear-gradient(to right, transparent, #818078, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.hr-text:after{
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 0.5em;
  line-height: 1.5em;
  color: #818078;
  background-color: #fcfcfa;
}

/* tabs */

.tabs{
  display: flex;
  flex-wrap: wrap; /* make sure it wraps */
}
.tabs label{
  order: 1; /* Put the labels first */
  display: inline-block;
  text-align: center;
  padding: 1em 0;
  width: 50%;
  border-bottom: thick double rgba(91,192,222,.6);
  cursor: pointer;
  background: #fff;
  font-weight: bold;
  transition: background ease 0.2s;
  user-select: none;
}
.tabs .tab{
  order: 99; /* Put the tabs last */
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1em;
  background: #fff;
}
.tabs input[type="radio"]{
  display: none;
}
.tabs input[type="radio"]:checked + label{
  background: #90CAF9;
}
.tabs input[type="radio"]:checked + label + .tab{
  display: block;
}
/*
@media (max-width: 45em){
  .tabs .tab,
  .tabs label{
    order: initial;
  }
  .tabs label{
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}
*/


/* svg icons */
.svg_clock{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
}
.svg_eye{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 288a64 64 0 0 0 0-128c-1 0-1.88.24-2.85.29a47.5 47.5 0 0 1-60.86 60.86c0 1-.29 1.88-.29 2.85a64 64 0 0 0 64 64zm284.52-46.6C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 96a128 128 0 1 1-128 128A128.14 128.14 0 0 1 288 96zm0 320c-107.36 0-205.46-61.31-256-160a294.78 294.78 0 0 1 129.78-129.33C140.91 153.69 128 187.17 128 224a160 160 0 0 0 320 0c0-36.83-12.91-70.31-33.78-97.33A294.78 294.78 0 0 1 544 256c-50.53 98.69-148.64 160-256 160z'/%3E%3C/svg%3E");
}
.svg_pencil{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.255 56.236l-37.49-37.49c-24.993-24.993-65.515-24.994-90.51 0L12.838 371.162.151 485.346c-1.698 15.286 11.22 28.203 26.504 26.504l114.184-12.687 352.417-352.417c24.992-24.994 24.992-65.517-.001-90.51zM164.686 347.313c6.249 6.249 16.379 6.248 22.627 0L368 166.627l30.059 30.059L174 420.745V386h-48v-48H91.255l224.059-224.059L345.373 144 164.686 324.687c-6.249 6.248-6.249 16.378 0 22.626zm-38.539 121.285l-58.995 6.555-30.305-30.305 6.555-58.995L63.255 366H98v48h48v34.745l-19.853 19.853zm344.48-344.48l-49.941 49.941-82.745-82.745 49.941-49.941c12.505-12.505 32.748-12.507 45.255 0l37.49 37.49c12.506 12.506 12.507 32.747 0 45.255z'/%3E%3C/svg%3E");
}
.svg_comment{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 64c123.5 0 224 79 224 176S379.5 416 256 416c-28.3 0-56.3-4.3-83.2-12.8l-15.2-4.8-13 9.2c-23 16.3-58.5 35.3-102.6 39.6 12-15.1 29.8-40.4 40.8-69.6l7.1-18.7-13.7-14.6C47.3 313.7 32 277.6 32 240c0-97 100.5-176 224-176m0-32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26 3.8 8.8 12.4 14.5 22 14.5 61.5 0 110-25.7 139.1-46.3 29 9.1 60.2 14.3 93 14.3 141.4 0 256-93.1 256-208S397.4 32 256 32z'/%3E%3C/svg%3E");
}
.svg_comment_add{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M344 208h-56v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56h-56a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h56v56a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-56h56a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8zM256 32C114.62 32 0 125.12 0 240c0 47.55 19.86 91.23 52.9 126.27C38 405.72 7 439.06 6.54 439.5A24 24 0 0 0 24 480c61.51 0 110-25.72 139.15-46.33A307.33 307.33 0 0 0 256 448c141.38 0 256-93.12 256-208S397.38 32 256 32zm0 384a275.11 275.11 0 0 1-83.21-12.84l-15.16-4.8-13 9.18c-23 16.29-58.53 35.34-102.63 39.59 12-15.13 29.84-40.44 40.84-69.55l7.06-18.71-13.72-14.56C47.28 313.67 32 277.6 32 240c0-97 100.49-176 224-176s224 79 224 176-100.49 176-224 176z'/%3E%3C/svg%3E");
}
.svg_up{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M136.5 185.1l116 117.8c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L128 224.7 27.6 326.9c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-117.8c4.7-4.6 12.3-4.6 17 .1z'/%3E%3C/svg%3E");
}
.svg_down{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z'/%3E%3C/svg%3E");
}

.svg_icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  margin: 0 5px;
}


/* toast notifications */
.toast_container{
  display:table-cell;
  vertical-align:middle;
  position:fixed;
  right:0;
  bottom:0;
  z-index:333;
}
.toast_cell{
  display:inline-block;
}
.toast{
  text-align:left;
  margin:10px 10px 10px 0;
  padding:10px 0;
  background-color:#fff;
  border-radius:4px;
  max-width:500px;
  top:0px;
  position:relative;
  box-shadow:1px 7px 14px -5px rgba(0,0,0,0.2);
}
.toast:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  border-top-left-radius:2px;
  border-bottom-left-radius:2px;
}
.toast_icon{
  position:absolute;
  top:50%;
  left:13px;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  padding:7px;
  border-radius:50%;
  display:inline-block;
}
.ico_toast{
  display: inline-block;
  width:14px;
  height:14px;
  fill:#ffffff;
}
.toast_type{
  color:#3e3e3e;
  font-weight:700;
  margin-top:0;
  margin-bottom:8px;
}
.toast_message{
  font-size:14px;
  margin-top:0;
  margin-bottom:0;
  color:#878787;
}
.toast_content{
  padding-left:50px;
  padding-right:30px;
  user-select: none;
}
.toast_close{
  position: absolute;
  right: 5px;
  top: 12px;
  width:14px;
  height:14px;
  cursor:pointer;
  transform: translateY(-50%);
}
.toast_close svg.ico_toast{
  fill:#878787;
}
.toast_green{border: 1px solid #2BDE3F}
.toast_green .toast_icon,
.toast_green:before{
  background-color:#2BDE3F;
}

.toast_blue{border: 1px solid #1D72F3}
.toast_blue .toast_icon,
.toast_blue:before{
  background-color:#1D72F3;
}

.toast_red{border: 1px solid #e16467}
.toast_red .toast_icon,
.toast_red:before{
  background-color:#e16467;
}

.toast_cell .toast_green .ico_toast{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' fill='%23fff' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7 C514.5,101.703,514.499,85.494,504.502,75.496z'%3E%3C/path%3E%3C/svg%3E");
}

.toast_cell .toast_blue .ico_toast{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='%23fff' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8 v4H10z'%3E%3C/path%3E%3Ccircle cx='16' cy='4' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

.toast_cell .toast_red .ico_toast{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 301.691 301.691' fill='%23fff' %3E%3Cpolygon points='119.151,0 129.6,218.406 172.06,218.406 182.54,0'%3E%3C/polygon%3E%3Crect x='130.563' y='261.168' width='40.525' height='40.523'%3E%3C/rect%3E%3C/svg%3E");
}

.toast_cell .toast_close .ico_toast{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15.642 15.642' fill='%23878787' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill-rule='evenodd' d='M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061 c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061 l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541 l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z'%3E%3C/path%3E%3C/svg%3E");
}


/* spinner-preloader */
@keyframes loading_spinner_1{
   0% { transform: translate(12px,80px) scale(0); }
  25% { transform: translate(12px,80px) scale(0); }
  50% { transform: translate(12px,80px) scale(1); }
  75% { transform: translate(80px,80px) scale(1); }
 100% { transform: translate(148px,80px) scale(1); }
}
@keyframes loading_spinner_1_r{
   0% { transform: translate(148px,80px) scale(1): }
 100% { transform: translate(148px,80px) scale(0); }
}
@keyframes loading_spinner_1_c{
   0% { background: #e15b64 }
  25% { background: #abbd81 }
  50% { background: #f8b26a }
  75% { background: #f47e60 }
 100% { background: #e15b64 }
}
.loading_spinner1{
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  background: #fff;
}
.loading_spinner_1{
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.loading_spinner_1 div{
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(80px,80px) scale(1);
  background: #e15b64;
  animation: loading_spinner_1 1s infinite cubic-bezier(0,0.5,0.5,1);
  box-sizing: content-box;
}
.loading_spinner_1 div:nth-child(1){
  background: #f47e60;
  transform: translate(148px,80px) scale(1);
  animation: loading_spinner_1_r 0.25s infinite cubic-bezier(0,0.5,0.5,1), loading_spinner_1_c 1s infinite step-start;
}
.loading_spinner_1 div:nth-child(2){
  animation-delay: -0.25s;
  background: #e15b64;
}
.loading_spinner_1 div:nth-child(3){
  animation-delay: -0.5s;
  background: #f47e60;
}
.loading_spinner_1 div:nth-child(4){
  animation-delay: -0.75s;
  background: #f8b26a;
}
.loading_spinner_1 div:nth-child(5){
  animation-delay: -1s;
  background: #abbd81;
}


/* lang flags */
#menu ul li.lflag{padding-left:10px}
#menu ul li.lflag a{padding:13px 10px 9px 11px}
#menu ul li.lflag a img{display:inline-block;position:relative;top:2px;left:1px}
#menu ul li.lflag a span{padding:0 3px 0 10px}
.blflag{display:none;position:fixed;margin-left:10px;padding-top:4px;z-index:99999}
.blflag div a,.blflag div a:first-child{padding:12px 10px 0 11px}
.blflag div{background:#fff;width:78px;border-radius:12px;border:2px dotted #c0bfbc;display:inline-block;position:relative}
.parallax,.paraxify{background-size:cover}
.blflag div a{display:block}.blflag div a:last-child{padding:12px 10px 9px 11px}
.blflag div a span{position:relative;float:right;top:3px;padding:0 2px 0 7px}


/* login (and registration) page */
#login_page > div{
  margin: 0 auto;
  padding-top: 20px;
}
#login_page .login_header{
  display: block;
  text-align: center;
  font-weight: bold;
}

#login_page .login_f_rules{
  display: block;
}
#login_page #login_f_rules{
  width: 30px;
  height: 25px;
  margin-bottom: 7px;
}
#login_page label{
  cursor: pointer;
}
#showhidepass{
  width: 45px;
  height: 32px;
  position: relative;
  top: 12px;
  left: 5px;
  cursor:pointer;
}
#showhidepass{
  width: 33px;
  height: 27px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'/%3E%3C/svg%3E");
}
#showhidepass.hide{
  width: 30px;
  margin-left: 3px;
  height: 27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z'/%3E%3C/svg%3E");
}
#the_login_btn,
#the_reg_btn{
  display: none
}

/* one book, author pages */
.svg_icon.svg_clock{
  margin-left: 0;
}
.book_txt .details .svg_icon.svg_clock{
   margin-left: 5px;
}
.svg_icon.svg_eye{
  height: 25px;
  width: 25px;
  top: 8px;
}
.books_list .details .info .svg_icon.svg_eye{
  height: 24px;
}
.book_comments .svg_icon.svg_clock{
  height: 20px;
  width: 20px;
}
.svg_icon.svg_up,
.svg_icon.svg_down{
  top: 9px;
  width: 15px;
  height: 30px;
  cursor: pointer;
}
.svg_icon.svg_comment_add{
  cursor: pointer;
}
.book_comments .vote span{
  user-select: none;
}
.book_comments .vote .up_count{
  color: #52EA24;
}
.book_comments .vote .down_count{
  color: #EA4924;
}
.book_comments .vote .g{
  color: #B8B8B8;
}
.book_comments .vote .sep{
  color: #B8B8B8;
  padding: 0 5px;
}
#bookone > div > h2,
#bookone > div > p{
  padding: 0 0.5em;
}
#bookone .book_img{
  max-width: calc(var(--classname-book_img-max-width));
}
#author .author_img{
  max-width: calc(var(--classname-author_img-max-width));
}
#author + .books_list .itm{
  border-top: 1px #333 dotted;
  padding-top: 1em;
}
#author + .books_list div.itm:first-of-type{
  border-top: none;
}
#author + .books_list .book_img{
  max-width: calc(var(--classname-author-book_img-max-width));
}
#bookone .book_img img,
#author .author_img img{
  border-radius: 10px;
  min-width: 200px;
  margin: 0.5em;
}
#author + .books_list .book_img img{
  border-radius: 10px;
  width: 150px;
  margin: 5px 0 5px 10px;
}
#bookone .book_about{
  margin: 0 1em;
  width: calc(100% - var(--classname-book_img-max-width) - 2em);
}
#author .author_about{
  margin: 0 1em;
  width: calc(100% - var(--classname-author_img-max-width) - 2em);
}
#author + .books_list .book_txt{
  margin: 0 1em;
  width: calc(100% - var(--classname-author-book_img-max-width) - 2.5em);
}
#author .author_about .about_status{
  margin-bottom: 0.5em;
}
#author .author_about .tagslist{
  margin-top: 0;
}
#author + .books_list .book_url{
  display: block;
  margin: 0 auto;
  margin-top: 1em;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 1.1em;
}
#bookone a.read_book{
  margin-right: 0.5em;
}
#bookone .tabs label{
  border-bottom: none;
  user-select: none;
}
#bookone .tabs .tab{
  border-top: thick double rgba(91,192,222,.6);
}
#bookone .book_ch_cm{
  width: 100%;
  margin: 1em;
}
.book_comments .name{
  font-weight: bold;
}
.book_comments .info{
  color: rgba(0,0,0,0.3);
}
.book_comments .name{
  padding: 0.3em 0.5em 0 0;
}
.book_comments .review_form input#review_checkbox{
  appearance: none;
  margin: 0.5em 0.35em 0.5em 0;
  font: inherit;
  font-size: 2em;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid #000;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  place-content: center;
}
.book_comments .review_form input#review_checkbox::before {
  content: "";
  display: grid;
  position: relative;
  top: 0;
  left: 0.15em;
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em rebeccapurple;
}

.book_comments .review_form input#review_checkbox:checked::before{
  transform: scale(1);
}

.book_comments .review_form input#review_checkbox:hover{
  cursor: pointer;
}

.book_comments .review_form input#review_checkbox:focus{
  outline: max(2px, 0.15em) solid #000;
  outline-offset: max(2px, 0.15em);
}
.book_comments .review_form label.review_checkbox{
  position: relative;
  top: -30px;
  padding-left: 5px;
  z-index: 1;
}
.book_comments .review_form label{
  text-align: left;
  padding: 0 0 0 1em;
}
#bookone .book_comments .review_form{
  font-weight: bold;
}
.book_comments .comment_form{
  margin: 1em 0;
}
.book_comments .comment_form .cancel,
.book_comments .comment_form .send{
  margin: 1em 0 0 0.5em;
}
.book_comments .review,
.book_comments .comment{
  padding: 5px;
  margin-bottom: 1em;
  border: 3px solid #F0F8FF;
  border-radius: 10px;
}
.book_comments .comment{
  margin-left: calc(var(--deep));
}

.book_comments .review.good,
.book_comments .comment.good{
  background: #E1FFE6;
}

.book_comments .review.bad,
.book_comments .comment.bad{
  background: #FFE6E1;
}

/* search page: not show results before search */
.leftcont p.pure-u-1.pagetitle:nth-of-type(2){
  display: none;
}

/* filter and search form */
/* multi-select webcomponent */
#filtersearch{
  margin: 0 0.5em 1em 0.5em;
}
#filtersearch label,
#filtersearch #search_n_a,
#filtersearch #search_type{
  width: 100%;
  display: inline-block;
}
#filtersearch .search{
  padding-top: 10px;
}
#filtersearch #make_filter_search{
  margin-top: 1em;
  margin-right: 1em;
}
#filtersearch #make_reset,
#filtersearch #make_search,
#filtersearch #show_search,
#filtersearch #show_results,
#filtersearch #show_filter_search,
#filtersearch #show_filter_results,
#filtersearch #search_n_a{
  margin-top: 1em;
}
#filtersearch #make_search{
  margin-bottom: 1em;
}
#filtersearch + p,
#find_bookslist,
#filtersearch #show_search,
#filtersearch #show_results,
#filtersearch #show_filter_search,
#filtersearch #show_filter_results,
#find_bookslist #search1_results,
#find_bookslist #search2_results{
  display: none;
}

#find_bookslist{
  padding: 5px;
}

multi-select{
  display: flex;
  align-items: end;
  height: max-content;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px #ddd;
}
/*
button.msw-clearbutton{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(91,192,222,.6);
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%23f00'/%3E%3C/svg%3E") 50% 50% no-repeat;
}
button.msw-selectallbutton{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(91,192,222,.6);
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 448 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M413.505 91.951L133.49 371.966l-98.995-98.995c-4.686-4.686-12.284-4.686-16.971 0L6.211 284.284c-4.686 4.686-4.686 12.284 0 16.971l118.794 118.794c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-11.314-11.314c-4.686-4.686-12.284-4.686-16.97 0z' fill='%230f0'/%3E%3C/svg%3E") 50% 50% no-repeat;
}
*/
input.msw-searchbox{
  width: 100%;
  flex-grow: 1;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}
div.msw-selected{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}
div.msw-selecteditem{
  display: inline-block;
  padding: 0 0.35em 0.8em 0.8em;
  margin: 0.25em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #0d6efd;
  border-radius: 0.25em;
  cursor: pointer;
  user-select: none;
}
div.msw-selecteditem::after {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%23f00'/%3E%3C/svg%3E");
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 3px 0 5px;
  width: 15px;
  height: 15px;
  /* background-color: #fff; */
}
div.msw-dropdown{
  display: none;
  width: 100%;
  position: relative;
  z-index: 2;
}
div.msw-dropdownitem{
  background: #fff; /* #7DD9F5 */
  padding: 5px;
  user-select: none;
}
div.msw-dropdownitem:hover{
  background: #AEE4F5;
}
div.msw-disabled{
  background: #F0F0F0;
}


/* container */
#cont{
  /* min-height: 100vh; */
  margin: 0 auto;
  padding-top: calc(var(--id-cont-padding-top));
}
.leftcont{
  min-height: calc(100vh - var(--id-cont-padding-top) - var(--id-footer-height) - var(--id-footer-margin-top));
  width: 100%; /* todo comment this line for sidebar */
}

.leftcont,
/* .rightcont, todo uncomment for sidebar */
#footer{
  background-color: #fff;
  border-radius: 4px;
}
/* // todo uncomment for sidebar
.leftcont > .pagetitle{
  width: calc(100% - 0.5em);
}
*/
.pagetitle{
  margin: 0;
  padding: 0.8em 0;
  color: #66757f;
  border-bottom: 1px solid #e4eaec;
  box-shadow: 0 .005em .01em 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.12);
  clip-path: inset(-10px -10px 0px -10px);
}
.pagetitle span{
  padding-left: 0.8em;
}
#footer{
  width: 100%;
  height: calc(var(--id-footer-height));
  margin-top: calc(var(--id-footer-margin-top));
}
#footer p{
  text-align: center;
}


/* css masonry - blocks with same width and different height in mosaic view */
.grid-layout{
  margin: 0 auto;
  column-count: 1;
  column-gap: 0;
}
.grid-item{
  display: inline-block;
  box-sizing: border-box;
  width: calc(100% - 10px);
}


/* genres list */
#genrelist{ width: 100% }

#genrelist,
#sidebar{
  padding-left: 10px;
  box-shadow: 0 .005em .01em 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.12);
}
#sidebar{
  margin-bottom: 0.5em;
  padding: 1em;
}
#genrelist{
  min-height: calc(100vh - var(--classname-pagetitle-height) - var(--id-cont-padding-top) - var(--id-footer-height) - var(--id-footer-margin-top));
}
#genrelist a{
  display: flex;
  white-space: nowrap;
  text-decoration: none;
  color: #4582af;
  padding-bottom: 5px;
  text-decoration: none;
}
#genrelist a:hover,
#genrelist a:focus{
  color: #2f5978;
  text-decoration: underline;
}
#genrelist a span:last-child{
  display: inline-flex;
  margin-left: 5px;
  top: 2px;
  position: relative;
  font-size: 0.8em;
  color: #656565;
}

#genrelist > div{
  margin: 0.5em 0;
  padding: 1em 1em 0.7em 1em;
  font-size: 14px;
  box-shadow: 0 .005em .01em 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.12);
  border-radius: 4px;
  
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#genrelist > div > a:first-child .genretxt{
  display:inline-flex;
  font-weight: bold;
}
#genrelist > div > a span.genretxt{
  margin-right: 5px;
}
#genrelist > div > a span.dotted{
  display: inline-flex;
  flex: 2 1 auto;
  /* border-bottom-style: dotted; */
  height: 10px;
  background-image: linear-gradient(90deg, #9c9c9c 33%, rgba(255,255,255,0) 0);
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}
/*
#genrelist > div > a{
  padding: 0 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
*/


/* all tags */

#tagslist > div{
  padding: 10px 10px 0;
}
#tagslist > div > a,
#author p.tagslist > a,
#author + .books_list p.tagslist > a,
#all_books_page .book button,
#my_books_page .my_book button{
  margin-top: 5px;
}

/* all books, one book, author pages */
#bookslist > div.pure-button-group,
#author_page > div.pure-button-group{ /* pagination */
  width: 100%;
  margin: 10px;
  text-align: center;
}
#author_page > div.pure-button-group{
  padding-top: 10px;
  border-top: 1px #333 dotted
}
#bookslist .card-header > a{
  width: 80px;
  height: 80px;
  display: inline-block;
}
#bookslist.not_logged .card-header > a{
  float: left;
}
.card-header > a > img{
  border-radius: 50%;
}
.book_nb{
  display: inline-block;
  position: absolute;
  width: calc(100% - 115px);
  left: 0;
  top: 0;
  padding-top: 14px;
  padding-right: 5px;
  margin-left: 110px;
  text-align: left;
}
#bookslist.not_logged .book_nb{
  position: relative;
  width: calc(100% - 100px);
  margin-left: 15px;
  height: 80px;
  padding-top: 0;
  padding-right: 5px;
  margin-left: 15px;
}
.book_nb a{
  display: block;
  text-decoration: none;
  color: #333;
}
.book_b{
  margin-top: 4px;
  /* min-width: 50px; */
  display: block;
  max-width: 180px;
}
#bookslist .card-body{
  /* padding-top: 0; */
  padding: 0;
}
#bookslist .tab p,
#bookone .tab p{
  display: flex;
  margin: 0;
  margin-bottom: 2px;
}
#bookslist .tab p.fst,
#bookone .tab p.fst{
  margin-bottom: 5px;
}
#bookslist .tab p.fst span,
#bookone .tab p.fst span{
  margin-right: 5px;
}
#bookslist .tab p span.k,
#bookone .tab p span.k{
  display: flex;
  align-items: center;
  width: 300px;
  padding-top: 0.5em;
}
#bookslist .tab p span.k{ width: 50% }
#bookslist .tab p span.v,
#bookone .tab p span.v{
  display: flex;
  width: calc(100% - 300px);
  align-items: center;
}
#bookslist .tab p span.v{ width:50% }
#bookslist .tab p span.v2{
  display: inline-block;
  /*width: calc(100% - 300px);*/
  width: 50%;
}
#bookslist .tab p span.v a,
#bookone .tab p span.v a,
#bookslist .tab p span.v2 a{
  margin-bottom: 5px;
  color: #333;
  margin-right: 5px;
}
#bookone .tab p.tags span.v a,
#bookslist .tab p.tags span.v2 a,
#author + .books_list p.tagslist > a{ background: #3ae876 }
#bookslist .tab p span.v2 a:last-child{
  margin-right:0
}
#bookone .book_chapter_cont label{
  text-align: left;
  padding: 0;
}
#bookone .book_chapter_cont select{
  width: 100%;
}
#bookone .book_chapter{
  border: 1px solid #eee;
}
#bookone .book_chapter > div{
  margin-top: 0.5em;
  padding-bottom: 0.3em;
}
#bookone .book_chapter > div a{
  width: 100%;
  display: inline-block;
  padding: 8px 0 6px 6px;
}
#bookone .book_chapter > div span{
  padding-left: 6px;
  font-size: 85%;
}
#bookone .book_comments .review p,
#bookone .book_comments .comment p{
  display: block;
  margin-top: 0.5em;
}
#bookone .book_comments p.vote{
  margin: 0;
}


/* rating circle svg animation */
svg.rating_animation{
  display: block;
  width: 200px;
  height: 200px;
  /*background: #fff;*/
}
span.rating_animation{
  position: relative;
  top: -79px;
  left: 190px;
  padding: 7px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  font-style: italic;
  user-select: none;
}

/* chapter page */
#chapter{
  padding: 0 15px 15px;
  max-width: 1000px;
  margin: 0 auto;
}
#chapter > .center{ text-align: center }

/* page 404 */
#page_404{
  padding: 2em;
}

/* admin panel */
/* admin - users, tags, genres + add book, add chapter by administrator */
#admin_page #admin_main_list{width:100%;margin-bottom:1em}
#admin_page #version_now{font-size:small}
#admin_page,
#adm_all_users,
#adm_edit_user,
#adm_edit_tags,
#adm_edit_tags_order,
#adm_edit_tags_groups,
#adm_edit_tags_groups_order,
#adm_edit_genres,
#adm_edit_genres_order,
#adm_edit_genres_groups,
#adm_edit_genres_groups_order,
#edit_book_page,
#edit_chapter_page{
  padding: 1em;
}
#adm_all_users > p.user,
#adm_edit_tags_order #tagslist,
#adm_edit_tags_order #tags_order,
#adm_edit_tags #tagslist,
#adm_edit_tags #add_tag,
#adm_edit_tags #edit_tags,
#adm_edit_tags_groups #add_tags_group,
#adm_edit_tags_groups #edit_tags_groups,
#adm_edit_tags_groups_order #tags_groups_order,
#adm_edit_genres #add_genre,
#adm_edit_genres #edit_genres,
#adm_edit_genres_order #genreslist,
#adm_edit_genres_order #genres_order,
#adm_edit_genres_groups #add_genres_group,
#adm_edit_genres_groups #edit_genres_groups,
#adm_edit_genres_groups_order #genres_groups_order,
#edit_book,
#edit_book #book_icon,
#edit_book #book_img,
#edit_book #book_name,
#edit_book #orig_book_name,
#edit_chapter,
#edit_chapter #chapter_name,
#reload_cache,
#user_pass_form,
#user_name_form,
#user_name_form #avatar,
#user_data_form #avatar,
#user_contacts_form,
#user_add_contact_form{
  width: 100%;
}
#adm_all_users > h2,
#adm_edit_tags > h2,
#adm_edit_tags_order > h2,
#adm_edit_tags_groups > h2,
#adm_edit_genres > h2,
#adm_edit_genres_order > h2,
#adm_edit_genres_groups > h2,
#user_pass_form > h2{
  margin: 0;
  width: 100%;
}
#adm_edit_tags #add_tag button,
#adm_edit_tags #edit_tags button,
#adm_edit_tags_groups #add_tags_group button,
#adm_edit_tags_groups #edit_tags_groups button,
#adm_edit_genres #add_genre button,
#adm_edit_genres #edit_genres button,
#adm_edit_genres_groups #add_genres_group button,
#adm_edit_genres_groups #edit_genres_groups button,
#edit_chapter button{
  margin-top: 8px
}
#adm_all_users p.user{
margin-top: 0
}
#adm_all_users span.edit_icon{
  width: 38px;
  height: 30px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%2378d836' d='M358.9 433.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-41.8 41.8 71.8 71.7 41.8-41.8c9.2-9.3 9.2-24.4-.1-33.8zM223.9 288c79.6.1 144.2-64.5 144.1-144.1C367.9 65.6 302.4.1 224.1 0 144.5-.1 79.9 64.5 80 144.1c.1 78.3 65.6 143.8 143.9 143.9zm-4.4-239.9c56.5-2.6 103 43.9 100.4 100.4-2.3 49.2-42.1 89.1-91.4 91.4-56.5 2.6-103-43.9-100.4-100.4 2.3-49.3 42.2-89.1 91.4-91.4zM134.4 352c14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 16.7 0 32.2 5 45.5 13.3l34.4-34.4c-22.4-16.7-49.8-26.9-79.9-26.9-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h258.3c-3.8-14.6-2.2-20.3.9-48H48v-25.6c0-47.6 38.8-86.4 86.4-86.4z'/%3E%3C/svg%3E");
}
#adm_edit_user #user_data_form,
#adm_edit_user #user_contacts_form,
#adm_edit_user #user_add_contact_form,
#my_settings_page #user_pass_form,
#my_settings_page #user_name_form,
#my_settings_page #user_contacts_form,
#my_settings_page #user_add_contact_form{
  width: 100%;
  text-align: center;
}
#adm_edit_user #user_data_form #users_privileges{
  text-align: left;
  margin: 0 auto;
  display: inline-block;
}

#adm_edit_user #user_contacts_form .del_user_contact{
  margin-top: 5px;
}
#adm_edit_user #user_data_form #users_privileges{
  user-select: none;
}

#edit_book .maybe_translation{
display:none
}
#edit_book textarea#book_description,
#edit_chapter textarea#chapter_text,
#my_settings_page textarea#about_me,
#user_data_form textarea#about_me{
width: 80%;
height: 300px;
display: none;
}
#edit_book button{
margin-top: 10px
}

#my_books_page,
#all_books_page,
#my_book_chapters_page,
#book_chapters_page,
#my_settings_page{
padding: 0 20px 20px
}
#my_books_page div.my_book,
#all_books_page div.book,
#my_book_chapters_page h3.book_name,
#my_book_chapters_page .chapter,
#book_chapters_page h3.book_name,
#book_chapters_page .chapter{
width: 100%
}
div.my_book .description,
div.book .description{
margin-bottom: 20px
}
div.my_book .hidden_status,
div.book .hidden_status{
color: #f00
}
#my_books_page div.my_book span.edit_icon,
#all_books_page div.book span.edit_icon,
#my_book_chapters_page div.chapter span.edit_icon,
#book_chapters_page div.chapter span.edit_icon{
  width: 34px;
  height: 30px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%2378d836' d='M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z'/%3E%3C/svg%3E");
}
div.my_book span.add_icon,
div.book span.add_icon{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2378d836'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z'/%3E%3C/svg%3E");;
}
div.my_book .w_status,
div.book .w_status{
margin-right: 5px
}
#my_books_page .my_book .chapters_count a,
#all_books_page .book .chapters_count a{ color:#000 }
#my_book_chapters_page div.chapter span.edit_icon,
#book_chapters_page div.chapter span.edit_icon{ margin-left: 5px }

/* edit all tags and groups, genres and groups */
#tags_groups_order,
#genres_groups_order,
#add_tags_group,
#add_genres_group,
#tags_order,
#genres_order,
#add_tag,
#add_genre,
#edit_tags_groups,
#edit_tags,
#edit_genres_groups,
#edit_genres,
#reload_cache{
text-align: center;
}
#add_tag > label > span,
#add_genre > label > span,
.edit_tags_group > span,
.edit_genres_group > span,
.edit_tag_name > span,
.edit_tag_group > label > span,
.edit_tag_status > label > span,
.edit_genre_name > span,
.edit_genre_group > label > span,
.edit_genre_status > label > span{
user-select: none;
}
#add_tag_group,
#add_genre_group{
  margin: 8px 0
}
#adm_edit_tags_groups input[type="text"],
#adm_edit_genres_groups input[type="text"]{
  width: 290px
}
#tags_groups_order ul.order_list,
#tags_order ul.order_list,
#genres_groups_order ul.order_list,
#genres_order ul.order_list{
margin:0 auto;
list-style: none;
padding: 10px 0;
max-width: 360px;
margin-top: -8px;
background-color: #fff;
}
#tags_groups_order ul.order_list li,
#tags_order ul.order_list li,
#genres_groups_order ul.order_list li,
#genres_order ul.order_list li{
cursor: move;
background-color: #fff;
padding: 10px 40px;
background-color: #0078e7;
color: #fff;
border-bottom: 2px dotted #fff;
}
#tags_groups_order ul.order_list li:last-child,
#tags_order ul.order_list li:last-child,
#genres_groups_order ul.order_list li:last-child,
#genres_order ul.order_list li:last-child{
border-bottom:none
}
#tags_order ul.order_list li,
#genres_order ul.order_list li{
background-color: rgb(66, 184, 221);
}
#tags_groups_order ul.order_list .sortable-ghost,
#tags_order ul.order_list .sortable-ghost,
#genres_groups_order ul.order_list .sortable-ghost,
#genres_order ul.order_list .sortable-ghost{
opacity: 0.4;
background-color: #F4E2C9;
}


@media only screen and (min-width:200px) {
  #adm_edit_tags input[type="text"],
  #adm_edit_tags_groups input[type="text"],
  #adm_edit_genres input[type="text"],
  #adm_edit_genres_groups input[type="text"]{
    display:inline-block;
    margin-bottom:0
  }
}

@media only screen and (min-width:200px) {
  #cont{
    max-width: 500px;
  }
  #bookslist .pure-u-md-1-2{
    /* width: calc(25% - 1.15em); */
    margin: 0.5em;
  }
  #bookslist .card .book_nb > a{
    display: -webkit-box;
    min-height: 30px;
    max-height: 55px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: nowrap; */
  }
  #bookslist.not_logged .card .book_nb > a{
    min-height: 18px;
    max-height: 74px;
    -webkit-line-clamp: 4;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media only screen and (min-width:200px) and (max-width: 768px) {
  #bookone .book_about{ margin:0 }
  #bookone .tabs .tab{ padding: 0.5em 0 0 0 }
  #bookone .book_ch_cm { margin: 1em 0 1em 0 }
  #bookslist .tab p span.v,
  #bookone .tab p span.v,
  #bookslist .tab p span.k,
  #bookone .tab p span.k{ width: 50%; flex-wrap: wrap }
  #bookone .book_about,
  #author .author_about{
    width: auto;
  }
  #bookone .book_img,
  #author .author_img,
  #author + .books_list .book_img{
    max-width: 100%;
  }
  #author + .books_list .book_txt{
    width: 100%;
  }
  #bookone .book_img img,
  #author .author_img img,
  #author + .books_list .book_img img{
    margin: 0 auto;
    display: block;
  }
  #bookone .book_about > h2,
  #author .author_about > h2,
  #author + .books_list .book_url{
    text-align: center;
  }
  #bookone .book_chapter > div:nth-child(2n){
    background-color: #eee;
  }
}

@media only screen and (min-width:768px) and (max-width: 1024px) {
  #bookone span.info{
    width: 100%;
    display: inline-block;
  }
  .svg_icon.svg_eye{
    margin-left: 0;
  }
}

@media only screen and (min-width:768px) {
  #cont{
    max-width: 760px;
  }
  .grid-layout{
    column-count: 2;
  }
  #bookslist .pure-u-md-1-2{
    width: calc(50% - 1.15em);
  }
  #bookone .book_chapter > div{
    width: calc(50% - 1em);
  }
  #bookone .book_chapter > div:nth-child(4n - 1),
  #bookone .book_chapter > div:nth-child(4n){
    background-color: #eee;
  }
}


@media only screen and (min-width:1024px) {
  #cont{
    max-width:980px
  }
  #bookslist .pure-u-md-1-2{
    width: calc(33% - 0.95em);
  }
}
@media only screen and (min-width:1280px) {
  #cont{
    max-width:1200px
  }
  /* .pure-u-lg-1-4, .pure-u-lg-6-24{ */
  #bookslist .pure-u-md-1-2{
    width: calc(25% - 1.15em);
    /* margin: 0.5em; */
  }
  /* todo comment next for sidebar */
  .grid-layout{
    column-count: 3;
  }
  #bookone .book_about .tabs label,
  #bookone .book_ch_cm.tabs label{
    max-width: 300px;
  }
}
@media only screen and (min-width:1300px) {
  #cont{
    max-width:1280px
  }

}
@media only screen and (min-width:1400px) {
  #cont{
    max-width:1380px
  }
}
@media only screen and (min-width:1500px) {
  #cont{
    max-width:1480px
  }
  .grid-layout{
    column-count: 4;
  }
  /* // todo uncomment next && comment previous for sidebar
  .grid-layout{
    column-count: 3;
  }
  */
}

@media only screen and (min-width:1900px) {
  #cont{
    max-width:1600px
  }
}