.user-count {
    font-family: 'YourFontFamily', sans-serif; /* Replace 'YourFontFamily' with your desired font */
    font-size: 12px; /* Adjust the font size to be smaller */
    color: #888; /* Adjust the color if needed */
}

.total_viewers_group {
    font-family: 'YourFontFamily', sans-serif; /* Replace 'YourFontFamily' with your desired font */
    font-size: 2.17vw; /* Use vw for responsive font size */
    color: #ebe4e4; /* Adjust the color if needed */
}
.emoji-eye {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 2.0vw;
    vertical-align: middle;
    margin-right: 2px;
}
.category {
    cursor: pointer;
    font-weight: bold;
    font-size: 30px; /* Adjust the font size as needed */
	background-color: #1f1f23; /* Set background color to Blue Grey */
    color: rgb(255, 255, 255); /* Set color of usernames to blue */
}
.category:hover {
    background-color: rgb(84, 18, 114);
    color: rgb(255, 255, 255); /* Set color of usernames to blue */
}
.category.highlighted {
    background-color: rgb(84, 18, 114);
}
.sub-item {
    cursor: pointer;
    display: flex; /* Use flexbox to align items */
	color: rgb(255, 255, 255); /* Set color of usernames to blue */
	background-color: #43434e; /* Set background color to Blue Grey */
}

.sub-item:hover {
    background-color: rgb(84, 18, 114);
    color: rgb(255, 255, 255); /* Set color of usernames to blue */
}
.highlighted-sub-item {
    background-color: rgb(84, 18, 114);
    color: rgb(255, 255, 255); /* Adjust text color if necessary */
}
.highlighted-title-div {
    background-color: rgb(84, 18, 114);
    display: inline-block; /* Ensure the background only covers the text */
}
.username {
    margin-right: 0px; /* Add some space between the username and viewer count */
    font-size: 22px; /* Adjust the font size as needed */
}

.viewer-count {
    font-size: 14px;
    color: rgb(255, 255, 255); /* Set color of usernames to blue */
    float: right; /* Align the viewer count to the right edge */
    margin-right: 10px; /* Add some space between the username and viewer count */
}


/* mobile-style.css */
body {
    font-size: 14px; /* Smaller font size for mobile */
    background-color: #0e0e10; /* Set background color to Blue Grey */

}
.grid-item {
    border: none;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background: #1f1f23;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}
#sidebar {
    width: 100%; /* Make sidebar full width on mobile */
    position: relative; /* Change positioning on mobile */
    top: auto; /* Reset top positioning */
    left: auto; /* Reset left positioning */
    overflow-x: hidden;
}

/* Remove all default margins */
body,
#sidebar,
#container,
#content,
#streamdata,
#player,
#chat,
#toggle-chat-btn,
#toggle-sidebar-btn,
#hard-reset-btn,
#newpage-button,
#usernamesContainer,
#contactForm,
#links,
#streamInfo,
#streamsInfo,
#suggestion-form {
    margin: 0;
}

#usernamesContainer {
    position: relative !important;
    background-color: #0e0e10; /* Set background color to Blue Grey */
}

/* Hide content that should not be visible on mobile */
#toggle-chat-btn,
#toggle-sidebar-btn,
#hard-reset-btn,
#top-menu,
#links,
#chat,
#newpage-button,
#newpage-button_2k,
.user-info,
#contactForm {
    display: none;
}