.manga-grid-list-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 30px;
width: 100%;
padding-bottom: 30px;
}
@media (max-width: 1023px) {
.manga-grid-list-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 599px) {
.manga-grid-list-container {
grid-template-columns: repeat(2, 1fr);
}
}
.manga-grid-item-container {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none !important;
}
.manga-grid-item-thumbnail {
position: relative;
display: inline-block;
overflow: hidden;
}
.manga-grid-item-thumbnail img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease;
} .manga-grid-item-title {
margin-top: 10px;
font-size: 14pt;
height: auto;
font-weight: bold;
line-height: 1em;
text-align: center;
color: #333;
} .manga-related-list-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 30px;
width: 100%;
padding-bottom: 30px;
}
@media (max-width: 599px) {
.manga-related-list-container {
grid-template-columns: 1fr;
}
}
.manga-related-item-container {
width: 100%;
height: auto;
display: grid;
grid-template-columns: 160px auto;
align-content: start;
grid-column-gap: 10px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none !important;
}
.nosidebar .manga-related-item-container{
grid-template-columns: 200px auto;
}
@media (max-width: 599px) {
.manga-related-item-container{
grid-template-columns: 160px auto !important;
}
}
.manga-related-info-container {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
margin: 0 auto;
padding-left: 5px;
}
.manga-data-pages{
color: #999;
line-height: 1em;
}
@media (min-width: 768px) {
.col-md-7 {
display: flex;
flex-direction: column;
}
.manga-volume-purchase-options, .manga-series-nav{
margin-top: auto;
}
}
.btn-manga-volume-buy-link {
text-transform: uppercase;
font-weight:bold;
margin-bottom: 5px;
min-width: 105px;
}
.manga-thumbnail {
position: relative; } .manga-thumbnail::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0); transition: background 0.3s ease;
}
.manga-grid-item-container:hover .manga-grid-item-thumbnail::after, .manga-related-item-thumbnail:hover::after   {
background: rgba(0, 0, 0, 0.2); } .fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
.fade-in:nth-child(1) {
animation-delay: 0.1s;
}
.fade-in:nth-child(2) {
animation-delay: 0.2s;
}
.fade-in:nth-child(3) {
animation-delay: 0.3s;
}
.fade-in:nth-child(4) {
animation-delay: 0.4s;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.manga-creator {
font-size: 16px;
font-style: italic;
}
.btn-manga-chapter-link {
font-weight: bold;
margin-bottom: 15px;
}
.btn-manga-chapter-link i {
vertical-align: middle;
}
.manga-info-table {
flex-grow: 1;
display: flex;
flex-direction: column;
margin: 0;
border: 2px solid #000;
margin-bottom: 30px;
}
.manga-info-row {
display: flex;
flex-direction: column;
}
.manga-info-row+.manga-info-row {
border-top: 2px solid #000;
}
.manga-info-col+.manga-info-col {
border-top: 2px solid #000;
}
.manga-info-col {
flex-grow: 1;
display: flex;
align-items: center;
padding: 20px;
gap: 10px;
}
@media screen and (min-width: 768px) {
.manga-info-row {
flex-direction: row;
}
.manga-info-col+.manga-info-col {
border-top: none;
border-left: 2px solid #000;
}
}
.manga-info-key {
font-weight: 500;
font-size: 1.125rem;
}
.manga-info-value {
font-weight: 500;
font-size: .8rem;
letter-spacing: .16ch;
color: #777777;
text-transform: uppercase;
}
.manga-info-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.manga-info-tag {
display: flex;
padding: 4px 20px 2px 20px;
font-weight: bold;
font-size: .8rem;
letter-spacing: .16ch;
color: #666666 !important;
text-transform: uppercase;
background-color: #efefef;
text-decoration: none !important;
}
.manga-info-tag:hover{
background-color: #666666;
color: #fff !important;
}
.btn-outline-black {
color: #000;
border: #000 solid 2px;
}
.btn-outline-black:hover {
color: #fff;
background-color: #000;
border-color: #000;
} .manga-series-filter-form {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 0px;
justify-content: flex-start;
font-size: 0.875rem;
align-items: stretch; height: 30px;
overflow: hidden;
} .manga-series-filter-form .filter-field {
display: flex;
align-items: stretch; } .manga-series-filter-form select,
.manga-series-filter-form button {
display: block;
height: 30px; padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
appearance: none;
} .manga-series-filter-form select {
background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 12px center;
background-size: 10px 6px;
border: 1px solid #ccc;
padding-right: 30px; 
}
.manga-series-filter-form button{
text-transform: uppercase;
font-weight: bold;
}
.manga-series-filter-form label{
margin-right: 10px;
text-transform: uppercase;
} @media (max-width: 767px) {
.manga-series-filter-form {
flex-direction: column;
gap: 10px;
}
.manga-series-filter-form .filter-field {
width: 100%;
}
.manga-series-filter-form select,
.manga-series-filter-form button {
width: 100%;
}
}
.toocheke-hr.manga-hr{
border-top: 1px dotted !important;
}
.manga-breadcrumb, .manga-volume-nav{
text-transform: uppercase;
font-weight: bold;
padding: 0.25rem 1rem;
}
.manga-volume-nav{
font-size: 1.75rem;
display: block;
padding: .75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: .25rem;
text-align: center;
text-decoration: none !important;
color: #000;
}
.manga-volume-nav:hover{
background-color: #666666;
color: #fff !important;
} .manga-reader, .manga-reader #content, .manga-reader main, .manga-reader #left-content, .manga-reader #left-col, .manga-reader-container,  .manga-reader [class*="col-"] {
margin: 0;
padding: 0px;
}
.manga-reader header, .manga-reader .jumbotron, .manga-reader footer, .manga-reader .col-lg-4, .manga-reader #home-scroll-container{
display:none !important;
}
.manga-reader main, .manga-reader #left-content, .manga-reader #left-col, .manga-reader-container {
background-color: #2e2e2e;
}
.manga-reader main {
overflow: hidden;
transition-duration: 0ms;
max-width: 100%;
max-height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
touch-action: none;
user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.manga-reader .row {
margin-right: 0px;
margin-left: 0px;
}
.manga-reader [class*="col-"]{
flex: 0 0 100%;
max-width: 100%;
}
.manga-reader #content{
max-width: 100%;
}
.manga-reader-container {
position: fixed;      
top: 0;
left: 0;
margin: 0;
text-align: center;
overflow: hidden;
width: 100vw;
height: 100vh;
padding: 0px;
z-index: 9999; 
}
.manga-reader-container img {
display: block;
width: auto;
height: 100vh !important;
}
.manga-reader-container.two-pages img {
position: absolute;
}
.ltr.manga-reader-container.two-pages swiper-slide:nth-child(even) img {
left: 0;
}
.ltr.manga-reader-container.two-pages swiper-slide:nth-child(odd) img {
right: 0;
}
.rtl.manga-reader-container.two-pages swiper-slide:nth-child(even) img {
right: 0;
}
.rtl.manga-reader-container.two-pages swiper-slide:nth-child(odd) img {
left: 0;
}
swiper-container {
width: 1480px;
width: 100%;
height: 100vh;
justify-content: flex-end;
transform-origin: 0px 0px;
display: flex;
transition: all 400ms ease 0s;
}
swiper-slide {
text-align: center;
background-color: #2e2e2e;
display: flex;
justify-content: center;
align-items: center;
transition: all 400ms ease 0s;
padding: 0px;
}
.btn-manga-close-reader{
border: solid 2px #fff;
border-radius: 0;
text-decoration: none;
font-weight: bold;
background: #000;
color: #fff !important;
}
.btn-manga-close-reader:hover {
background-color: #fff;
color: #000 !important;
border: solid 2px #fff;
} .manga-page-nav {
position: fixed;
left: 0;
background-color: #000;
color: #fff;
z-index: 99999;
width: 100vw;
padding: 10px 20px;
display: none;
}
.manga-page-nav a {
color: #fff;
text-decoration: none !important;
}
.manga-page-nav a:hover {
color: #10ae98;;
text-decoration: none;
}
#manga-page-top-nav{
font-size: 24px;
font-weight: 500;
top: 0;
}
#manga-page-bottom-nav {
left: 0;
bottom: 0;
flex-direction: column;
align-items: center;
}
#manga-meta-nav {
display: flex;
flex-direction: column;
}
#manga-title-bar {
margin-bottom: 10px;
display: flex;
flex-direction: row;
height: 20%;
}
#manga-title-bar .chapter-title {
width: calc(100% - 100px);
height: auto;
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#manga-title-bar .page-wrapper {
width: 100px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
color: #757575;
text-align: end;
}
#manga-comic-actions {
display: flex;
flex-direction: row;
width: 100%;
height: auto;
align-items: flex-end;
}
.manga-nav-wrapper {
display: flex;
flex-direction: column;
width: 225px;
height: auto;
font-size: 20px;
align-items: center;
max-width: 350px;
padding: 12px 0 15px 0;
border: 2px solid #fff;
margin-bottom: 15px;
}
.manga-nav-wrapper hr {
border-top: 2px solid #fff;
}
.manga-nav-wrapper a {
margin-right: 15px;
}
#manga-page-options {
display: flex;
flex-direction: row;
width: 225px;
justify-content: flex-end;
margin-left: auto;
max-height: 80%;
}
svg {
overflow: hidden;
vertical-align: middle;
}
#manga-page-top-nav svg {
fill: #fff;
width: 35px;
height: 35px;
rotate: 180deg;
}
.manga-page-nav a:hover svg {
fill: #10ae98 !important;
}
.page-icons-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
}
.page-icons-wrapper svg,
.page-icons-wrapper path {
color: #fff;
stroke: #fff;
}
.page-icons-wrapper.one-page {
margin-right: 20px;
}
.page-icons-wrapper.two-pages {
margin-right: 20px;
padding-top: 10px;
}
.page-icons-wrapper.fullscreen {
display: flex;
flex-direction: column;
padding-top: 10px;
width: auto;
}
.full-screen-path {
fill: #fff;
}
.page-icons-wrapper .make-two-pages {
display: flex;
flex-direction: row;
}
.page-icons-wrapper.one-page .icon-wrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
height: 100%;
padding-top: 10px;
}
.page-icons-wrapper .icon-text {
font-size: 14px;
margin-top: 10px;
}
.page-icons-wrapper {
cursor: pointer;
}
.page-icons-wrapper:hover,
.page-icons-wrapper:hover svg,
.page-icons-wrapper:hover path {
color: #10ae98;
stroke: #10ae98;
}
.page-icons-wrapper:hover .full-screen-path {
fill: #10ae98;
}
swiper-container {
--swiper-navigation-color: #10ae98;
--swiper-pagination-color: #10ae98;
}
.manga-dropdown{
font-size: 16px;
padding: 0px 0.325rem;
margin: 15px 0;
max-width: 90%;
}
#manga-swiper{
position: relative;
} #swiper-loader-container {
position: absolute; top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9); z-index: 10; display: flex; justify-content: center;
align-items: center;
transition: opacity 0.3s ease-in-out; } .spinner {
border: 8px solid #f3f3f3; 
border-top: 8px solid #10ae98; 
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1.5s linear infinite;
} #swiper-loader-container.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.manga-nav-wrapper hr {
border-top: 2px solid #fff;
width: 90%;
}
@media only screen and (max-width: 767px) {
#manga-page-options{
display:none;
}
.manga-reader-container img {
height: auto !important;
}
.manga-breadcrumb{
font-size: 14px;
}
} .manga-breadcrumb{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: .75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: .25rem;
list-style: none;
}
.manga-breadcrumb .breadcrumb-item + .breadcrumb-item {
padding-left: .5rem;
}
.manga-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: .5rem;
color: #6c757d;
content: "/";
}
.manga-breadcrumb a, .manga-related-list-container a, .btn-manga-close-reader{
text-decoration: none !important;
}
.manga-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.manga-row > div{
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.manga-row  .btn, swiper-container .btn {
display: inline-block;
text-decoration: none !important;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.manga-row .btn-sm {
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
@media (min-width: 768px) {
.manga-row .col-md-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.manga-row .col-md-7 {
display: flex;
flex-direction: column;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
}
.toocheke-hr {
margin-top: 2rem;
margin-bottom: 2rem;
border-top: 1px dotted rgba(0,0,0,.1) !important;
}
.manga-info-tag, .manga-info-tag:hover {
color: #666666 !important;
background-color: #efefef;
}
.manga-series-filter-form label {
line-height: 30px;
}
.manga-reader .chama-protected-content-cta{
margin: 60px !important;
}