main {
    display: flex;
    flex: 1 0 auto;
    max-width: 100%;
    background: var(--bg-2)!important;
    transition: .2s cubic-bezier(.4,0,.2,1);
}

main > .main-wrap {
    flex: 1 1 auto;
    max-width: 100%;
    position: relative;
}

.block-item legend {
    font-family: sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    text-transform: capitalize;
    cursor: pointer;
}

.block-item legend span {
    line-height: 23px;
}

.block-item legend svg {
    transform: rotate(360deg);
    transition: transform 0.2s linear;
}

.block-item.hide {
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    height: 10px;
}

.block-item.hide legend svg {
    transform: rotate(180deg);
    transition: transform 0.2s linear;
}

.block-item .item-status {
    cursor: pointer;
}

.block-item.hide .item-status {
    display: none !important;
    opacity: 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.block-item .item-status.active {
    background-color: var(--read-icon) !important;
    box-sizing: border-box;
}

.block-item .item-status.active .cbox,
.block-item .item-status.active .txt{
    color: var(--primary);
}

.block-item .item-status .cbox {
    display: flex;
    vertical-align: baseline;
    color: #797272;
}
.block-item .item-status .txt {
    font-family: sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    color: hsla(0, 0%, 100%, .7);
    line-height: 25px;
}
.input-search-comic button {
    border: 1px solid #4f4f4f;
}
.input-search-comic input {
    border: 1px dashed #4f4f4f;
    cursor: default;
    text-transform: none !important;
    font-size: 16px !important;
}
.main > .main-wrap .search-comic .description {
    color: #ffffff;
}
/*    Tag*/

/*.main > .main-wrap .search-comic .comic {*/
/*    position: relative;*/
/*}*/

/*.main > .main-wrap .search-comic .comic .block-comic .block-wrap {*/
/*    height: 168px;*/
/*    background: var(--bg-1-variant) !important;*/
/*    border-radius: 4px;*/
/*}*/

/*.main > .main-wrap .search-comic .comic .block-comic .block-wrap .image {*/
/*    width: 120px;*/
/*    border-radius: 4px;*/
/*    height: 100%;*/
/*}*/

/*.main > .main-wrap .search-comic .comic .block-comic .info2 {*/
/*    font-family: sans-serif !important;*/
/*    font-size: 12px;*/
/*}*/
/*.main > .main-wrap .search-comic .comic .block-comic .info {*/
/*    width: calc(100% - 120px);*/
/*    font-family: sans-serif !important;*/
/*    font-size: 12px;*/
/*    position: relative;*/
/*}*/
/*main > .main-wrap .search-section .lds-loading {*/
/*    display: none;*/
/*}*/

/*main > .main-wrap .search-section .cover-items::before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    background-color: #000000b3;*/
/*    z-index: 999;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    border-radius: 5px;*/
/*    cursor: pointer;*/
/*}*/

/*main > .main-wrap .search-section .cover-items .lds-loading {*/
/*    display: inline-block;*/
/*    position: absolute !important;*/
/*    top: 0;*/
/*    margin: auto;*/
/*    z-index: 1000;*/
/*    text-align: center;*/
/*    left: 47%;*/
/*}*/
main > .main-wrap .topic .title-line {
    color: #fff;
}

main > .main-wrap .comic .lds-loading{
    display: none;
}

main > .main-wrap .chapter-state {
    color: red;
    font-style: italic;
}
main > .main-wrap .icon-limit {
    fill: #ff0000db;
    color: #ff0000db;
    caret-color: #ff0000db;
    height: 14px !important;
    width: 24px;
    top: 3px;
    position: relative;
}
main > .main-wrap .comic.cover-items::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000b3;
    z-index: 999;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}

main > .main-wrap .comic .app-item-group {
    min-width: 100%;
}

main > .main-wrap .comic.cover-items .lds-loading{
    display: inline-block;
    position: absolute !important;
    top: 0;
    margin: auto;
    z-index: 1000;
    text-align: center;
    left: 47%;
}

main > .main-wrap .comic  .topic > .title,
main > .main-wrap .topic .title-line {
    background: #121212;
    color: #fff;
}

main > .main-wrap .comic  .topic > .items-title {
    flex: 1;
}


main > .main-wrap .comic  .items-wrap .items .card-block {
    border-width: thin;
    display: block;
    max-width: 100%;
    outline: none;
    text-decoration: none;
    transition-property: box-shadow,opacity;
    word-wrap: break-word;
    position: relative;
    white-space: normal;
}

main > .main-wrap .comic  .items-wrap .items .card-flat {
    box-shadow: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)!important;
}

main > .main-wrap .comic  .items-wrap .items .card-block .card-image {
    z-index: 0;
    height: 250px;
    border-radius: 5px;
}

main > .main-wrap .comic  .items-wrap .items .card-block .card-image::before {
    position: absolute;
    top: 0;
    left: -90%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

main > .main-wrap .comic  .items-wrap .items .card-block .card-image:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%
    }
}

@keyframes shine {
    100% {
        left: 125%
    }
}
main > .main-wrap .comic  .items-wrap .items .card-block .card-image .v-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

main > .main-wrap .comic  .items-wrap .items .card .info-comic {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
}

main > .main-wrap .comic  .items-wrap .items .card .info-comic .item-info {
    height: inherit;
    line-height: 20px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    opacity: .5;
    font-family: sans-serif !important;
}

main > .main-wrap .comic  .items-wrap .items .card .card-block .info-comic .item-info {
    display: inline-flex;
    width: inherit;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info {
    width: 100%;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .info-comic .item-info {
    display: none;
}

main > .main-wrap .comic  .items-wrap .items .card .card-name {
    text-decoration: none;
    color: #81818e;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;
    box-sizing: border-box;
}

main > .main-wrap .comic  .items-wrap .items .card .card-name > .name {
    color: #ffffffc9;
    overflow: hidden;
    line-height: 17px;
}

main > .main-wrap .comic  .items-wrap .items .card .card-name:hover > .name {
    color: var(--primary);
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline {
    padding: 0 8px 8px 8px;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline {
    padding-top: 0!important;
    position: relative;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline::before {
    background: hsla(0,0%,100%,.12);
    left: 14px!important;
    width: 1px;
    border-radius: 50%;
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item {
    align-items: center;
    color: #fff;
    display: flex;
    flex: 1 0 auto;
    justify-content: inherit;
    line-height: normal;
    position: relative;
    transition: inherit;
    transition-property: opacity;
    cursor: pointer;
    opacity: .62;
    text-decoration: none;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item:hover {
    opacity: 1;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number,
main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .time {
    font-size: .875rem!important;
    line-height: 1.25rem;
    letter-spacing: .0178571429em !important;
    font-weight: 400;
    font-family: Roboto,sans-serif !important;
    text-align: right;

}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .time {
    color: hsla(0,0%,100%,.5) !important;
    font-size: 12px !important;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number  .long-tag,
main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number  .short-tag {
    display: none;
}
main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider {
    position: relative;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-info {
    width: 100%;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider .timeline-item-dot {
    background: #1e1e1e;
    height: 24px;
    left: calc(50% - 12px);
    width: 24px;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider .timeline-item-dot .timeline-item-dot-inner {
    height: 18px;
    margin: 3px;
    width: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider .timeline-item-dot .timeline-item-dot-inner.new {
    background-color: var(--primary-darken);
    border-color: var(--primary-darken);
}
main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited,
main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline .sticker-read {
    color: gray;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited svg path:nth-of-type(1),
.sticker-read svg path:nth-of-type(1)
{
    color: #1e1e1e;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited svg path:nth-of-type(2),
.sticker-read svg path:nth-of-type(2)
{
    color: #ffffff !important;
}

main > .main-wrap .comic  .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited .new,
.sticker-read .new
{
    background-color: #1e1e1e !important;
}

@media(max-width: 500px) {
    .col-mb {
        flex: 0 0 49% !important;
        max-width: 49% !important;
    }
}