/* BASIC RESET */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

/* HTML ELEMENTS */
body {
    overflow: hidden;
    background-color: #000;
    color: #fff;
    font-family: IBMPlexSans, "Helvetica Neue", "Segoe UI", Helvetica, Verdana, Arial, sans-serif;
}

a {
    text-decoration: none;
    color: #eee;
    font-weight: bold;
}

h3 {
    padding: 0 2px;
    font-weight: bold;
    font-size: 16px;
}

ul li { list-style-type: none; }

/* Generic Styles */

.favicon {
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

.title {
    padding: 2px;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
}

.title .social {
    border-radius: 5px;
    border: 1px solid white;
    padding-top: 1px;
    padding-left: 2px;
    margin-right: 3px;
    white-space: nowrap;
}

.clouds {
    opacity: 0.9;
    background-color: rgba(0, 0, 0, 0.7);
}

.material-symbols-rounded { font-size: 24px; }
.icontoggle { cursor: pointer; }
.right { float: right; }

.origlink i {
    font-size: 18px;
    vertical-align: middle;
}

.icontoggle i,
.title .social i { vertical-align: middle; }

/* Decorate Photo Buttons */
.nbmenu a.image::before { content: "image"; }
a.video::before { content: "movie"; }
a.embed::before { content: "ondemand_video"; }
a.album::before { content: "photo_library"; }
a.later::before { content: "file_download"; }
a.thumb::before { content: "preview"; }
.nbmenu a.thumb::before { content: "insert_photo"; }
a.html::before { content: "message"; }
a.failed { text-decoration: line-through; }
.nbmenu a.failed::before { content: "broken_image"; }

/* Color that decorates NSFW links */
li.show-nsfw a,
.numberButtonList .over18 { color: #f99; }

.multi .favicon,
#titleDiv .favicon {
    height: 16px;
    width: 16px;
}

#refresh { margin-top: -8px; }

/* List of Info Links */
.nbmenu {
    font-size: 14px;
    width: 100%;
}

.nbmenu li {
    text-align: left;
    padding: 2px 2px 0;
    overflow: hidden;
}

.nbmenu li.list-start {
    padding: 0 0 0 3px;
}

.nbmenu li.list-item {
    padding: 0;
}

.nbmenu li.list-end {
    padding: 0 0 0 3px;
}

/* Major Div Styles (navboxes) */
.navbox ul { display: block; }

.navbox ul li {
    display: inline-block;
    vertical-align: middle;
}

.navbox ul li a {
    cursor: pointer;
    height: 18px;
}

.navbox ul li.hidden { display: none; }

.navbox p {
    padding: 20px;
    font-size: 13px;
    color: #111;
}

.navbox p.bottom {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* Album Button Styles */
.numberButton {
    font-size: 12px;
    float: left;
    min-width: 3ex;
    margin-left: 3px;
    text-decoration: none;
    color: #eee;
    font-weight: bold;
    text-align: center;
    line-height: 18px;
    padding: 3px;
    border: 1px solid transparent;
}

.numberButtonList { overflow: hidden auto; }

/* NUMBER BUTTON SLIDE SIZE */
.numberButtonList ul li { width: 30px; }

.numberButtonList ul li a.active {
    color: #0aa;
    box-shadow: 2px 2px 3px #ccc;
}

.numberButtonList ul li a::before { opacity: 0.4; }

/* PICTURES */
#pictureSlider {
    position: static;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#recommend {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#recommend ul { margin-left: 20px; }
#recommend ul .material-symbols-rounded { font-size: 16px; }

.psmulti {
    position: absolute;
    height: 100%;
    transition: all 0.5s ease-in-out;
}

.error,
span a.selected,
li a.selected { color: red; }
.hidden { display: none; }
.topper { z-index: 1; }

#pictureSlider div.fullscreen {
    height: 100%;
    width: 100%;
    position: absolute;
}

/* Selector popup */
hr.split { border: 1px inset; }

/* Info Popup */
#info {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 50%;
}

#info table { width: 100%; }
#info th { text-align: left; }
#info td { text-align: right; }

/* Help Popup */
#help {
    position: absolute;
    top: 0;
    right: 0;
}

#help td:first-child { font-weight: bold; }
#help .title { height: 28px; }

div.progressbar {
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
}

div.progress {
    background-color: red;
    position: absolute;
    height: inherit;
    bottom: 0;
    opacity: 0.6;
}

#circle {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: white;
    position: absolute;
    opacity: 0.6;
}

/* NAVIGATION BOX */
#navigationBoxes { float: left; }
#navboxContents ul li { line-height: 24px; }
#navboxOrigDomain { margin-right: inherit; }

#navboxExtra .social {
    font-size: 12px;
    line-height: 20px;
}

#navboxExtra i.material-symbols-rounded { font-size: 20px; }

#navboxVolume { height: 24px; }

/* Embedded html - vertically center it */
#gfyhtml {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.xorig {
    border: 1px solid white;
    border-radius: 5px;
    margin-left: 2px;
}

#navboxLink {
    display: inline-block;
    width: 24px;
    height: 24px;
}

#controlsDiv {
    position: absolute;
    bottom: 0;
}

#titleDiv {
    position: absolute;
    min-height: 60px;
    overflow: hidden;
    transition: all 1s ease-in-out;
}

#duplicates {
    position: relative;
    clear: left;
}

#duplicatesLink,
#duplicateUl { display: inline; }
#subredditLink { padding-left: 4px; }
#subredditPopup { min-width: 140px; }

#subredditUrl {
    float: left;
    font-size: 12px;
    margin-top: 2px;
    height: 18px;
}

#duplicatesCollapser {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 100;
}

#duplicateUl .info .material-symbols-rounded {
    font-size: 16px;
    vertical-align: text-bottom;
}

.icontristate { appearance: none; }
.inactive { color: grey; }

/* infoLink:   infol infop [infoc]  infod  [infol infop [infoc]] */

/* redditLink: infol infor [infoa] [infoc] */

.info {
    font-weight: bold;
    float: left;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
}

/* info link */
.infol { margin-left: 5px; }
.infoll { margin-right: -3px; }

li.xorig a.infol { margin-left: 3px; }

/* info redditp image */
.infop { margin-left: 5px; }

/* info for reddit image */
.infor { margin-left: 2px; }

/* info date */
.infod { margin: 0 5px 0 10px; }

/* info comment link (between infol and infop */
.infoc { margin-left: 2px; }

label.textlabel { font-weight: bold; }

input.textlabel {
    height: 16px;
    width: 16px;
    text-align: center;
}

#controlsDiv a { position: relative; }

#controlsDiv a::before {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
}

#navboxDuplicatesMulti,
#navboxDuplicatesMultiP,
#controlsDiv label {
    height: 24px;
    display: inline-block;
}

div.score {
    position: absolute;
    background-image: url("images/upvote.svg");
    opacity: 0.4;
    z-index: -1;
    height: 24px;
    width: 24px;
    bottom: -20px;
    left: 10px;
}

#navboxTitleWrapper { padding: 0 28px 0 0; }
#albumNumberButtons { border-top: 2px solid grey; }
#navboxScore { position: relative; }
#subredditForm label { width: 24px; }

#navboxTitle {
    max-height: 15vh;
    overflow: scroll;
}

#navboxScore span {
    width: 34px;
    text-align: center;
}

#albumCollapser {
    position: absolute;
    top: 0;
    right: 30px;
}

#controlsCollapser {
    position: absolute;
    top: 0;
    right: 0;
}

.linkflair .emoji {
    height: 16px;
    width: 16px;
    vertical-align: top;
    margin: -1px 0;
}

.linkflair {
    border: 1px solid grey;
    border-radius: 5px;
    float: left;
    font-size: 10px;
    font-weight: normal;
    margin: 0 1px;
    padding: 2px;
}

.redditp {
    height: 24px;
    width: 24px;
    vertical-align: top;
}

/* Computed width: 28px */
.collapser {
    border: solid 1px #555;
    font-size: 20px;
    font-family: monospace;
    color: #bbb;
    float: right;
    cursor: pointer;
    height: 28px;
    min-width: 28px;
    line-height: 24px;
    text-align: center;
}

.count {
    font-size: 16px;
    display: block;
    margin-top: 4px;
}

#leftArrows { left: 10px; }
#rightArrows { right: 10px; }

.arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.prevArrow { border-right: 30px solid white; }

.nextArrow {
    border-left: 30px solid white;
    margin-bottom: 10px;
}

.arrow {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    opacity: 0.8;
    cursor: pointer;
}

label.checkbox { font-weight: bold; }

.checkbox {
    cursor: pointer;
    background: transparent;
    color: white;
}

input[type="checkbox"] { display: none; }
input[type="checkbox"]:checked + label.colortoggle { color: red; }

input[type="text"] {
    border: 1px dashed;
    background-color: black;
    color: white;
}

.fullsize,
.fullscreen {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.realsize {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#choiceLi { margin: 0 20px 0 -48px; }

ul.tagCategory { display: none; }
input.control:checked ~ ul.tagCategory { display: inline; }

#choiceLi input:checked ~ #subredditPopup {
    left: 24px;
    display: block;
}
#choiceLi ul li.multi { display: inline-block; }

#choiceLi div {
    display: none;
    position: absolute;
    bottom: 100%;
}

#choiceLi a {
    display: block;
    margin-top: 2px;
}

#choiceLi ul li {
    display: block;
    padding: 0;
}

/* User Login */
#loginLi div {
    display: none;
    position: absolute;
    bottom: 100%;
}

#loginLi a { display: inline-block; }

/* MULTI-REDDITS */
#multiListDiv {
    left: 0;
    padding-bottom: 5px;
}

#multiListDiv .icon {
    font-size: 24px;
    display: inline-block;
    margin-top: 4px;
}

#multiListDiv ul { padding-top: 4px; }

#multiListDiv ul li {
    padding: 0 2px 2px;
    overflow: visible;
}
#loginLi input:checked ~ #multiListDiv { display: block; }
#loginLi.use-hover:hover div { display: block; }

/* PLAY BUTTON */
#playbutton {
    top: 45%;
    left: 45%;
    z-index: 10;
    display: block;
    position: absolute;
    width: 10%;
    height: 10%;
    text-align: center;
    vertical-align: middle;
}

#playbutton i.material-symbols-rounded {
    font-size: 60px;
    opacity: 0.7;
}

#playbutton a {
    display: block;
    clear: both;
    border: 1px solid transparent;
}

blockquote.tiktok-embed {
    max-width: 605px;
    min-width: 325px;
}

#multiListDiv ul.iconrow a { height: 18px; }

#navboxContents ul.nbmenu a {
    height: 24px;
    display: inline-block;
}

/* Collapser Animations */
.slide-in {
    max-height: 1000px;
    left: 0;
}

.vslide {
    overflow: hidden auto;
    transition: all 0.5s ease-in-out;
}

.vslide-closed { max-height: 0; }
.vslide-opened { max-height: 500px; }