@charset "UTF-8";

::selection {
    background-color: #3488bc;
    color: #ffffff;
}

/* Variables */
:root {
    --theatre-primary: #3488bc;
    --header-frog-popular: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/popular.gif);
    --header-frog-hot: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/hot.gif);
    --header-frog-news: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/news.gif);
    --header-frog-spotlight: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/spotlight.gif);
    --header-frog-ranking: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/ranking.png);
    --header-frog-recent: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/recent.gif);
    --header-frog-comments: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/comments.gif);
    --header-frog-random: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/random.gif);
    --header-frog-music: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/music.gif);
    --header-frog-fans: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/fans.gif);
    --header-frog-trophies: url(/theatre_assets/theme/sudomemo_winter_trees/header_frog/trophies.gif);

    --scrollbar-track: #0e2f4a;
    --scrollbar-thumb: #3488bc;
    --scrollbar-thumb-hover: #4fa4d6;
}

/* General Styles */
body {
    color: #fff;
}

.theme-body {
    background-image: url(/theatre_assets/theme/sudomemo_winter_trees/tree_bg_green.png);
    background-attachment: fixed;
}

/* Card Styles */
.card {
    background-color: rgba(192, 192, 192, 0.34) !important;
}

.card-body.panel-welcome {
    background-color: #0048d330;
}

/* Panel Styles */
.theme-panel-title {
    color: #ffffff;
    background-color: var(--theatre-primary);
}

.theme-panel-body {
    background-color: #0048d330 !important;
}

/* Link Styles */
.theme-link,
.search-result-details .theme-link {
    color: #c4deff;
}

.theme-link:hover,
.bodycontent a:hover {
    color: #668edf;
    text-decoration: underline;
}

.theme-link-inverted {
    color: #ffffff;
}

.theme-link-inverted:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Navbar Styles */
.theme-navbar-background {
    background-color: var(--theatre-primary);
    border-color: #ffffff;
    border-bottom-width: 2px;
}

.theme-navbar-text li a {
    color: #fff;
}

.theme-navbar-text li a:hover {
    color: var(--theatre-primary);
    background-color: #fff;
}

.theme-navbar-text .open a,
.theme-navbar-text .open a:hover,
.theme-navbar-text .open a:focus {
    color: var(--theatre-primary);
    background-color: #f5f5f5;
}

.theme-navbar-text .dropdown-menu a,
.theme-navbar-text .dropdown-menu {
    color: var(--theatre-primary);
    background-color: #fff;
}

.dropdown.open {
    background-color: #fff;
}

.dropdown-header {
    font-size: 1em;
    font-weight: bold;
    color: #6d6d6d;
    background-color: #efefef;
}

.dropdown-toggle:focus {
    color: var(--theatre-primary);
    background-color: #efefef;
}

/* Notification System */

.notification-header {
    background-color: var(--theatre-primary) !important;
    border-bottom: 1px solid #4fa4d6 !important;
}

.notification-dropdown {
    background-color: rgba(11, 44, 71, 0.95) !important;
    color: #e3f2ff !important;
    border: 1px solid #4fa4d6 !important;
}

.notification-item {
    border-bottom: 1px solid #1f5c8f !important;
}

.notification-item:hover {
    background-color: #13456c !important;
}

.notification-item.unread {
    background-color: #1c5f91 !important;
}

.notification-user,
.notification-link {
    color: #d7ecff !important;
}

.notification-user:hover,
.notification-link:hover {
    color: #ffffff !important;
}

.notification-time,
.empty-notifications {
    color: #b3cee6 !important;
}

.dropdown-divider {
    border-top: 1px solid #1f5c8f !important;
}

.dropdown-item:hover {
    background-color: #13456c !important;
}

#mark-all-read,
.notification-dropdown .btn-link {
    color: #d7ecff !important;
}

#mark-all-read:hover,
.notification-dropdown .btn-link:hover {
    color: #0b2c47 !important;
    background-color: #d7ecff !important;
}

.notification-dropdown .btn-outline-primary {
    color: #d7ecff !important;
    border-color: #4fa4d6 !important;
    background-color: #0d3a5e !important;
}

.notification-dropdown .btn-outline-primary:hover,
.notification-dropdown .btn-outline-primary:focus,
.notification-dropdown .btn-outline-primary:active {
    color: #0b2c47 !important;
    background-color: #d7ecff !important;
    border-color: #d7ecff !important;
}

/* Button Styles */
.btn-custom-active {
    background-color: var(--theatre-primary);
    color: #fff;
    border: solid 1px var(--theatre-primary);
}

.btn-custom-active > a {
    color: #fff;
}

.btn-custom {
    background-color: #3488bc;
    color: #fff;
    border: solid 1px var(--theatre-primary);
}

.navbar-custom .navbar-toggler {
    border-width: 2px;
    color: #fff;
}

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

/* Welcome to Sudomemo */
.welcome-frog {
    stroke: #365188;
}

.about-sudomemo {
    background-color: unset;
}

.about-sudomemo p {
    background-color: #0048d330;
}

.about-sudomemo .left,
.about-sudomemo .right {
    border: 3px solid var(--theatre-primary);
    color: #365188;
}

.about-sudomemo .room {
    color: var(--theatre-primary);
    border-color: var(--theatre-primary);
}

.welcome-to h4 {
    color: #000;
}

.welcome-to h3 {
    color: #000;
}

.about-sudomemo .big {
    color: #365188;
    border: 3px solid var(--theatre-primary);
}

a.topic-banner {
    background: #000000ba;
}

.sudomemo-logo-svg-outline {
    fill: #000000;
}

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

/* Flipnote List */
ul.flipnote-list > li.flipnote-list-item {
    background-color: #006aab;
}

/* Profile */
div.profile-head {
    border: 1px solid #e0e0e0;
}

div.panel-common {
    border: 1px solid var(--theatre-primary);
}

.profile-head #profile-wrapper {
    background-color: var(--theatre-primary);
    color: white;
    border-bottom: 1px solid #f0f0f0;
}

div.follow-button > div.btn-group > button.btn-custom {
    background-color: #fff;
    color: var(--theatre-primary);
    border: solid 1px #fff;
}

div.follow-button > div.btn-group > button.btn-custom-active {
    background-color: var(--theatre-primary);
    color: #fff;
    border: solid 1px #fff;
}

a.navbar-brand {
    content: url(/theatre_assets/theme/sudomemo_winter_trees/sudomemo_logo_winter.svg?ver=20241228_001);
}

/* Flipnote Player */
.player__controls {
    color: var(--theatre-primary);
    background-color: #09486f;
}

.player__controls a.controls__link {
    color: #fff;
}

.player__scrubber {
    background: #00adda;
}

.scrubber__track__handle {
    background-color: var(--theatre-primary);
}

.scrubber__track__played {
    background-color: var(--theatre-primary);
}

/* Frog on embedded player */
.controls__sudomemo__link > a > img {
    filter: brightness(0) invert(62%) sepia(50%) saturate(283%) hue-rotate(182deg) brightness(90%) contrast(92%);
}

/* Snowman Scrubber */
.scrubber__track__handle:after {
    content: "❄️";
    top: -9px;
    position: absolute;
}

div.embedded-player .scrubber__track__handle:after {
    top: -4px !important;
}

.scrubber__track__handle {
    top: 0px;
    width: 0px;
    height: 0px;
    border: none;
    font-size: 23px;
}

/* Comments */
ul.commentlist .comment {
    background-color: #0000006b;
}

#commentTextArea,
#commentTextArea:focus {
    color: #fff;
    background-color: #00000073;
}

.btn-custom:hover,
.emoji-btn:hover {
    background-color: #3463a0 !important;
    color: #fff !important;
}

h1,
h2,
h3,
h4,
h5 {
    color: inherit;
}

/* Flipnote Details */
#flipnote-stats span {
    color: #fff;
}

#flipnote-stats span a {
    color: #fff;
}

#profile-stats ul li span {
    color: #fff;
}

div#profile-stats > ul > li,
div#flipnote-stats > ul > li {
    background-color: #0000002e;
}

ul.recent-comment-list li a {
    color: inherit;
}

/* Playlist Fixes */
#playlist-current {
    background-color: #64b8ec;
}

.playlist-flipnote {
    background-color: #71cce3;
}

/* Search Fixes */

.search-result-description {
    color: #fff;
}

.search-result-uploader {
    color: #000;
}

.search-result-meta.text-muted {
    color: #000 !important;
}

/* Ticket Gifting */
#ticketModal .modal-content {
    background-color: #000000c7;
}

/* News */
ul#sudomemo-news-list > li.news {
    background-color: #0000006b;
    padding: 10px;
    border-radius: 5px;
}

div.bodycontent {
    background-color: #0000006b;
    border-radius: 5px;
}

/* categories and channel ranking */

.channels-hero .hero-box {
    background-color: #0e2f4a;
    border: 5px solid #0a2033;
}

.channels-hero .hero-cell {
    background-color: unset;
}

.cat-box .head {
    background: var(--theatre-primary) !important;
    border-bottom-color: #4fa4d6 !important;
}

.cat-box .title,
.cat-box .title a,
.recent-item a,
.ranking-body a.title,
.channel-card .title a,
.channel-card .description {
    color: #ffffff !important;
}

.cat-box .title a:hover,
.cat-box .subnav a,
.recent-item a:hover,
.ranking-body a.title:hover,
.cat-box .subnav a:hover,
.ranking .see-more,
.channel-card .title a:hover,
.channel-card .stats {
    color: #d7ecff !important;
}

.cat-box .subnav a:hover,
.ranking .see-more:hover {
    color: #b3cee6 !important;
}

.cat-box .subnav div {
    color: #9bb7d4 !important;
}

.cat-box .thumb {
    background: #0c3a5f !important;
    border-color: var(--theatre-primary) !important;
}

.cat-box .thumb.placeholder {
    background: #0c3a5f !important;
    color: #b3cee6 !important;
}

.channel-card .header {
    background: linear-gradient(135deg, #1b4f7a, #0f3b63) !important;
    border-bottom-color: #4fa4d6 !important;
}

.channel-card .rank-number {
    background: linear-gradient(135deg, #4fa4d6, #76c5f1) !important;
    color: #0a2033 !important;
}

.channel-card .stats {
    color: #d7ecff !important;
}

.channel-card .stat i {
    color: #aad6ff !important;
}

.channel-card .description {
    color: #e3f2ff !important;
}

.channel-card .category-page-thumbs {
    background: #0c3a5f !important;
    border-top: 1px solid rgba(79, 164, 214, 0.4) !important;
}

.channel-card .thumb {
    background: #0c3a5f !important;
    border-color: var(--theatre-primary) !important;
}

.channel-card .thumb.placeholder {
    color: #b3cee6 !important;
}

.sidebar .widget,
.channel-card,
.cat-box {
    background: #0b2c47 !important;
    border-color: var(--theatre-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

.category-header .breadcrumb {
    background: #0b2c47 !important;
    border-color: var(--theatre-primary) !important;
}

.widget.recent .list {
    background: #0b2c47 !important;
}

.ranking-channel {
    background: #0f3b63 !important;
    border-color: var(--theatre-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

.ranking-channel .description {
    color: #e3f2ff !important;
}

.ranking-channel .thumb {
    background: #0c3a5f !important;
    border-color: var(--theatre-primary) !important;
}

.ranking-channel .thumb.placeholder {
    background: #0c3a5f !important;
    color: #b3cee6 !important;
}

.widget.recent .head {
    background: var(--theatre-primary) !important;
    border-bottom-color: #4fa4d6 !important;
    color: #fff !important;
}

.recent-thumb {
    background: #0c3a5f !important;
    border-color: var(--theatre-primary) !important;
}

.ranking-body .meta {
    color: #b3cee6 !important;
}

.ranking-thumb {
    background: #0c3a5f !important;
    border-color: var(--theatre-primary) !important;
}