@charset "UTF-8";

/* Variables */

:root {
    --theatre-primary-default: #86bc3b;
    --bg-light-stars: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAD1BMVEXz9/nt8/X8/Pzw9ff3+fsdudtwAAABK0lEQVRIx+2UUYrEIBBEzcQDpPECjXgAw1xAhtz/TLtGo93lSvZrYGDqI6HhpVKSdJn3aY03wLLp2TIAu9PzAwEiPb88RCDSITwAC5EKYb1nHYHIqQgaWJ/0q2eUEbwXTze54n/4U0caACr5uuoJmrby/qaAFmXuQKoZhYGyCBjzmpVBs2gGzYLNDLBgcA8sfwMMAGRAQHyuEdjzCTXAVgP5KgHOl9CBcqP2scOJdQB1XLevRqWbvngw9gUCYdIXs3UnGoA09AWuO/YFAgH7At6gQ7Q9a3VQC6HXiagU7AMSMtAHXAPCuksDbRGhDxgKxWEfXDMYjKu2g4Gxk0K5AyICPHXADMs/ASeBZPUptlUCr5zPit7M7qsE0hm1A/GM6vCXt9cc62HMp+gHHIo+P3KnB8oAAAAASUVORK5CYII=);
    --bg-dark-stars: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAACVBMVEUvMTYsLjMyNTlqJR8eAAAA0UlEQVQ4y9WSQQqDMBBFf4RAcZ99lyWnyBGyyNzHo7gsOWWZ/HQwDSIUuuggfHz6J4gP341LZ2Dr6TNzmcDeQSjMdQLPDkSYsYMgUggqn7fRRq37EdQ2bLRO1Hvd4hXk1mDHKUjAomB7L9FUMBwbucIAj70CYyWeg+yFH7sSCECwLQQZ8JoPvf5jqAU1mIFpQQ3OQMGHBhOQDmodxRktMC/ME/PC3qAX5ol5YZ7YUvPEfqHpSQ0uwFiJ12BfCUoQAqABSY7gDtw0CxBwnAQ4/GZeZdl6cwu93uMAAAAASUVORK5CYII=);
    --bg-frog-star-green-trans: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsBAMAAADsqkcyAAAAMFBMVEUAAACh0Cay2U2azReWyw2SyQOYzBGTygefzyKdzh6czhuo1Tel0zCv2Eer1j6n0zTD6oDhAAAAAXRSTlMAQObYZgAAAWVJREFUKM9tkrFKw1AUhv/UNtXikEtFW6dwHVVohe4pxl0Rh+IScbCL0C6CWx/B4gsogvgCTi7FB3DQ1xAEV0E8x3uS3OTmJ4HDx+Ef7ncAjNqHMAmU8iBpjDsHLt5/UqrzMAFHUQRf82xqPB4D6bineYB/HPCfr29KB+O0ZUTbkVQDhfIEpjugT/D49qTfk22O4AvgCoXE+aihs/klm2o1HYYy+zqpwqf6GQgM1lob7P3S+IWeqeaAsySjwfJTLol+SDUjaWkRvklxyH/WQs3SjbRwmfAs3abI9upO/LpAIc0JbUeoz/jhs6dH6w6o0D3dqMKNeZellnSfz5XqPgIl3UMe11DW3WQcwdE9lOWS7mmOjyzdZ0qtA47u/uC4DVe3ewT4qTyCuo4c26Lbwd7bu979tI9A/HHMq9rm92jcso/A7K9kAms29lm3dQQo65YjEN3b8ffCOgLR7SXw5b0c3dYR/AG01j4iNgQQbgAAAABJRU5ErkJggg==);
    --default-loadpulse-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAC91BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+GvDv////dHTEiIiLy8vJvnDEAAACur67///6EujqAsznl79x0ojWHvT2CtzojJCJ2pTTY58vS5MLt7OzXHC/8/vv6/Pl6qzZrlTKzCRr4+/WRwlXp8uKkynp4qDZLZipJYyn2+fLz9+7s8+av0I6sz4rbHDAmKCTx8fHw7+/e69K31Zp9sDfTGy7MFig5SibH3bJAVSfE3K5mjjFhhy8oLCPW1tbIyMjExMTO4b3L37eYxGNtmTLMHS9Vdiw8TybFEyXh7dbB2qqgyHOVw16Mv0iLvkVxnjRkizC3Cxzw9urb6c6amZmozIJyoDNPbCulHyvRFyqDICcrMiPR0dHCv7+9vb25ubisrKznpKey0pOMjIyaxWeOwFB7rTfHHi5ScSueHikwOyS7DR/p6end3d3Z2dnNy8uzs7K61p9fgy5afC1aIiXv29zfTleJvkFFXSh1ISYvIiLk5OTi4uLu1teUkZLicXZfW1tdgC7DHS2pHSrAECHw8PDx6enrxcfora+/2aemzH9gYGBYVFXfN0VvmzQ0MDBOISTy8fHe2dnt0dK5tLS+2KWopKShoaHmlpnkjJGHg4ObxmtRUVFNTU3fQk1EREQtLS2uHyuSICg1RCXw4+Te3t7qvr/puLrjg4jjfYJ/f390dHRxcXFubm5oaGhokjC3HyxCIiM2IiPm5ubf3994bG3hX2bdITTv3+Dszc4/Pz9xnTS+Hi2zHyxqGR9HBAp5eXlMQUI9PT04ODjeJTeTEB0YAQKonJxzR0nSLTqADRkKCgrYbPAmAAAAOXRSTlMABfYJ+/LdkIpz67SfGuLJdlNGPCgVEAK4GO7OJR3v3tDKxb2rqZeDfnhqYVlNQjcuJNLP1dShhIFdUnQpAAATFUlEQVR42tTVS08aURgG4DNc5CJeQFAq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);
    /* Froggies */
    --header-frog-popular: url(/theatre_assets/images/header/popular.png);
    --header-frog-hot: url(/theatre_assets/images/header/hot.png);
    --header-frog-news: url(/theatre_assets/images/header/news.png);
    --header-frog-spotlight: url(/theatre_assets/images/header/spotlight.png);
    --header-frog-ranking: url(/theatre_assets/images/header/ranking.png);
    --header-frog-recent: url(/theatre_assets/images/header/recent.png);
    --header-frog-comments: url(/theatre_assets/images/header/comments.png);
    --header-frog-random: url(/theatre_assets/images/header/random.png);
    --header-frog-music: url(/theatre_assets/images/header/music.png);
    --header-frog-fans: url(/theatre_assets/images/header/fans.png);
    --header-frog-trophies: url(/theatre_assets/images/header/trophies.png);
}


/* Global */

html {
    -webkit-font-smoothing: antialiased;
}

div.profile-left {
    float: left;
}

div.profile-right {
    padding: 0 0 0 4px;
}

img.flipnote-view-profimg {
    display: inline;
    border: 1px solid #dedede;
}

a {
    color: #428bca;
}

body {
    margin: 0 auto;
    padding: 5em 1em 1em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    /* 1.2em */
    color: #545454;
    /*
		display: flex;
		flex-direction: column;
		min-height: 100vh;
*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1.3em;
}

b,
strong {
    font-weight: 600;
}

img {
    background: transparent;
    display: block;
    margin: auto;
    max-width: 95%;
    -webkit-animation: colorize 2s cubic-bezier(0, 0, 0.78, 0.36) 1;
    animation: colorize 2s cubic-bezier(0, 0, 0.78, 0.36) 1;
}

table,
td,
th {
    border: none;
}

a.navbar-brand {
    padding: 0px;
    content: url(https://www.sudomemo.net/theatre_assets/images/sudomemo_logo_green.svg);
    margin-top: -3px;
    height: 55px;
    width: 145px;
    margin-left: 10px;
}

.navbar-profile-pic {
    width: 21px;
    display: inline;
    border-radius: 50px;
    border: 1px solid #fff;
    padding: 1px;
}


/* Some changes to make the frog work... might remove this if we switch to a better frog method */

.navbar-custom .navbar-nav li a i {
    font-size: 18px;
}

.navbar-custom .navbar-nav li a i.sf {
    font-size: 20px;
}

.nav-item.navbar-frog-container:hover .frog {
    stroke: var(--theatre-primary);
}

.navbar-frog {
    width: 23px;
    margin-bottom: 2px;
}

.navbar-custom .navbar-toggler:hover,
.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:active {
    outline: none;
}

@media (max-width: 768px) {
    a.navbar-brand {
        margin-top: 3px;
    }
    li.dropdown.nav-item>ul.dropdown-menu {
        border: none;
    }
}

ul.dropdown-menu.show li.dropdown.nav-item>ul.dropdown-menu>li.dropdown-item {
    padding: 0px;
}

ul.dropdown-menu li.dropdown-item {
    padding: 0px;
}

li.dropdown.nav-item>ul.dropdown-menu>li.dropdown-header {
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}

li.dropdown.nav-item>ul.dropdown-menu {
    padding: 0;
}

.dropdown-menu {
    border-radius: 0;
}

.gs {
    color: #81c106;
}

.wd {
    color: #e47226;
}

.sd {
    color: #ab8d4c;
}

.sk {
    color: #4488e4;
}

.cs {
    color: #2c2182;
}


/* Force min-height of navbar */

@media (max-width: 575.98px) {
    div.navbar {
        min-height: 60px;
    }
}

@media (min-width: 576px) {
    div.navbar {
        min-height: 52px;
    }
}

.navbar-custom .navbar-text {
    color: #2e2e2e;
}

.navbar-custom .navbar-nav li a {
    font-size: 15px;
    /* font-weight: 800; */
    padding: 12px 15px 12px 15px;
}

.navbar-custom .navbar-nav .disabled a,
.navbar-custom .navbar-nav .disabled a:hover,
.navbar-custom .navbar-nav .disabled a:focus {
    color: #ccc;
    background-color: transparent;
}

.navbar-custom .navbar-toggler {
    border-color: #fff;
    padding: 8px 10px 9px 10px;
    margin-right: 15px;
    color: #fff;
}

.navbar-custom .navbar-toggler:hover,
.navbar-custom .navbar-toggler:focus {
    background-color: #ddd;
}

.navbar-custom .navbar-toggler .icon-bar {
    background-color: #fff;
}

.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
    border-color: #fff;
}

@media (max-width: 767px) {
    .navbar-custom .navbar-collapse,
    .navbar-custom .navbar-form {
        border-top: 1px solid #fff;
    }
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.navbar-custom .dropdown-menu li a {
    font-size: 13px;
    display: block;
    margin: 0px;
}

.navbar-custom .navbar-link {
    color: #fff;
}

.navbar-custom .navbar-link:hover {
    color: #172e09;
}

.navbar {
    border-bottom: 2px solid white;
}


/* On mobile, fix scrolling and max-height for navbar */

@media (max-width: 767px) {
    .navbar-collapse {
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .collapsing {
        overflow-y: hidden;
        overflow-x: hidden;
    }
}

.color-facebook,
.share-color-facebook {
    color: #3b5998;
}

.color-twitter,
.share-color-twitter {
    color: #55acee;
}

.color-tumblr,
.share-color-tumblr {
    color: #35465c;
}

.color-reddit,
.share-color-reddit {
    color: #ff5700;
}

.share-color-link {
    color: #428bca;
}

.color-sudomemo {
    color: #db611d;
}

a.color-sudomemo {
    color: #db611d;
}

.social-share-button {
    width: 32px;
    height: 32px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    text-align: center;
    color: white;
    border-radius: 3px;
    padding-top: 4px;
    font-size: 18px;
    cursor: pointer;
}

#share_url_copy,
#embed_code_copy {
    cursor: pointer;
}

.copy-input-transition {
    transition: background-color 0.5s ease;
}

.sbc-fb {
    background-color: #3b5998;
}

.sbc-twitter {
    background-color: #55acee;
}

.sbc-tumblr {
    background-color: #35465c;
}

.sbc-reddit {
    background-color: #ff5700;
}

.sbc-pinterest {
    background-color: #c8232c;
}

.sbc-whatsapp {
    background-color: #25d366;
}

.card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 7px;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.bg-light-stars {
    background-image: var(--bg-light-stars);
}

.bg-dark-stars {
    background-image: var(--bg-dark-stars);
}

span.card-title {
    font-size: 16px;
}

.card-header {
    padding: 10px;
}

.panel-common>.card-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-common>.card-body {
    background-color: #fff;
}

.panel-common>.card-footer {
    font-size: 12px;
    text-align: right;
    background-color: #fff;
    padding: 2px 15px;
    border: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.panel-header-only>.card-header {
    border-radius: 5px;
}

.panel-body-only>.card-body {
    border-radius: 5px;
}

.panel-notice-closed {
    display: none;
}

.panel-notice .card-header {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAKElEQVQImWP09fVlYGA4tHMnAwMDE5xl5+7OyM/GBmFBZSCsQzt3AgAL8AoJAtCiQQAAAABJRU5ErkJggg==);
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-notice .close-icon {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    float: right;
}

.panel-notice .card-body {
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.panel-body-only>.card-body {
    background-color: #fff;
    border-radius: 5px;
}

.panel-comments>.card-header {
    color: #fff;
    background-color: #85a600;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-comments>.card-body {
    background-color: #fff;
}

.panel-comments>.card-footer {
    border: none;
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-badges {
    float: right;
    margin-right: 15px;
}

.user-badges li {
    float: left;
}

.sharing-icons {
    list-style: none;
    float: right;
}

.sharing-icons li {
    float: left;
    padding: 2px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flipnote-grid,
.grid-body {
    margin-bottom: 10px;
    background: transparent;
}

.flipnote-grid .grid-footer {
    text-align: right;
    background: transparent;
}

ul.flipnote-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: center;
}

ul.flipnote-list>li.flipnote-list-item {
    position: relative;
    background-color: rgba(256, 256, 256, 0.5);
    border: none;
    background-color: #fff;
    border-radius: 8px;
    padding: 0;
    overflow: clip;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-thumb>a {
    height: 122.25px;
    width: 149px;
    text-decoration: none;
    color: #100;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-thumb {
    min-height: 107.25px;
    /*border-bottom: 1px solid #f3f3f3;*/
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-thumb>a>img {
    margin: 0;
}

ul.flipnote-list li.flipnote-list-item img.thumb {
    margin: 7px 8px 0 8px;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-info {
    font-size: 75%;
    padding: 2px 8px;
    line-height: 20px;
    height: 24px;
    display: flex;
    flex-direction: row;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-info>span.username {
    display: block;
    width: 60%;
    float: left;
    text-align: left;
    flex: fit-content;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-info>span.spinoff {
    padding-left: 3px;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-info>span.spinoff>img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: inline;
    vertical-align: middle;
}

ul.flipnote-list>li.flipnote-list-item>div.flipnote-item-info>span.starcount {
    font-weight: bold;
    color: #f58206;
    margin-top: 1px;
}

@media (max-width: 344px) {
    div.thumb-container {
        min-height: unset;
    }
    ul.flipnote-list {
        grid-template-columns: repeat(auto-fill, 41vw);
    }
}

ul.commentlist .comment {
    background-color: #efefef;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 10px;
}

ul.commentlist .name {
    font-weight: bold;
    margin-right: 4px;
    vertical-align: middle;
}

ul.commentlist .time {
    font-size: 12px;
}

ul.commentlist li.comment span.comment-text {
    padding: 0px 8px 0px 8px;
}

ul.commentlist li.comment span.comment-text p {
    margin-bottom: 0px;
}

#header-locale-selector ul {
    text-align: center;
}

.footer-text {
    font-size: 13px;
    font-weight: 600;
}

table.info {
    font-size: 16px;
    margin-top: 10px;
    font-weight: 600;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    empty-cells: show;
}

table.info td {
    padding: 4px;
}

table.info span {
    border-radius: 3px;
    padding: 3px 10px;
    color: #fff;
    font-size: 80%;
}

span.normal {
    background-color: #8e8e8e;
}

td.normal-data {
    color: #8e8e8e;
}

span.stars {
    background-color: #f58206;
}

td.stars-data {
    color: #f58206;
}

span.flipnotes {
    background-color: #ff9c4b;
}

td.flipnotes-data {
    color: #ff9c4b;
}

span.creators {
    background-color: #abdb0c;
}

td.creators-data {
    color: #abdb0c;
}

span.comments {
    background-color: #85a600;
}

td.comments-data {
    color: #85a600;
}

span.follow {
    background-color: #f5487d;
}

td.follow-data {
    color: #f5487d;
}

span.cost {
    background-color: #db611d;
}

td.cost-data {
    color: #db611d;
}

span.downloads {
    background-color: #48b2f5;
}

td.downloads-data {
    color: #48b2f5;
}

span.flipnote-id {
    background-color: #5870eb;
}

td.flipnote-id-data {
    color: #5870eb;
}

.page-counter {
    float: right;
}

.info-buttons {
    border-top: 2px solid #efefef;
    margin-top: 6px;
    padding-top: 6px;
}

.info-buttons table {
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    border-spacing: 0;
}

.info-buttons span {
    float: right;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 80%;
}

.info-buttons span a {
    color: #fff;
}

.btn-custom {
    background-color: #fff;
    color: #81c106;
    border: solid 1px #81c106;
}


/* The next three rules have to do with some fun HTML layout trickery we're doing to enable the sticky player on mobile */


/* NOTE: the sticky player is currently disabled due to cross-device viewport issues, but we've left these layout changes in case we want to re-enable it */

@media (max-width: 575.98px) {
    .flipnote-player-card {
        border-top: 0 !important;
    }
}

.flipnote-player-card,
.flipnote-player-card>.card-body {
    border-bottom: none !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: none;
    padding-bottom: 0px !important;
}

.flipnote-details-card,
.flipnote-details-card>.card-body {
    border-top: none !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    padding-top: 0px !important;
}

.btn-custom-active {
    background-color: #81c106;
    color: #fff;
    border: solid 1px #81c106;
}

.fsid {
    text-transform: uppercase;
    font-size: 11px;
    font-style: italic;
}

.channel-item span.flipnotes {
    font-weight: bold;
    float: right;
    border-radius: 3px;
    padding: 3px 10px;
    color: #fff;
    font-size: 70%;
}

.channel-item .channel-flipnotes {
    margin-top: 15px;
}

.channel-item img.thumb {
    border: 1px solid #c2c2c2;
    width: 64px;
    height: 48px;
}

.welcome-frog {
    stroke: #86bc3b;
}

.welcome-to {
    font-family: "Arial Rounded MT Bold", Helvetica Neue, Helvetica, sans-serif;
    padding-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.welcome-to h3 {
    color: #fff;
    font-size: 22px;
    margin-top: 0;
}

.welcome-to h4 {
    color: #fff;
    font-size: 16px;
    margin-top: 0;
}

.welcome-user-preview-profile-image img {
    width: 80px;
    border-radius: 10px;
    border: 3px solid #e0e0e0;
}

#welcome-user-preview-stats-2 .star-span {
    margin-right: 4px;
}

#welcome-user-preview-stats-2 .star-span:last-child {
    margin-right: 0px;
}

.about-sudomemo {
    border: 1px solid #dfeef2;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    font-weight: bold;
    flex: 1;
}

.about-sudomemo p {
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 8px;
    border-radius: 5px;
    border: 3px solid #efefef;
}

.about-sudomemo .room {
    display: inline-block;
    width: 85%;
    color: #81c106;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #81c106;
    border-radius: 5px;
    margin-bottom: 10px;
}

.about-sudomemo .little {
    display: inline-block;
    width: 13%;
    color: #81c106;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #81c106;
    border-radius: 5px;
    margin-bottom: 10px;
}

.about-sudomemo .big {
    display: block;
    color: #81c106;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #81c106;
    border-radius: 5px;
    margin-bottom: 10px;
}

.about-sudomemo .left,
.about-sudomemo .right {
    background-color: #fff;
    border: 3px solid #81c106;
    border-radius: 5px;
    color: #81c106;
    display: inline-block;
    font-size: 16px;
    padding-bottom: 6px;
    padding-top: 6px;
    text-align: center;
    width: 48%;
}

.about-sudomemo .right {
    float: right;
}

.about-sudomemo a:hover {
    text-decoration: none;
}

.card-body.panel-welcome {
    background-color: var(--theatre-primary);
}


/* filmstrip */

.filmstrip {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEUAAAD9+f//+vKyNnkwAAAAA3RSTlMA+cXUBqgVAAAAH0lEQVQI12NAB1PDGBiYQkMbGBhDQx1wEmAlYMVoAACAbQmxPJIZAAAAAABJRU5ErkJggg==) repeat;
    -webkit-animation: filmstrip-scrolling 120s linear infinite;
    -moz-animation: filmstrip-scrolling 120s linear infinite;
    -o-animation: filmstrip-scrolling 120s linear infinite;
    animation: filmstrip-scrolling 120s linear infinite;
}

.filmstrip {
    height: 16px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

@-webkit-keyframes filmstrip-scrolling {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0% 0;
    }
}

@keyframes filmstrip-scrolling {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0% 0;
    }
}

div#frog1 img,
div#frog2 img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.panel-welcome .social-icons {
    list-style-type: none;
    float: left;
}

.panel-welcome .social-icons li {
    float: left;
    margin-right: 5px;
}

img {
    max-width: 100%;
}

body>.row {
    max-width: 520px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    body>.row {
        max-width: 860px;
        margin: 0 auto;
    }
    .col-md-6.col-lg-8 {
        width: 100%;
    }
    .col-md-6.col-lg-5 {
        width: 60%;
    }
    .col-md-6.col-lg-3 {
        width: 40%;
    }
}

@media (min-width: 1200px) {
    body>.row {
        max-width: 1045px;
        margin: 0 auto;
    }
    body>.row>.col-lg-offset-2 {
        margin: 0;
    }
    body>.row>.col-lg-8 {
        width: 100%;
    }
    body>.row>.col-lg-5 {
        width: 65%;
    }
    body>.row>.col-lg-3 {
        width: 35%;
    }
    /*
  .flipnote-container img {
      width: 512px;
      box-sizing: content-box
  }
  */
}

.card,
.advert {
    padding: 0;
    height: auto;
}

.card {
    background-color: rgba(192, 192, 192, 0.7);
}

.card>*:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.card>*:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

ul.flipnote-list li img.thumb {
    width: 100%;
    height: auto;
    max-width: 256px;
    margin: 0 auto;
    padding: 0px;
}

.sharing-icons {
    padding: 0 6px;
}

.sharing-icons a i {
    font-size: 30px;
    padding: 0 1px;
}

.info {
    table-layout: fixed;
}

.info span {
    width: 90%;
    display: inline-block;
}

.info tr td:nth-of-type(2n) {
    text-align: right;
    width: 40%;
}

.advert {
    border-radius: 6px;
    overflow: hidden;
}

.advert table {
    width: 100% !important;
}

.advert a {
    display: block;
    color: #6d6d6d !important;
    line-height: 24px !important;
}

.advert td>a {
    padding: 3px;
}

.advert img {
    display: block;
    width: 100%;
}

.about-sudomemo {
    font-family: "Arial Rounded MT Bold", Helvetica Neue, Helvetica, sans-serif;
}

.about-sudomemo p {
    font-weight: normal;
}

.about-sudomemo .big {
    font-size: 18px;
}

@media (max-width: 560px) {
    /*
  ul.flipnote-list li:nth-of-type(2n) {
    margin-right: 0
  }
  */
    .sharing-icons {
        margin: 4px;
    }
}

.panel.panel-special {
    border: 3px solid #d68220;
    background-color: #fff;
    box-shadow: 0 0 0 3px #fff;
    margin: 3px;
    margin-bottom: 24px;
    padding: 0;
}

.panel.panel-special .card-header {
    color: #d68220;
    padding: 10px 12px;
    margin: 0;
    border-bottom: 1px solid #d68220;
}

.panel.panel-special .card-body {
    padding: 16px 12px;
    color: #d65920;
    font-size: 1.125em;
}


/* Sudoplayer Fixes */

.flipnote-container {
    /* slightly rounded corners on player */
    border-radius: 6px;
    overflow: hidden;
}

.player__video {
    width: -webkit-fill-available;
    width: -moz-available !important;
}

.player__stage {
    width: -webkit-fill-available;
    width: -moz-available !important;
    height: fit-content;
    height: -moz-fit-content !important;
}

.player {
    width: -webkit-fill-available;
    width: -moz-available !important;
}

.player__controls .controls__frameCounter {
    font-family: sans-serif;
    font-size: 18px;
}


/* Search page badges */

.search--resultcount {
    margin-left: 4px;
    border-radius: 24px;
    background-color: #fff;
    color: var(--theatre-primary);
    padding: 5px 8px;
    vertical-align: text-bottom;
}

.search--viewmore {
    float: right;
}

.search--viewmore>a,
.search--viewmore:active>a {
    color: white;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.has-search input::placeholder {
    font-style: unset;
    font-size: 16px;
}

.search-badge {
    font-weight: bold;
    border-radius: 3px;
    padding: 3px 5px;
    color: #fff;
    font-size: 70%;
    margin-left: 3px;
}

.search-badge-flipnotes {
    background-color: #ff9c4b;
}

.search-badge-follows {
    background-color: #ed4956;
}

.search-badge-stars {
    background-color: #f6b64a;
}

div.flipnote-options {
    overflow: auto;
}

div.flipnote-title-name {
    width: fit-content;
    width: -moz-fit-content;
}

div.flipnote-description {
    margin: 4px 12px 0 12px;
    padding: 10px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #efefef;
    color: #666;
    word-break: break-word;
}


/* FontAwesome upgrade fix for main page */

ul.social-icons span.fa-stack {
    width: 2em !important;
}

ul.social-icons .fab.fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

ul.social-icons>li>a>.fa-stack>i.color-background {
    border-radius: 8px;
    overflow: clip;
    color: white;
    width: 20px;
    height: 25px;
    margin: 1px 0 0 4px;
}

.starcolor-yellow {
    color: #f6b64a !important;
}

.starcolor-green {
    color: #2ba516 !important;
}

.starcolor-red {
    color: #f14b60 !important;
}

.starcolor-blue {
    color: #21bdfe !important;
}

.starcolor-purple {
    color: #bb2ad0 !important;
}


/* Comment Section */

ul.commentlist>li.comment>span.name img.thumb {
    border: 1px solid #c2c2c2;
    width: 49px;
    height: 49px;
    float: left;
    margin-right: 4px;
    border-radius: 5px;
}

ul.commentlist>li>div.comment-container {
    overflow: hidden;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}


/* fix for flipnotes being too close to each other */

ul.flipnote-list li {
    box-shadow: 2px 3px 3px -4px black;
}

.dropdown-menu {
    min-width: 200px !important;
    /* bootstrap override */
}

.dropdown-header {
    font-size: initial !important;
    color: initial !important;
}


/* Loading pulser */

.wf-loading>body>*:not(.show-during-boot) {
    display: none;
}

.wf-loading>body>div.navbar>* {
    opacity: 0;
}

.wf-active div.loadpulse-container {
    display: none;
}

.loadpulse-circle,
.loadpulse-container,
.loadpulse-ring {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadpulse-container {
    width: 100%;
    height: 100%;
}

.loadpulse-circle {
    width: 100px;
    height: 100px;
    background: transparent;
    position: relative;
    border-radius: 50px;
}

.loadpulse-ring {
    width: 82px;
    height: 82px;
    border: 6px solid var(--theatre-primary);
    border-radius: 50%;
    position: absolute;
    animation: load-pulse infinite ease-in-out 3s;
}


/* We can override the image with themes */

div.loadpulse-circle>span.loadpulse-image {
    background: var(--default-loadpulse-image) no-repeat;
    width: 100px;
    height: 100px;
    background-size: contain;
}

@keyframes load-pulse {
    0% {
        transform: scale(1, 1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.3, 1.3);
        opacity: 0;
    }
}


/* Weekly Topic Banner */

a.topic-banner {
    /* display block so that we can apply a background on it for the dark/light theme */
    display: block;
    border-radius: 6px;
}

a.topic-banner>img {
    border-radius: 6px;
}


/* Sudomemo SVG Logo Defaults */

#sudomemo-welcome-logo {
    width: 60%;
    margin-right: auto;
    margin-bottom: 1px;
}


/* Default */

.sudomemo-logo-svg-outline {
    fill: black;
}

.sudomemo-logo-svg-fill,
.sudomemo-logo-svg-play-button {
    fill: white;
}

.sudomemo-logo-svg-play-button {
    stroke: black;
}

.sudomemo-logo-svg-play-button {
    stroke-miterlimit: 10;
    stroke-width: 13px;
}


/* Webfont */


/* TODO: We should not need to use !important to make this work - update the old main.css stuff */

.theme-body {
    font-family: "fot-seurat-pron", sans-serif !important;
}

body,
h1,
h2,
h3,
h4,
h5,
div,
span,
p {
    font-family: "fot-seurat-pron", sans-serif !important;
}


/* css from profile */

.profile-details {
    border: 1px solid var(--theatre-primary);
    border-radius: 5px;
    padding: 4px;
}

ul.recent-channel-list li {
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
    zoom: 1;
    padding-top: 5px;
}

ul.recent-channel-list li a {
    text-decoration: none;
}


/* Profile Trophy List */

ul.profile-trophy-list {
    justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
}

ul.profile-trophy-list li {
    display: inline-block;
    margin: 1px 1px 5px 1px;
}

ul.profile-trophy-list li img {
    height: 48px;
    width: 48px;
    border-radius: 2px;
}


/* Profile Fan Sample */

ul.profile-fan-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

ul.profile-fan-list li {
    display: inline-block;
    margin: 2px 2px 5px 2px;
}

ul.profile-fan-list li img {
    height: 30px;
    width: 30px;
    border: 1px solid white;
    outline: 1px solid gray;
    border-radius: 3px;
}


/* Countries stars received from */

div.star-country {
    padding: 0 15px 7px;
}

ul.star-country-flag li {
    display: inline-block;
    height: 21px;
    line-height: 1em;
    margin-right: 5px;
}

div.star-country-index {
    padding-bottom: 5px;
}


/* Recent Comments */

ul.recent-comment-list li img.thumb {
    border: 1px solid #dedede;
    margin-top: 3px;
    width: 64px;
    height: 48px;
    float: left;
    margin-right: 7px;
}

ul.recent-comment-list li span.comment {
    padding-top: 6px;
    padding-bottom: 3px;
    display: block;
    text-align: left;
    word-break: break-word;
    /* fix wrapping issues */
    min-height: 25px;
}

ul.recent-comment-list li span.username {
    font-size: 90%;
    margin-right: 5px;
}

ul.recent-comment-list li span.timestamp {
    color: #999;
    font-size: 80%;
}

ul.recent-comment-list li a {
    text-decoration: none;
}

ul.recent-comment-list li a img {
    margin: 0;
}

ul.recent-comment-list li img {
    margin: 0;
}

ul.recent-comment-list li {
    border-bottom: 1px solid #efefef;
    font-size: 90%;
    padding-bottom: 10px;
    zoom: 1;
    padding-top: 5px;
}


/* Flipnote view page */

a.entry-title>h1,
h2,
h3,
h4,
h5 {
    word-break: break-word;
    font-size: 1.3em;
}


/* Flipnote view page: Related Flipnotes */

.related-flipnote-container .related-preview {
    display: inline;
}

.related-flipnote-container .related-preview>a {
    float: left;
    width: 85px;
    height: 64px;
}

.related-flipnote-container .related-preview>a>img {
    border-radius: 4px;
}

.related-flipnote-container .related-details {
    float: left;
    font-size: 16px;
    margin-left: 10px;
    margin-top: -4px;
}

.related-flipnote-container .related-details>p {
    margin-bottom: 0px;
}

.related-flipnote-container .related-details>span {
    font-size: 14px;
}

.related-flipnote-container .related-details p.related-title {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Spinoff Flipnotes */

div.spinoff-flipnote-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

div.spinoff-flipnote-list div.related-flipnote-container {
    overflow: hidden;
    border-bottom: 1px solid gray;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

div.spinoff-flipnote-list div.related-flipnote-container:last-child {
    overflow: hidden;
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

div.related-stats>span {
    border-radius: 3px;
    color: #fff;
    font-size: 80%;
    padding: 4px;
    margin-right: 5px;
}

div.related-stats>.stats-follows {
    background-color: #f5487d;
}

div.related-stats>span.stats-views {
    background-color: #ff9c4b;
}

div.related-stats>span.stats-downloads {
    background-color: #48b2f5;
}

div.related-stats>span.stats-comments {
    background-color: #85a600;
}


/* New Profile Bar */

.profile-head {
    overflow: auto;
}

#profile-wrapper {
    display: flex;
    width: 100%;
}


/*
.profile-block {
  height: 100%;
}
*/

div.profile-block:nth-child(1)>img:nth-child(1) {
    margin: 10px 10px 10px 10px;
    border-radius: 10px;
    border: 3px solid var(--theatre-primary);
}

.profile-image {
    max-width: 128px;
    order: 1;
}

.profile-user-details {
    flex: 1;
    order: 2;
    margin-left: 24px;
    width: 100%;
}

span.profile-username {
    display: block;
    font-size: 18px;
    width: max-content;
    font-weight: bold;
}

span.profile-username>img {
    display: inline;
    margin-left: 2px;
}

.profile-user-details>h4>img {
    display: inline;
}

.profile-bio {
    word-break: break-word;
}

span.small-caps {
    font-variant-caps: all-small-caps;
}

div.follow-button {
    padding: 10px 10px 10px 0px;
}

div.follow-button button {
    font-size: larger;
    border-radius: 5px;
}

div.profile-block.sort-buttons {
    padding: 10px;
}

.profile-actions {
    /* width: 60%; */
    order: 3;
}

.sort-buttons {
    width: 100%;
}

@media all and (max-width: 470px) {
    #profile-wrapper {
        flex-wrap: wrap;
    }
    .profile-actions {
        /* width: 100%; */
        order: 4;
    }
    .profile-image {
        width: 25%;
        min-width: 128px;
    }
    .profile-image img {
        max-width: 128px;
    }
    .profile-user-details {
        order: 2;
        flex: 1;
    }
}


/* Trending Users */

div.trending-user-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

div.trending-user-list div.related-user-container {
    border-bottom: 1px solid rgb(239, 239, 239);
    margin-top: 10px;
    margin-bottom: 10px;
}

div.trending-user-list div.related-user-container:last-child {
    overflow: hidden;
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

span.ranking-number {
    padding: 8px 10px;
    margin: 7px 10px 7px 7px;
    border-radius: 5px;
    width: auto;
    font-size: 20px;
    font-weight: bold;
}

.rank-1 {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right top, #fedb37 0%, #fdb931 8%, #906f29 30%, #7d6736 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #d29b1e 62.5%, #ffd013 100%);
    box-shadow: 0 0 15px 0 #fdb931;
}

.rank-2 {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right top, #e0d8d8 0%, #f3ebeb 8%, #9c988e 30%, #a7a299 40%, #d0d0ce75 80%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #fdfdf3 8%, #bfbcb3 25%, #eff3f5 62.5%, #fffdf6 100%);
    box-shadow: 0 0 15px 0 #e0d8d8;
}

.rank-3 {
    color: #fff;
    background: radial-gradient(ellipse farthest-corner at right top, #d27f4b 0%, #b79663 8%, #d45f15 30%, #c5672b 40%, #d0d0ce75 80%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #fdfdf3 8%, #d45b0f 25%, #cd6e32 62.5%, #cd6e32 100%);
    box-shadow: 0 0 15px 0 #d27f4b;
}

.rank-4,
.rank-5 {
    color: #fff;
    background-color: #c0d1d9;
}

div.trending-user {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(239, 239, 239);
    padding-bottom: 5px;
}

div.trending-user:last-child {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

div.trending-user>a {
    /* profile pic */
    display: inherit;
    /* flex */
}

div.trending-user>a>img {
    border-radius: 5px;
}

div.trending-user .trending-user-details {
    font-size: 16px;
    margin: 3px 0 0 8px;
}

div.trending-user .trending-user-details>p {
    margin-bottom: 0px;
}

div.trending-user .trending-user-details>span {
    font-size: 14px;
}

div.trending-user .trending-user-details p.trending-user-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Article */

div.bodycontent {
    word-break: break-word;
}


/* Theatre dropdowns for sort menus. */

div.theatre-dropdown-container {
    position: relative;
    /* display: block; */
    display: inline-block;
    width: 140px;
    height: 32px;
    line-height: 2;
    background: #ff00ff;
    overflow: hidden;
    border-radius: 0.25em;
}

div.theatre-dropdown-container::after,
select.theatre-dropdown::after {
    background: var(--theatre-primary);
    pointer-events: none;
    border-left: 1px solid white;
    content: "\25BC";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    color: white;
}

div.theatre-dropdown-container::after {
    padding: 2px 9px 0px 9px;
}

div.theatre-dropdown-container:hover::after {
    color: #f0f0f0;
}

div.theatre-dropdown-container::after {
    -webkit-transition: 0.25s all ease;
    -o-transition: 0.25s all ease;
    transition: 0.25s all ease;
}

select.theatre-dropdown {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0 0 0.5em;
    color: #fff;
    cursor: pointer;
    border: 1px solid var(--theatre-primary);
    background-color: var(--theatre-primary);
}

select.theatre-dropdown::-ms-expand {
    display: none;
}

select.theatre-dropdown::after {
    padding: 0 1em;
}


/* Flipnote Stats (New) */

div#flipnote-stats>ul {
    display: grid;
    grid-column-gap: 16px;
    justify-content: center;
    width: 100%;
}

div#flipnote-stats>ul>li:nth-child(1) {
    grid-area: views;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#flipnote-stats>ul>li:nth-child(2) {
    grid-area: downloads;
    border: 1px solid #48b2f5;
    color: #48b2f5;
}

div#flipnote-stats>ul>li:nth-child(3) {
    grid-area: comments;
    border: 1px solid #85a600;
    color: #85a600;
}

div#flipnote-stats>ul>li:nth-child(4) {
    grid-area: flipnote-id;
    border: 1px solid #5870eb;
    color: #5870eb;
}

div#flipnote-stats>ul>li:nth-child(5) {
    grid-area: channel;
    border: 1px solid #5870eb;
    color: #5870eb;
}

div#flipnote-stats>ul>li:nth-child(6) {
    grid-area: region;
    border: 1px solid #8e8e8e;
    color: #8e8e8e;
}

div#flipnote-stats>ul {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "views downloads" "comments flipnote-id" "channel channel" "region region";
}

@media (min-width: 450px) {
    div#flipnote-stats>ul {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "views downloads comments" "flipnote-id region region" "channel channel channel";
    }
}

@media (min-width: 992px) {
    div#flipnote-stats>ul {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "views downloads" "comments flipnote-id" "region region" "channel channel";
    }
}

div#flipnote-stats>ul>li {
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 10px;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
}

div#flipnote-stats>ul>li>span:first-child {
    color: #fff;
}

div#flipnote-stats>ul>li>span:nth-child(2) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}


/* Profile Stats (new) */

div#profile-stats>ul {
    display: grid;
    grid-column-gap: 16px;
    justify-content: center;
    width: 100%;
}

div#profile-stats>ul>li:nth-child(1) {
    grid-area: rank;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#profile-stats>ul>li:nth-child(2) {
    grid-area: flipnotes;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#profile-stats>ul>li:nth-child(3) {
    grid-area: views;
    border: 1px solid #85a600;
    color: #85a600;
}

div#profile-stats>ul>li:nth-child(4) {
    grid-area: downloads;
    border: 1px solid #48b2f5;
    color: #48b2f5;
}

div#profile-stats>ul>li:nth-child(5) {
    grid-area: following;
    border: 1px solid #f5487d;
    color: #f5487d;
}

div#profile-stats>ul>li:nth-child(6) {
    grid-area: followers;
    border: 1px solid #f5487d;
    color: #f5487d;
}

div#profile-stats>ul>li:nth-child(7) {
    grid-area: stars;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#profile-stats>ul>li:nth-child(8) {
    grid-area: hatena-id;
    border: 1px solid #f5487d;
    color: #f5487d;
}

div#profile-stats>ul {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "rank flipnotes" "views downloads" "following followers" "stars stars" "hatena-id hatena-id";
}

@media (min-width: 450px) {
    div#profile-stats>ul {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "rank flipnotes views" "downloads following followers" "stars stars stars" "hatena-id hatena-id hatena-id";
    }
}

@media (min-width: 992px) {
    div#profile-stats>ul {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "rank flipnotes" "views downloads" "following followers" "stars stars" "hatena-id hatena-id";
    }
}

div#profile-stats>ul>li {
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 10px;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
}

div#profile-stats>ul>li>span:first-child {
    color: #fff;
}

div#profile-stats>ul>li>span:nth-child(2) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}


/* Sudomemo News Index Page */

ul#sudomemo-news-list>li.news {
    display: flex;
}

ul#sudomemo-news-list>li.news>div:nth-child(1) {
    display: block;
}

ul#sudomemo-news-list>li.news>div:nth-child(1)>img {
    justify-content: center;
}

@media (min-width: 576px) {
    ul#sudomemo-news-list>li.news>div:nth-child(1)>img {
        max-width: 200px;
    }
}

ul#sudomemo-news-list>li.news>div>span {
    display: block;
}

ul#sudomemo-news-list>li.news>div>span.article-date {
    font-variant-caps: all-small-caps;
}


/* no borders on xs */

@media (max-width: 575.98px) {
    .border-xs-left-none {
        border-left: none !important;
    }
    .border-xs-right-none {
        border-right: none !important;
    }
    .border-xs-top-none {
        border-top: none !important;
    }
    .border-xs-bottom-none {
        border-bottom: none !important;
    }
}

@media (max-width: 767.98px) {
    .border-sm-left-none {
        border-left: none !important;
    }
    .border-sm-right-none {
        border-right: none !important;
    }
    .border-sm-top-none {
        border-top: none !important;
    }
    .border-sm-bottom-none {
        border-bottom: none !important;
    }
}

@media (max-width: 991.98px) {
    .border-md-left-none {
        border-left: none !important;
    }
    .border-md-right-none {
        border-right: none !important;
    }
    .border-md-top-none {
        border-top: none !important;
    }
    .border-md-bottom-none {
        border-bottom: none !important;
    }
}

@media (max-width: 1199.98px) {
    .border-lg-left-none {
        border-left: none !important;
    }
    .border-lg-right-none {
        border-right: none !important;
    }
    .border-lg-top-none {
        border-top: none !important;
    }
    .border-lg-bottom-none {
        border-bottom: none !important;
    }
}

.border-xl-left-none {
    border-left: none !important;
}

.border-xl-right-none {
    border-right: none !important;
}

.border-xl-top-none {
    border-top: none !important;
}

.border-xl-bottom-none {
    border-bottom: none !important;
}


/*** Panel header froggies etc ***/


/* popular flipnotes */

.panel-header-popular {
    background: var(--theatre-primary) var(--header-frog-popular) right no-repeat;
    background-position-y: center;
}


/* hot flipnotes */

.panel-header-hot {
    background: var(--theatre-primary) var(--header-frog-hot) right no-repeat;
    background-position-y: center;
}


/* recent flipnotes */

.panel-header-recent {
    background: var(--theatre-primary) var(--header-frog-recent) right no-repeat;
}


/* flipnote spotlight */

.panel-header-spotlight {
    background: var(--theatre-primary) var(--header-frog-spotlight) right no-repeat;
}


/* ranking */

.panel-header-ranking {
    background: var(--theatre-primary) var(--header-frog-ranking) right no-repeat;
}


/* news */

.panel-header-news {
    background: var(--theatre-primary) var(--header-frog-news) right no-repeat;
}


/* flipnote comments */

.panel-header-comments {
    background: var(--theatre-primary) var(--header-frog-comments) right no-repeat;
    background-position-y: -5px;
}


/* random flipnotes */

.panel-header-random {
    background: var(--theatre-primary) var(--header-frog-random) right no-repeat;
    /* background-position-y: -5px; */
}


/* music */

.panel-header-music {
    background: var(--theatre-primary) var(--header-frog-music) right no-repeat;
    background-position-y: -4px;
}


/* fans */

.panel-header-fans {
    background: var(--theatre-primary) var(--header-frog-fans) right no-repeat;
}


/* trophy case */

.panel-header-trophies {
    background: var(--theatre-primary) var(--header-frog-trophies) right no-repeat;
}


/* all panel headers get image-rendering: pixelated */

.panel-header-hot,
.panel-header-news,
.panel-header-popular,
.panel-header-ranking,
.panel-header-spotlight,
.panel-header-comments,
.panel-header-random,
.panel-header-music,
.panel-header-fans,
.panel-header-trophies {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* pagination -- rough port from archive paginator (thanks james!) */

.pagination {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

.pagination__button,
.pagination__button:hover,
.pagination__counter {
    background: var(--theatre-primary);
    border-radius: 100px;
    color: white;
    margin: 0 0.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.pagination__button {
    font-weight: 900;
    width: 4ch;
}

.pagination__button--disabled,
.pagination__button--disabled:hover {
    background: #d0d0d0;
}

.pagination__counter {
    background: white;
    border: 1px solid var(--theatre-primary);
    color: var(--theatre-primary);
    font-variant: tabular-nums;
    min-width: 12ch;
}

.theatre-footer-spacer {
    flex-grow: 1;
}