/*
chatgpt prompt for style

I need help with a color pallet for my website, the background is var(--background-color) and I want a dark, clean, minimally obtrusive feeling UI. I like having blue buttons with some lavendar. I need background and font colors for the following categories

default button - button
Button - Active item (online) - Button - .active-streamIDentry
Button - inactive item (offline) - Button - .inactive-streamIDentry
ignored item (offline) - Button - .ignoredInactive-streamIDentry
active but ignored item (online) - Button - .ignoredActive-streamIDentry
secondary background color for a chatbox - .chat-background
video div
shading colors for a border around the primary focus of the page


Z index

Page = 100
sidebars = 200
Header = 300
modals = 400
Focused = 900




*/

:root {
  --background-color: #333333;
  --background-color-dark: #242424;
  --text-color: #FFFFFF;
  --button-color: #153c8f;
  --button-border: #0c2761;
  /* Default button color 007BFF */
  --button-hover-color: #007BFF;
  --header-height: 40px;
  --left-sidebar-width: clamp(150px, 8vw, 250px);
  --right-sidebar-width: clamp(200px, 15vw, 350px);
  --toggle-button-size: 20px;
  --toggle-button-offsetPercentage: .4;

/*   --left-sidebar-width: 200px;
  --right-sidebar-width: 300px; */
}

h1 {
  text-align: center;
}

body {
  background-color: var(--background-color);
  font-family: "Roboto Condensed", sans-serif;
  color: var(--text-color);
  background-color: black;
  /* Default text color */
}

video {
  display: block;
  margin: 0 auto;
}

html {
  scroll-behavior: smooth;
}

#main-content {
  margin-top: 40px;
  /* Match the height of the fixed header */
}


#headerContainer {
  position: fixed;
  /* Makes the header fixed at the top */
  top: 0;
  /* Aligns it to the top of the viewport */
  left: 0;
  /* Aligns it to the left of the viewport */
  height: var(--header-height);
  /* Total height of the header */
  width: 100%;
  /* Ensures the header spans the full width of the viewport */
  background-color: #333;
  /* Background color for the header */
  color: #fff;
  /* Text color */
  z-index: 300;
  /* Ensures the header stays above other elements */
  display: flex;
  /* Flexbox for layout */
  justify-content: space-between;
  /* Space between left, center, and right sections */
  align-items: center;
  /* Vertically center the content */
  padding: 0 10px;
  /* Horizontal padding only */
  box-sizing: border-box;
  /* Includes padding and border in the height */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Optional: Add a shadow for better visibility */
}

#header-logo {
  height: 30px;
  /* Adjust the height to fit within the header */
  width: auto;
  /* Maintain aspect ratio */
  margin-right: 10px;
  /* Add spacing between the logo and the text */
}

h1 {
  font-size: 20px;
  /* Adjust font size to fit within the header */
  margin: 0;
  /* Remove default margin */
  line-height: 1;
  /* Ensure proper alignment */
}

#headerContainer .right {
  display: flex;
  align-items: center;
  /* Vertically center items */
  justify-content: flex-end;
  /* Align items to the left */
}

#headerContainer .left {
  display: flex;
  align-items: center;
  /* Vertically center items */
  justify-content: flex-start;
  /* Align items to the left */
}

#headerContainer .center {
  flex: 1;
  /* Center the "StreamListv" text */
  justify-content: center;
}

#headerContainer button {
  padding: 5px 10px;
  /* Adjust button padding */
  font-size: 12px;
  /* Adjust font size */
  height: 30px;
  /* Ensure buttons fit within the header */
}

#headerContainer p {
  margin: 0;
  /* Remove default margin */
  font-size: 14px;
  /* Adjust font size for the text */
  line-height: 1;
  /* Ensure text fits within the header */
}

.section {
  margin-bottom: 5px;
  text-align: left;
}

.section-title {
  font-size: larger;
  font-weight: bold;
  margin-bottom: 0px;
}

.note {
  margin-top: 20px;
  font-size: small;
  font-style: italic;
}

.section p {
  margin-top: 0;
  /* Remove default top margin on paragraph */
  margin-bottom: 0;
  /* Optional: Also remove bottom margin */
}

.left-header {
  width: 25%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  /* Align items to the left */
  padding: 10px;
  gap: 1px;
}

.center-header {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Center items horizontally */
  align-items: center;
  /* Vertically align to top */
  padding: 10px;
  gap: 1px;
}

/* Right side (stack of buttons vertically) */
.right-header {
  width: 25%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* Align buttons to the top */
  align-items: center;
  /* Align items to the right */
  padding: 10px;
  gap: 1px;
}




/*---------------------------------------------------------------------------
Buttons
---------------------------------------------------------------------------*/
button {
  padding: 2px;
  font-size: 12px;
  background-color: var(--button-color);
  /* Default button */
  color: var(--text-color);
}

.custom-button {
  /*background-color: #3B82F6;*/
  background-color: var(--button-color);
  /* Default button */
  color: var(--text-color);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 120px;
  height: 25px;
  font-weight: 500;
  border: 1px solid var(--button-border);
  padding: 5px;
  text-transform: none;
  transition: all 0.3s;
  box-sizing: border-box; /* Include padding in width/height calculations */
  justify-content: center;
  /* Center the text */
  align-items: center;
  outline: none;
}
.custom-button.header{
  border-radius: 4px 4px 0 0;
  font-style: bold;
  font-size: large;
  /* Round off the top */
}

.custom-button.flatBotRoundTop{
  border-radius: 4px 4px 0 0; /* Match the header button's rounded top corners */
}

.custom-button:hover {
  background-color: var(--button-hover-color);
  color: var(--text-color);
  filter: brightness(110%);
}

/* Enabled state */
.custom-button-enabled {
  background-color: #0056b3;
  /* Slightly darker shade */
}

.custom-button:focus {
  outline: 2px solid #60A5FA;
}


/* Highlight overlay for inserting a new player */
.drag-over-insert {
  border: 10px dashed rgb(255, 255, 255);
}

/* Highlight overlay for reordering containers */
.drag-over-reorder {
  border: 2px dashed blue;
}

.large-import-button {
  background-color: var(--button-color);
  /* Default button */
  color: var(--text-color);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  /* Adjusted width */
  height: 40px;
  /* Adjusted height */
  font-weight: bold;
  /* Make the text bold */
  font-size: 18px;
  /* Adjusted font size */
  border: none;
  /* Remove border */
  text-transform: none;
  transition: all 0.3s;
  justify-content: center;
  /* Center the text */
  align-items: center;
  /* Center buttons horizontally */
}

/*---------------------------------------------------------------------------
Player Container overlay
---------------------------------------------------------------------------*/
/* Overlay for containers */
.container-overlay {
  cursor: grab;
  /* Show a grab cursor */
  background-color: rgba(0, 0, 0, 0.3);
  /* Optional: Slightly tinted for visibility */
}

/* Highlight the container being dragged */
.dragging {
  opacity: 0.5;
  /* Make the dragged element semi-transparent */
  transform: scale(1.05);
  /* Slightly enlarge the element */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* Add a shadow for emphasis */
  z-index: 9999;
  /* Ensure it appears above other elements */
}

/* Highlight the drop target */
.drag-over-before {
  border-top: 2px solid var(--button-color);
}

.drag-over-after {
  border-bottom: 2px solid var(--button-color);
}

/*---------------------------------------------------------------------------
---------------------------------------------------------------------------*/

#text-display {
  margin-top: 20px;
  font-size: 18px;
}

/* Container for twitch stream 
Got size of stream to adjust, now going to try to make it maintain proper aspect ratio

#twitch_wrapper {
  background-color: red;
  height: 75vh;
  width: 75vw;
  border: 20px solid yellow;
}

#twitch_embed {
  background-color: red;
  height: 100%;
  width: 100%;
  border: 3px solid green;
}
*/

:root {
  --aspect-ratio: 56.25%;
  /* default 16:9 aspect ratio */
  --twitch_wrapper_border: 5px;
  --twitch_wrapper_viewwidth: 80%;
}



#player-container {
  position: fixed;
  /*top: 10px;
  left: 11px; */
  display: flex;
  flex-direction: row;
  margin: 0;
  /* height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
  margin-left: calc((var(--toggle-button-size) / 2));
  transition: margin-left 0.3s ease; */
  /* Smooth transition when the sidebar is toggled */
  background-color: rgb(43, 33, 33);
  overflow-x: visible;
  overflow-y: visible;
}

#twitch_wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  background-color: rgb(26, 17, 17);
  width: var(--twitch_wrapper_viewwidth);
  height: 0;
  padding-bottom: calc(9 / 16 * var(--twitch_wrapper_viewwidth));
  /* set the padding-bottom based on the aspect ratio and width */
  position: relative;
  /* set the position to relative */
  border: var(--twitch_wrapper_border) solid rgb(22, 22, 8);
}

#twitch_embed {
  flex: 1;
  margin: 0 5px;
  position: absolute;
  /* set the position to absolute */
  top: calc(var(--twitch_wrapper_border) / 2 * -1);
  /* set the top to 0 */
  left: calc(var(--twitch_wrapper_border) / 2 * -1);
  /* set the left to 0 */
  width: 100%;
  /* set the width to 100% */
  height: 100%;
  /* set the height to 100% */
  /* border: calc(var(--twitch_wrapper_border) / 2) solid green; */
}

.player-dragging {
  opacity: 0.5;
  /* Make the player semi-transparent while dragging */
  border: 2px dashed red;
  /* Optional: Add a border to indicate dragging */
}

#chat_embed {
  height: 100%;
  width: 100%;
}


#entryContainer {
  max-height: 300px;
  /* Adjust height as needed */
  overflow-y: auto;
  /* Enables vertical scrolling */
  scroll-behavior: smooth;
  /* Optional: Smooth scroll behavior */
}

.draggable-btn {
  pointer-events: auto;
  cursor: grab;
}

.containerX {
  float: left;
  display: flex;
  flex-direction: row;
  width: 70vh;
  height: 70vh;
}

.containerY {
  float: left;
  display: flex;
  flex-direction: column;
  width: 70vh;
  height: 70vh;
}

.container {
  display: flex;
  flex-direction: row;
  width: 70vh;
  height: 70vh;
}







input {
  flex: 1;
  /* Take up remaining space */
  height: 100%;
  /* Fill the container height */
  border: 1px solid #ccc;
  /* Style the input */
  padding: 5px;
  /* Optional: Add padding */
  box-sizing: border-box;
  /* Include padding and border in width */
}



#SortableAndRemoveDiv {
  display: flex;
  /* Use flexbox for horizontal alignment */
  width: 100%;
  /* Set total width */
  height: 100%;
  /* Set total height */
  box-sizing: border-box;
  /* Include padding and border in width */
}

.button-box {
  width: var(--left-sidebar-width) - 5px;
  /* Width of button container */
  height: 100%;
  /* Fill the container height */
  border: 1px solid #ccc;
  /* Optional: Add a border for visibility */
  display: flex;
  /* Align buttons vertically */
  flex-direction: column;
  /* Vertical stacking */
  padding: 10px;
  /* Optional: Add padding */
}




textarea {
  width: 100%;
  height: 500px;
  margin: 10px 0;
  color: var(--text-color);
  /* Default text color */
  background-color: #1a1a1a;
}




/*---------------------------------------------------------------------------
Options menu toggles
---------------------------------------------------------------------------*/
/* Container for the toggle switch */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 25px;
  display: inline-block;
}

/* Hide the default checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider styling */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 25px;
  transition: background-color 0.3s;
}

/* Circle inside the slider */
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 2.5px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Checked state for the slider */
input:checked+.slider {
  background-color: #4CAF50;
  /* Green when enabled */
}

/* Move the circle to the right when checked */
input:checked+.slider:before {
  transform: translateX(25px);
}

/*---------------------------------------------------------------------------
Modal Styling
---------------------------------------------------------------------------*/
/* Modal container (hidden by default) */
.modal {
  display: block;
  /* Hidden by default */
  position: fixed;
  z-index: 400;
  left: 0;
  top: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent background */
  pointer-events: auto;
}

/* Modal content box */
.modal-content {
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  background-color: var(--background-color-dark);
  border-color: var(--button-border);
  width: auto;
  max-width: 800px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  flex-direction: column;
  align-items: center;
}

/* Center the Title */
.modal-title {
  text-align: center;
  margin-bottom: 20px;
}

/* Checkbox and Label Styles */
.checkbox-container {
  display: flex;
  flex-direction: column;
}

.checkbox-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.checkbox-row input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
  /* Increase checkbox size */
}

.checkbox-row h4 {
  margin: 0;
  padding-left: 10px;
}



.checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between toggle and description */
}

.toggle-switch {
  position: relative;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

select {
  background-color: #444444;
  /* Your preferred select background */
  color: var(--text-color);
  border: 1px solid #666666;
  padding: 5px;
  border-radius: 4px;
  width: 25%;
}

/*---------------------------------------------------------------------------
Below stream Styling
---------------------------------------------------------------------------*/




/* CSS for resize handles */
.resize-handle {
  display: none;
  position: absolute;
  background-color: orange;
  /* Bright orange for visibility */
  z-index: 9899;
  /* High z-index to ensure it appears above other elements */
  width: 20px;
  /* Larger width */
  height: 20px;
  /* Larger height */
  border: 2px solid black;
  /* Optional: Add a black border for contrast */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  /* Optional: Add a shadow for better visibility */
}

.edit-layout-active .resize-handle {
  display: block;
}

/* Top handle */
.resize-top {
  top: -10px;
  /* Adjust to position correctly */
  left: 50%;
  transform: translateX(-50%);
  cursor: n-resize;
}

/* Right handle */
.resize-right {
  top: 50%;
  right: -10px;
  /* Adjust to position correctly */
  transform: translateY(-50%);
  cursor: e-resize;
}

/* Bottom handle */
.resize-bottom {
  bottom: -10px;
  /* Adjust to position correctly */
  left: 50%;
  transform: translateX(-50%);
  cursor: s-resize;
}

/* Left handle */
.resize-left {
  top: 50%;
  left: -10px;
  /* Adjust to position correctly */
  transform: translateY(-50%);
  cursor: w-resize;
}

/* Top-left corner handle */
.resize-top-left {
  top: -10px;
  /* Adjust to position correctly */
  left: -10px;
  /* Adjust to position correctly */
  cursor: nw-resize;
}

/* Top-right corner handle */
.resize-top-right {
  top: -10px;
  /* Adjust to position correctly */
  right: -10px;
  /* Adjust to position correctly */
  cursor: ne-resize;
}

/* Bottom-left corner handle */
.resize-bottom-left {
  bottom: -10px;
  /* Adjust to position correctly */
  left: -10px;
  /* Adjust to position correctly */
  cursor: sw-resize;
}

/* Bottom-right corner handle */
.resize-bottom-right {
  bottom: -10px;
  /* Adjust to position correctly */
  right: -10px;
  /* Adjust to position correctly */
  cursor: se-resize;
}






/* ---------------------------------------------------------------------------
collapsable windows on main page
---------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
Chat container 
---------------------------------------------------------------------------*/
#right-sidebar {
  position: fixed;
  display: flex;
  flex-direction: column; /* Stack children vertically */

  top: var(--header-height);
  right: 0;
  width: var(--right-sidebar-width);
  height: calc(100% - var(--header-height));

  background-color: var(--background-color);
  color: var(--text-color);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  /* Shadow for separation */
  transition: transform 0.3s ease;
  /* Smooth transition for collapsing */
  z-index: 200;
  /* Ensure it appears above other elements */
}

/* Collapsed state */
#right-sidebar.collapsed {
  transform: translateX(100%);
  /* Move the chat off-screen */
}

/* Chat toggle button */
#right-sidebar-toggle-button {
  position: absolute;
  top: 10px;
  /* Position the button 10px from the top */
  left: calc(-1 * var(--toggle-button-offsetPercentage) * var(--toggle-button-size));
  /* Position the button outside the chat container */
  width: var(--toggle-button-size);
  /* Adjust width as needed */
  height: calc(var(--toggle-button-size) * 1.5);
  /* Adjust height as needed */
  background-color: var(--button-color);
  /* Blue background */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Shadow for the button */
  transition: transform 0.3s ease;
  transition: left 0.3s ease;
  /* Smooth rotation for the arrow */
  z-index: 299;
  padding: 0px;
  /* Ensure it appears above other elements */
}

/* Rotate the button arrow when collapsed 
#right-sidebar.collapsed #right-sidebar-toggle-button {
  transform: rotate(180deg);
}
*/
/* ---------------------------------------------------------------------------
sortable streamlist container 
---------------------------------------------------------------------------*/

/* Sortable container */
#left-sidebar {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--left-sidebar-width);
  height: calc(100vh - var(--header-height));
  /* Full height of the viewport */
  background-color: var(--background-color);
  /* Match the site's dark background */
  color: var(--text-color);
  /* White text for contrast */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
  /* Slightly darker shadow for separation */
  transition: transform 0.3s ease, margin-left 0.3s ease;
  /* Smooth transition for collapsing */
  z-index: 200;
  /* Ensure it appears above other elements */
  padding: 4px;
  /* Add padding for content inside the sidebar */
  box-sizing: border-box;
  /* Include padding in width/height calculations */
  overflow-x: visible;
  /* Prevent horizontal scrolling */
  overflow-y: visible;
  /* Allow vertical scrolling if needed */
}

/* Collapsed state */
#left-sidebar.streamlist-list-group {
  background-color: var(--background-color);
  /* Light background for the container */
}

/* Collapsed state */
#left-sidebar.collapsed {
  transform: translateX(-100%);
  /* Move the container off-screen */
}

/* When the sidebar is collapsed
#left-sidebar.collapsed~#player-container {
  margin-left: var(--toggle-button-size)/2;
}
 */

#streamlist-list-group-container {
  position: relative;
  /* Make this container the positioning context */
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  height: auto;
  width: 100%;
  max-height: 60%; /* Ensure it doesn't grow into the button area */
  /* Take up the full height of the parent */
  overflow-x: hidden;
  /* Disable horizontal scrolling */
  overflow-y: auto;
  /* Allow vertical scrolling */
  padding-bottom: 100px;
  /* Add space for the remove box */
  box-sizing: border-box;
  /* Include padding in height calculations */
  overflow-y: auto; /* Enable vertical scrolling */
  padding-bottom: 10px; /* Add spacing at the bottom */
  padding-top: 2px; /* remove spacing at the top */
  /* Hide scrollbars */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE and Edge */
}
 /* Hide scrollbars */
#streamlist-list-group-container::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Opera */
}
/* Ensure the left-sidebar-buttons-container is at the bottom */
#left-sidebar-buttons-container {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  gap: 2px; /* Add spacing between buttons */
  padding: 5; /* Add padding around the container */
  box-sizing: border-box; /* Include padding in width/height calculations */
  background-color: var(--background-color);
  align-items: stretch; /* Ensure buttons take full width */
  margin-top: auto; /* Push the container to the bottom of the sidebar */
  flex-shrink: 0; /* Prevent the container from shrinking */
}

/* Sortable toggle button */
#left-sidebar-toggle-button {
  position: absolute;
  top: 10px;
  right: calc(-1 * var(--toggle-button-offsetPercentage) * var(--toggle-button-size));
  /* Position the button outside the chat container */
  width: var(--toggle-button-size);
  /* Adjust width as needed */
  height: calc(var(--toggle-button-size) * 1.5);
  /* Adjust height as needed */
  /* Adjust height as needed */
  background-color: var(--button-color);
  /* Blue background */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Shadow for the button */
  transition: transform 0.3s ease;
  transition: right 0.3s ease;
  /* Smooth rotation for the arrow */
  z-index: 299;
  /* Ensure it appears above other elements */
  padding: 0px;
}
/* Rotate the button arrow when collapsed 
#left-sidebar.collapsed #left-sidebar-toggle-button {
  transform: rotate(180deg);
}
*/
.list-group-item {
  width: 100%;
  display: flex;
  /* Use flexbox for centering */
  align-items: center;
  /* Vertically center the text */
  justify-content: center;
  /* Horizontally center the text */
  background-color: #444444;
  /* Dark background for readability */
  color: var(--text-color);
  /* White text for contrast */
  border: 1px solid #555555;
  /* Subtle border for separation */
  border-radius: 5px;
  /* Rounded corners for a modern look */
  font-size: 14px;
  /* Adjust font size for readability */
  cursor: grab;
  /* Indicate draggable behavior */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Add a subtle shadow for depth */
  transition: background-color 0.2s ease, transform 0.2s ease;
  /* Smooth hover effects */
  box-sizing: border-box; /* Include padding and border in width calculations */

}

.list-group-item:hover {
  background-color: #555555;
  /* Slightly lighter background on hover */
  transform: scale(1.02);
  /* Slightly enlarge on hover */
}

.list-group-item:active {
  cursor: grabbing;
  /* Change cursor when dragging */
  background-color: #666666;
  /* Darker background when active */
}

.list-group-container {
  cursor: grabbing;
  /* Change cursor when dragging */
  background-color: #666666;
  /* Darker background when active */
}

/*---------------------------------------------------------------------------
Sortable button class colors
---------------------------------------------------------------------------*/
.streamIDentry {
  position: relative;
  width: 100%;
  justify-content: start;
  padding: 2px 3px;
  margin: 0px 0;
  background-color: #444444bd;
  color: var(--text-color);
  border: 1px solid #555555;
  border-radius: 1px;
  font-size: 13px;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding-left: 20px;
  border-radius: 1px;
  border-color: black;
  box-sizing: border-box;
}

/* Subclasses for specific states */

.streamIDentry.playing {
  background-color: #4CAF50 !important;
}

.streamIDentry.active {
  position: relative;
  /* Make the button the positioning context for the pseudo-element */
}

/* Active (online) */
.streamIDentry.active::before {
  transition: background 0.2s;
  content: "";
  /* Required for the pseudo-element to display */
  position: absolute;
  /* Position it relative to the button */
  top: 5px;
  /* Position the dot 5px from the top of the button */
  left: 5px;
  /* Position the dot 5px from the left of the button */
  width: 10px;
  /* Set the width of the circle */
  height: 10px;
  /* Set the height of the circle */
  background-color: red;
  /* Set the color of the circle */
  border-radius: 50%;
  /* Make it a circle */
}

/* Ignored and Active (online) */
.streamIDentry.ignored {
  color: #bbbbbb !important;
  /* Keep the gray text */
  text-decoration: line-through !important;
  /* Keep the strikethrough */
}

.streamIDentry.active.ignored::before {
  content: "";
  /* Keep the red circle */
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

.streamIDentry.invisible {
  display: none;
  /* Initially hidden */
}

/* Invalid entry */
.streamIDentry.invalid {
  background-color: #393b23 !important;
  /* Light lavender */
}
/* Invalid entry */
.streamIDentry.inactive {
  background-color: #242424 !important;
  color: #bbbbbb !important;
  /* Light lavender */
}
.streamIDentry.badChannel {
  background-color: #4a1f1f !important;  /* deep muted red */
  color: #ffdddd !important; /* soft readable text */
}
.streamIDentry.inactive.badChannel,
.streamIDentry.badChannel.inactive {
  background-color: #4a1f1f !important;
  color: #ffdddd !important;
}

.show-actions .entry-action-buttons {
  opacity: 1;
  pointer-events: auto;
}

.show-actions .entry-action-buttons {
  opacity: 1;
  pointer-events: auto;
}




.streamIDentry.expanded-entry {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  min-width: 240px;   /* 2x width or as needed */
  width: 400px;       /* or any fixed/desired width */
  max-width: 90vw;    /* prevent overflow on very small screens */
  min-height: 120px;  /* 3x height */
  background: #222;
  z-index: 999;
  box-shadow: 0 4px 24px #000a;
  /* Optionally add a border or outline for clarity */
}

.expanded-entry-image {
  float: left;
  width: 60px;
  height: 60px;
  margin: 10px 16px 10px 10px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0005;
}

.expanded-entry-details {
  margin-left: 80px;
  color: #fff;
  font-size: 0.95em;
  text-shadow: 1px 1px 2px #000;
}





.activeStreamlist-dropdown-button-text {
  pointer-events: none;
}


.entry-action-buttons {
  position: absolute;
  top: 0;
  right: 4%;
  border-radius: 50%;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 270;
}

.entry-action-buttons button {
  background: none;
  border: none;
  font-size: 10px;
  color: var(--text-color);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* soft shadow */
  cursor: pointer;
  opacity: 1;
  z-index: 270;
}
.entry-action-buttons button:hover {
  background: #eeeeee42;
}


.dropdown-container {
  position: relative; /* Make this container the positioning context */
  display: inline-block; /* Keep the button and dropdown inline */
}

/* Dropdown menu container */
.dropdown-menu {
  /* 
  display: none; Handled by hidden class */
  display: block; /* Show the dropdown */
  position: absolute; /* Position the dropdown relative to the container */
  top: 100%; /* Position it directly below the button */
  right: 0; /* Align the dropdown to the right edge of the button */
  background-color: var(--background-color); /* Dropdown background color */
  border: 2px solid var(--button-hover-color); /* Optional: Add a border */
  border-radius: 5px; /* Optional: Add rounded corners */
  padding: 0px 5px; /* Add padding inside the dropdown */
  min-width: 150px; /* Set a minimum width for the dropdown */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
  z-index: 280;
}

.dropdown-menu ul {
  list-style: none; /* Remove default list styling */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.dropdown-menu li {
  padding: 7px 8px; /* Reduce padding for a more compact look */
  font-size: 14px; /* Adjust font size for readability */
  cursor: pointer; /* Pointer cursor on hover */
  border-bottom: 1px solid var(--button-hover-color); /* Add a line between items */
}

.dropdown-menu li:last-child {
  border-bottom: none; /* Remove the border for the last item */
}

.dropdown-menu li:hover {
  background-color: var(--button-hover-color); /* Highlight the item on hover */
}
.dropdown-menu.left-aligned {
  left: 0 !important; /* Align the dropdown to the left edge of the button */
}
.dropdown-menu.right-aligned {
  right: 0 !important; /* Align the dropdown to the right edge of the button */
}

.dropdown-item{
  background-color: var(--background-border);
}


/* ---------------------------------------------------------------------------
add-channel-container
---------------------------------------------------------------------------*/
#controls-container {
  display: flex;
  height: auto;
  /* Arrange items in a row */
  flex-direction: row;
  align-items: center;
  /* Vertically center the input and button */
  gap: 5px;
  /* Add spacing between the elements */
  flex-wrap: nowrap;
  /* Prevent items from wrapping to the next row */
  margin-bottom: 20px;
}

.controls-button {
  width: 40;
  /* Set width */
  height: 15px;
  /* Set height */
  display: flex;
  /* Center the + icon */
  align-items: center;
  /* Center the + icon */
  justify-content: center;
  /* Center the + icon */
  align-self: flex-start;
  /* Prevent stretching */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
  margin-top: 10px;
  margin-bottom: 10px;
}

#streamlist-selector-container {
  display: flex;
  height: auto;
  /* Arrange items in a row */
  flex-direction: row;
  align-items: center;
  /* Vertically center the input and button */
  gap: 5px;
  /* Add spacing between the elements */
  flex-wrap: nowrap;
  /* Prevent items from wrapping to the next row */
}


.custom-selector:focus {
  outline: none; /* Remove default focus outline */
  border-color: var(--button-hover-color); /* Optional: Highlight border on focus */
}

.custom-selector:hover {
  background-color: var(--button-hover-color) !important; /* Match the custom-button hover effect */
  outline: 1px solid var(--button-hover-color); /* Reduce the outline thickness */
}
/* Dropdown menu styling */
.custom-selector option {
  background-color: var(--background-color); /* Set dropdown background to background color */
  color: var(--text-color); /* Match the text color */
  font-size: 12px;
  padding: 2px; /* Adjust padding for better spacing */
  border: none; /* Remove any default border (if supported) */
  font-weight: normal;
}
.custom-selector.option:hover {
  background-color: var(--button-hover-color) !important; /* Match the custom-button hover effect */
}

/* appearance: none; /* Remove default dropdown arrow (browser-specific) */
/*-webkit-appearance: none;  Remove default dropdown arrow for WebKit browsers */
/*-moz-appearance: none;  Remove default dropdown arrow for Firefox */





#activeStreamlist-selector::placeholder {
  color: rgba(255, 255, 255, 0.6);
  /* Lighter white for placeholder text */
}

/* Optional: Add a custom dropdown arrow */
#activeStreamlist-selector {
  position: relative;
  background-color: var(--background-color);
  /* Match the dark gray background of the page */
  background-position: right 5px center;
  background-size: 10px;
}

#add-channel-container {
  display: flex;
  height: auto;
  /* Arrange items in a row */
  flex-direction: row;
  align-items: center;
  /* Vertically center the input and button */
  gap: 5px;
  /* Add spacing between the elements */
  flex-wrap: nowrap;
  /* Prevent items from wrapping to the next row */
}

.left-sidebar-info-span {
  display: inline-block;
  /* Ensures the span respects width and max-width */
  max-width: 50px;
  /* Limit the maximum width */
  font-size: 13px;
  /* Adjust font size */
  align-self: center;
}

.custom-inputbox {
  background-color: transparent;
  /* Blend with the background */
  border: none;
  /* Remove default border */
  border-bottom: 2px solid white;
  /* Add white underline */
  color: white;
  /* White text */
  font-size: 14px;
  /* Adjust font size */
  padding: 5px;
  /* Add some padding for better usability */
  outline: none;
  /* Remove focus outline */
  flex-grow: 1;
  /* Prevent the input from growing */
  width: 100px;
  /* Allow the input to take up available space */
}

.custom-inputbox::placeholder {
  color: rgba(255, 255, 255, 0.6);
  /* Lighter white for placeholder text */
}

#newEntry-button {
  width: 20px;
  /* Set width */
  height: 20px;
  /* Set height */
  display: flex;
  /* Center the + icon */
  align-items: center;
  /* Center the + icon */
  justify-content: center;
  /* Center the + icon */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
  margin-right: 10px;
}


.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,  /* 0 for outlined, 1 for filled */
    'wght' 400, /* Weight of the icon */
    'GRAD' 0,   /* Gradient */
    'opsz' 24;  /* Optical size */
  font-family: 'Material Symbols Outlined';
  display: inline-block;
  vertical-align: middle; /* Aligns the icon with text */
  line-height: 1; /* Prevents extra spacing */
}




#rotating-load-span {
  position: absolute;
  top: calc(100% + 25px); /* Position it just below the button */
  left: 50%;
  transform: translateX(-50%);
  z-index: 280; /* Ensure it appears above other elements */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a background for visibility */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 70px;
  text-align: center;
  animation: rotate 2s linear infinite; /* Add rotation animation */
  pointer-events: none;
}

@keyframes rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}




.link-container {
  width: 50ch;              /* approx 50 characters wide */
  max-height: 4em;        /* 3 lines of text (3 * 1.5 line-height) */
  overflow-y: auto;         /* scroll vertically if content overflows */
  background-color: var(--background-color-dark);
  border: 1px solid;
  padding: 0.5em;
  border-radius: 5px;
  font-family: monospace;   /* fixed-width font, good for long links */
  word-wrap: anywhere;    /* break long words/URLs to wrap nicely */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-align: left;
  user-select: all;
}








 /* Global modiviers */
.tiny {
  font-size: 12px !important;
}
.small {
  font-size: 14px !important;
}
.medium {
  font-size: 16px !important;
}
.large {
  font-size: 20px !important;
}
.bold {
  font-weight: bold !important;
}
.noPad {
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
.dense {
  padding: 2px 4px !important;
  margin: 0px 0px !important;
}
.fillwidth {
  width: 100% !important;
}
.hidden {
  display: none !important;
  pointer-events: none !important;;
  opacity: 0 !important;;
}
.topMargin {
  margin-top: 2em !important;
}
.flex {
  display:flex !important;
}

.center-horizontal {
  display: flex !important;
  justify-content: center !important;
}

.center-vertical {
  display: flex !important;
  align-items: center !important;
}

.center-both {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.no-focus-outline:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


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

.center-horizontal-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.noYscroll {
  overflow-y: hidden !important;
}

body.listbuilder-no-scroll,
html.listbuilder-no-scroll {
  overflow-y: hidden !important;
}












.onboarding-message {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 60vw;
  max-width: 600px;
  min-width: 300px;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 32px;
  color: #fff;
  z-index: 180;
  pointer-events: none; /* Allows mouse events to pass through to the sides */
  background: rgba(0,0,0,0.35);
  padding: 24px 16px 16px 16px;
  border-radius: 16px;
  box-shadow: 0 4px 24px #000a;
}



/* Overlay background */
#onboarding-overlay {
  position: fixed;
  top: var(--header-height); 
  left: var(--left-sidebar-width); 
  right: var(--right-sidebar-width); 
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 150;
  display: flex;
  backdrop-filter: blur(3px);
}

/* Split sides */
.onboarding-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
  position: relative;
}

.onboarding-side.left:hover {
  background: rgba(255,255,255,0.08);
}
.onboarding-side.right:hover {
  background: rgba(255,255,255,0.18);
}

/* Text styling */
.onboarding-text {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow:
    2px 2px 8px #000,
    0 0 2px #000,
    0 0 1px #000;
  padding: 4%;
  border-radius: 16px;
  background: rgba(0,0,0,0.2);
  border: 2px solid rgba(255,255,255,0.1);
  user-select: none;
  width: max(500px, 25vw);
  height: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 180;
}







.entry-popover {
  display: flex;
  align-items: flex-start;
  background: #222;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 24px #000a;
  padding: 7px;
  z-index: 9999;
  /* No fixed width: let content decide */
  max-width: 90vw;
}

.popover-image {
  height: 135px;
  width: 240px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 16px;
  flex-shrink: 0;
}
/*
.popover-details {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 0;
  max-width: 100vw; 
}*/
.popover-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space out channel/category and viewers */
  height: 135px;                  /* Match image height */
  min-width: 0;
  max-width: 100vw;
}


.popover-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  width: max-content; /* Make header as wide as its content */
  max-width: 100%;
}

.popover-channel {
  font-size: 1.6em;
  font-weight: bold;
  white-space: nowrap;
  margin-bottom: 4px;
}


.popover-category {
  font-size: 1em;
  color: #ccc;
  white-space: nowrap;
  margin-bottom: 4px;
}


.popover-title {
  font-size: .8em;
  word-break: break-word;
  white-space: normal;
  max-width: inherit;
  width: 100%;
  display: block;
}

.popover-viewers {
  font-size: 0.7em;
  color: #ffd700;
  background: rgba(0,0,0,0.4);
  padding: 2px 10px;
  border-radius: 6px;
  align-self: flex-start; /* Left align */
  margin-top: auto;       /* Push to bottom */
}



















#activeChat-dropdown-button {
  /* margin-top: 5%; */
  padding-left: 5px;
  padding-right: 5px;
}




.dropdown-item.active-chat::before {
  content: "";
  /* Keep the red circle */
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

.dropdown-item.pinned-chat::before {
  content: "keep"; /* or use a FontAwesome/material icon */
  margin-right: 6px;
  color: #4CAF50;
  font-size: 1.1em;
  vertical-align: middle;
}







.tutorial-blur-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9998;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


.tutorial-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(0,0,0,0.4);
}
.tutorial-overlayold {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  pointer-events: none;
}

.tutorial-highlight {
  position: absolute;
  border: 3px solid #2196f3;
  border-radius: 5px;
  box-shadow: 5px 5px 25px #2196f3;
  z-index: 10000;
  pointer-events: none;
}

.tutorial-message-box {
  position: fixed;
  left: 50%; top: 80px;
  transform: translateX(-50%);
  background: var(--button-color);
  color: #fff;
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 24px #2196f3;
  z-index: 10001;
  font-size: 1.1em;
  width: 420px;
  height: 140px;
  text-align: center;
}
.tutorial-message-box span {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
  align-self: unset;
  pointer-events: none; /* Optional: let clicks pass through */
}

.tutorial-message-box button {
  margin-top: 16px;
  padding: 8px 24px;
  background: var(--button-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
}

.tutorial-arrow {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 10001;
  background: transparent;
  font-size: 2em;
  color: #2196f3;
  pointer-events: none;
  text-align: center;
  line-height: 40px;
}
.tutorial-arrow-right::after { content: "→"; }
.tutorial-arrow-left::after { content: "←"; }
.tutorial-arrow-down::after { content: "↓"; }
.tutorial-arrow-up::after { content: "↑"; }



















.listBuilder {
  max-width: 1200px;
  margin: 0 auto;
  width: 60vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #222;
  padding: 32px 16px;
  box-sizing: border-box;
}

.listBuilder .column-row-section {
  width: 100%;
}

.listBuilder .list-header {
  text-align: center;
  margin-bottom: 24px;
  color: #fff;
}

.listBuilder .search-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.listBuilder .searchbar {
  width: 320px;
  max-width: 100%;
  padding: 8px 12px;
  font-size: 1.1em;
  border-radius: 6px;
  border: 1px solid #444;
}


.listBuilder .carousel {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    gap: 32px;
    padding: 16px 0;
}

.listBuilder .carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.listBuilder .carousel-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.listBuilder .carousel-title {
  color: #fff;
  font-size: 1em;
  text-align: center;
}
.listBuilder .carousel::-webkit-scrollbar {
  height: 8px;
}
.listBuilder .carousel::-webkit-scrollbar-thumb {
  background: #2196f3;
  border-radius: 4px;
}
.listBuilder .divider {
  width: 100%;
  border: none;
  border-top: 2px solid #444;
  margin: 0 0 24px 0;
}

.listBuilder .grid-row {
  width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 60vh;
}

.listBuilder .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 32px;
  padding: 16px 0;
}
/* Base state */
.listBuilder .grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background-color: var(--background-color-dark);
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  border: 3px solid transparent; /* placeholder so border doesn't jump in */
}

/* Hover effect */
.listBuilder .grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Selected state */
.listBuilder .grid-item.listBuilder-selected {
  border: 3px solid var(--button-hover-color); /* bright blue outline */
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.795); /* glowing effect */
}

/* Selected + Hover (optional extra glow) */
.listBuilder .grid-item.listBuilder-selected:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.9);
}

.listBuilder .grid-thumbnail {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 2px solid var(--button-border);
}
.listBuilder .grid-channelName {
  color: var(--text-color);
  font-size: 1.1em; /* slightly larger */
  font-weight: 600;
  text-align: center;
  margin-bottom: 2px;
  margin: 0;
}
.listBuilder .grid-category {
  color: #aaa; /* softer contrast than white */
  font-size: 0.85em; /* smaller for hierarchy */
  font-weight: 400;
  text-align: center;
  margin: 0;
}