/* ========================================
   CSS VARIABLES - NIGHT MODE
   ======================================== */

:root {
    --body-bg: hsl(0, 0%, 5.5%);
    --tippy-bg: #333;
    --border-dark: #2b2e3a;
}

/* ========================================
   BASE STYLES - NIGHT MODE
   ======================================== */

.black-hover:hover,
a,
body {
    color: #fff;
}

.form-group > label,
.head_sidebar_menu a {
    color: rgb(255 255 255);
}

.black,
.tag_liked_grid .tag_short_home_list a .info p {
    color: #f5f5f5;
}

.text-muted {
    color: #9aa0a6 !important;
}

/* ========================================
   HEADER STYLES - NIGHT MODE
   ======================================== */

.tag_header:before {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--body-bg)), color-stop(50%, rgba(15, 16, 20, 0.3)), color-stop(65%, rgba(15, 16, 20, 0.15)), color-stop(75%, rgba(15, 16, 20, 0.07)), color-stop(82%, rgba(15, 16, 20, 0.035)), color-stop(88%, rgba(15, 16, 20, 0.015)), to(rgba(15, 16, 20, 0)));
    background: -o-linear-gradient(top, var(--body-bg) 0, rgba(15, 16, 20, 0.3) 50%, rgba(15, 16, 20, 0.15) 65%, rgba(15, 16, 20, 0.07) 75%, rgba(15, 16, 20, 0.035) 82%, rgba(15, 16, 20, 0.015) 88%, rgba(15, 16, 20, 0) 100%);
    background: linear-gradient(180deg, var(--body-bg) 0, rgba(15, 16, 20, 0.3) 50%, rgba(15, 16, 20, 0.15) 65%, rgba(15, 16, 20, 0.07) 75%, rgba(15, 16, 20, 0.035) 82%, rgba(15, 16, 20, 0.015) 88%, rgba(15, 16, 20, 0) 100%);
}

.tag_feat_video_img:after {
    background: -webkit-gradient(linear, left top, right top, from(var(--body-bg)), color-stop(50%, rgb(15 16 20 / 50%)), to(transparent));
    background: -o-linear-gradient(left, var(--body-bg), rgb(15 16 20 / 50%) 50%, transparent);
    background: linear-gradient(90deg, var(--body-bg), rgb(15 16 20 / 50%) 50%, transparent);
}

.tag_feat_video_img:before {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, var(--body-bg)), color-stop(50%, rgba(15, 16, 20, 0.3)), color-stop(65%, rgba(15, 16, 20, 0.15)), color-stop(75%, rgba(15, 16, 20, 0.07)), color-stop(82%, rgba(15, 16, 20, 0.035)), color-stop(88%, rgba(15, 16, 20, 0.015)), to(rgba(15, 16, 20, 0)));
    background: -o-linear-gradient(bottom, var(--body-bg) 0, rgba(15, 16, 20, 0.3) 50%, rgba(15, 16, 20, 0.15) 65%, rgba(15, 16, 20, 0.07) 75%, rgba(15, 16, 20, 0.035) 82%, rgba(15, 16, 20, 0.015) 88%, rgba(15, 16, 20, 0) 100%);
    background: linear-gradient(0deg, var(--body-bg) 0, rgba(15, 16, 20, 0.3) 50%, rgba(15, 16, 20, 0.15) 65%, rgba(15, 16, 20, 0.07) 75%, rgba(15, 16, 20, 0.035) 82%, rgba(15, 16, 20, 0.015) 88%, rgba(15, 16, 20, 0) 100%);
}

/* ========================================
   CONTENT STYLES - NIGHT MODE
   ======================================== */

.content,
.video-options .btn:hover {
    -webkit-box-shadow: rgb(0 0 0 / 20%) 0 1px 2px 0;
            box-shadow: rgb(0 0 0 / 20%) 0 1px 2px 0;
    background: #21232b;
}

.tag_short_home_list a {
    background: rgb(255 255 255 / 8%);
}

.tag_home_articles {
    border-color: #383838;
}

.empty_state .dog:before {
    background: #fff;
}

.dropdown-menu {
    color: #e2e6ea;
    background-color: #1b1d24;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.59), 0 0 4px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.59), 0 0 4px rgba(0, 0, 0, 0.1);
}

.border,
.nsm7Bb-HzV7m-LgbsSe {
    border-color: #383838 !important;
}

.bg-light {
    background-color: #21242d !important;
}

/* ========================================
   BUTTONS - NIGHT MODE
   ======================================== */

.btn {
    color: #cdd2d8;
}

.btn:hover {
    color: #fff;
}

.btn-light,
.btn-subscribed {
    background-color: #2d3338;
    border-color: #2d3338;
    color: #fff;
}

.btn-light:hover {
    color: #fff;
    background-color: #343a3f;
    border-color: #343a3f;
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
    color: #fefefe;
    background-color: #2d3338;
    border-color: #2d3338;
}

.btn-main,
.btn-subscribe {
    background: var(--main);
    color: var(--main-color);
}

.btn-main-outline {
    color: var(--main);
    border-color: var(--main);
}

.btn-close {
    background: rgb(255 255 255 / 7%);
}

/* ========================================
   FORMS - NIGHT MODE
   ======================================== */

.form-control,
.form-control:focus {
    background-color: rgb(255 255 255 / 3%);
}

.form-control {
    color: #e1e2e3;
    border-color: #343740;
}

.form-control:focus,
pre {
    color: #fff;
}

.form-group ul.tagit,
.form-group > .form-control,
body .trumbowyg-box,
body .trumbowyg-editor-box {
    border-color: #343740;
    background: var(--border-dark);
}

.custom-control-label::before {
    background-color: #16181f;
    border-color: #6d7780;
}

.custom-control-input:focus ~ .custom-control-label::before {
    border-color: #adb5bd;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--main);
    border-color: var(--main);
}

/* ========================================
   AUTHENTICATION - NIGHT MODE
   ======================================== */

.tag_auth_social .btn {
    background-color: #16181f;
}

.nsm7Bb-HzV7m-LgbsSe {
    background-color: #16181f !important;
    color: #cdd2d8 !important;
}

.nsm7Bb-HzV7m-LgbsSe:focus,
.nsm7Bb-HzV7m-LgbsSe:hover,
.tag_auth_social .btn:hover {
    border-color: #4a535f !important;
    background: rgb(255 255 255 / 5%) !important;
}

/* ========================================
   DROPDOWN MENUS - NIGHT MODE
   ======================================== */

.dropdown-menu .dropdown-item > a,
.dropdown-menu > li > a,
.search-dropdown_ div a,
.video_dropdown div {
    color: #d1d1d1;
}

.dropdown-menu .dropdown-item > a:focus,
.dropdown-menu .dropdown-item > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.search-dropdown_ div a:hover,
.video_dropdown div:hover {
    color: var(--main);
    background-color: #272a35;
}

.dropdown-divider,
body.noti_menu_open .head_sidebar,
body.search_menu_open .head_sidebar,
body.user_menu_open .head_sidebar {
    border-color: #2b2e3a;
}

/* ========================================
   SEARCH - NIGHT MODE
   ======================================== */

.header_search .form-group input {
    color: #fff;
}

.search-dropdown .search-result a {
    color: #d0d0d0;
    border-color: #2b2e3a;
}

.search-dropdown .search-result a:hover {
    color: #fff;
    background: rgb(255 255 255 / 4%);
}

/* ========================================
   TABLES - NIGHT MODE
   ======================================== */

.table {
    color: #d6d6d6;
}

.table td,
.table th,
.table thead th,
.video-likes .like-btn {
    border-color: #2b2e3a;
}

/* ========================================
   SIDEBAR - NIGHT MODE
   ======================================== */

.tag_sett_sidebar a {
    color: #aeb4b9;
}

.tag_sett_sidebar a:hover {
    color: #f2f2f2;
}

.head_sidebar_menu a.active svg path:not(.hover_path),
.head_sidebar_menu a:hover svg path:not(.hover_path) {
    display: none;
}

/* ========================================
   MESSAGES - NIGHT MODE
   ======================================== */

.messages-sidebar .user-list a:hover {
    background: rgb(255 255 255 / 2%);
}

.tag_msg_search {
    background-color: #2d3338;
    border-color: #2d3338;
    color: #fff;
}

/* ========================================
   LIVE STREAMING - NIGHT MODE
   ======================================== */

.tag_live {
    background: #000;
}

.tag_head_notis:hover {
    background: rgb(255 255 255 / 4%);
}

/* ========================================
   MODALS - NIGHT MODE
   ======================================== */

.modal-content {
    background-color: #21232b;
}

.modal-body .form-group > .form-control,
.swal2-modal .form-group > .form-control {
    background: var(--border-dark);
}

.swal2-modal {
    background-color: #16181f !important;
}

/* ========================================
   USER LISTS - NIGHT MODE
   ======================================== */

.tag_user_list .details .thumb img {
    border-color: #16181f;
}

.online-user {
    border-bottom: 1px solid var(--border-dark);
}

/* ========================================
   AFFILIATE LINKS - NIGHT MODE
   ======================================== */

.tag_affi_links > input {
    color: #fff;
}

/* ========================================
   ADMIN PANEL - NIGHT MODE
   ======================================== */

.admin-info {
    background: -o-linear-gradient(315deg, #1a1a1a, #262626);
    background: linear-gradient(135deg, #1a1a1a, #262626);
}

.admin-info .close {
    color: #d4d4d4;
}

.admin-info .close:hover,
.online-card small,
.room-title:hover {
    color: #78b159;
}

.admin-content {
    color: #d4d4d4;
}

.admin-header h2,
.btn-success {
    color: #fff;
}

.admin-header p {
    color: #8c8c8c;
}

.admin-section h3,
.queue-section h3 {
    color: #fff;
}

.adminButton svg g {
    fill: var(--border-dark);
}

/* ========================================
   CARDS - NIGHT MODE
   ======================================== */

.online-card,
.queue-list,
.resource-card,
.room-card,
.signup-card {
    background: #2c2c2c;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.resource-card span {
    color: #8c8c8c;
}

.resource-card small {
    color: #d4d4d4;
}

.resource-card svg {
    fill: #8c8c8c;
}

.online-card span {
    color: #8c8c8c;
}

.room-title,
.signup-card small {
    color: #d4d4d4;
}

.room-avatar-more,
.room-stats {
    color: #8c8c8c;
}

.room-avatar {
    border: 2px solid #2c2c2c;
}

.signup-card span {
    color: #8c8c8c;
}

/* ========================================
   LEADERBOARD - NIGHT MODE
   ======================================== */

.leaderboardUser {
    border-bottom: 1px solid var(--border-dark);
}

.points-list li {
    border-bottom: 1px solid var(--border-dark);
}

/* ========================================
   VIDEO STYLES - NIGHT MODE
   ======================================== */

.tag_point_balance:before {
    background: #2b230a;
}

.video-options .btn {
    background: rgb(255 255 255 / 10%);
}

.video-likes .dislikkes.active {
    background: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 5%);
}

.watch-video-description:not(.full_expand) a {
    color: #e6e6e6;
}

.tag_vid_comment_text {
    border-color: #2b2e3a;
    background: #16181f;
    color: #fff;
}

.tag_video_grid_list .info .btn[data-toggle="dropdown"]:hover {
    -webkit-box-shadow: rgb(0 0 0 / 20%) 0 1px 2px 0;
            box-shadow: rgb(0 0 0 / 20%) 0 1px 2px 0;
    background: #21232b;
}

/* ========================================
   EMOJI & SUGGESTIONS - NIGHT MODE
   ======================================== */

#emoji-suggestions li:hover,
.suggestion-list li.selected,
.suggestion-list li:hover {
    background: var(--border-dark);
}

#emoji-suggestions {
    -webkit-box-shadow: 0 0 6px rgba(145, 145, 145, 0.3), 0 1px 3px rgba(255, 255, 255, 0.05);
            box-shadow: 0 0 6px rgba(145, 145, 145, 0.3), 0 1px 3px rgba(255, 255, 255, 0.05);
}

/* ========================================
   PROGRESS BARS - NIGHT MODE
   ======================================== */

.progress {
    background-color: #33373b;
}

/* ========================================
   CHAT & STREAMING - NIGHT MODE
   ======================================== */

.streamComments_innr {
    background: var(--body-bg);
}

.header-live-header {
    background: #1a2323b5;
}

.header-live-secondary {
    background: #1a2323;
    border-bottom: 1px solid var(--border-dark);
}

.centered-text-stream-owners {
    background: var(--border-dark);
}

.container-stream-owners::after {
    background: var(--border-dark);
}

.reply-preview, .reply-block {
    background: #1a2323;
}

/* ========================================
   FORM ELEMENTS - NIGHT MODE
   ======================================== */

.form-group .bootstrap-select > .dropdown-toggle.btn,
.form-group > select.form-control:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa0a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-group .bootstrap-select > .dropdown-toggle.btn {
    border-color: #343740;
    color: rgb(255 255 255 / 70%);
}

/* ========================================
   TEXT EDITOR - NIGHT MODE
   ======================================== */

body .trumbowyg-button-pane {
    background: #373740;
}

body .trumbowyg-button-pane .trumbowyg-button-group::after,
body .trumbowyg-button-pane::after,
body .trumbowyg-button-pane::before {
    background: #4d4f57;
}

body .trumbowyg-box svg,
body .trumbowyg-modal svg {
    color: #e8e8e8;
    fill: #e8e8e8;
}

body .trumbowyg-button-pane button.trumbowyg-active,
body .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
body .trumbowyg-button-pane button:not(.trumbowyg-disable):hover {
    background-color: #45454f;
}

/* ========================================
   UI COMPONENTS - NIGHT MODE
   ======================================== */

.ui-widget-content {
    color: #dfdfdf;
    background: #293037;
}

.ui-button,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:active,
html .ui-button.ui-state-disabled:hover {
    border-color: #333f4f;
    color: #e8e8e8;
}

/* ========================================
   NAVIGATION - NIGHT MODE
   ======================================== */

.pt_sec_nav_slide_prnt .swiper-button-next,
.pt_sec_nav_slide_prnt .swiper-button-prev {
    background: var(--border-dark);
    -webkit-box-shadow: 0 0 10px 20px color-mix(in srgb, var(--body-bg), #000 30%);
            box-shadow: 0 0 10px 20px color-mix(in srgb, var(--body-bg), #000 30%);
}

.pt_sec_nav_slide_prnt .swiper-button-next:after,
.pt_sec_nav_slide_prnt .swiper-button-prev:after {
    color: #fff;
}

.pt_sec_nav_slide > div a {
    background: color-mix(in srgb, var(--body-bg), #ffffff29 50%);
}

.pt_sec_nav_slide > div a:hover {
    background: color-mix(in srgb, var(--body-bg), #fff 90%) !important;
    color: #000 !important;
}

/* ========================================
   BLOG & COMMENTS - NIGHT MODE
   ======================================== */

.pt_blogcomm_combo_stream {
    border-top: 1px solid var(--border-dark);
}

#video-user-comments-stream .options-box {
    background: #191c1f;
}

#pinned-comment-stream .content {
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}

.lang_modal .language_select a {
    position: relative;
    display: block;
    color: var(--main);
    font-weight: 500;
}

/* ========================================
   HIGHCHARTS - NIGHT MODE
   ======================================== */

.highcharts-background {
    fill: #16181f;
}

.highcharts-legend-item text,
.highcharts-title {
    color: #e0e0e0 !important;
    fill: #e0e0e0 !important;
}

/* ========================================
   VIDEO THUMBNAILS - NIGHT MODE
   ======================================== */

.ffmpeg_thumbs .active {
    -webkit-box-shadow: 0 0 0 2px #16181f, 0 0 0 4px var(--main);
            box-shadow: 0 0 0 2px #16181f, 0 0 0 4px var(--main);
}

.pt_vid_card_prvw {
    --surface2: #16181f;
    --surface3: #353535;
}

/* ========================================
   TOGGLE SWITCHES - NIGHT MODE
   ======================================== */

input[type=checkbox].switch.custom-toggle-input {
    --border: #2c2c2c;
    --background: #000;
    --active-inner: #000;
    border: 1px solid #2c2c2c;
    background: #000;
    z-index: 0;
    opacity: 1;
}

input[type=checkbox].switch.custom-toggle-input:after {
    background: #2c2c2c;
}

input[type=checkbox].switch.custom-toggle-input:checked {
    background: #04abf2;
    border-color: #04abf2;
}

input[type=checkbox].switch.custom-toggle-input:checked:after {
    transform: translateX(17px);
}

input[type=checkbox].switch.custom-toggle-input:hover:not(:checked):not(:disabled) {
    border-color: #275EFE;
}

input[type=checkbox].switch.custom-toggle-input:disabled {
    background: #F6F8FF;
}

input[type=checkbox].switch.custom-toggle-input:disabled:checked {
    background: #E1E6F9;
    border-color: #2c2c2c;
}

input[type=checkbox].switch.custom-toggle-input:focus {
    box-shadow: 0 0 0 2px rgb(26, 92, 255 / 30%);
}

input[type=checkbox].switch.custom-toggle-input + label {
    color: #d8d8d8;
}

/* ========================================
   FEEDBACK SYSTEM - NIGHT MODE
   ======================================== */

.feedback-list .feedback-item {
    background: var(--border-dark);
}

/* ========================================
   ADMIN TABS - NIGHT MODE
   ======================================== */

#adminTabs .nav-link {
    background: #2c2c2c;
}

#adminTabs .nav-link.active {
    background-color: #414141;
}

/* ========================================
   OG METADATA - NIGHT MODE
   ======================================== */

.og-metadata {
    border: 1px solid var(--border-dark);
    background: #16181f;
}

.og-preview {
    border: 1px solid var(--border-dark);
    background: #16181f;
}

/* ========================================
   VIDEO HASHTAGS - NIGHT MODE
   ======================================== */

.video-hashtag-list {
    background: #242425;
}

.tag_home_cat_list a::before, .tag_home_hashtag_list a::before {
    background: color-mix(in srgb, var(--body-bg), #fff 50%);
}

/* ========================================
   TEXT STYLES - NIGHT MODE
   ======================================== */

.text-truncate, .text-truncate a {
    color: #8f8f8f;
}

/* ========================================
   MAVERICK AI SETTINGS - NIGHT MODE
   ======================================== */

.maverick-header {
    color: #E0E0E0;
}

.toggle-label {
    background: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toggle-label:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.toggle-label:focus {
    box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.5);
}

.toggle-label::after {
    background: #E0E0E0;
}

.toggle-button.mode-toggle {
    background: var(--shadow);
    border: 1px solid #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toggle-button.mode-toggle:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.toggle-button.mode-toggle:focus {
    box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.5);
}

.toggle-button.mode-toggle .slider {
    background: #4A7043;
    border: 1px solid #6A9A63;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.toggle-button.mode-toggle .v1,
.toggle-button.mode-toggle .v2,
.toggle-button.mode-toggle .v3,
.toggle-button.mode-toggle .v4 {
    color: #A0A0A0;
}

.toggle-button.mode-toggle.nice .slider {
    background: #4A7043;
    border: 1px solid #6A9A63;
}

.toggle-button.mode-toggle.sassy .slider {
    background: #3A5A7A;
    border: 1px solid #5A8AB5;
}

.toggle-button.mode-toggle.unhinged .slider {
    background: #7A3A3A;
    border: 1px solid #A55A5A;
}

.toggle-button.mode-toggle.random .slider {
    background: #5A3A7A;
    border: 1px solid #8A5AB5;
}

.toggle-button.mode-toggle.nice .v1,
.toggle-button.mode-toggle.sassy .v2,
.toggle-button.mode-toggle.unhinged .v3,
.toggle-button.mode-toggle.random .v4 {
    color: #E0E0E0;
}

/* ========================================
   VOTING SYSTEM - NIGHT MODE
   ======================================== */

.vote-button {
    background: #00B7EB;
    color: #E0E0E0;
}

.vote-button:hover {
    background: #007EA8;
}

.vote-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.5);
}

/* ========================================
   CHAT TOGGLE - NIGHT MODE
   ======================================== */

.toggle-button.chat-toggle {
    background: var(--shadow);
    border: 1px solid #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toggle-button.chat-toggle:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.toggle-button.chat-toggle:focus {
    box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.5);
}

.toggle-button.chat-toggle .slider {
    background: #4A7043;
    border: 1px solid #6A9A63;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.toggle-button.chat-toggle .v1 {
    color: #E0E0E0;
}

.toggle-button.chat-toggle .v2 {
    color: #A0A0A0;
}

.toggle-button.chat-toggle.active .slider {
    background: #3A5A7A;
    border: 1px solid #5A8AB5;
}

.toggle-button.chat-toggle.active .v1 {
    color: #A0A0A0;
}

.toggle-button.chat-toggle.active .v2 {
    color: #E0E0E0;
}

.toggle-button:focus,
.toggle-label:focus {
    box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.5);
}

/* ========================================
   DIVIDER - NIGHT MODE
   ======================================== */

.divider {
    border-top: 1px solid #333333;
}

hr {
    border-color: #272a35;
}

/* ========================================
   PRO FEATURES - NIGHT MODE
   ======================================== */

.tag_pro_btn {
    border-color: #fff;
    background-color: #fff;
    color: #222;
}

.tag_pro_btn:hover {
    color: #fff !important;
}

.tag_pro_plan > svg {
    fill: #fff;
}

/* ========================================
   MEDIA QUERIES - NIGHT MODE
   ======================================== */

@media (min-width: 1024px) {
    body::-webkit-scrollbar-thumb {
        background-color: #545454;
    }
}

@media (min-width: 768px) {
    .featured_list_side .rounded-circle:hover {
        background: var(--border-dark);
    }
}

@media (max-width: 767px) {
    .pt_blogcomm_combo_stream {
        border-bottom: 1px solid var(--border-dark);
    }
    .head_sidebar {
        border-top: 1px solid var(--border-dark);
    }
}
