:root {
    --main-p: 10%;
    --main-w: 80%;
    --b-radius: 1rem;
    --b-radius2: 1.5rem;
}
body {max-width: 100vw;}
.pc {padding: 1% var(--main-p);position:absolute !important;}
.video-box {
    position:relative;display:grid;grid-template-columns: 75% 20%;gap: 5%;
    width: var(--main-w);margin: 16vh 0 4vh var(--main-p);
}
.side-actions {display: none;opacity:0;pointer-events: none;}
.played-video {grid-template-columns: 100%;margin-left: 0;width:100%;margin-top: 0;gap:2vh;text-align:center;}
.played-video .wrap-video {position:relative;display:inline-block;}
.played-video .side-actions {
    position:absolute;display:flex;right: -10%;top: 50%;transform: translateY(-50%);
    flex-direction: column;gap: 4vh;opacity:1;pointer-events: unset;
}
.side-actions .icon-im {vertical-align: middle;display:inline-block;margin-right:1vh;}
.played-video video:not(.is-fullscreen) {height: 100vh !important;width: auto !important;}

.video-box .in-grid-wrap {overflow: hidden;}
.video-box .episode {
    width:100%;display:block;aspect-ratio: 16 / 9;height:auto;
    border-radius:var(--b-radius2);
}
#adc {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;}

.ambient-mode {
    position:absolute;top:0;left:0;width:100%;height:100%;
    border-radius: 10px;filter: blur(50px);opacity: 0.25;
    transition: transform 0.1s linear;
}
canvas {pointer-events: none;}
.is-fullscreen {
    height: 100% !important;
    width: auto !important;
    border-radius: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;

}


.wrap-under-ep {margin-bottom: 2vh;display: none;}
.ep-info {display:block;}
.select-info {position:relative;margin: 4vh 0 4vh 0;display:flex;gap:2vh;}
.select-info h5, .select-info a {
    padding: 1.15vh 1.5vh 1vh 1.5vh;border-radius:var(--b-radius2);cursor: pointer;
    background-color: var(--c-pbg);border: solid 1px var(--c-pbg);
}
.select-info .selected-info {background-color: var(--c-red);border: solid 1px var(--c-red);}
.doujin {text-decoration: line-through;}

.preview-grid {
    grid-template-columns: repeat(5, 1fr);gap:0;display:grid;margin-bottom:4vh;
}
.preview-grid img {width:100%;display:block;margin:0;}


.other-episodes {
    display:grid;grid-template-columns: repeat(1, 1fr);gap: 4vh;margin-bottom:4vh;
}
.played-video .other-episodes-wrap {width: var(--main-w);margin-left: var(--main-p);}
.played-video .other-episodes {grid-template-columns: repeat(4, 1fr);}
.played-video canvas {left: auto;}
.other-episodes-wrap {overflow:auto !important;position:relative;display:block;}

.other-episodes-actions {
    display:flex;align-items: center;margin-bottom:2vh;
}
.oe-layout {margin-left:auto;text-align: right;}
.oe-layout img {height:3vh;cursor:pointer;display: inline-block;}

.more-episodes-select {display:block;margin: 1vh 0 2vh 0;position:relative;overflow:hidden;white-space:nowrap;}


.other-episodes.lot-of-episodes {
    overflow:auto;max-height:80vh;
}

.watching-now .cover-img::before {
    position:absolute;top:0;left:0;width:100%;height:100%;content:"Currently Playing";
    font-size:20px;font-family:fjalla one,sans-serif;color: var(--c-white);
    display:flex;z-index:100;align-items: center;justify-content: center;
}
.watching-now .cover-img::after {
    position:absolute;top:0;left:0;width:100%;height:100%;content:"";
    background: 
        linear-gradient(to top right, var(--s5-bg), var(--s3-bg)),
        linear-gradient(to top, var(--s3-red), var(--s0-red));
}


.tag-available {
    padding: 0.5vh 1vh;border-radius:1vh;background-color: var(--c-lbg);cursor:pointer;margin-right:0.5vh;
}
.active-tag {background-color: var(--c-red) !important;}


.episode-info {margin-top: 4vh;}

.actions {display:block;position:relative;margin: 2vh 0;}
.actions .icon-im {margin-right: 1vh;display: inline-block;vertical-align: middle;height:3vh;}
.action {margin-right: 6vh;cursor: pointer;}

.tag {
    padding: 8px 12px;border-radius:8px;background-color: var(--c-lbg);margin: 0 1vh 1vh 0;
    text-transform: capitalize;
}
.tag * {color: var(--c-white);}




.played-video .episode-info{margin-top: 14vh;}
.played-video .episode-info, .played-video .comments-section
{width: var(--main-w);margin-left: var(--main-p);}



.top-left-pop {
    position:fixed;top:1vh;left:1vh;
    z-index:900;
}
.video-log, .add-action {
    padding:2vh;border-radius:var(--b-radius);
    background-color: var(--c-lbg);max-height: 60vh;overflow: auto;
}
.video-log h5 {margin-bottom: 2vh;}
.video-log h5:last-of-type {margin-bottom: 0 !important;}

.add-action {display: none;margin-top: 2vh;}
.add-action .mov-bet {margin: 0 2vh;}
.add-action input[type="text"] {font-size:18px;box-sizing: border-box;padding: 2vh 0;width:100%;}

.add-action {min-width: 10vw;}
.flex-actions {display:flex;align-items:center;}
.add-action input[type="submit"] {
    width: auto;padding-left:1vh;padding-right:1vh;
    margin-left: auto;
}
.rs-1 {margin-right: 2vh;cursor: pointer;}





.download-grid {grid-template-columns: repeat(3, 1fr);gap: 5%;}
.download-flex {display:flex;gap:10%;align-items: center;}
.download-flex .in-flex {text-align: left !important;}
.icon-down {width: 15% !important;margin: 2vh 0;}
.icon-down img {width:100%;display:block;}

.download-loading {
    position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;
    background-color: var(--s8-bg);display:flex;
    justify-content: center;align-items: center;
    flex-direction: column;gap: 2vh;
}
.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}
@keyframes dowtext {
    from {content:"Preparing Download...";}
    to {content:"This might take a minute...";}
}
.dow-text-1 {animation: dowtext 1s linear 2s infinite;}

@keyframes bang {
    from {transform: translate3d(0,0,0);opacity: 1;}
}
@keyframes comment-hint {
    0% {bottom: 50%;opacity:0;}
    5% {bottom: 120%;opacity:1;}
    95% {bottom: 120%;opacity:1;}
    100% {bottom: 50%;opacity:0;}
}
.comment-tooltip {
    display:block;bottom: 50%;opacity:0;
    animation: comment-hint 8s ease-in-out;
    animation-delay: 0.5s;
    pointer-events: none;
}
.comment-actions span {
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    width: 3px;
    height: 8px;
    background: red;
    opacity: 0;
}


@media (max-width: 1100px) {
    :root {
        --main-p: 5%;
        --main-w: 90%;
    }
    .rel-when {display:none;}
    .comment-grid {grid-template-columns: 13vw calc(97% - 13vw);gap: 3%;}
    .replied-comment {width: calc(100% - 5vh);margin-left:5vh;}
    .comment-pfp-wrap {width: 12vw;height:12vw;}
    .replied-comment .comment-grid {grid-template-columns:  12vw calc(99% - 12vw);}
    .replied-comment .comment-pfp-wrap {width: 11vw;height:11vw;}
    .comment-wrap {padding-top: 0;}


    .video-box, .played-video {
        grid-template-columns: 100%;gap: 4vh;margin:0;width: 100%;
        border-radius: 0;
    }
    video, .video-box .episode {border-radius: 0;}
    .actions {display:grid;grid-template-columns: repeat(3, 1fr);gap: 1vh;}
    .action {text-align:center;margin-right: 0;padding: 1.5vh 2vh;border-radius:var(--b-radius);background-color: var(--c-lbg);}
    .actions .icon-im {height:2vh;}
    .w-download {grid-column-start: 1;grid-column-end: 4;text-align: center;}
    .w-download .action {width:100%;box-sizing: border-box;}
    #theatre {display: none;}
    .comment-tooltip {display: none;}
    .played-video .episode-info{margin-top: 4vh;}
    .is-fullscreen {width: 100% !important;height:100% !important;object-fit:contain !important;}
    .played-video video:not(.is-fullscreen) {height: auto !important;width: 100% !important;}
    .played-video .side-actions {display: none !important;}

    .select-info {gap: 1vh;}

    canvas {display: none !important;}

    .episode-info, .comments-section, .other-episodes-wrap {width: var(--main-w);margin: 4vh 0 0 var(--main-p);}
    

    .admin-act-bottom {bottom: 10vh !important;}
}