/*
Theme Name: Madara-Child
Description:  A child theme for Madara - WordPress Theme for Manga, Novel sites
Author:       Madara
Author URI:   https://mangariom.com/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0.3
*/

/* Customize the password reveal button */
input[type="password"]::-ms-reveal {
  background-color: #ffffff79; /* Change the background color */
  border: 1px solid #ffffff79; /* Change the border color */
  border-radius: 50%; /* Make it circular */
  box-shadow: 0 0 3px #ffffff79; /* Add a shadow effect */
}

.c-page__content {
  margin: 30px 0;
}

.alert-success {
  font-size: 15pt;
}
.close {
  font-size: 26pt;
  margin-left: 10px;
}

.reading-manga > .wrap {
  overflow-x: hidden;
}

i.fa,
i.fab,
i.fas {
  vertical-align: middle;
}

.site-content {
  min-height: 80vh;
}
.archive .site-content {
  min-height: 80vh;
  padding: 50px 0;
}

p.must-log-in {
  font-size: 15pt;
}

.loading-text {
  color: white;
  padding: 25px 8px;
  margin: 10px 0;
  background-color: rgb(255 255 255 / 10%);
  border-radius: 5px;
  font-size: 18px;
  text-align: center;
  display: block;
  position: relative;
  z-index: 10;
  cursor: default;
}

.loading-indicator {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}
.dashboard-content .ajax-loading-inner {
  position: relative;
  top: 100px;
  min-height: 190px;
}
.ajax-loading-inner {
  z-index: 10;
}
.ajax-waiting {
  display: inline-block;
  pointer-events: none;
  color: #ffd201;
  font-size: 48px;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.chapter-ajax-box {
  display: none;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 12;
  background-color: #000000c4;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chapter-ajax-box .ajax-waiting {
  display: none;
}
.chapter-ajax-box .chapter-ajax-error {
  display: none;
  padding: 20px;
  background-color: #000000b3;
  text-align: center;
  color: #dedede;
  font-size: 17pt;
  font-weight: bold;
  border-radius: 4px;
}
.chapter-ajax-box .chapter-ajax-error .chapter-reload-function {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 14px;
  font-weight: normal;
  background-color: #c3c3c342;
  border-radius: 4pt;
}

@media (any-pointer: fine) and (min-width: 640px) {
  ::-webkit-scrollbar {
    height: 10px;
    width: 8px;
  }
}
@media (any-pointer: fine) and (min-width: 640px) {
  ::-webkit-scrollbar-thumb {
    background-color: #86868660;
    border-radius: 2rem;
  }
  .text-ui-light ::-webkit-scrollbar-thumb {
    background-color: #86868660 !important;
  }
}
@media (any-pointer: fine) and (min-width: 640px) {
  ::-webkit-scrollbar-track {
    background-color: #1b2337;
  }
  .text-ui-light ::-webkit-scrollbar-track {
    background-color: #222222 !important;
  }
}

a {
  color: #ffd201;
}

.inner_post_holder {
  width: 100%;
  height: 50vh;
  top: -70px;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #030712;
  filter: blur(3px);
}

.inner_post_holder:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #030712 0%, rgba(18, 18, 18, 0) 50%),
    /* top gradient */
      linear-gradient(180deg, #030712 0%, rgba(18, 18, 18, 0) 15%); /* bottom gradient */
}

.inner_post_holder:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 60%);
}

.en-font {
  font-family: "Poppins";
}

.h1-book-type {
  margin: 0;
  font-size: 25pt;
  font-style: normal;
  font-family: "Yekan Bakh", "Poppins";
}

.h1-book-title {
  display: inline;
  overflow-wrap: break-word;
  max-width: 100%;
  margin-left: 2px;
  font-size: 32pt;
  font-family: "Poppins";
  font-weight: 300;
  font-style: italic;
}

.h1-book-tr {
  font-size: 21px;
  font-weight: bold;
}

.container {
  position: relative;
  -webkit-transition: right 0.25s ease-in-out;
  -moz-transition: right 0.25s ease-in-out;
  -o-transition: right 0.25s ease-in-out;
  transition: right 0.25s ease-in-out;
}

.tab-summary {
  margin: 0;
  padding: 10px 0 0px !important;
  border-top: solid 1px;
  border-radius: 7px;
}

.summary_image .row {
  margin: 0;
}

.summary_image,
.summary_content_wrap {
  padding: 0;
}

.tab-summary .summary_image .book-image {
  padding: 6px;
  border-radius: 15px;
  border: solid 2px #646464;
  max-width: 60vw;
  margin: auto;
}

.tab-summary .summary_image .book-image img {
  width: 100%;
  border-radius: 12px;
}

.book-information-side,
.book-another-name {
  padding: 0px !important;
  margin: 3px 0 15px;
}

.post-content_item-sidebar-new {
  border-bottom: solid 2px gray;
  padding: 5px 2px;
  position: relative;
  margin-bottom: 7px;
  display: flow-root;
}

.summary-heading-sidebar-new h5,
.summary-heading-sidebar-new {
  display: inline-block;
  font-size: 14pt;
  margin: 0;
  color: #fff;
}

.summary-content-sidebar-new span {
  color: white;
}

.summary-content-sidebar-new a {
  color: #ffd201;
}

.summary-heading-sidebar-new h5 {
  float: right;
}

.summary-content-sidebar-new {
  float: left;
  font-size: 14pt;
  text-align: left;
}

.absolute-label {
  position: absolute;
  z-index: 0;
  padding: 0 5px 0 7px;
  top: -10px;
  color: white;
  font-size: 11pt;
  right: 18px;
  text-shadow: 1px 1px 5px rgb(255 255 255 / 75%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.book-another-name-title {
  background-color: #030712;
  top: -11px;
}

.book-another-name-inner {
  border-radius: 15px;
  border: solid 1px #fff;
  font-size: 14pt;
  padding: 10px;
  color: white;
}

.book-another-name-inner p {
  margin-bottom: 5px;
}

.post-content .post-content-moinfo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.post-content-moinfo-counter {
  display: inline-block;
  align-self: flex-end;
  max-width: 35%;
}
.post-content-moinfo-counter-inner {
  position: relative;
  z-index: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  max-width: fit-content;
  margin: 5px 0;
  padding: 10px 15px 5px;
  border: 1px solid #ffffff12;
  border-radius: 14px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: #00000036;
  box-shadow: 0 0 8px rgb(32 27 28), 0 0 5px rgb(0 0 0 / 50%);
}
.post-content-moinfo-counter-inner:hover {
  z-index: 100;
}

.post-x-count {
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: pointer;
}

.post-content-moinfo-counter .moinfo-c-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.post-content-moinfo-counter .moinfo-c-column > i {
  position: absolute;
  z-index: -1;
  filter: blur(0px) saturate(10);
  transition: all 0.3s ease;
}
.post-content-moinfo-counter .rate-count-main.moinfo-c-column .back-star {
  top: 9px;
  font-size: 60px;
  color: rgb(255 210 1 / 12%);
}
.post-content-moinfo-counter
  .default-count-main.moinfo-c-column
  .back-bookmark {
  top: 9px;
  font-size: 60px;
  color: rgba(0 208 255 / 12%);
}
.post-content-moinfo-counter .default-count-main.moinfo-c-column .back-comment {
  top: 10px;
  font-size: 60px;
  color: rgb(255 255 255 / 12%);
}
.post-content-moinfo-counter .post-x-count:hover .moinfo-c-column > i {
  filter: blur(4px) saturate(10);
}

.post-content-moinfo-counter .info-title {
  display: flex;
  align-items: center;
  padding: 0px 10px 5px 10px;
  margin-bottom: 7px;
  border-bottom: 1px solid;
}
.post-content-moinfo-counter .info-title span {
  font-size: 14pt;
  font-weight: bold;
  color: #d4d4d4;
  text-shadow: 0px 0px 3px;
  filter: drop-shadow(0px 3px 0px black);
}
.post-content-moinfo-counter .rate-count-main-top.info-title span {
  color: #ffff00;
}
.post-content-moinfo-counter .post-bookmark-count .info-title span {
  color: #00d2ff;
}
.post-content-moinfo-counter .post-comment-count .info-title span {
  color: #ffffff;
}

.post-content-moinfo-counter .rate-count-main .rate-count-main-mid {
  text-align: center;
}
.post-content-moinfo-counter .rate-count-main .rate-count-main-mid span {
  font-size: 17pt;
  color: #c2c2c2;
}
.post-content-moinfo-counter .rate-count-main .rate-count-main-mid span.sep {
  font-size: 9pt;
}
.post-content-moinfo-counter
  .rate-count-main
  .rate-count-main-mid
  span.score
  strong {
  position: relative;
  top: -4px;
  right: -1px;
  font-size: 21pt;
  color: #fff;
  text-shadow: 1px 1px 5px;
}
.post-content-moinfo-counter
  .rate-count-main
  .rate-count-main-mid
  .user-rate-count {
  display: inline-block;
  text-wrap: nowrap;
}
.post-content-moinfo-counter
  .rate-count-main
  .rate-count-main-mid
  .user-rate-count
  span {
  font-size: 11pt;
}

.post-content-moinfo-counter .default-count-main .default-count-main-mid {
  font-size: 9pt;
  font-weight: bold;
  color: #c2c2c2;
}
.post-content-moinfo-counter
  .default-count-main
  .default-count-main-mid
  span
  strong {
  font-size: 20pt;
  margin-left: 1px;
  color: #bdbdbd;
}

.post-x-count .moinfo-c-hover {
  visibility: hidden;
  position: absolute;
  top: 88px;
  right: 0px;
  width: 235px;
  opacity: 0;
  filter: blur(5px);
  transition: all 0.3s ease;
}
.post-x-count:hover .moinfo-c-hover {
  visibility: visible;
  opacity: 1;
  filter: blur(0px);
  transition: all 0.3s ease 0.2s;
}
.moinfo-c-hover .moinfo-c-hover-inner {
  font-size: 13pt;
  padding: 5px 8px;
  color: #ffffffcc;
  background-color: #000000f7;
  border: 1px solid #ffffff1c;
  border-radius: 5px;
  box-shadow: 0 10px 8px 8px rgb(0 0 0 / 43%);
}
.moinfo-c-hover
  .moinfo-c-hover-main-distribution-info
  .distribution-info-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
}
.distribution-info-inner .distribution-title {
  flex: 0 0 16%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 3px;
}
.distribution-info-inner .distribution-bar {
  flex: 0 0 70%;
}
.distribution-info-inner span.counter {
  flex: 0 0 11%;
  text-align: center;
}
.distribution-info-inner .distribution-bar .main-moinfo-bar {
  width: 100%;
  height: 10px;
  background-color: #7a7a7a33;
  border: 1px solid #80808026;
  border-radius: 50px;
  overflow: hidden;
}
.distribution-info-inner .distribution-bar .main-moinfo-bar .inner-moinfo-bar {
  width: 0;
  height: 100%;
  border-radius: 10px;
  background-color: #ffffff87;
}

@media (max-width: 768px) {
  .post-content-moinfo-counter {
    display: inline-block;
    max-width: 100%;
    width: 100%;
  }
  .post-content-moinfo-counter-inner {
    gap: 0;
    max-width: 100%;
    padding: 15px 5px 10px;
  }

  .post-content-moinfo-counter .rate-count-main.moinfo-c-column .back-star {
    top: 9px;
    font-size: 70px;
  }
  .post-content-moinfo-counter
    .default-count-main.moinfo-c-column
    .back-bookmark {
    font-size: 70px;
  }
  .post-content-moinfo-counter
    .default-count-main.moinfo-c-column
    .back-comment {
    top: 5px;
    font-size: 76px;
  }

  .post-content-moinfo-counter .info-title span {
    font-size: 15pt;
  }

  .post-content-moinfo-counter .rate-count-main .rate-count-main-mid span {
    font-size: 18pt;
  }
  .post-content-moinfo-counter .rate-count-main .rate-count-main-mid span.sep {
    font-size: 10pt;
  }
  .post-content-moinfo-counter
    .rate-count-main
    .rate-count-main-mid
    span
    strong {
    top: -3px;
    font-size: 25pt;
  }
  .post-content-moinfo-counter
    .rate-count-main
    .rate-count-main-mid
    .user-rate-count
    span {
    font-size: 11pt;
  }

  .post-content-moinfo-counter .default-count-main .default-count-main-mid {
    font-size: 12pt;
    font-weight: bold;
  }
  .post-content-moinfo-counter
    .default-count-main
    .default-count-main-mid
    span
    strong {
    font-size: 20pt;
  }
}

.post-content-moinfo-expected-total {
  display: inline-block;
  font-size: 14pt;
  color: white;
  border: solid 1px #ffffff50;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.post-content-moinfo-expected-total:hover,
.post-content-moinfo .post-title-status-tag:hover {
  background-color: #0000004d;
}

.post-content_item-variety {
  display: inline-block;
}

.genres-content-variety {
  display: inline-flex;
}

.post-content_item-variety a {
  background: #eb33498f;
  border: 1px solid #ffffff30;
  padding: 5px 7px;
  font-size: 13pt;
  border-radius: 4px;
  color: white;
}

.post-content_item-variety a:hover {
  background: #eb3349e3;
}

.genres-content a {
  display: inline-block;
  margin: 0 2px !important;
  padding: 4px 10px;
  font-size: 14pt;
  background-color: #bababa4a;
  border-radius: 17px;
  color: #fff;
  border: solid 1.5px #ffffff14;
}

.genres-content a:hover {
  background-color: #3f3f3f;
}

.search-results .search-wrap .genres-content a {
  margin: 2px !important;
}

.custom-dk-last,
.custom-dk-first {
  font-size: 15pt !important;
  padding: 7px 8px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: bold;
}

.custom-dk-first {
  background-color: #ffd2007a;
  border: solid #ffd2007a 1px !important;
}

.custom-dk-first:hover {
  background-color: #d9c539bf !important;
}

.custom-dk-last {
  border: solid #838383 1px;
}

.custom-dk-last:hover {
  border: solid #bababa4a 1px;
  background-color: #68686873 !important;
}

.button-fast-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 4px;
  margin-bottom: 8px;
}

.summary-content-view {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.summary-content-view-inner {
  display: flex;
  align-items: center;
  font-size: 13pt;
  padding: 5px 12px 5px 14px;
  background-color: #b7b7b72b;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  color: white;
  font-weight: 100;
  border-radius: 4px;
  transition: all 0.2s ease;
  border: solid 1.5px #ffffff14;
}

.summary-content-view-inner:hover {
  background-color: #4b4b4ba1;
  transition: all 0.2s ease;
}

.summary-content-view i,
.menu-chapter-report a {
  vertical-align: middle;
  margin-left: 5px;
}

.summary-genres-heading {
  vertical-align: middle;
  margin: 10px 0;
  display: inline;
}

.summary-genres-heading h5 {
  font-size: 14pt;
  color: #fff;
  margin: 0;
  margin-left: 5px;
}

div#init-links {
  display: inline-block;
}

.manga-action {
  display: inline-block;
}

.manga-action > * {
  margin: 6px 0;
}

.manga-action .add-bookmark .action_icon {
  display: inline-block !important;
}

.post-content.manga-action .count-comment,
.manga-action .add-bookmark {
  padding: 4px 7px;
  display: inline-block;
  border: solid 1px white;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0;
  margin-right: 4px;
}

.post-content.manga-action .count-comment,
.manga-action .add-bookmark:hover {
  background-color: #0000004d;
}

.post-content.manga-action .add-bookmark .action_icon,
.manga-action .add-bookmark .action_detail {
  text-align: center;
  /*   line-height: 1.35; */
  display: inline-block;
  font-size: 14pt;
  color: white;
}

.post-content.manga-action .add-bookmark .action_icon a,
.manga-action .add-bookmark .action_detail a {
  display: flex;
}

.add-bookmark .action_icon a i,
.add-bookmark .action_detail a i {
  font-size: 14pt;
  color: white;
  margin-left: 4px;
  margin-top: -3px;
  vertical-align: middle;
}

.count-comment.count-comment-top {
  display: none;
}

.book-excerpt-extra {
  margin-top: 25px;
}

.book-excerpt-text h2 {
  font-size: 15pt;
  color: white;
  margin-bottom: 2px;
}

.yellow-title-starter {
  border-right: solid 6px #ffd201;
  padding-right: 3px;
  display: inline-block;
  background: linear-gradient(180deg, rgb(40 37 38 / 48%) 20%, #00000054 100%);
  padding-left: 5px;
  transition: all 0.5s ease;
}
.yellow-title-starter:hover {
  padding-right: 6px;
  display: inline-block;
  background: linear-gradient(180deg, rgb(24 22 23) 20%, #00000054 100%);
  padding-left: 8px;
  transition: all 0.5s ease;
}
.book-excerpt-text .yellow-title-starter .en-font {
  font-style: italic;
}

.yellow-under-title {
  display: inline-block;
  color: #ffffff;
  font-size: 23pt;
  font-weight: 800;
}
span.title-text {
  position: relative;
  z-index: 1;
  text-shadow: -3px 2px 2px black;
}
.yellow-under-title .title-text .underline_title {
  background: rgba(255, 168, 38, 0.7);
  bottom: 10px;
  height: 7px;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
  position: absolute;
  z-index: -1;
}
.yellow-under-title a.show-more {
  font-size: 12pt;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  gap: 10px;
  color: #979797;
}
.yellow-under-title a.show-more:hover {
  color: #d3d3d3;
}
.book-excerpt-qanda .yellow-under-title {
  margin-right: 5px;
  margin-bottom: 10px;
}
.user-dashboard .yellow-under-title {
  display: flex;
}
.book-excerpt-text-content {
  font-size: 13pt;
  font-weight: 100;
  color: white;
  text-align: justify;
}

.book-excerpt-qanda {
  color: white;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.book-faq-box {
  margin-bottom: 5px;
}
.book-faq-box div {
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
}
.book-faq-box-question {
  font-size: 14pt;
  border: dashed 1px;
  border-radius: 8px;
  margin: 0 1px;
  padding: 10px 15px 10px 10px;
  background-color: #1b2336;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  color: #ffffff;
}
.book-faq-box-question.visible {
  font-weight: bold;
  border: solid 1px;
  background-color: #0d1529;
}
.book-faq-box-question:hover {
  background-color: #0d1529;
}

.book-faq-box-question span {
  line-height: 1;
  max-width: 90%;
  display: inline-block;
}
.book-faq-box-question span.boxnumb {
  color: #ffd201;
  font-size: 19pt;
  font-weight: bold;
}

.book-faq-box-question .showmore-arrow-icon {
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%) rotate(-90deg);
  background: #373c43;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 30px;
  border-radius: 12px;
  transition: all 0.2s ease;
  color: white;
}

.book-faq-box-question .showmore-arrow-icon i {
  line-height: 1.7;
}
.book-faq-box-answer {
  margin: 5px 2px 10px;
  max-height: 0;
  border-radius: 8px;
  font-size: 13pt;
  overflow: hidden;
  transition: all 0.2s ease;
}

.book-faq-box-answer-inside {
  background-color: #18233e;
  padding: 10px 12px 12px 12px;
  text-align: justify;
}

.book-faq-box-answer-inside p:last-of-type {
  margin-bottom: 0;
}

/* fonts for phone */
@media (max-width: 480px) {
  .h1-book-type {
    font-size: 20pt;
  }
  .h1-book-title {
    font-size: 25pt;
  }
  .h1-book-tr {
    font-size: 18px;
  }
}

.summary__content {
  text-align: justify;
}

.chapter-listing-info-action-total {
  display: inline-block;
  font-size: 14pt;
  color: #fff;
}

.chapter-listing-info-action-div {
  display: inline-block;
  font-size: 14pt;
  margin-right: 5px;
  vertical-align: middle;
  padding: 6.75px 9px;
  transition: all 0.2s ease;
  background-color: #141a28;
  border: solid 1px #ffffff12;
  border-radius: 5px;
}
.chapter-listing-info-action-div:hover {
  background-color: #242e45;
}

.chapter-listing-info-action-div a.btn-reverse-order i {
  vertical-align: middle;
  margin-left: 6px;
  font-size: 12pt;
  transition: all 0.5s ease;
}

.chapter-listing-info-action-div a.btn-reverse-order:hover i {
  transform: rotate(180deg);
}

.chapter-listing-search-action {
  display: inline-block;
  position: relative;
  border: 1px solid #1b2337;
  transition: all 0.2s ease;
  padding: 12px 38px 12px 165px;
  vertical-align: middle;
  border-radius: 5px;
  min-width: 210px;
  width: 25%;
  flex: 1;
}
.chapter-listing-search-action .chapter-search-remove {
  position: absolute;
  top: 5px;
  left: 90px;
  bottom: 5px;
  padding: 0 10px;
  text-align: center;
  font-size: 14pt;
  border: 1px solid #00000021;
  border-radius: 2px;
  font-weight: bold;
  background-color: #843131;
  color: white;
}
.chapter-listing-search-action .chapter-search-submit {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  padding: 0 20px;
  text-align: center;
  font-size: 14pt;
  border: 1px solid #00000021;
  border-radius: 2px;
  font-weight: bold;
  background-color: #847931;
  color: white;
}

.chapter-listing-search-action .absolute-label {
  color: #c8c8c8;
}

.chapter-listing-search-action i {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  font-size: 12pt;
  color: #fff;
}

.chapter-listing-search-action input {
  background-color: unset;
  padding: 0;
  font-size: 14pt;
  border: none;
}

body.manga-page
  .page-content-listing.single-page
  .listing-chapters_wrap
  > ul.main.version-chap
  li
  .wp-manga-chapter-div:hover {
  background-color: #18233e;
}

#manga-chapters-holder .c-blog__heading,
#manga-chapters-holder .page-content-listing {
  margin: 0px;
}

#manga-chapters-holder .c-blog__heading h2 {
  color: #fff;
}

.comments-title .custom-ordrby-container .absolute-label {
  font-size: 12pt;
  text-shadow: 1px 1px 5px rgb(255 255 255 / 58%);
}
.comments-area .no-comment-container {
  display: inline-block;
  width: 100%;
}
.dashboard-content .custom-ordrby-container svg {
  position: absolute;
  left: 10px;
  top: 8px;
}
.custom-postlist-orderby,
.comment-orderby {
  display: inline-block;
  padding: 12px 15px;
  padding-left: 45px;
  font-size: 14pt;
  font-weight: bold;
  width: auto;
}
.custom-postlist-orderby {
  padding: 9px 15px;
  padding-left: 50px;
}

.comment-meta {
  display: flex;
  margin-bottom: 10px;
}

.comment-body hr {
  border: solid 1px #202532;
}

.manga-discussion .comment-avatar {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50px;
}

img.avatar.avatar-70.photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manga-discussion h6 {
  display: inline-block;
  margin: 0 !important;
  font-size: 15pt;
  color: #fff;
  font-weight: bolder;
}

.manga-discussion h6 a {
  font-size: 15pt;
  color: #fff;
  font-weight: bolder;
}
.manga-discussion h6 a:hover {
  color: #ffd201;
}

.manga-discussion .comment-metadata-div {
  display: flex;
  flex-direction: column;
  gap: 0px;
  flex: 1;
  max-width: 100%;
  justify-content: center;
  margin-right: 7px;
}

.manga-discussion .reply i,
.manga-discussion .show-reply i {
  vertical-align: middle;
  margin-left: 3px;
}

.comment-list .children li article {
  border-right: solid #ffd201 2px;
  border-radius: 20px;
}

p.logged-in-as a {
  margin-right: 2px;
}

p.comment-form-rules {
  display: block !important;
  width: 100% !important;
  font-size: 13pt !important;
  margin-bottom: 10px !important;
}

p.comment-form-rules.bold {
  font-size: 14pt !important;
  background-color: rgba(255, 0, 0, 0.123);
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  width: unset !important;
}

p.comment-form-rules.bold b {
  border-bottom: solid 1px;
}

p.comment-form-rules:before {
  float: right;
  content: "";
  width: 8px;
  height: 8px;
  background: rgb(0 0 0);
  border-radius: 100%;
  margin: 7px 0 0 5px;
}

.manga-discussion .show-reply a {
  color: #999999;
}

.children {
  display: none;
}

.show {
  display: block;
}
@media (min-width: 768px) {
  .comment-content .cld-like-dislike-wrap {
    position: relative;
    bottom: 2px;
    float: right;
  }
  .manga-discussion .show-reply {
    position: relative;
    bottom: 32px;
    right: 15px;
    padding: 0 11px;
    float: right;
  }
  #madara-comments.comments-area
    ol.comment-list
    li.comment
    article.comment-body
    div.reply,
  #madara-comments.comments-area
    ol.comment-list
    li.pingback
    article.comment-body
    div.reply {
    position: relative;
    bottom: 32px;
    padding: 0 11px;
  }
}
.comment-content .cld-like-dislike-wrap {
  font-size: 15pt;
  background-color: #141a28;
  border-radius: 5px;
  border: solid 1px #202532;
  padding: 2px 5px 2px 5px;
  margin: 5px 0;
  font-size: 16pt;
}
.manga-discussion .show-reply {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14pt;
  background-color: #141a28;
  color: #999999;
  display: inline-block;
}
#madara-comments.comments-area
  ol.comment-list
  li.comment
  article.comment-body
  div.reply,
#madara-comments.comments-area
  ol.comment-list
  li.pingback
  article.comment-body
  div.reply {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14pt;
  background-color: #141a28;
  float: left;
  margin-bottom: 8px;
}

.cld-count-wrap {
  margin-right: 5px;
}

.post-title-status-tag {
  display: inline-block;
}

.post-content-moinfo .post-title-status-tag {
  font-size: 14pt;
  display: inline-block;
  color: white;
  border-radius: 4px;
  border: solid 1px #ffffff50;
  padding: 4px 10px;
  transition: all 0.2s ease;
}

.chapter-listing-info-action {
  margin: 15px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

span.chapter-listing-info-action-separator {
  margin: 0 10px;
  color: #ffd201;
}

.comment-area-mega-part,
.reading-page-form {
  display: block;
  visibility: hidden;
  padding: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  bottom: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #000000ed;
}
.comment-area-mega-part.show,
.reading-page-form.show {
  overflow: auto;
}
.fadeineffect {
  max-height: 0;
  width: 0;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease, z-index 0.3s ease;
}
.fadeineffect.show {
  padding: 170px 10% 0% 10%;
  max-height: 100vh;
  width: 100%;
  visibility: visible;
  opacity: 1;
  z-index: 2;
}
.comment-area-mega-part span.reader-commnet-closer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 18pt;
  color: white;
  padding: 2px 12px 2px 10px;
  font-weight: bold;
  cursor: pointer;
  background-color: #ffffff21;
  border-radius: 33px;
}
.comment-area-mega-part .chapter-listing-info-action-separator {
  margin: 0 10px;
  color: #ffd201;
  font-size: 20pt;
  font-weight: bold;
  line-height: 0;
}

.form-main-container {
  display: none;
  padding: 20px;
  font-size: 13pt;
  color: #fff;
  background-color: #141d31;
  border-radius: 10px;
  box-shadow: 0 0 15px rgb(0 0 0);
}
.form-header {
  color: white;
  text-align: center;
}
.form-header h5 {
  color: white;
  font-size: 18pt;
}
.form-header p {
  text-align: right;
  color: #bcbcbc;
}
.form-main-container hr {
  color: white;
  margin: 1rem 40%;
  border: 1px solid white;
  border-radius: 15px;
}
.form-body {
  display: flex;
  flex-wrap: wrap;
}
.form-body select,
.form-body textarea {
  margin-bottom: 15px;
}
.form-body .form-message {
  font-size: 13pt;
  font-weight: bold;
  width: 100%;
  background: #000000c2;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}
@media (max-width: 576px) {
  .home .yellow-under-title {
    max-width: calc(100% - 40px);
    font-size: 17pt;
  }
  .post-hori-slider-title a {
    font-size: 11pt;
  }
  .chapter-listing-search-action {
    margin: 10px 0;
    width: 65%;
  }
  .chapter-listing-info-action-separator {
    display: none;
  }
  .fadeineffect.show {
    padding: 125px 2% 20px 2%;
  }
}

.wp-manga-chapter-div-chapter-link img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-blog__heading-chapter-new {
  position: relative;
  margin: 0px 10px;
}

.c-blog__heading-chapter-new h2,
.c-blog__heading-chapter-new h4,
.c-blog__heading-chapter-new i {
  display: inline-block;
  vertical-align: middle;
  font-size: 15pt;
  color: white;
  margin: 0;
  margin-left: 5px;
}

.c-blog__heading-chapter-new h2,
.c-blog__heading-chapter-new h4 {
  font-weight: normal;
  font-size: 16pt;
}

.header-solid-line {
  border-top: solid 1px #ffffff50;
  border-radius: 6px;
}

.related-manga {
  width: 100%;
  margin: auto;
}

.related-holder {
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;
  width: max-content;
  gap: 15px;
  white-space: nowrap;
  padding-top: 20px;
}

.related-holder .related-holder-item {
  overflow: hidden;
}

@media (max-width: 480px) {
  .related-holder {
    gap: 10px;
  }
}

.custom-content-listing .row.row-eq-height {
  justify-content: right;
  margin-right: -10px;
  margin-left: -10px;
  gap: 1%;
  row-gap: 5px;
}

.section-container {
  margin: 50px 0;
}
.post-hori-slider-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 13pt;
  margin: 20px 0;
  align-items: center;
}
.post-hori-slider-title a {
  background: #ffffff1a;
  border: 1px solid #ffffff00;
  border-radius: 5px;
  padding: 8px 10px 8px 13px;
}
.post-hori-slider {
  position: relative;
  width: 100%;
}
.shortcode-listing {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar in Firefox */
  scrollbar-width: none;
  /* hide scrollbar in IE10+ */
  -ms-overflow-style: none;
}
/* 2. Hide any WebKit scrollbar */
.shortcode-listing::-webkit-scrollbar {
  display: none;
}
.shortcode-listing .shortcode-grab::before {
  content: "";
  width: 2%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, #040612 100%);
  z-index: 1;
}
.shortcode-listing .shortcode-grab::after {
  content: "";
  width: 2%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(-90deg, rgb(255 255 255 / 0%) 0%, #040612 100%);
  z-index: 1;
}
.shortcode-listing.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.shortcode-listing.grabbing div a {
  pointer-events: none;
}
.shortcode-listing.grabbing div > div {
  pointer-events: none;
}

.custom-content-listing.shortcode-listing .row.row-eq-height {
  margin-right: 5px;
  margin-left: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
}

.custom-post-holder-item {
  width: 231px;
  max-width: 100%;
  flex: none;
  position: relative;
  -webkit-user-select: none !important;
  user-select: none !important;
  padding: 0;
  cursor: pointer;
}

.related-holder-item.custom-post-holder-item {
  border-radius: 10px;
}

.custom-content-listing .custom-post-holder-item {
  position: relative;
  max-width: 50%;
  flex: 49%;
  margin-bottom: 60px;
  overflow: visible;
}

.custom-content-listing .custom2-post-holder-item {
  position: relative;
  flex: 100%;
  max-width: 100%;
  padding: 10px;
  background-color: #141a28;
  margin-bottom: 1%;
  border-radius: 6px;
}
.user-dashboard-post-list .custom-content-listing .custom2-post-holder-item {
  display: flex;
  flex-direction: column;
}
.custom-content-listing .custom3-post-holder-item {
  flex: 100% !important;
  max-width: 100% !important;
}

.custom-post-holder-item .page-item-detail {
  margin: 0 !important;
}

.custom2-post-holder-item .page-item-detail {
  display: flex;
  height: 100%;
}
/* fix for rating and bookamrk dropdown position */
.user-dashboard-post-list .custom2-post-holder-item .page-item-detail {
  height: unset;
  margin-bottom: 15px;
}
.custom2-post-holder-item .item-thumb {
  flex: 25%;
  max-width: 25%;
}
.custom2-post-holder-item .item-summary {
  flex: 75%;
  max-width: 75%;
}

.custom3-post-holder-item .item-thumb {
  flex: 15%;
  max-width: 15%;
}
.custom2-post-holder-item.custom3-post-holder-item .item-thumb a {
  display: inline-block;
}
.custom2-post-holder-item .item-thumb a img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  filter: brightness(1);
  transform: translate(-50%, -50%);
  transition: 300ms transform ease, 300ms filter ease;
}
.custom2-post-holder-item:hover .item-thumb.c-image-hover a img {
  filter: brightness(0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

.custom3-post-holder-item .item-summary {
  flex: 85%;
  max-width: 85%;
}

.custom3-post-execpt-chapter {
  display: none;
  flex: 100%;
}

.related-holder.active .custom-post-holder-item {
  pointer-events: none;
}

.custom-post-informations {
  text-align: left;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 160px;
  line-height: normal;
  transition: all 0.3s ease;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0%, #000),
    to(transparent)
  );
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, #000000de 100%);
}

.custom-post-informations:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(30%, #000),
    to(transparent)
  );
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, #000000de 60%);
}

.custom-post-holder-item:hover .custom-post-informations {
  height: 175px;
}

.custom-post-holder-item:hover .custom-post-informations:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(40%, #000),
    to(transparent)
  );
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, #000000de 50%);
}

.custom-post-informations-pos {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

.custom-post-informations-pos-top {
  overflow: hidden;
}

.custom-post-informations-pos hr {
  margin: 0px;
  margin-top: 4px;
  border: 1px solid rgb(114 114 114);
}

.custom2-post-holder-item hr {
  display: none;
}

.custom-post-holder-item .small-info-after {
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.custom-post-holder-item span.chapter-counter {
  color: white;
  font-size: 15pt;
  line-height: 1;
}

.custom2-post-holder-item span.chapter-counter,
.custom-slider-holder-item span.chapter-counter {
  color: white;
  font-size: 14pt;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom2-post-holder-item .small-info-before > *,
.custom3-post-holder-item .small-info-before > * {
  text-align: center;
}

.custom-post-holder-item .on-post-info-tags {
  display: flow-root;
  width: 100%;
  position: relative;
  transition: all 0.4s ease;
  bottom: -40px;
}

.custom2-post-holder-item .on-post-info-tags {
  margin-top: 6px;
  margin-bottom: 8px;
}

.custom-post-holder-item span.on-post-info-tags-type,
.custom2-post-holder-item span.on-post-info-tags-type {
  font-size: 14pt;
  color: white;
  background-color: rgb(162 255 0 / 53%);
  padding: 1px 6px;
  border-radius: 5px;
  float: left;
  line-height: normal;
}

.on-image-info-tags-translate-status,
.on-post-info-tags-translate-status {
  font-size: 14pt;
  color: white;
  background-color: rgb(0 210 255 / 49%);
  padding: 0px 4px;
  border-radius: 5px;
  float: right;
  transition: all 0.3s ease;
  line-height: normal;
  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.custom2-post-holder-item .on-image-info-tags-translate-status {
  display: none;
}
.custom2-post-holder-item .on-post-info-tags-translate-status {
  padding: 2px 5px;
  float: unset;
}

.custom-post-holder-item .on-image-info-tags-translate-status {
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
}

.custom-post-holder-item .on-post-info-tags-translate-status {
  display: none;
}

.custom-post-holder-item .on-post-info-tags-genres {
  float: right;
  margin-top: 1px;
}

.custom2-post-holder-item .on-post-info-tags-genres {
  display: inline-block;
}

.custom-post-holder-item .on-post-info-tags-genres a,
.custom2-post-holder-item .on-post-info-tags-genres a,
.custom-slider-informations .on-post-info-tags-genres a,
.main-slider-info .on-post-info-tags-genres a {
  padding: 0.5px 6px;
  font-size: 14pt;
  background: rgb(255 255 255 / 15%);
  color: white;
  border-radius: 6px;
  margin-left: 0px;
  border: solid 1.5px #ffffff14;
}

.custom2-post-holder-item .small-info-before {
  display: grid;
  gap: 0.25rem;
  grid-auto-flow: row;
  grid-template-columns: 0.8fr 1.2fr 1fr 1fr;
  margin-top: -4px;
}

.custom3-post-holder-item .small-info-before > * {
  display: inline-block;
  vertical-align: middle;
}

.custom2-post-holder-item .rating-on-cover-container {
  display: inline-block;
}
.custom2-post-holder-item .small-info-after {
  display: none;
}

.custom-post-holder-item .small-info-before {
  display: none;
}

.custom-post-holder-item .rating-on-cover,
.custom2-post-holder-item .info-on-coverforcustom,
.custom-slider-holder-item .rating-on-cover {
  font-size: 14pt;
  display: flex;
  align-items: center;
  justify-content: right;
  color: #ffffff;
}

.custom-post-holder-item .rating-on-cover {
  margin-right: auto;
}

.custom-post-holder-item .rating-on-cover span {
  font-size: 16pt;
  font-weight: bold;
  line-height: 1.25;
  padding-top: 4px;
  margin-left: 6px;
  color: #fff;
}

.rating-on-cover.info-on-coverforcustom2 {
  display: flex;
  align-items: center;
}
.custom2-post-holder-item .info-on-coverforcustom2 span {
  margin-right: 4px;
  padding-top: 1px;
  font-size: 15pt;
  font-weight: bold;
  color: #fff;
  vertical-align: middle;
}

.custom-post-holder-item .rating-on-cover i,
.custom2-post-holder-item .rating-on-cover i,
.custom-slider-holder-item .rating-on-cover i {
  color: #ffd201;
  vertical-align: middle;
}

.custom2-post-holder-item .rating-on-cover i,
.custom2-post-holder-item .bookmark-on-cover i {
  font-size: 14pt;
  vertical-align: middle;
  line-height: 0;
}

.custom-post-holder-item:hover .custom-post-informations h5,
.custom-post-holder-item:hover .custom-post-informations h3 {
  display: block;
  margin-bottom: 4px;
  bottom: 0 !important;
}

.custom2-post-holder-item h3,
.custom-slider-informations .custom-slider-title-informations h3 {
  display: block;
  margin: 0;
}
.custom-slider-informations .custom-slider-title-informations h3 {
  direction: ltr;
}

.custom3-post-holder-item h3 {
  display: inline-grid;
  vertical-align: middle;
}

.custom-post-holder-item:hover .on-post-info-tags {
  bottom: 0 !important;
}

.custom-post-holder-item:hover span.on-image-info-tags-translate-status {
  opacity: 1;
}

.item-big_thumbnail .custom-post-holder-item {
  margin-bottom: 50px;
}

.custom-post-holder-item .chapter-item {
  text-align: right;
  display: flex;
  align-items: center;
  position: absolute;
  margin: 12px -10px 0;
  padding: 8px;
  right: 0;
  left: 0;
  background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, #000000de 60%);
  border-radius: 0 0 8px 8px;
  border: 1px solid #ffd2011a;
  border-top: solid 1px #838383;
}

.custom-post-holder-item .chapter-item:hover {
  background: linear-gradient(0deg, #ffd2012e 0%, #000000de 90%);
  border-top: solid 1px #ffd201;
}

.custom3-post-holder-item h3 a {
  vertical-align: bottom;
}

.custom2-post-holder-item h3 a {
  color: white;
  font-size: 14pt;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.custom-post-holder-item .post-listing-item-excerpt {
  display: none;
}

.custom2-post-holder-item .post-listing-item-excerpt {
  max-height: 8.4em;
  overflow: hidden;
  position: relative;
}
.custom3-post-holder-item .post-listing-item-excerpt {
  max-height: 16vh;
}

.custom2-post-holder-item .post-listing-item-excerpt:after,
.custom-slider-holder-item .post-listing-item-excerpt:after {
  background: linear-gradient(#191a1c00, #141a28);
  bottom: 0;
  content: "";
  display: block;
  height: 1.9em;
  left: 0;
  position: absolute;
  width: 100%;
}

.custom2-post-holder-item .post-listing-item-excerpt div {
  font-size: 12pt;
  line-height: 1.25rem;
  color: white;
  text-align: justify;
}

.custom3-post-holder-item .list-chapter,
.custom2-post-holder-item .list-chapter {
  margin-top: 5px;
  padding: 2px 0px;
}

.custom3-post-holder-item .list-chapter > span,
.custom2-post-holder-item .list-chapter > span {
  color: #fff;
  font-size: 13pt;
  margin-left: 2px;
}
.custom3-post-holder-item .list-chapter .chapter-item,
.custom2-post-holder-item .list-chapter .chapter-item {
  display: inline-flex;
  align-items: center;
  padding: 0 0 0 10px;
  border-radius: 5px;
  border: solid 1px #ffffff29;
  transition: all 0.2s ease;
}
.custom3-post-holder-item .list-chapter .chapter-item:hover,
.custom2-post-holder-item .list-chapter .chapter-item:hover {
  background-color: #000000;
}
.custom3-post-holder-item .list-chapter .chapter-item span a:hover,
.custom2-post-holder-item .list-chapter .chapter-item span a:hover {
  color: #ffd201;
}

@media (min-width: 576px) {
  .custom-content-listing .custom-post-holder-item {
    flex: 48%;
  }
  .custom-content-listing .custom2-post-holder-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .custom3-post-holder-item .custom2-post-informations-pos {
    height: 100%;
  }
}
@media (min-width: 768px) {
  .custom-content-listing .custom-post-holder-item {
    max-width: 231px;
    flex: 32.33%;
  }
  .shortcode-listing .custom-post-holder-item {
    width: 250px;
    max-width: 250px;
    flex: 32.33%;
  }
  .custom-content-listing .custom2-post-holder-item {
    -ms-flex: 0 0 49.5%;
    flex: 0 0 49.5%;
    max-width: 50%;
  }
  .user-dashboard-post-list .custom2-post-holder-item {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .custom3-post-holder-item .small-info-before {
    display: inline-flex;
    gap: 15px;
    margin: 0 8px;
  }
}

@media (min-width: 992px) {
  .custom-content-listing .custom-post-holder-item {
    max-width: 231px;
    flex: 23%;
  }
  .shortcode-listing .custom-post-holder-item {
    width: 250px;
    max-width: 250px;
    flex: 23%;
  }
  .custom-content-listing .custom2-post-holder-item {
    -ms-flex: 0 0 49.5%;
    flex: 0 0 49.5%;
    max-width: 50%;
  }
}

@media (min-width: 1230px) {
  .custom-content-listing .custom-post-holder-item {
    max-width: 231px;
    flex: 18%;
  }
  .shortcode-listing .custom-post-holder-item {
    width: 250px;
    max-width: 250px;
    flex: 20%;
  }
  .custom-content-listing .custom2-post-holder-item {
    -ms-flex: 0 0 49.5%;
    flex: 0 0 49.5%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .custom2-post-holder-item .item-thumb a {
    display: inline-block;
  }
  .custom2-post-holder-item.custom3-post-holder-item
    .custom2-post-informations-pos-top {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .custom2-post-holder-item.custom3-post-holder-item .page-item-detail {
    flex-wrap: wrap;
  }
  .custom2-post-holder-item .post-listing-item-excerpt {
    max-height: 9em;
  }
  .custom3-post-holder-item .item-thumb {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .custom3-post-holder-item .item-summary {
    flex: 0 0 76%;
    max-width: 76%;
  }
  .custom3-post-holder-item .item-summary .post-listing-item-excerpt,
  .custom3-post-holder-item .item-summary .list-chapter {
    display: none;
  }
  .custom3-post-holder-item .list-chapter > span {
    color: #fff;
    font-size: 13pt;
  }
  .custom3-post-holder-item .list-chapter .chapter-item {
    display: inline-block;
    margin-right: 2px;
  }
  .custom3-post-holder-item .custom3-post-execpt-chapter {
    display: inline-block;
    margin-top: 6px;
  }
  .custom3-post-holder-item .small-info-before {
    margin: 5px 0 0 0;
  }
}

.hidden {
  display: none !important;
}

.widget-heading,
.widget.background:after,
.c-blog__heading.style-2 i,
.related-heading.font-nav,
.c-blog__heading.style-3,
.settings-page .nav-tabs-wrap ul.nav-tabs li.active a,
.off-canvas {
  background: -webkit-linear-gradient(left, rgb(10 21 34) 40%, rgb(3 7 18));
  background: -o-linear-gradient(right, rgb(10 21 34) 40%, rgb(3 7 18));
  background: -moz-linear-gradient(right, rgb(10 21 34) 40%, rgb(3 7 18));
  background: linear-gradient(to right, rgb(10 21 34) 40%, rgb(3 7 18));
}
.tab-wrap .c-nav-tabs ul.c-tabs-content li.active a:after,
.tab-wrap .c-nav-tabs ul.c-tabs-content li:hover a:after,
.tab-wrap .c-nav-tabs ul.c-tabs-content li a:after {
  background-color: #eb3349;
}

.content-area {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.manga-single-reading-actions {
  background: -webkit-linear-gradient(
    left,
    rgb(10 21 34 / 93%) 40%,
    rgb(3 7 18 / 93%)
  );
  background: -o-linear-gradient(
    right,
    rgb(10 21 34 / 93%) 40%,
    rgb(3 7 18 / 93%)
  );
  background: -moz-linear-gradient(
    right,
    rgb(10 21 34 / 93%) 40%,
    rgb(3 7 18 / 93%)
  );
  background: linear-gradient(
    to right,
    rgb(10 21 34 / 93%) 40%,
    rgb(3 7 18 / 93%)
  );
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-left: solid 1px #262f42;
  border-top: solid 2px #262f42;
  overflow: auto;
  position: fixed;
  width: 315px;
  top: 0;
  right: -315px;
  left: auto;
  height: 100%;
  z-index: 99;
  -webkit-transition: right 0.25s ease-in-out;
  -moz-transition: right 0.25s ease-in-out;
  -o-transition: right 0.25s ease-in-out;
  transition: right 0.25s ease-in-out;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}

.text-ui-light .manga-single-reading-actions {
  background: -webkit-linear-gradient(left, #1a1a1af7 40%, #181818);
  background: -o-linear-gradient(right, #1a1a1af7 40%, #181818);
  background: -moz-linear-gradient(right, #1a1a1af7 40%, #181818);
  background: linear-gradient(to right, #1a1a1af7 40%, #181818);
  border-left: solid 1px #2e2e2e;
  border-top: solid 2px #2e2e2e;
}

.manga-single-reading-actions::-webkit-scrollbar {
  display: none;
}

.menu-opened {
  right: 0;
}

.chapter-info-header {
  position: relative;
  right: 0px;
  z-index: 13;
  padding: 20px;
  padding-bottom: 16px;
  color: white;
  background-color: #141a28;
  border-bottom: solid 2px #262f42;
  border-top: solid 2px #262f42;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  transition: right 0.25s ease-in-out;
}
.chapter-info-header.fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.text-ui-light .chapter-info-header {
  background-color: #191919;
  border-bottom: solid 2px #2e2e2e;
  border-top: solid 2px #2e2e2e;
}

.chapter-info-header > * {
  display: inline-block;
}

.chapter-info-header .chapter-info-header-title {
  margin-right: 10px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.reading-actions-button {
  position: relative;
  right: 0;
  padding: 10px;
  border-radius: 50px;
  font-size: 16pt;
  width: 46px;
  height: 46px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.reading-actions-button:hover {
  background-color: #ffffff1a;
}

.manga-single-reading-actions-button.reading-actions-button.sticky {
  position: fixed;
  right: 20px;
  z-index: 80;
  background-color: #0000003d;
  padding: 8px;
  width: 45px;
  height: 45px;
  font-size: 17pt;
}

.reading-actions-button span,
.reading-actions-button svg {
  display: flex;
  justify-content: space-around;
}

.chapter-info-header-title h3,
.chapter-info-header-title h2,
.chapter-info-header-title h4 {
  font-size: 13pt;
  margin: 0;
}

.manga-single-reading-actions-top {
  color: white;
  display: flex;
  font-size: 14pt;
  margin-top: -6px;
  align-items: center;
  padding: 25px 2px 21px 4px;
  border-bottom: solid 2px #262f42;
  margin-bottom: 5px;
}

.text-ui-light .manga-single-reading-actions-top {
  border-bottom: solid 2px #2e2e2e;
}

@media (max-width: 576px) {
  .menu-chapter-view-fullview {
    display: none;
  }
  .manga-single-reading-actions-button.reading-actions-button.sticky {
    top: 7px;
    right: 7px;
  }
  .chapter-info-header {
    padding: 20px 10px;
  }
  .manga-single-reading-actions-top {
    padding: 27px 2px 23px 4px;
  }
}

.manga-single-reading-actions-logo {
  margin-right: 2px;
  margin-left: auto;
}
.manga-single-reading-actions-logo .logo {
  display: inline-block;
  max-width: 125px;
  margin-right: 8px;
}

.manga-single-reading-actions-top > * {
  display: inline-block;
}

.chapter-info-header-title p {
  margin: 5px 0;
  font-size: 15pt;
}

.chapter-info-header-title svg {
  margin-left: 10px;
}

.menu-item-holder {
  padding: 15px;
}

.menu-item-holder .user-menu-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 50px 10px 2px;
}

.menu-item-holder .c-user-avatar {
  position: absolute;
  top: -75px;
  z-index: 1;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 30%;
}

.menu-item-holder .user-menu-info .user-welcome {
  font-size: 12pt;
  color: #e1e1e1;
  text-align: center;
  padding: 0 20px;
}

.menu-item-holder .user-menu-info .user-welcome p {
  margin-bottom: 0px;
}

.menu-item-holder .user-menu-info .user-welcome p.remain-subscription-display {
  font-size: 13pt;
  background-color: #378708;
  font-weight: bold;
  border: solid 1px #ffffff50;
  padding: 2px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.menu-item-holder
  .user-menu-info
  .user-welcome
  p.remain-subscription-display.user-no-sub {
  background-color: red;
}

@media (max-width: 768px) {
  .menu-item-holder .user-menu-info {
    padding-top: 120px;
  }
  .menu-item-holder .c-user-avatar {
    top: -140px;
    width: 250px;
    height: 250px;
  }
}

.menu-chapter-info {
  margin-bottom: 15px;
}

.manga-single-reading-actions .entry-header_wrap {
  display: none;
}

.manga-single-reading-actions label,
.manga-single-reading-actions .c-selectpicker,
.manga-single-reading-actions .chapter-selection {
  width: 100%;
}

.manga-single-reading-actions .nav-next div,
.manga-single-reading-actions .nav-previous div {
  border: 0;
  padding: 12px 8px !important;
}

.manga-single-reading-actions
  .select-pagination
  .c-selectpicker.selectpicker_page {
  padding: 0 !important;
  height: 100%;
}
.manga-single-reading-actions
  .select-pagination
  .c-selectpicker.selectpicker_page
  label {
  height: 100%;
}

.manga-single-reading-actions .select-pagination {
  float: unset !important;
}

.manga-single-reading-actions .nav-links {
  height: 54px !important;
  margin: 10px 0 !important;
}

.manga-single-reading-actions .nav-links.nav-links-chapter > * {
  width: 50%;
  padding: 0 !important;
}
.nav-next-chap {
  margin-left: auto;
}
.select-pagination .nav-links-chapter .nav-next-chap .next_chap {
  padding: 9px 14px 9px 20px;
}
.nav-previous-chap {
  margin-right: auto;
}
.select-pagination .nav-links-chapter .nav-previous-chap .prev_chap {
  padding: 9px 20px 9px 14px;
}
.select-pagination .nav-links-chapter div .btn i {
  font-size: 13pt;
  vertical-align: middle;
  margin: 0 3px;
}

.manga-single-reading-actions .nav-links > * .cs-js-btn {
  width: 100%;
  border: solid 1px #ffffff0a;
  font-size: 14pt;
}

.manga-single-reading-actions .nav-links > * .cs-js-btn:hover {
  background-color: #1b233775 !important;
}

.manga-single-reading-actions .nav-links > * {
  padding: 0 !important;
}

.manga-single-reading-actions .select-view {
  width: 100%;
  float: none !important;
  display: inline-block;
}

.manga-single-reading-actions .select-view > * {
  margin: 5px 0;
}

.manga-single-reading-actions .custom-header-big-button-style {
  background-color: #1b2337;
  color: white;
  border: solid 1px #ffffff0a;
  border-radius: 5px;
  padding: 10px;
  font-size: 13pt;
  display: block;
  transition: all 0.3s ease;
  margin: 8px 0;
}

.manga-single-reading-actions .custom-header-big-button-style:hover {
  background-color: #1b233775;
}

.manga-single-reading-actions .custom-header-big-button-style.active {
  background-color: #1f283e;
  color: #b7b7b7;
}

.text-ui-light
  .manga-single-reading-actions
  .custom-header-big-button-style.active {
  background-color: #1b1b1b;
}

.manga-single-reading-actions .select-view .c-selectpicker,
.manga-single-reading-actions .select-view .c-selectpicker,
.manga-single-reading-actions .select-pagination .c-selectpicker,
.manga-single-reading-actions .select-pagination .c-selectpicker {
  padding: 0 !important;
}

.menu-chapter-report p {
  padding: 8px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
}

.menu-chapter-report p i,
#btn_view_full_image i,
.custom-header-big-button-style i,
.custom-header-big-button-style svg {
  vertical-align: middle;
  margin-left: 5px;
}

.menu-chapter-community-translators {
  margin-bottom: 8px;
  padding: 5px;
}

.menu-chapter-translate-team a {
  font-size: 14pt;
  margin-right: 5px;
}

.menu-chapter-community {
  color: white;
  border-top: solid 1px;
  border-bottom: solid 1px;
  margin: 15px 0;
}

.menu-chapter-community h5 {
  color: white;
  margin-bottom: 1px;
}

.menu-chapter-view {
  padding: 0 8px;
  border-radius: 5px;
  border: solid 1px #ffffff8a;
}

.menu-chapter-view-size {
  font-size: 14pt;
  color: white;
  text-align: center;
  margin-bottom: 10px;
}

.page-progress-bar-number {
  font-size: 12pt;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgb(255, 255, 255);
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 10;
}

.progress-container {
  position: fixed;
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.progress-bar {
  box-shadow: 3px 0 3px 2px #00000070;
  border-radius: 5px 0 0 5px;
  height: 5px;
  width: 0;
  background-color: #ffd201;
  transition: width 0.1s ease;
}

.chapter-show-no-limit {
  max-width: unset !important;
  max-height: unset !important;
  height: unset !important;
  width: unset !important;
}

.chapter-show-fit-width {
  max-width: 100% !important;
  min-width: 0 !important;
  object-fit: contain !important;
}

.chapter-show-fit-height {
  max-height: 100vh !important;
  min-height: 0 !important;
}

.text-ui-light .manga-single-reading-actions .custom-header-big-button-style {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.text-ui-light .c-selectpicker select.selectpicker option {
  background-color: #191919 !important;
}

/* .csb-spoiler:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, #030712 100%);
} */

article.comment-body.has-spoil::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgb(0 0 0 / 25%);
}

.comment-form-spoiler {
  display: flex !important;
  font-size: 13pt !important;
  align-items: center;
  margin-top: 22px;
  margin-right: 2px;
}

.comment-form-spoiler label {
  margin: 0;
  font-size: 14pt;
  font-weight: bold;
  margin-right: 5px;
}

.comment-form-spoiler input {
  width: 13pt;
  height: 13pt;
  accent-color: #ffd201;
  margin-left: 5px;
}

.has-spoil .reply.has-spoil,
.has-spoil hr.has-spoil,
.has-spoil .show-reply.has-spoil,
.has-spoil .csb-spoiler-text.has-spoil {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.comment-body a.cld-like-dislike-trigger,
.like-dislike-box a.pld-like-dislike-trigger {
  color: #ffffff;
}

.comment-spoiler-container {
  display: none;
  flex-wrap: wrap;
  width: 50%;
  text-align: center;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 5;
  top: 35%;
  right: 25%;
}

.comment-spoiler-container-show {
  display: flex;
}

.comment-spoiler-inner-div {
  width: 100%;
}

.comment-spoiler-container.comment-spoiler-container-show
  .comment-spoiler-inner-div
  p {
  background-color: #1b2336;
  border-radius: 5px;
  margin-bottom: 6px !important;
  padding: 0px 5px;
  font-size: 18px !important;
}

.csb-spoiler-button {
  background-color: #ffd201;
  color: black;
  cursor: pointer;
  display: inline-block;
  padding: 4px 7px 2px;
  font-size: 11pt;
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.csb-spoiler-button:hover {
  background-color: #ffd000b4; /* Adjust hover background color */
  color: rgb(235, 235, 235);
}

.change-post-item-view {
  border: solid 1px black;
  border-radius: 5px;
  background-color: #141a28;
  text-align: center;
  color: white;
  display: inline-flex;
}

.change-post-item-view div {
  display: inline-block;
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: background-color 0.1s ease-in;
  z-index: 1;
  padding: 8px;
  border-radius: 5px;
}

.change-post-item-view div:hover {
  background-color: #1b233687;
}

.change-post-item-view div.active {
  background-color: #1b2336;
}

.pop-slider-archive .slider-title {
  color: white;
  font-size: 17pt;
  margin-bottom: 20spx;
  font-weight: bolder;
}

.pop-slider-archive {
  margin: 10px 0 80px 0;
}
.owl-slider-holder {
  margin: 5px 0;
}

.custom-slider-holder-item {
  border-radius: 10px;
  overflow: hidden;
}

.custom-slider-thumb {
  width: 100%;
  height: 18rem;
}

.custom-slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-slider-informations {
  overflow: hidden;
  position: absolute;
  z-index: 5;
  bottom: 2%;
  right: 2%;
  left: 2%;
  border-radius: 10px;
  transition: all 0.5s ease;
  text-align: right;
}

.custom-slider-holder-item:hover .custom-slider-informations {
  bottom: -1px;
  right: -1px;
  left: -1px;
}

.custom-slider-informations-pos {
  background-color: #141a28ed;
  padding: 10px 20px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.custom-slider-title-informations {
  max-height: 30px;
  transition: all 0.45s ease;
}
.custom-slider-holder-item:hover .custom-slider-title-informations {
  max-height: 65px;
}

.custom-slider-informations .custom-slider-title-informations h3 a {
  color: white;
  display: inline-block;
  margin-top: 3px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
  text-align: left;
  transition: all 0.5s ease;
}

.custom-slider-holder-item:hover
  .custom-slider-informations
  .custom-slider-title-informations
  h3
  a {
  max-width: 100%;
}

.custom-slider-informations .custom-slider-small-info {
  display: flex;
  align-items: center;
  margin-top: -4px;
  margin-bottom: 5px;
}

.custom-slider-informations .info-on-coverforcustomslider,
.custom-slider-informations .rating-on-cover-container,
.custom-slider-informations .small-info-before {
  display: inline-flex;
  gap: 5px;
}

.custom-slider-informations .rating-on-cover-container {
  opacity: 0;
  transition: all 0.5s ease;
}

.custom-slider-holder-item:hover
  .custom-slider-informations
  .rating-on-cover-container {
  opacity: 1;
}

.custom-slider-informations .chapter-counter {
  position: relative;
  margin-right: 10px;
  transition: all 0.5s ease;
  opacity: 0;
}

.custom-slider-holder-item:hover .custom-slider-informations .chapter-counter {
  opacity: 1;
}

.custom-slider-informations .on-image-info-tags-translate-status {
  float: unset;
  margin: 1% 0;
  position: absolute;
  background-color: rgb(0 210 255 / 25%);
  left: 20px;
  opacity: 0;
}
.custom-slider-holder-item:hover
  .custom-slider-informations
  .on-image-info-tags-translate-status {
  left: 20px;
  opacity: 1;
}

.custom-slider-informations .on-post-info-tags {
  margin: 5px 0 8px;
}

.custom-slider-informations .on-post-info-tags .on-post-info-tags-overflow {
  white-space: nowrap;
  margin: 2px 0;
}

.custom-slider-informations .on-post-info-tags-type {
  font-size: 14pt;
  color: white;
  background-color: #ffd20145;
  padding: 1px 6px;
  border-radius: 5px;
  line-height: normal;
}
.custom-slider-informations .on-post-info-tags-genres {
  display: inline-block;
  margin-right: 4px;
}
.custom-slider-informations .on-post-info-tags-genres a {
  background: #ffffff17;
  color: #e2e2e2;
}
.custom-slider-informations .post-listing-item-excerpt {
  max-height: 0;
  overflow: auto;
  transition: all 0.5s ease;
  opacity: 0;
  font-size: 11pt;
  line-height: 1.25rem;
  color: white;
  text-align: justify;
}
.custom-slider-holder-item:hover
  .custom-slider-informations
  .post-listing-item-excerpt {
  max-height: 5.5rem;
  opacity: 1;
}

.disable-transitions * {
  transition: none !important;
}

@media (min-width: 576px) {
  .custom2-post-holder-item .on-post-info-tags-genres a,
  .custom2-post-holder-item span.on-post-info-tags-type,
  .on-post-info-tags-translate-status,
  .custom-content-listing .on-image-info-tags-translate-status,
  .custom2-content-listing .on-image-info-tags-translate-status,
  .custom-slider-informations .on-post-info-tags-genres a,
  .main-slider-info .on-post-info-tags-genres a,
  .custom-slider-informations .on-post-info-tags-type {
    font-size: 12pt;
  }
}

@media (max-width: 576px) {
  .custom2-post-holder-item .on-post-info-tags-genres a,
  .custom2-post-holder-item span.on-post-info-tags-type,
  .custom-content-listing .on-post-info-tags-translate-status,
  .custom2-post-informations .on-post-info-tags-translate-status {
    font-size: 10pt;
  }
  .custom-content-listing .custom-post-holder-item .on-post-info-tags-genres a,
  .custom-content-listing .custom-post-holder-item span.on-post-info-tags-type,
  .custom-content-listing .on-image-info-tags-translate-status,
  .custom-slider-informations .on-image-info-tags-translate-status,
  .custom-slider-informations .on-post-info-tags-genres a,
  .main-slider-info .on-post-info-tags-genres a,
  .custom-slider-informations .on-post-info-tags-type {
    font-size: 11pt;
  }
  .custom-content-listing
    .custom-post-holder-item
    .custom-post-informations-pos-top
    h3 {
    bottom: -25px;
  }
}

.overflowhidden {
  overflow: hidden;
}

.archive-head {
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  margin-bottom: 10px !important;
  display: flex;
  align-items: self-end;
  width: 106%;
  max-width: 1190px;
  margin-right: -10px;
  margin-left: -10px;
}

/* admin css */
.user-dashboard {
  margin: 20px 0;
}

.user-dashboard .dashboard-menu {
  padding: 5px;
  flex: 0 0 23%;
  max-width: 23%;
  margin-top: 65px;
  position: relative;
  right: -15px;
}

.user-dashboard .dashboard-content {
  margin-top: 30px;
  padding: 20px 5px;
  flex: 0 0 77%;
  max-width: 77%;
  position: relative;
}
.user-dashboard .dashboard-content.home-template {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.user-dashboard .menu-item-holder {
  background: linear-gradient(to right, rgb(10 21 34) 40%, rgb(7 15 37));
  padding: 15px 0px 10px;
  border: 1px solid #172637;
  border-radius: 25px;
}

.user-dashboard .menu-item-holder h2,
.dashboard-content .notification-head h2 {
  font-size: 18px;
  color: #fff;
  font-weight: 100;
  border-bottom: 1px solid;
  padding-bottom: 5px;
  margin: 0 15px 0;
}

.user-dashboard .menu-item-holder h2 span {
  margin: 0 6px 0;
}

.dash-info-box {
  padding: 20px;
  background-color: #696969;
  border-radius: 8px;
  background-color: rgb(20, 26, 40);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
}
.dash-info-box hr {
  border: 1px solid rgb(255 255 255 / 10%);
  width: 100%;
}
.menu-item-holder ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item-holder ul br {
  margin: 10px 0;
}

.menu-item-holder ul li {
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  margin: 5px 0;
}

.menu-item > svg {
  position: absolute;
  top: 8px;
  left: 8px;
  fill: #bdbdbd;
  transition: all 0.2s ease;
}

.menu-item-holder ul li a {
  display: block;
  background: transparent;
  color: #fff;
  padding: 8px 14px 8px 30px;
  font-size: 15pt;
  font-weight: normal;
  overflow: hidden;
  border-right: 0px solid #ffd201;
  transition: all 0.1s ease-in-out;
}

.menu-item-holder ul li a:hover {
  border-right: 4px solid #ffd201;
}

.menu-item-holder ul li:hover .back-arrow {
  left: 0px;
}

.menu-item-holder ul li.active .back-arrow {
  display: none;
}

.menu-item-holder ul li.active a {
  border-right: 4px solid #ffd201;
  background: linear-gradient(270deg, #ffd2014a 0, rgb(254 254 254 / 0%) 100%);
  font-weight: bolder;
}

.menu-item-holder ul li a svg {
  margin-left: 8px;
}

.item-logout a span {
  color: #ff6363;
  background: transparent;
  font-weight: normal;
}

.item-logout a:hover {
  background: #f400005e !important;
  border-right: 0px solid #ffd201 !important;
}

.item-logout a:hover span {
  color: white;
}

.item-logout a:hover svg path {
  stroke: #fff !important;
  fill: #fff !important;
}

@media (max-width: 768px) {
  .menu-item-holder ul li a {
    font-size: 16pt;
  }
  .user-dashboard .dashboard-menu {
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 140px;
    right: 0px;
  }

  .user-dashboard .dashboard-content {
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* setting user-dashboard */

.dashboard-content .tab-group-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 0px;
}
.dashboard-content .tab-group-item > span {
  font-size: 20pt;
  margin-right: 10px;
}

.form-group.inputs {
  display: flex;
  flex-wrap: wrap;
}

.tab-item.avatar-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 30px;
}

.choose-avatar {
  position: relative;
  border-radius: 30%;
  overflow: hidden;
}

.avatar-section .account-information {
  flex: 1 0 38%;
  margin-right: 15px;
  background-color: #000000f2;
  padding: 10px;
  border-radius: 5px;
}

.avatar-section .c-user-avatar {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
}

.c-user-avatar img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-section .c-user-avatar i {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  cursor: pointer;
  background-color: #00000099;
  color: #c5c5c5;
  font-size: 36pt;
  transition: all 0.2s ease;
  opacity: 0;
}
.avatar-section .c-user-avatar:hover i {
  opacity: 1;
  font-size: 40pt;
}

div#removeFileButton {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  cursor: pointer;
  background-color: #00000099;
  color: #e6e6e6;
  font-size: 40pt;
  transition: all 0.2s ease;
}

ul.user-info-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #c3c3c3;
  font-size: 14pt;
}
.avatar-section ul.user-info-list {
  height: 140px;
  font-size: 12pt;
}
ul.user-info-list li {
  display: flex;
  justify-content: space-between;
}

#form-account-settings textarea#bio-input {
  border: 1px solid #000001;
  color: #dedede;
  background-color: #1b2337;
}

.avatar-section .form.form-choose-avatar {
  flex: 0 0 100%;
  margin-top: 15px;
  margin-bottom: -40px;
  font-size: 13pt;
}

.avatar-section .form.form-choose-avatar input#wp-manga-upload-avatar {
  display: none;
  padding: 7px 14px;
  background-color: #ffd201;
  color: black;
  border-radius: 30px;
  border: none;
  font-weight: bold;
}

.avatar-section .form.form-choose-avatar .select-flie {
  display: flex;
  margin: 20px 0;
  gap: 5px;
  align-items: center;
  color: #ead15c;
  color: #ead15c;
}

.avatar-section .form.form-choose-avatar .select-flie label {
  display: inline-block;
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

@media (max-width: 768px) {
  .tab-item.avatar-section {
    justify-content: center;
    padding: 20px 25px;
  }

  .avatar-section .c-user-avatar {
    width: 210px;
    height: 210px;
  }

  .avatar-section .account-information {
    flex: 0 0 100%;
    margin-right: 0;
    margin-top: 20px;
  }
}

.history-row {
  flex: 0 0 100%;
  margin: 0;
}
.history-row .col-md-6 {
  padding: 5px;
}
.history-row .history-content {
  flex-flow: nowrap;
  margin: 0;
}
.history-content .item-thumb {
  flex: 0 0 25%;
}
.history-content .item-thumb a {
  display: inline-block;
  width: 100%;
}
.history-content .item-thumb a img {
  object-fit: cover;
  width: 100%;
}
.history-content .item-infor {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: 10px;
}
.history-content .item-infor .post-title h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  line-height: 1.3;
  margin: 0;
  font-size: 15pt;
  color: #ffd201;
}
.history-content .item-infor .chapter {
  color: white;
  font-size: 14pt;
  margin-bottom: auto;
}
.history-content .item-infor .post-on.font-meta {
  margin-top: auto;
}
.history-content .item-infor .post-on.font-meta span {
  color: #a0a0a0;
  font-size: 13pt;
}

.history-content .action {
  margin-right: 5px;
  font-size: 20pt;
}

/* dropdown list + filter section*/

.range-info {
  color: white;
  font-size: 13pt;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
}

.range-info > div {
  color: #ffd201;
}

.filtershowmorediv {
  position: relative;
  display: inline-block;
}
.orderbyselection .filter-show-more {
  display: none;
}
.show-more-container {
  display: inline-block;
}
.defualt-range-range {
  display: inline-block;
  position: relative;
  padding: 0 3px;
  width: 245px;
  vertical-align: middle;
}

.defualt-range-range input {
  width: 70px;
  padding: 5px;
  margin: 5px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.orderbycollection {
  display: inline-flex;
  gap: 3px;
  width: fit-content;
}

.orderbycollection .orderybyOp {
  min-width: 130px;
  flex: auto;
}

.orderbyselection select {
  display: inline-block;
  cursor: pointer;
  font-size: 13pt;
  padding: 12px 14px;
  vertical-align: middle;
  width: 100%;
}

.trendingOp {
  display: inline-block;
  vertical-align: middle;
  max-width: 0px;
  opacity: 0;
  overflow-x: hidden;
  white-space: nowrap;
  transition: all 0.5s ease-in-out;
}

.trendingOp.open {
  max-width: 250px;
  opacity: 1;
  margin-left: 5px;
}

.trendingOp > select {
  width: 155px;
}

.list-dropdown {
  display: inline-block;
  position: relative;
  min-width: 160px;
  width: fit-content;
  height: 46px;
  max-width: 100%;
  border: 1px solid #1b2337;
  transition: all 0.3s ease, background-color 0.3s ease, border-radius 0.1s ease;
  padding: 8px 10px 8px 25px;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: 0 0 5px rgb(91 91 91 / 50%);
  -webkit-user-select: none !important;
  user-select: none !important;
}

.list-dropdown.open {
  border-radius: 5px 5px 0 0;
}

.list-dropdown input[type="text"] {
  background-color: unset;
  font-size: 13pt;
  border: 0;
  padding: 4px 0;
  width: 90%;
}

.selected-dropdown-options {
  position: absolute;
  z-index: 10;
  transition: all 0.4s ease;
  opacity: 0;
  top: 42px;
  left: 0;
  right: 0;
  background-color: #1b2337;
  width: 100%;
  border: 2px solid #222d49;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 13px 35px rgb(0 0 0 / 50%);
}

.list-dropdown .selected-dropdown-options .list-dropdown-label.remover {
  color: #ff4a4a;
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
}
.list-dropdown .selected-dropdown-options .list-dropdown-label.input {
  display: none;
}

.selected-dropdown-options-inner {
  transition: all 0.2s ease;
  opacity: 0;
  overflow-y: auto;
  max-height: 0px;
}

.list-dropdown.open .selected-dropdown-options-inner,
.list-dropdown.open .selected-dropdown-options {
  max-height: 220px;
  padding: 2px 5px;
  opacity: 1;
}

.list-dropdown-label {
  display: block;
  color: #dcdcdc;
  font-size: 13pt;
  padding: 7px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin-left: 4px;
}

.list-dropdown-label:hover {
  background-color: #040914;
  color: #fff;
}

.list-dropdown-label.active {
  background-color: #040914;
  color: #fff;
}

.list-dropdown-label input[type="checkbox"],
.list-dropdown-label input[type="radio"] {
  margin-left: 4px;
  vertical-align: middle;
  accent-color: #ffd201;
}

.default-option {
  display: block;
  position: relative;
  z-index: 2;
  font-size: 13pt;
  cursor: pointer;
  color: #a2a2a2;
}

.orderbyselection button {
  padding: 8px 10px 8px 13px;
  vertical-align: middle;
  text-align: center;
  border-radius: 5px;
  font-size: 13pt;
  background-color: #ffd20173;
  color: #ffffff;
  border: 0;
}

.spacebetween {
  margin: 8px 1px;
  display: inline-block;
  position: relative;
}

.user-choices {
  display: flex;
  margin: 10px 0 0;
  opacity: 1;
  max-width: 100%;
  white-space: nowrap;
  transition: all 0.5s ease;
}

.user-choices.hide {
  margin: 0px 0 -30px;
  opacity: 0;
  max-width: 0;
}

.orderbyselection i.fa-angle-down,
.list-dropdown i.fa-angle-down {
  position: absolute;
  top: 14px;
  left: 9px;
  font-size: 14px;
  line-height: 1;
  color: #fff;
}

.list-dropdown i {
  color: #888888;
}

.user-choices-icon {
  display: inline-block;
  width: 18px;
  margin-left: 8px;
}

.user-choices-display {
  display: flex;
  gap: 4px;
}

.user-choice {
  position: relative;
  display: inline-block;
  padding: 0 5px 0 5px;
  border-radius: 3px;
  background-color: #7b6d17;
  border: 1px solid #ffffff2e;
  color: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
}
.user-choice.user-choice-genre {
  background-color: #393b48;
}
.user-choice.user-choice-status {
  background-color: #447190;
}
.user-choice.user-choice-type {
  background-color: #6d932c;
}
.user-choice.user-choice-release {
  background-color: #601c13;
}

.remove-all-choices {
  position: relative;
  padding: 0;
  border-radius: 3px;
  color: #bdbdbd;
  transition: all 0.3s ease;
  cursor: pointer;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0.5;
}

.user-choices:hover .remove-all-choices {
  max-width: 100px;
  padding: 0 5px 0 20px;
  opacity: 1;
}

.orderbyselection .user-choice:hover {
  padding: 0 5px 0 20px;
}

.orderbyselection .user-choice i,
.orderbyselection .remove-all-choices i {
  position: absolute;
  font-size: 10pt;
  opacity: 0;
  top: 4px;
  left: 5px;
  transition: all 0.3s ease;
}

.orderbyselection .remove-all-choices i {
  opacity: 1;
}

.orderbyselection .user-choice:hover i {
  opacity: 1;
}

.mobile-filter-opener {
  display: none;
  cursor: pointer;
  padding: 7px 12px 8px 12px;
  vertical-align: middle;
  font-size: 13pt;
  color: #fff;
  background-color: #141a28;
  border: solid 1px black;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.mobile-filter-opener:hover {
  padding: 7px 10px 8px 14px;
}

.mobile-filter-opener span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.mobile-filter-opener:hover span {
  max-width: 75px;
}

.mobile-filter-opener i {
  vertical-align: middle;
  transition: all 0.3s ease;
  font-size: 16pt;
}

.mobile-filter-opener:hover i {
  margin-left: 5px;
}

.mobile-filter-opener::after {
  content: "";
  transition: all 0.2s ease;
}

.mobile-filter-opener.worked::after {
  background-color: rgb(44 44 44 / 50%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.mobile-filter-title,
.mobile-filter-close-icon {
  position: absolute;
  display: none;
  font-size: 20pt;
  color: #fff;
  font-weight: bold;
  text-shadow: 0px 4px 2px black;
}

.mobile-filter-title {
  top: -42px;
  right: 12px;
}

.mobile-filter-close-icon {
  top: -36px;
  left: 4px;
  font-size: 22pt;
  cursor: pointer;
}

.mobile-filter-close-icon i {
  color: #fff;
  font-size: 22pt;
  cursor: pointer;
}

@media (min-width: 768px) {
  .orderbyselection {
    width: 100%;
    position: relative;
    padding-left: 215px;
  }

  .filter-show-more {
    position: relative;
    z-index: 10;
    display: inline-block !important;
    padding: 9px 10px;
    color: #ebebeb;
    font-size: 13pt;
    background-color: #141a28;
    border-radius: 4px;
    border: 1px solid #ffffff14;
    cursor: pointer;
  }
  .filter-item .show-more-container {
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    padding: 10px;
    padding-bottom: 20px;
    width: 350px;
    background-color: #141a28d1;
    border: 1px solid #ffffff1a;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    filter: blur(3px);
    transition: all 0.3s ease;
    transition-delay: 0.3s;
    box-shadow: 0px 3px 6px 5px rgb(10 0 0 / 54%);
  }
  .filtershowmorediv:hover .show-more-container {
    width: 370px;
    top: 130px;
    z-index: 99;
    opacity: 1;
    filter: blur(0px);
  }
  .filter-item .spacebetween.defualt-range-range {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    width: 100%;
  }
  .filter-item .show-more-container .defualt-range-range:not(:last-child) {
    margin-bottom: 20px;
  }

  .user-choices {
    width: 100%;
  }

  .defualt-range-range {
    margin: 2px 12px 8px 0;
  }

  .orderbyselection button {
    position: absolute;
    top: 5px;
    left: 118px;
    padding: 8px 10px 7px 13px;
  }
}

@media (max-width: 768px) {
  .orderbyselection {
    text-align: center;
  }

  .list-dropdown,
  .orderbycollection,
  .defualt-range-range {
    width: 95% !important;
  }

  .orderbyselection button {
    margin-top: 20px;
    width: 100% !important;
  }

  .spacebetween,
  .orderbycollection select {
    text-align: right;
    margin-left: 0 !important;
  }

  .mobile-filter-opener {
    display: inline-flex;
    margin-top: 11px;
    align-items: center;
  }

  .show-more-container,
  .filtershowmorediv {
    display: inline-block;
    width: 100%;
  }

  .orderbyselection {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    opacity: 0;
    transition: all 0.2s ease;
    background-color: #030712;
    padding: 10px;
    margin: auto;
    border-radius: 6px;
    width: 90%;
  }

  .orderbyselection.show {
    opacity: 1;
    z-index: 15;
  }

  .mobile-filter-title,
  .mobile-filter-close-icon {
    display: inline-block;
  }

  .orderbyselection .user-choices {
    float: right;
  }
}

.defualt-range-slider-container {
  margin: 5px;
}

.noUi-target {
  background: #1a243a;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px #5c6f9a, 0 3px 6px -5px #ffffff;
}

.noUi-horizontal {
  height: 6px;
}

.noUi-target {
  position: relative;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}

.noUi-connect {
  background: #515768;
}

.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.noUi-handle {
  border-radius: 3px;
  background: #ffd201;
  cursor: default;
}

.noUi-horizontal .noUi-handle {
  width: 14px;
  height: 14px;
  right: -17px;
  top: -4px;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -7px;
  right: auto;
}

.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-touch-area {
  height: 100%;
  width: 100%;
}

.ajax-notification-alert {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: -1;
  opacity: 0;
  max-width: 0;
  max-height: 0;
  padding: 12px 20px;
  border: solid 1px #000;
  border-radius: 50px;
  background-color: white;
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 16px rgb(189 189 189 / 50%);
  transition: all 0.4s ease;
}
.user-post-rating .ajax-notification-alert {
  top: 80px;
}
.ajax-notification-alert.done {
  background-color: rgb(0 201 0 / 50%);
}
.ajax-notification-alert.error {
  background-color: rgb(159 0 0 / 50%);
}
.ajax-notification-alert.display {
  max-height: 100px;
  max-width: 90%;
  z-index: 20;
  opacity: 1;
}
.ajax-notification-alert i {
  margin-left: 12px;
  vertical-align: middle;
}

.ajax-notification-alert span {
  vertical-align: middle;
  font-size: 19px;
  font-weight: bold;
}

.change-user-book-listing {
  position: relative;
  overflow-x: auto;
  width: 103%;
  margin: 20px 0px 10px 0;
}
.item-display-selection {
  display: inline-flex;
  position: relative;
  border-radius: 6px;
  gap: 0.5rem;
  padding: 0.25rem;
  background-color: #141a28;
}
.item-display-selection .display-selection-item {
  position: relative;
  font-size: 14pt;
  white-space: nowrap;
  color: gray;
  cursor: pointer;
  font-weight: 700;
  opacity: 0.4;
  padding: 0.25rem 0.5rem;
  z-index: 1;
}
.item-display-selection .display-selection-item:hover {
  opacity: 0.8;
}
.item-display-selection .display-selection-item.active {
  color: white;
  background-color: #1b2336;
  border-radius: 6px;
  opacity: 1;
}

.style1-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.style1-pagination-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13pt;
}
.style1-pagination-inner > a:hover {
  background-color: #ffffff17;
}
.style1-pagination-inner a.page-numb {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16pt;
  font-weight: bold;
  padding: 5px 16px;
  border-radius: 5px;
  color: #ffd201;
}
.style1-pagination-inner a.page-numb.active {
  background: #102033;
}
.style1-pagination-inner .text-page {
  color: #ffd201;
  padding: 7px 8px;
  border-radius: 50px;
}
.style1-pagination-inner .pagination-dots {
  font-size: 16pt;
  color: #ffd201;
}
.style1-pagination-inner input#gotoPage {
  display: inline-block;
  text-align: center;
  font-size: 16pt;
  padding: 0;
  width: 70px;
  height: 38px;
  background-color: #1b23374d;
  border: 1px solid #ffffff1a;
}
.gotopage-container {
  display: inline-flex;
  justify-content: center;
}
.gotopage-container button.gotopagebutton {
  display: inline-block;
  text-align: center;
  max-width: 0px;
  overflow: hidden;
  margin-right: 0;
  padding: 0;
  background-color: #796c1e;
  font-size: 15pt;
  font-weight: bold;
  border: 0;
  border-radius: 5px;
  opacity: 0;
  transition: all 350ms ease;
}
.gotopage-container button.gotopagebutton.show {
  margin-right: 2px;
  padding: 4px 10px;
  opacity: 1;
  max-width: 50px;
}

.circle-button {
  position: relative;
  display: inline-flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 15pt;
  padding: 8px;
  color: white;
  background-color: #273147;
  border-radius: 10px;
}
.circle-button-itme {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14pt;
  height: 75px;
  width: 100px;
  padding: 8px;
  color: white;
  background-color: #00000045;
  border-radius: 10px;
  opacity: 0.8;
  cursor: pointer;
}
.circle-button-itme .svg-head {
  height: 40px;
}
.circle-button-itme:hover,
.circle-button-itme.active {
  opacity: 1;
  color: white;
  background-color: #030712d6;
}

.mycomment-list {
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin-top: 15px;
  padding: 5px;
}

.mycomment-item {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  padding: 10px 15px 10px 0px;
  background-color: #141a28;
  border-radius: 10px;
}

.mycomment-body {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 82%;
  max-width: 82%;
}

.mycomment-body .mycomment-title {
  font-size: 12pt;
  margin-bottom: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mycomment-body .mycomment-content {
  color: #e3e3e3;
  font-size: 12pt;
}

.mycomment-body .mycomment-commentlink {
  text-align: left;
  margin-top: auto;
}

.mycomment-body .mycomment-commentlink a {
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid;
  border-radius: 4px;
}

.mycomment-info {
  position: relative;
  flex: 0 0 18%;
  max-width: 18%;
  margin: auto;
  text-align: center;
  color: #bdbdbd;
}

.mycomment-info .time-status {
  font-size: 11pt;
}

.mycomment-info .replied-to {
  display: inline-block;
  border: 1px solid;
  max-width: 140px;
  border-radius: 4px;
  padding: 3px 4px;
  margin: 8px 0;
}

.mycomment-info .like-dislike {
  text-align: center;
  font-size: 13pt;
}

.mycomment-info .cld-like-dislike-wrap.cld-template-1 {
  margin-bottom: 0;
  text-align: center;
}

.mycomment-info .cld-common-wrap {
  min-width: 40px;
}

@media (max-width: 1230px) {
  .mycomment-body {
    flex: 0 0 76%;
    max-width: 76%;
  }

  .mycomment-info {
    flex: 0 0 24%;
    max-width: 24%;
  }
}

@media (max-width: 768px) {
  .circle-button {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    row-gap: 10px;
  }
  .circle-button-itme {
    flex: 0 0 48.5%;
    width: 0 0 48.5%;
  }

  .mycomment-item {
    flex-direction: column;
    padding: 10px 15px 10px 15px;
  }

  .mycomment-body {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mycomment-info {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }

  .mycomment-info .time-status {
    display: flex;
    font-size: 13pt;
    gap: 6px;
    margin-top: 3px;
  }

  .mycomment-info .like-dislike {
    margin-right: auto;
  }

  .mycomment-time span.notification-time {
    font-size: 11pt;
  }
}

.user-profile-just-display {
  font-size: 14pt;
  border: 1px solid;
  border-radius: 8px;
  background-color: #000000;
}
.user-profile-bookmark-status {
  color: white;
  padding: 3px 10px;
}
.user-profile-rating-status {
  padding: 3px 5px 3px 10px;
  color: #ffd201;
}

.manga-keywords {
  margin-top: 30px;
  padding: 0 20px;
  text-align: justify;
}

/* user login template */
.wp-manga-section .modal-loading-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000e3;
}
.wp-manga-section .modal-content {
  color: white;
  font-size: 15pt;
  background-color: #22222252;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid #ffffff2b;
  box-shadow: 0px 0px 13px 1px #000000;
}
.modal-header {
  border-bottom: 0px solid white;
  margin-bottom: -45px;
  z-index: 1;
}
.modal-header .close span {
  color: white;
}
.modal-body h3 {
  text-align: center;
  font-size: 23pt;
}
.modal-body .form-title-text {
  text-align: center;
  font-size: 14pt;
  padding: 0 6px;
}
.modal-body p.message {
  display: none;
  padding: 5px 15px 5px 0;
  border-radius: 4px;
  font-weight: bold;
}
.modal-body label {
  width: 100%;
  font-size: 13pt;
}
.modal-body input {
  height: 45px;
  font-size: 13pt;
  margin-top: 5px;
  background-color: #ffffff24;
  color: #ffffff;
  font-weight: bold;
}
.forgetmenot {
  display: inline-block;
  margin-top: 25px;
  font-size: 13pt;
}
.forgetmenot label {
  width: unset;
  display: inline-flex;
  font-weight: bold;
}
.forgetmenot label input {
  height: unset;
  margin-top: 0;
  margin-left: 5pt;
  width: 12pt;
}
.modal-body .submit {
  display: flex;
}
.modal-body p.submit input {
  font-size: 15pt;
  min-width: 160px;
  padding: 8px 20px;
  margin-top: 5px;
  margin-right: auto;
  border: 1px solid #000000;
  border-radius: 4px;
  background-color: #55470a;
}
.modal-body p.submit input:hover {
  background-color: #64540b;
}

.captcha-box {
  display: flex;
  flex-flow: wrap;
}
.captcha-box label {
  width: 100%;
}
.captcha-box input.captcha-input {
  flex: 1 0 128px;
  max-width: 200px;
  margin-left: 2px;
}
.captcha-img-container {
  display: inline-flex;
  gap: 5px;
  flex-flow: wrap;
  margin-right: auto;
  border-radius: 4px;
  border: 1px solid black;
  overflow: hidden;
}
.captcha-img-container .refresh-captcha {
  display: inline-block;
  padding: 0 10px;
  margin-right: auto;
  border: none;
  border-radius: 0px;
  background: #8080805c;
  font-size: 13pt;
  font-weight: bold;
}
.captcha-img-container .refresh-captcha.wait {
  opacity: 0.1;
  cursor: no-drop;
}

/* mobile new header */
.mobile-main-navigation {
  display: none;
}
@media (max-width: 992px) {
  .main-navigation .main-menu {
    display: none !important;
  }
  .mobile-main-navigation {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
  }
}
.mobile-navigaion-icon {
  padding: 5px;
  background-color: #1a1f2c;
  border-radius: 4px;
  border: 1px solid #bababa61;
  cursor: pointer;
}
.mobile-navigaion-body {
  max-height: 48px;
  max-width: 48px;
  visibility: hidden;
  overflow: hidden;
  z-index: 0; /* Ensure the element is within the regular stacking context */
  opacity: 0;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 2px 5px;
  font-size: 12pt;
  font-weight: bold;
  border: 1px solid #ffffff24;
  border-radius: 15px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #1a1f2cb5;
  box-shadow: 0 0 14px 7px black;
  transition: opacity 350ms ease, max-height 350ms ease, max-width 350ms ease,
    visibility 350ms ease;
}
.mobile-navigaion-body.show {
  visibility: visible;
  max-height: 160px;
  max-width: 280px;
  opacity: 1;
  z-index: 1; /* Ensure this is in front when shown */
}

.mobile-navigaion-items {
  text-align: center;
}
.mobile-navigaion-items.close-mobile-navigaion {
  margin-left: auto;
}
.navigaion-body-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
  width: 275px;
}
.mobile-navigaion-items .items-clickable {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  cursor: pointer;
}
.mobile-navigaion-items .items-clickable svg {
  overflow: visible;
}

.site-header .c-modal_item {
  margin-right: auto;
}
.site-header .c-modal_item .header-user-login {
  margin-right: auto;
}
.header-user-login-button {
  padding: 5px 10px;
  font-size: 14pt;
  background-color: #ffd20126;
  border: 1px solid #ffffff14;
  border-radius: 35px;
}
.site-header .c-user_avatar {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: 80px;
  border-radius: 30px;
  transition: background-color 250ms ease;
}
.site-header .c-user_avatar:hover {
  background-color: #ffffff29;
}
.site-header .c-user_avatar::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 20px;
  left: 10px;
  color: white;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #ffffff;
}
.site-header .c-user_avatar .c-user_avatar-image {
  display: inline-block;
  margin-right: 0;
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 60px;
  border: 1px solid #ffffff36;
}
.c-user_avatar-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.site-header ul.c-user_menu {
  position: absolute;
  top: 55px;
  left: -65px;
  z-index: -1;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  list-style: none;
  margin: 0;
  padding: 1px;
  display: flex;
  flex-direction: column;
  width: 310px;
  font-size: 13pt;
  font-weight: bold;
  color: rgb(255, 255, 255);
  border: 1px solid #ffffff24;
  border-radius: 15px;
  background-color: #1e202b;
  box-shadow: 0 0 10px 2px black;
  transition: opacity 250ms ease, z-index 250ms ease, visibility 250ms ease;
  transition-delay: 50ms;
  transition-delay: 50ms;
}
.c-user_avatar:hover ul.c-user_menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.site-header ul.c-user_menu li.user-menu-middle a {
  color: rgb(224, 224, 224);
  display: block;
  padding: 10px 20px;
  background-color: rgba(128, 128, 128, 0);
  transition: padding-right 300ms ease, background-color 300ms ease;
}
.site-header ul.c-user_menu li.user-menu-middle a:hover {
  padding-right: 28px;
  color: #ffd201;
  background-color: rgb(47 46 45);
}

.site-header ul.c-user_menu li.user-menu-middle {
  border-bottom: 1px dashed hsla(0, 0%, 78%, 0.1);
}
.site-header ul.c-user_menu li.user-menu-top {
  border-bottom: 1px dashed hsla(0, 0%, 78%, 0.1);
  padding: 18px 15px;
  background-color: #161928;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.site-header ul.c-user_menu li.user-menu-top .user-info {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.site-header ul.c-user_menu li.user-menu-top .user-info .user-subscription a {
  border: 1px solid;
  padding: 3px 10px;
  border-radius: 5px;
}
.site-header
  ul.c-user_menu
  li.user-menu-top
  .user-info
  .user-subscription
  a.nok {
  color: red;
}
.site-header ul.c-user_menu li.user-menu-bottom {
  display: flex;
  align-self: center;
  margin: 5px 0;
}
.site-header ul.c-user_menu .user-menu-bottom a {
  padding: 12px 15px;
  color: red;
}
.site-header ul.c-user_menu a svg {
  margin-left: 10px;
}

/* search part */
.ui-autocomplete {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, 0%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px 5px;
  background-color: #343434c9;
  border: 1px solid #ffffff30;
  border-radius: 6px;
}
.ui-autocomplete .search-item {
  display: inline-flex;
  flex: 1 0 50%;
  max-width: 50%;
}
.ui-autocomplete .search-error {
  width: 100%;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  padding: 6px;
  color: white;
  border-radius: 5px;
}
.ui-autocomplete .search-error.gray {
  background-color: #1e1e1e;
}
.ui-autocomplete .search-error.red {
  background-color: #893422;
}
.search-item > div {
  display: flex;
  width: 100%;
  margin: 5px;
  padding: 10px;
  border: 1px solid #ffffff26;
  border-radius: 5px;
  background-color: #000000c7;
  color: #bfbfbf;
  transition: background-color 250ms ease, border 250ms ease;
  cursor: pointer;
}
.search-item > div:hover {
  background-color: #151515;
  border: 1px solid #ffffff5c;
}
.search-item .book-image {
  width: 80px;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
@media (max-width: 768px) {
  .ui-autocomplete .search-item {
    flex: 1 0 100%;
    max-width: 100%;
  }
  .search-item .book-image {
    width: 65px;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
}
.search-item .book-info {
  display: flex;
  flex-direction: column;
  text-align: right;
  margin-right: 10px;
}
.search-item .book-info .book-title {
  color: #d0d0d1;
  font-size: 13pt;
  max-height: 45px;
  overflow: hidden;
}
.search-item .book-info .little-info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px;
  margin: 8px 0 6px;
  font-size: 14pt;
  font-weight: bold;
}
.search-item .book-info .little-info > div > svg {
  margin-left: 3px;
}
.search-item .middle-info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2px;
  font-size: 11pt;
}
.search-item .middle-info .on-post-info-tags-type {
  color: white;
  background-color: rgb(89 138 5);
  padding: 1px 6px;
  border-radius: 5px;
}
.search-item .middle-info > div {
  display: inline-block;
  padding: 0.5px 6px;
  font-size: 11pt;
  background: rgb(255 255 255 / 15%);
  color: white;
  border-radius: 6px;
  border: solid 1.5px #ffffff14;
}
.search-item .book-info .book-status {
  font-size: 12pt;
  margin-top: auto;
}

.bottom-footer {
  text-align: right;
}
.bottom-footer .container .row {
  gap: 20px;
}
.bottom-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-info {
  text-align: center;
}
.footer-info .logo a {
  display: inline-block;
}
.footer-info p {
  padding: 5px 10px;
  line-height: 27px;
  text-align: justify;
  margin-bottom: 8px;
  font-size: 13pt;
  color: #9f9f9f;
}
.big-footer-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 60px;
  font-size: 13pt;
}
.small-footer-link {
  display: none;
}
.footer-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 50px;
}
.footer-end-social ul {
  display: flex;
  gap: 10px;
  font-size: 15px;
}
.footer-end-social ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1e2235;
  font-size: 15pt;
  border-radius: 20px;
  height: 42px;
  width: 42px;
}
@media (max-width: 768px) {
  .big-footer-link {
    display: none;
  }
  .small-footer-link {
    display: block;
  }
  .footer-end {
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 20px;
  }
}

.bottom-footer .big-footer-link .footer-link-title {
  color: white;
  font-size: 15pt;
  font-weight: bold;
}
.bottom-footer .big-footer-link ul li a {
  padding: 4px;
  display: inline-block;
}
.bottom-footer .small-footer-link ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.bottom-footer .small-footer-link ul li {
  flex: 0 0 100%;
}
.bottom-footer .small-footer-link ul li a {
  display: block;
  padding: 7px 15px;
  font-size: 16pt;
  border-radius: 5px;
  background-color: #15192e;
  transition: background-color 250ms ease;
}
.bottom-footer .small-footer-link ul li a:hover {
  background-color: #232943;
}

.single .navigation.paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
  margin: 40px 0;
  font-size: 18pt;
}
.single .navigation.paging-navigation .nav-links > div {
  width: 300px;
  border-radius: 5px;
  border: 1px solid;
  padding: 20px 20px 10px;
}
.single .navigation.paging-navigation .nav-previous.nav-button {
  text-align: left;
  direction: ltr;
  margin-right: auto;
}
.navigation .c-blog__thumbnail {
  border-radius: 5px;
  margin-bottom: 10px;
  height: 125px;
  width: 100%;
}
.single-c-review .navigation .c-blog__thumbnail {
  margin-bottom: 0;
  height: 0;
  width: 0;
}
.navigation .c-blog__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.single .navigation.paging-navigation .nav-links .post-title.font-title a {
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  font-size: 13pt;
  color: #8b8b8b;
  max-width: 250px;
}
@media (max-width: 768px) {
  .single .navigation.paging-navigation .nav-links > div {
    text-align: center;
    flex: 0 0 100%;
    width: 100%;
  }
  .single .navigation.paging-navigation .nav-previous.nav-button {
    text-align: center;
    direction: rtl;
    margin-right: unset;
  }
}
.c-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 25px;
}

/* review page */
.review-order-by-container {
  display: flex;
  margin: 10px 0;
}
.custom-ordrby-container {
  position: relative;
  display: inline-block;
}
.custom-ordrby-container select {
  width: 180px;
  padding: 12px 15px;
  background-color: #141a28;
  border-radius: 5px;
  color: #ffffff;
  font-size: 15pt;
}
.custom-ordrby-container svg {
  position: absolute;
  left: 10px;
  top: 7px;
}

.review-page-content {
  margin: 30px 0;
  color: #e5e5e5;
}

.review-page-content .review-temp {
  background-color: #141d31;
  border: 1px solid #ffffff14;
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
}

.review-page-content .warnings {
  text-align: center;
  padding: 4px;
  border-radius: 8px;
  background-color: red;
  font-size: 18pt;
  color: black;
  font-weight: bold;
  margin-bottom: 6px;
}

.review-page-content .review-temp .review-meta-info {
  display: inline-flex;
  gap: 15px;
  font-size: 14pt;
  color: #b1b1b1;
  align-items: center;
}
.review-page-content .review-temp .review-meta-info .review-little-meta {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 5px;
}
.review-page-content .review-temp .review-little-meta > a {
  font-weight: bold;
  font-size: 16pt;
}
.review-page-content .review-temp .review-little-meta .date {
  display: flex;
  align-items: center;
  gap: 5px;
}
.review-page-content .review-temp h1 {
  font-size: 17pt;
  color: white;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.5;
}

.review-page-content .review-text {
  font-size: 14pt;
  line-height: 1.8;
  text-align: justify;
}

/* review starter */
.review-starter h1 {
  color: white;
}
.review-related-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  border: 1px solid;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
  font-size: 14pt;
  color: #c1c1c1;
  margin: 0 0 20px 0;
  gap: 20px;
}

.review-related-info .thumbnail {
  max-width: 50%;
}

.review-related-info .thumbnail {
  flex: 0 0 16.666666%;
  max-width: 16.666666%;
  max-width: 50%;
  min-height: 150px;
  display: flex;
  text-align: center;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.review-related-info .thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(1);
  transition: 300ms transform ease, 300ms filter ease;
}
.review-related-info:hover .thumbnail img {
  filter: brightness(0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

.review-related-info .info {
  flex: 0 0 75%;
  max-width: 75%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  max-width: 100%;
}

.review-related-info .short-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 15px;
}

.review-related-info .slider-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16pt;
  font-weight: bold;
  padding: 0 5px;
  color: white;
}
.review-related-info .slider-rating i {
  color: #ffd201;
}

.review-related-info .short-info .summary-content-view {
  height: unset;
}

.review-related-info .post-content_item {
  display: flex;
  flex-wrap: wrap;
}

.review-related-info .post-title-status-tag {
  font-size: 14pt;
  display: inline-block;
  color: white;
  border-radius: 4px;
  border: solid 1px #ffffff50;
  padding: 4px 10px;
  transition: all 0.2s ease;
}

.review-related-info .post-title-status-tag:hover {
  background-color: #0000004d;
}

.wp-block-image img {
  border: 1px solid #ffffff1f;
}
.wp-block-image:not(.is-style-rounded) img {
  border-radius: 6px;
}
.wp-block-gallery img {
  cursor: pointer;
}

.review-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.score-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.score-item .score-item-title {
  display: flex;
  gap: 8px;
  font-size: 14pt;
  font-weight: bold;
  justify-content: space-between;
}
.score-item .score-item-title span.num {
  font-size: 17pt;
}
.score-item .score-item-title span.ctr {
  color: #999999;
  margin-right: 5px;
  font-size: 12pt;
}
.score-item .score-item-body .score-bar {
  position: relative;
  border: 1px solid #ffffff30;
  background-color: #2d2d2d;
  border-radius: 10px;
  width: 100%;
  height: 14px;
  overflow: hidden;
}
.score-item .score-item-body .score-bar > div {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 10px;
}

.review-scores .score-item {
  flex: 0 0 48%;
  max-width: 48%;
}

.review-compare {
  margin: 10px 0;
  font-size: 15pt;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  justify-content: space-between;
}

.review-compare .compare-item-box {
  flex: 0 0 49%;
  max-width: 49%;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.review-compare .compare-item-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.review-compare-title {
  font-size: 18pt;
  font-weight: bold;
}

.review-compare .compare-item-box > svg {
  position: absolute;
  bottom: 60px;
  left: 59px;
  transform: scale(6);
  opacity: 0.05;
  z-index: 0;
}

.review-compare hr {
  border: 1px solid rgb(255 255 255 / 35%);
  width: 45%;
}

.review-compare h3 {
  display: flex;
  gap: 10px;
  font-size: 22pt;
}

.positive-item {
  color: #00ff00;
  text-shadow: 0px 0px 15px #00ff00;
}

.negative-item {
  color: #df3d16;
  text-shadow: 0px 0px 15px #df3d16;
}

.review-compare .item i {
  font-size: 5pt;
  margin-left: 5px;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 1%;
  justify-content: space-around;
  margin-top: 20px;
}

.review-images .image-cover {
  position: relative;
  flex: 0 0 24%;
  max-width: 24%;
  height: 300px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px dashed #a67d2b;
}

.review-images img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  cursor: pointer;
}

.like-dislike-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  font-size: 16pt;
  color: white;
  margin: 40px 0 0;
  border: 1px solid #ffffff0f;
  border-radius: 5px;
  background-color: #171c30;
}

.pld-like-dislike-wrap {
  font-size: 18pt;
  display: flex;
  gap: 20px;
  margin: 20px 0;
}
.pld-like-dislike-wrap .pld-common-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .review-page-content .review-temp h1 {
    font-size: 14pt;
  }
  .review-compare {
    gap: 10px;
  }
  .review-compare .compare-item-box {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .review-scores .score-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .review-related-info .thumbnail {
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 300px;
  }

  .review-related-info .info {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .like-dislike-box {
    padding: 5px 20px;
    margin-top: 40px;
  }
  .review-images .image-cover {
    flex: 0 0 49%;
    max-width: 49%;
  }
}

/* review box and items */
.single-review-box {
  margin: 20px 0;
}
.single-review-box-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}
.single-review-box-header h3 {
  margin: 0;
}
.single-review-box-header .review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;
  font-size: 16pt;
  margin-right: auto;
}
.review-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14pt;
  font-weight: bold;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #ffffff0f;
  border-radius: 5px;
  background-color: #1e2235;
}

.comment-on-review {
  display: flex;
  gap: 5px;
  align-items: center;
  position: absolute;
  bottom: 15px;
  left: 25px;
  color: #fff;
  font-size: 14pt;
}

.single-review-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;
}
.single-review-body > :last-child {
  margin-left: auto;
  margin-right: 0.5%;
}

.reveiw-item {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  flex: 0 0 49%;
  border: 1px solid #ffffff0d;
}

@media (max-width: 768px) {
  .single-review-body > :last-child {
    margin-left: 0;
    margin-right: 0;
  }
  .single-review-box-header h3 {
    flex: 100%;
    max-width: 100%;
  }
  .single-review-box-header .review-actions {
    flex: 100%;
    max-width: 100%;
    gap: 0;
    align-content: space-between;
  }
  .review-actions > div {
    flex: 1 0 49%;
    text-align: center;
  }
  .description-summary .review-actions > div {
    max-width: 49%;
  }
  .reveiw-item {
    flex: 0 0 100%;
  }
}

.reveiw-item a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12pt;
  width: 100%;
  color: unset;
  padding: 15px;
  max-width: 100%;
  height: 100%;
  background-color: #171c30;
  border-radius: 5px;
  transition: background-color 250ms ease;
}

.reveiw-item a:hover {
  background-color: #1c223b;
}

.single-review-body .reveiw-item .pending-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14pt;
}

.reveiw-item a .review-title {
  font-size: 15pt;
  color: #dddddd;
  margin: 0;
}

.review-book {
  color: #f1d44c;
  font-size: 13pt;
  margin-top: auto;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 7px;
}

.review-author .review-short-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-author .author-profile img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.review-short-info .review-date {
  display: inline-block;
  color: #b7b7b7;
  font-weight: bold;
}

.warn-notes {
  font-size: 12pt;
  color: #dbdbdb;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: justify;
}
.warn-notes .warn-note {
  margin-right: 10px;
}
.warn-notes .warn-note svg {
  margin-left: 5px;
}

.post-related-out-links {
  border: 1px solid;
  padding: 20px 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

.main-text-content {
  padding: 0px 15px 20px;
  background-color: #0e1120;
  border-radius: 5px;
  border: 1px solid #ffffff14;
}

.blog-post-item .c-blog_item {
  position: relative;
  overflow: hidden;
  background: #0e1120;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  padding: 15px;
  font-size: 15px;
}
.blog-post-item .c-blog_item.no-thumb {
  padding-top: 70px;
}
.owl-item .blog-post-item .c-blog_item {
  height: 100%;
}

.blog-post-item .c-blog_item .c-blog__thumbnail {
  border-radius: 10px;
  position: relative;
  width: 100%;
  height: 210px;
  margin-bottom: 15px;
}
.blog-post-item .c-blog_item .c-blog__thumbnail a img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(1);
  transition: 300ms transform ease, 300ms filter ease;
}
.blog-post-item .c-blog_item .c-blog__thumbnail:hover a img {
  filter: brightness(0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

.item-summary {
  text-align: justify;
}

.blog-post-item .c-blog_item .on-post-categories {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 25px;
  right: 25px;
}
.blog-post-item .c-blog_item .on-post-categories > a {
  color: #ffffff;
  font-size: 12pt;
  background-color: #000000c9;
  border: 1px solid #ffffff45;
  border-radius: 5px;
  padding: 0 5px;
}

.lists-container {
  display: flex;
  flex-wrap: wrap;
}
.lists-container .list-item {
  padding: 5px;
  max-width: 33.33%;
  flex: 0 0 33.33%;
}
.lists-container .list-item.cl-4 {
  max-width: 25%;
  flex: 0 0 25%;
}
.lists-container .list-item .list-item-inner {
  position: relative;
  width: 100%;
  border: 1px solid #ffffff21;
  border-radius: 20px;
  padding: 8px;
  overflow: hidden;
  min-height: 220px;
  height: 100%;
}
.lists-container .list-item .list-item-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(0deg, #030712 0%, rgba(18, 18, 18, 0) 100%);
}

.lists-container .list-item .list-item-inner .list-item-wrap a {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.lists-container .list-item .list-item-inner .list-item-wrap a .list-post-item {
  position: relative;
  width: 49%;
  height: 0;
  padding-top: 49%; /* This makes the height equal to the width */
  overflow: hidden;
  margin: 0.5%;
  border-radius: 15px;
}
.lists-container
  .list-item
  .list-item-inner
  .list-item-wrap
  a
  .list-post-item
  img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(1);
  transition: 300ms transform ease, 300ms filter ease;
}
.lists-container
  .list-item:hover
  .list-item-inner
  .list-item-wrap
  a
  .list-post-item
  img {
  filter: brightness(0.7);
  transform: translate(-50%, -50%) scale(1.1);
}
.lists-container .list-item .list-item-inner .list-item-info {
  position: absolute;
  bottom: 10px;
  right: 10px;
  left: 10px;
  z-index: 1;
  font-size: 14pt;
  align-content: center;
  color: white;
  font-weight: bold;
  padding: 20px 35px 15px;
  background-color: #000101;
  border: 1px solid #ffffff75;
  border-radius: 100px 100px 15px 15px;
}
.lists-container .list-item .list-item-inner .list-item-info h5 {
  text-align: center;
  font-size: 16pt;
  width: 100%;
}
.lists-container .list-item .list-item-inner .list-item-info .list-little-info {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  text-align: center;
}
.lists-container
  .list-item
  .list-item-inner
  .list-item-info
  .list-little-info
  div {
  flex: 0 0 45%;
  max-width: 45%;
  font-size: 12pt;
}
.lists-container .list-item .list-item-inner .list-created-in {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: black;
  padding: 3px 10px;
  font-size: 12pt;
  font-weight: bold;
  border-radius: 5px;
  border: 1px solid #ffffff4a;
}
.lists-container .list-item .list-item-inner .list-status {
  position: absolute;
  background-color: #b70000;
  top: 15px;
  left: 15px;
  padding: 3px 10px;
  color: white;
  font-size: 12pt;
  font-weight: bold;
  border-radius: 5px;
  border: 1px solid #ffffff4a;
}

/* for dashboard */
.double-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 1%;
}
.double-row > div {
  flex: 0 0 49%;
  max-width: 49%;
}
@media (max-width: 992px) {
  .double-row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .lists-container .list-item {
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

@media (max-width: 576px) {
  .lists-container .list-item {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

.tab-wrap {
  position: relative;
}

.post-search-section .list-post-search-input-container {
  position: relative;
  text-align: center;
  display: flex;
  margin: 5px 2% 20px;
}
.list-post-search-input-container input#list_post_search {
  font-size: 13pt;
  background-color: #141a28;
  border: 1px solid #545454;
  color: #fff;
  padding: 13px 15px 13px 15px;
  width: 100%;
  border-radius: 18px;
}
.post-search-section .list-post-search-input-container .loader-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffd2014d;
  border: none;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 18px;
  display: none;
}
.post-search-section .list-post-search-input-container .loader-inner > div {
  height: 15px;
}
.list-post-search-input-container
  input.ui-autocomplete-loading
  + .loader-inner {
  display: block;
}
.selected-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 13pt;
  text-align: center;
}
.selected-posts ul > p {
  width: 100%;
}
.selected-posts ul li {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 10px;
  position: relative;
  height: 300px;
  font-size: 13pt;
  text-align: right;
}
.selected-posts ul li .waitforajaxtext {
  display: none;
}
.selected-posts ul li.wait-for-ajax {
  opacity: 0.8;
}
.selected-posts ul li.wait-for-ajax .waitforajaxtext {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.selected-posts ul li .selected-post-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff5c;
  border-radius: 5px;
  height: 100%;
}
.selected-posts ul li .selected-post-item::after {
  position: absolute;
  z-index: 1;
  content: "";
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #030712 0%, rgba(18, 18, 18, 0) 45%);
}
.selected-posts ul li button.remove-post {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  padding: 7px 8px;
  background-color: black;
  border: 1px solid #ffffff7d;
  border-radius: 5px;
  margin: 0;
}
.selected-posts ul li button.remove-post:hover {
  scale: 1.1;
  border: 1px solid #ffffff33;
  background-color: rgba(0, 0, 0, 0.829);
  transition: all 250ms ease;
}
.selected-posts ul li .selected-post-item .selected-post-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: brightness(1);
  transition: 300ms transform ease, 300ms filter ease;
}
.selected-posts ul li .selected-post-item:hover .selected-post-image img {
  filter: brightness(0.7);
  transform: translate(-50%, -50%) scale(1.1);
}
.selected-posts ul li .selected-post-item .selected-post-title {
  position: absolute;
  bottom: 5px;
  right: 10px;
  z-index: 2;
  font-size: 13pt;
  color: white;
}

@media (max-width: 1230px) {
  .selected-posts ul li {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}
@media (max-width: 768px) {
  .selected-posts ul li {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 5px;
  }
}

.item-counter-box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 20px;
}

.item-counter-box-container a {
  display: inline-block;
  background: #141a28;
  border: 4px dotted #ffffff2e;
  border-radius: 50%;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 30px;
  width: 100%;
  color: white;
  transition: 300ms all ease;
}

.item-counter-box-container a:hover {
  background: rgb(25, 40, 73);
  border: 4px dotted rgba(255, 208, 1, 0.69);
}

.item-counter-box-container a.short {
  padding: 10px 30px;
  align-content: center;
  align-items: center;
  width: calc(50% - 10px);
}

.item-counter-box-container a .text_holder {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  font-size: 20pt;
  font-weight: bold;
}

.item-counter-box-container a.short .text_holder {
  font-size: 16pt;
}

.item-counter-box-container a.short .text_holder .link_box_count {
  font-size: 29pt;
  line-height: 1;
  margin-top: 5px;
}

.item-counter-box-container a.short .text_holder .link_box_label {
  margin-bottom: 5px;
  color: #ffffffbd;
}

.item-counter-box-container a .link_box_icon {
  margin-right: auto;
}

.item-counter-box-container a .link_box_icon svg {
  height: 40px;
  width: 40px;
}

.item-counter-box-container a.short .link_box_icon svg {
  height: 44px;
  width: 44px;
}

@media (max-width: 768px) {
  .item-counter-box-container a.short {
    width: 100%;
  }
}

.user-post-dash-style-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  background-color: #161928;
  border: 1px solid #ffffff05;
  border-radius: 5px;
  font-size: 12pt;
  height: 500px;
}
.user-post-dash-style-list > div > p {
  font-size: 12pt;
  margin-bottom: 0;
}
.user-post-dash-style-list .body,
.user-read-post .body {
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 110px;
}
.share-ajax .user-read-post .body {
  flex-direction: row;
  justify-content: space-between;
  gap: 0;
}
.post-item-dash-style {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background-color: #0e1422;
  border: 1px solid #ffffff14;
  border-radius: 5px;
  transition: 300ms background-color ease, 300ms border ease;
}
.post-item-dash-style:hover {
  background-color: rgb(18, 26, 44);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.share-ajax .user-read-post .body .post-item-dash-style {
  flex: 0 0 49.5%;
  max-width: 49.5%;
}
.post-dash-style-thumb {
  position: relative;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 5px;
}
.post-dash-style-thumb img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(1);
  transition: 300ms transform ease, 300ms filter ease;
}
.post-item-dash-style:hover .post-dash-style-thumb img {
  filter: brightness(0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

.post-dash-style-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 5px;
  color: #cfcfcf;
  font-size: 14pt;
  font-weight: bold;
  overflow: hidden;
  min-height: 60px;
  gap: 2px;
}
.post-dash-style-middle .book-title {
  max-width: 100%;
}
.post-dash-style-middle .book-title a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  color: #e9e9e9;
}
.post-dash-style-middle .book-last-chapter a {
  color: #ffd201;
  font-size: 15pt;
}
.post-dash-style-middle a:hover {
  color: #eb3349;
}
.post-dash-style-last {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12pt;
}
.dash-notification-check .notification-group {
  margin: 10px 0;
}
.dash-notification-check .body {
  gap: 0;
}
.dash-notification-check .body .notification-group .yellow-under-title {
  color: #d3d3d3;
  font-size: 19pt;
}
.dash-notification-check
  .body
  .notification-group
  .yellow-under-title
  .underline_title {
  display: none;
}

.user-read-post .post-dash-style-thumb {
  width: 80px;
  height: 110px;
}
.read-post-wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 5px 0;
}
.post-item-dash-style .read-post-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.read-post-wrapper .post-dash-style-middle .book-title {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.read-post-wrapper .post-dash-style-middle .book-last-read-chapter {
  font-size: 13pt;
}
.read-post-wrapper .continue-reading-date {
  font-size: 12pt;
  margin-top: auto;
  color: #a5a5a5;
}
.read-post-wrapper .post-dash-style-action {
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-bottom: 5px;
}
.read-post-wrapper .post-dash-style-action .post-type a {
  padding: 5px 10px;
  text-align: center;
  background-color: #353535;
  border-radius: 20px;
  color: white;
  font-weight: bold;
}
.read-post-wrapper .post-dash-style-action .post-type a:hover {
  background-color: #595959;
}
.read-post-wrapper .post-dash-style-action .post-action-button a {
  border-radius: 5px;
  background-color: #2463eb;
  padding: 5px 8px;
  font-weight: bold;
  color: white;
}
.read-post-wrapper .post-dash-style-action .post-action-button a:hover {
  background-color: #2d398e;
}
.read-post-wrapper .read-post-progress-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
}
.read-post-progress-bar .post-progress-bar {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 6px;
  background-color: gray;
  border-radius: 5px;
}
.read-post-progress-bar .inner-progress-bar {
  position: absolute;
  background-color: #4759e8;
  border-radius: 5px;
  top: 0;
  bottom: 0;
  right: 0;
}

form.book-reading-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-size: 16pt;
  padding: 10px;
}
.book-reading-options .tab-item {
  display: flex;
  flex-wrap: wrap;
  column-gap: 25px;
  row-gap: 5px;
  align-items: center;
  margin: 10px 0;
}
.book-reading-options .tab-item .settings-title h3 {
  margin-bottom: 0;
}
.book-reading-options .tab-item .settings-title span.description {
  font-size: 13pt;
}
.book-reading-options .tab-item .raido-checkbox-style {
  margin-right: auto;
}
.comments-area .comment-form p.form-submit {
  display: flex;
}
.book-reading-options input#reading-input-submit,
.comments-area .comment-form .form-submit .submit {
  margin-right: auto;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13pt;
  color: #000;
  background-color: #ffd201;
  transition: background-color 200ms ease;
  max-width: 150px;
  height: auto;
}
.book-reading-options input#reading-input-submit:hover,
.comments-area .comment-form .form-submit .submit:hover {
  background-color: #a49223;
}
.raido-checkbox-style {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 5px;
  justify-content: space-between;
  background-color: #141a28;
  border: 1px solid #ffffff17;
  border-radius: 12px;
}
.raido-checkbox-style .checkbox label {
  cursor: pointer;
  display: flex;
  font-weight: bold;
  margin: 0 auto;
  padding: 5px 15px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  transition: border 0.3s ease, background-color 0.3s ease;
}
.raido-checkbox-style .checkbox input:checked + label {
  background-color: #002bff1f;
  border: 1px solid #ffffff14;
  color: white;
}
.raido-checkbox-style .checkbox input {
  display: none;
}
@media (max-width: 768px) {
  .share-ajax .user-read-post .body {
    flex-direction: column;
    gap: 10px;
  }
  .share-ajax .user-read-post .body .post-item-dash-style {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .post-item-dash-style .read-post-wrapper .read-post-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .read-post-wrapper .post-dash-style-action {
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .read-post-wrapper .read-post-progress-bar {
    position: absolute;
    bottom: 5px;
    right: 12px;
    left: 12px;
  }

  form.book-reading-options {
    padding: 3px;
  }
  .book-reading-options .tab-item .raido-checkbox-style {
    margin: 5px auto;
  }
}

.chapter-listing-container {
  margin-bottom: 50px;
}

.add-book-to-list-button {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  font-size: 15pt;
  border: 1px solid #fff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.3s ease;
}
.add-book-to-list-button:hover {
  border: 1px solid #ffffff47;
  background-color: rgba(0, 0, 0, 0.68);
}

.add-book-to-list-template {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #000000bf;
  z-index: 99;
  padding: 80px 0;
}
.add-book-to-list-template.show {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lists-template-inner {
  position: relative;
  width: 95%;
  max-width: 800px;
  background-color: #222021;
  padding: 20px 15px;
  border-radius: 15px;
  border: 1px solid #ffffff38;
  font-size: 14pt;
}
.add-book-to-list-template .lists-container {
  display: flex;
  flex-direction: column;
}

.add-book-to-list-template .head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}
.add-book-to-list-template .yellow-under-title {
  flex: 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

.add-book-to-list-template .head .make-new-list {
  margin-right: auto;
}
.add-book-to-list-template .head .make-new-list a {
  display: flex;
  padding: 5px 10px;
  gap: 5px;
  font-size: 15pt;
  background-color: #00000052;
  border-radius: 5px;
  border: 1px solid #ffffff24;
  color: white;
}
.add-book-to-list-template .head .make-new-list a:hover {
  background-color: #000;
}

.add-book-to-list-template span.closer {
  position: absolute;
  top: -50px;
  padding: 5px 10px;
  background-color: #0f0e0f;
  color: white;
  border: 1px solid #ffffff8f;
  border-radius: 30px;
  font-size: 15pt;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}
.add-book-to-list-template span.closer:hover {
  background-color: #000;
  border: 1px solid #fff;
}

.add-book-to-list-template .yellow-under-title {
  font-size: 16pt;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.add-book-to-list-template .lists-over-flow {
  max-height: 475px;
  overflow-x: hidden;
  overflow-y: auto;
}

.add-book-to-list-template .add-to-list-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1%;
  overflow: hidden;
  max-height: 60px;
  align-items: center;
  padding: 5px 10px;
  background-color: #333132;
  border-radius: 5px;
  border: 1px solid #ffd20121;
}
.add-book-to-list-template .add-to-list-item.private {
  background-color: #171617;
  border: 1px solid #000;
}

.add-book-to-list-template .add-to-list-item .dec {
  flex: 0 0 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 40%;
}

.add-book-to-list-template .sbtn-style {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
  font-size: 12pt;
  font-weight: bold;
  border: 1px solid;
  border-radius: 5px;
  background-color: #0000004f;
  cursor: pointer;
  transition: all 0.2s ease;
}
.add-book-to-list-template .sbtn-style:hover {
  border: 1px solid #ffffff47;
  background-color: rgba(0, 0, 0, 0.68);
}
.add-book-to-list-template .remove-post-from-list {
  color: red;
}
.add-book-to-list-template .add-post-from-list {
  color: greenyellow;
}
.add-book-to-list-template.working .sbtn-style {
  cursor: not-allowed;
  color: #555555;
}
.add-book-to-list-template.working .inprogress .sbtn-style {
  cursor: progress;
  color: #ffd201 !important;
  background-color: #0000004f !important;
}

.add-book-to-list-template hr {
  flex: 0 0 100%;
  border: 1px solid #ffffff47;
  width: 100%;
}

.main-slider-info .slider-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15pt;
  font-weight: bold;
  margin-left: 5px;
  color: white;
}
.main-slider-info .slider-rating i {
  color: #ffd201;
}

.helpful-share-holder .share-card {
  background-color: #0f1020;
  border: 1px solid #ffffff1c;
  border-radius: 5px;
  padding: 15px;
  font-size: 13pt;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.helpful-reviews-holder .share-card {
  font-size: 12pt;
}
.helpful-share-holder .share-header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: center;
}
.helpful-share-holder .avatar {
  overflow: hidden;
  border-radius: 50px;
  width: 70px;
}
.helpful-share-holder .share-header .share-info {
  flex: 1 0 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: white;
}
.helpful-reviews-holder .share-header .share-info {
  gap: 0;
}
.helpful-share-holder .share-header span.author-name,
.helpful-share-holder .share-header span.post-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.helpful-share-holder .share-content {
  font-size: 12pt;
  text-align: justify;
  margin-bottom: auto;
}
.helpful-share-holder .share-info .user-info {
  display: flex;
  gap: 5px;
}

.helpful-share-holder .comment-actions {
  display: flex;
  align-items: center;
}

.helpful-comment-holder .comment-actions .cld-like-dislike-wrap {
  background-color: unset;
  border: unset;
  margin-right: 0;
}
.helpful-comment-holder
  .comment-actions
  .cld-like-dislike-wrap
  .cld-common-wrap {
  margin: 0 8px;
}

.helpful-share-holder .show-button {
  padding: 5px 10px;
  border: 1px solid #ffffff14;
  background-color: #151331;
  border-radius: 5px;
  margin-right: auto;
  font-size: 12pt;
}

.helpful-share-holder .share-card .share-actions {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: 12pt;
  color: white;
  fill: white;
}

.helpful-share-holder .share-card .share-actions > div {
  display: flex;
  align-items: center;
  font-size: 15pt;
}
.helpful-share-holder .share-card .share-actions > div > span {
  margin-top: 2px;
}
.helpful-share-holder .share-card .share-actions svg {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.helpful-share-holder .share-card .share-actions i {
  font-size: 13pt;
  margin-left: 8px;
}

.helpful-reviews-holder .avatar {
  width: 43px;
  border-radius: 4px;
}

.helpful-reviews-holder .share-card {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  justify-content: space-between;
}
.helpful-share-holder .related-post-thumb {
  flex: 0 0 22%;
  max-width: 22%;
  position: relative;
}
.helpful-share-holder .review-section {
  flex: 0 0 74%;
  max-width: 74%;
  display: flex;
  flex-direction: column;
}
.helpful-share-holder .related-post-thumb img {
  border-radius: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.tab-wrap .archive-head .change-post-item-view-inner {
  position: absolute;
  top: 18px;
  left: -12px;
}

@media (max-width: 768px) {
  .add-book-to-list-template .head {
    flex-direction: column;
  }
  .add-book-to-list-template .lists-container {
    gap: 5px;
  }
  .add-book-to-list-template .add-to-list-item .dec {
    flex: 0 0 49%;
    max-width: 49%;
  }
  .add-book-to-list-template .action {
    flex: 0 0 100%;
  }
  .add-book-to-list-template .add-to-list-item {
    max-height: 100px;
  }
  .helpful-share-holder .share-card .share-actions .rate {
    display: none;
  }
  .tab-wrap .archive-head .change-post-item-view-inner {
    top: 10px;
    left: -10px;
  }
}

.title-and-select-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.title-and-select-box > .custom-ordrby-container {
  margin-right: auto;
}

.change-post-item-view-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}