/* #region Body */
body {
    /*font-family: Arial, sans-serif;
     Apply Segoe UI to the entire page */

    /*font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Inter', Helvetica, Arial, sans-serif;*/
    font-family: "-apple-system",BlinkMacSystemFont,"-webkit-system-font","Malgun Gothic","Segoe UI","Helvetica Neue",Helvetica,sans-serif;
    
    background-color: #121212;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
/* #endregion */

/* #region Header */
.header {
    background-color: #202020;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.header img {
    width: 200px;
    vertical-align: middle;
}
/* #endregion */

/* #region topNav */
.nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.nav-bar a {
    color: #ffffff;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

.nav-bar a:hover {
    color: #0084FA;
}
/* #endregion */

/* #region My Stuff */
#header-band {
    width: 100%;
    height: 120px; /* Adjust height as needed */
    background-color: #333; /* Light grey band */
    display: flex;
    align-items: center;
    padding-left: 40px; /* Padding to align left */
    padding-top: 40px;
    vertical-align: middle;
    display: none;
}

#header-band h1 {
    color: #ffffff; /* Black color for H1 */
    font-size: 2.5rem; /* Adjust as needed */
    margin: 0;
    display: none;
}

#header-band h2 {
    color: #f7f5f5; /* Darker grey for H2 */
    font-size: 1.2rem; /* Adjust as needed */
    margin: 0;
    margin-top: 10px; /* Space between H1 and H2 */
    display: none;
}

#myStuffSection {
    display: none;
    width: 100%;
    padding-left: 40px; /* Padding to align left */
    padding-top: 10px;
    background-color: #1f1f1f;
    color: white;
}

#myStuffSection h1 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

#myStuffSection h3 {
    color: #ACB2C0;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

#myStuffSection h1,
#myStuffSection h3 {
    display: none; /* Hide the header and subtitle by default */
}

.my-stuff-category {
    margin-bottom: 60px;
}

.my-stuff-category h2 {
    font-size: 1.6rem;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: left;
}

#modal-endCaptureButton {
    padding: 5px 10px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75em;
    margin: 1px 0 3px 3px;
    display: none; /* Initially hidden */
}

#modal-cancelCaptureButton {
    padding: 5px 10px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75em;
    margin: 1px 0 3px 3px;
    display: none; /* Initially hidden */
}

scheduleSection {
    display: block;
}

/* General modal styles */
/* Modal container */
#saveMomentModal.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Dark background overlay */
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* Modal content styles */
#saveMomentModal .modal-content {
    background-color: #030303;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

/* Modal header */
#saveMomentModal .modal-header h2 {
    text-align: left;
    margin-bottom: 20px;
}

/* Body section styles */
#saveMomentModal .modal-body {
    display: flex;
    flex-direction: column; /* Stack everything vertically */
    align-items: flex-start;
    gap: 20px; /* Space between elements */
}

/* Left side: Show icon, show name, and episode name */
#saveMomentModal .modal-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* Space between icon and text */
}

#saveMomentModal .modal-left img {
    max-width: 150px;
    border-radius: 8px;
}

/* Right side: Inputs and length display */
#saveMomentModal .modal-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%; /* Ensure full width */
    gap: 15px; /* Space between input fields */
}

#saveMomentModal .modal-right input,
#saveMomentModal .modal-right textarea {
    width: 100%; /* Full width */
    padding: 10px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#saveMomentModal .modal-right textarea {
    height: 80px;
    resize: none;
}

/* Length display section */
#saveMomentModal .moment-length {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between label and span */
}

/* Footer buttons */
#saveMomentModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

#saveMomentModal .modal-footer button {
    padding: 10px 20px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}

#saveMomentModal .modal-footer button:hover {
    background-color: #005fa3;
}


.modal-footer-button {
    padding: 10px 20px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}

.modal-footer-button:hover {
    background-color: #005fa3;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.items-grid .item {
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.2s;
}

.items-grid .item:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
    outline: 2px solid white; /* White outline on hover */
}

.items-grid .item img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.items-grid .item p {
    margin: 0;
    font-size: 1rem;
    color: white;
}

/* Add additional styles for responsiveness */
@media screen and (max-width: 768px) {
    .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .embed-modal {
        width: 90%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

#showModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #100e0e;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
    max-width: 95%;
    max-height: 90%;
    overflow-y: auto;
}

#showModal .modal-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#showModal .show-details img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

#showModal h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#showModal .items-grid .item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 8px;
    cursor: pointer;
}

#showModal .items-grid .item:hover {
    background-color: #444;
}

/* #endregion */

/* #region Moment */
#shareMomentModal {
    display: none;
    position: fixed;
    z-index: 1100; /* Higher z-index to be above other modals */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #333333;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    text-align: center;
}

#shareMomentModal p {
    padding: 0;
    margin: 0;
}

#shareMomentModal .modal-content {
    display: flex;
    flex-direction: column;
}

#shareMomentModal textarea {
    margin-bottom: 10px;
    padding: 8px;
    font-size: 1rem;
    border-radius: 5px;
    border: none;
    width: 100%;
}

#shareMomentModal .button-row {
    display: flex;
    justify-content: space-between;
}

#shareMomentModal .button-row button {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

#shareNowButton {
    background-color: #0084FA;
    color: white;
    border: none;
}

#shareNowButton:hover {
    background-color: #2b7bc1;
}

#cancelShareButton {
    background-color: #dc3545;
    color: white;
    border: none;
}

#cancelShareButton:hover {
    background-color: #c82333;
}

#captureMomentSection {
    display: block;
    text-align: center;
    margin-top: 10px;
}

#captureMomentButton {
    background-color: #0084FA; /* Updated background color */
    color: white;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
}

#captureMomentButton:disabled {
    background-color: #d3d3d3 !important; /* Use !important to ensure the color change */
    cursor: not-allowed;
}

#momentName {
    width: 100%;
}

#momentDescription {
    width: 100%;
    height: 60px;
}
/* #endregion */

/* #region User Profile */
.user-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-profile .user-name {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.user-profile .user-name span {
    margin-right: 5px;
}

.channel-logo {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.user-profile {
    position: relative;
    display: inline-block;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    vertical-align: middle;
}

.user-name {
    display: flex;
    align-items: center;
}

.chevron {
    margin-left: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #444;
}

.user-profile.active .dropdown-content {
    display: block;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #333333;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.dropdown a {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
}

.dropdown a:hover {
    background-color: #444444;
}

.user-profile:hover .dropdown {
    display: block;
}

#inputFields {
    margin-top: 15px;
    text-align: left;
    width: 100%;
    max-width: 450px;
}
/* #endregion */

/* #region subNav */
.sub-nav {
    background-color: #121212;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0px;
}

.sub-nav a {
    color: #ffffff;
    margin-right: 20px;
    text-decoration: none;
}

.sub-nav a:hover {
    color: #0084FA;
}
/* #endregion */

/* #region Guide */
.guide-container {
    padding: 20px 20px;
}

table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #444;
    vertical-align: middle;
}

th {
    background-color: #555555;
    color: white;
}

th.on-now {
    background-color: #0084FA;
    width: 10%;
    text-align: center;
}

th.current-time {
    background-color: #0084FA;
    width: 30%;
}

th.time-block {
    width: 15%;
}

.channel-row, .episode-item {
    background-color: #333;
    vertical-align: bottom; /* Aligns content to the top of the row */
    height: 80px; /* Allows the row to adjust its height based on content (image) */
}

.episode-row {
    display: flex;
    /*flex-wrap: wrap;
    justify-content: flex-start;*/
    justify-content: space-between;
    margin-bottom: 10px;
}



.episode-row .item {
    width: 160px; /* Similar width as in My Stuff for episodes */
    background-color: #2a2a2a; /* Same background */
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 20px; /* Padding between entries */
}

.episode-row .item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 8px;
}

.episode-row .item p {
    margin: 0;
    font-size: 1rem;
    color: #ffffff;
}

.episode-item {
    background-color: #2a2a2a; /* Same as the My Stuff items */
    padding: 10px; /* Add padding inside the episode cell */
    border-radius: 12px; /* Rounded corners */
    text-align: left; /* Keep the text aligned to the left */
    transition: transform 0.2s, box-shadow 0.2s; /* Add smooth hover effects */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for emphasis */
    color: white;    
    
    /*background-color: #2a2a2a;
    color: white;
    cursor: pointer;
    font-size: 0.6rem;
    padding: 10px;
    text-align: left;*/
}

.episode-item:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
    outline: 2px solid white; /* White outline on hover */
}

.episode-item img {
    float: left;
    margin-right: 10px;
    max-height: 100%;
    max-width: 100%; /* Keep the image size consistent */
    object-fit: cover;
    border-radius: 8px; /* Rounded corners for images */
    
    /*float: left;
    margin-right: 10px;
    max-height: 100%;
    max-width: 30%;
    margin-top: 0px;
    margin-bottom: 0px;
    object-fit: cover;*/
}

.episode-item span {
    display: block;
    font-size: 0.9rem; /* Same font size as before */
    color: #ACB2C0;
    margin-bottom: 5px; /* Keep some space between text lines */
}

.episode-item p {
    font-size: 0.8rem;
    color: #ACB2C0;
    margin-bottom: 5px;
}

.episode-link {
    color: inherit;
    text-decoration: none;
}

.episode-link:hover {
    color: #0084FA;
    text-decoration: underline;
}
/* #endregion */

/* #region Profile */
#profileModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #333333;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
    min-width: 400px;
    max-width: 600px;
    height: auto;
    overflow: visible;
}

#profileModal .modal-content {
    min-width: 400px; /* Set the minimum width */
    max-width: 600px; /* Set the maximum width */
    margin: auto;
    padding: 20px;
    background-color: #333;
    color: white;
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    height: auto; /* Set height to auto to fit the content */
    max-height: none; /* Remove any max-height to prevent scroll bars */
    overflow: visible; /* Ensure there is no overflow */
}

#profileModal input {
    margin-bottom: 10px;
    padding: 8px;
    font-size: 1rem;
    border-radius: 5px;
    border: none;
}

#updateProfileButton, #cancelProfileButton {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

#updateProfileButton {
    background-color: #0084FA;
    color: white;
    border: none;
}

#updateProfileButton:hover {
    background-color: #2b7bc1;
}

#cancelProfileButton {
    background-color: #dc3545;
    color: white;
    border: none;
}

#cancelProfileButton:hover {
    background-color: #c82333;
}

#profileModal .modal-content {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 20px;
    background-color: #333;
    color: white;
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Ensures the padding and border are included in the width */
}

#profileForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box; /* Ensure padding is included in width */
}

#profileForm label {
    font-weight: bold;
    margin-bottom: 5px;
}

#profileForm input, #profileForm textarea {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    box-sizing: border-box; /* Ensures padding and borders are within the element's width */
}

#profileModal .button-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#profileOkButton, #profileCancelButton {
    padding: 7px 15px;
    font-size: 0.7rem;
    border-radius: 5px;
    cursor: pointer;
}

#profileOkButton {
    background-color: #0084FA;
    color: white;
    border: none;
}

#profileOkButton:hover {
    background-color: #005bb5;
}

#profileCancelButton {
    background-color: #888;
    color: white;
    border: none;
}

#profileCancelButton:hover {
    background-color: #666;
}
/* #endregion */

/* #region Recents */
#recentModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #131010;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
    max-width: 95%;
    max-height:80%;
    width: auto;
    height: auto; /* Changed from max-height to fixed height */
    box-sizing: border-box;
    overflow: hidden;    
}
.recent-close-button {
    background-color: #0084FA;
    color: white;
    border: none;
    padding: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-right: auto;
    display: block;
    align-self: flex-end; 
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: right;
    position: absolute;
    top: 0px;
    right: 10px;
    background: none;
    font-size: 1.5rem;
}

#recentModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

#recentModal h2 {
    margin-top: 10px;
    font-size: 1.2rem;
    /*border-bottom: 1px solid #ccc;*/
    padding-bottom: 0px;
}

#recentEpisodes {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 20px; /* Add space before the buttons */
}

#recentModal .item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-right: 20px;
}

#recentModal .item img {
    margin-right: 15px;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
}

#recentModal .close-button {
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
    margin-top: auto; /* Push to the bottom */
    align-self: flex-start; /* Align to the left */
}

#clearRecentsButton {
    background-color: transparent;
    color: grey;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 10px;
    align-self: flex-start; /* Align to the left */
}

#recentModal .close-button:hover,
#clearRecentsButton:hover {
    background-color: #2b7bc1;
}

/* Scrollbar styling */
#recentModal .modal-content::-webkit-scrollbar {
    width: 10px;
}

#recentModal .modal-content::-webkit-scrollbar-track {
    background: #2a2a2a;
}

#recentModal .modal-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

#recentModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* #endregion */

/* #region MyModal */
#myModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #333333;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
    text-align: left;
    max-width: 500px; /* Adjust the modal width as needed */
    max-height: 300px; /* Adjust the modal height as needed */
    overflow-y: auto;
}

#myModal .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#myModal #modal-logo {
    width: 150px;
    height: 150px;
    margin-right: 0px;
    margin-bottom: 10px; /* Space between logo and header */
}

#myModal .text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#myModal #modal-header {
    font-size: 1.5rem;
    margin: 10px 0; /* Space around the header */
    margin: 0;
    display: block;
    margin-bottom: 10px; /* Optional: Add space between name and description */
}

#myModal #modal-description {
    margin-top: 10px;
    font-size: 1rem;
    display: block;
    margin-top: 10px; /* Space between header and description */
}

#myModal .close-button {
    display: inline-block; /* Ensure it's treated as a block element */
    background-color: #0084FA;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
    text-align: center;
    margin-top: 20px; /* Add space above the button */
}

#myModal .close-button:hover {
    background-color: #555; /* Optional: Add hover effect */
}
/* #endregion */

/* #region Modal */
.modal, .embed-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #333333;
    border-radius: 8px;
    padding: 0px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
    text-align: left;
    max-width: 100%;
    max-height: 80%;
    overflow-y: auto;
    padding-left: 0px;
    padding-right: 30px;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto; /* Auto height adjustment */
    /* display: flex;*/
    flex-direction: column;
}

.modal-content {
    display: block;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 80%;
    flex-grow: 1; /* Ensure content area grows to accommodate text */
}

#modal-embed-player iframe {
    width: 340px;
    height: auto;
    border-radius: 8px;
}

.modal-content .right-column {
    width: 50%;
    padding-right: 20px;
}

.modal-content h2, .modal-content h3 {
    margin-top: 0;
}

.modal-content h2 {
    font-size: 1.44rem; /* Reduced by 10% from 2rem */
    margin-bottom: 0px;
}

.modal-content p {
    font-size: .88992rem; /* Reduced by 10% from 1.236rem */
    margin: 0px;
    padding: 0px;
}

.modal-content h3 {
    font-size: 1.1648rem; /* Reduced by 10% from 1.618rem */
    margin-bottom: 0px;
}

.modal-content .icon-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.modal-content #modal-show-description {
    margin-top: 5px; /* Move show description closer to the show name */
}

.modal-content #modal-episode-description {
    margin-top: 0px; /* Move episode description closer to the episode name */
}

.modal-content .icon-row img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    cursor: pointer;
}

.modal-content .left-column {
    width: 45%; /* This ensures that the left column takes up 45% of the modal */
    height: 100px; /* Limit the height to 100px or any desired value */
    object-fit: contain; /* Ensure the image fits within the defined height without being squished */
    margin-bottom: 20px;
    margin-right: 20px;
}

.modal-content .left-column img {
    width: auto;
    height: 120px; /* Increased by 20% from 100px */
    object-fit: contain;
    margin-bottom: 20px;
}

.modal-content .left-column h2,
.modal-content .left-column h3,
.modal-content .left-column p {
    max-width: 100%; /* Ensure text takes up the full width of the left column */
    word-wrap: break-word; /* Break long words to prevent overflow */
    white-space: normal; /* Allow text to wrap to the next line */
}

.modal-content .left-column .text-container {
    max-width: 50%; /* Limit the text container to 50% of the left column's width */
}

.modal-content .modal-embed-player {
    width: 100%; /* Reduce size by 20% */
    height: 100%; /* Ensure it maintains the aspect ratio */
    margin: 0 auto;
    margin-bottom: 0px;
    text-align: center;
}

.modal-content {
    padding: 30px 0px, 0px, 0px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    display: flex;
    justify-content: center;
    margin-top: 0px;
}

.button-row {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    padding: 0px;
}

.button-row button {
    padding: 0px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    color: white;
}

.embed-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    width: 350px;
    margin-left: -175px; /* Adjust for centering */
    background-color: #0c0d0d;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#modalOverlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 26, 26, 0.5); /* Grey background with 50% opacity */
    z-index: 999; /* Ensure it appears behind the modal but above other content */
}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Row 1: Icons and Close Button */
.row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-icons img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
    cursor: pointer;
}

.right-close .close-button {
    background-color: transparent;
    color: white;
    border: none;
    font-size: 20px;
    text-align: right;
    cursor: pointer;
}

.right-close .close-button:hover {
    color: #ff0000; /* Optional: Add hover effect */
}

/* Row 2: Player Embed */
.row-2 {
    width: 350px;
    padding: 0px;
}

.row-2 .episode-length {
    font-size: 0.8rem; /* Smaller font for episode length */
    color: #ACB2C0; /* Lighter gray for the text */
    margin-bottom: 5px; /* Reduced space below the length */
}

.modal-embed-player {
    /*width: 100%;*/
    height: 300px; /* Adjust as needed */
    background-color: #000; /* Background placeholder before content loads */
    margin-bottom: 5px;
}

/* Row 3: Show Name */
.row-3 h2 {
    font-size: 16px; /* 20% smaller font for show name */
    margin: 0px 0; /* Reduced space */
    color: #ffffff;
    font-weight: 700;
}

.row-4 p {
    font-size: 14px; /* 20% smaller font for show name */
    margin: 0px 0; /* Reduced space */
    color: #d7d9de;
    font-weight: 400;
}

/* Row 4: Episode Name */
.row-4 h3 {
    font-size: 14px; /* 20% smaller font for episode name */
    margin: 0px 0; /* Reduced space */
    font-weight: 500;
}

/* Row 5: Episode Description */
.row-5 p {
    font-size: 14px; /* 20% smaller font for episode description */
    line-height: 1.3; /* Slightly reduced line height */
    margin: 0px; /* Reduced space between description and other elements */
    font-weight: 300;
}

/* Row 6: Capture Moment Button */
.row-6 {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

.row-6 button {
    background-color: #0084FA;
    color: white;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
}

.row-6 button:hover {
    background-color: #005bb5;
}

/* #endregion */

/* #region Close Buttons */
.close-button {
    background-color: #0084FA;
    color: white;
    border: none;
    padding: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-right: auto;
    display: block;
    align-self: flex-end; 
    margin-top: 12px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 10px;
    background: none;
    font-size: 1.5rem;
}

.close-button:hover {
    background-color: #2b7bc1;
}
/* #endregion */

/* #region Other Users MyStuff */

#ouMS-header-band {
    display: none;
}

#otherUsersMyStuffSection
{
    display: none;
}

/* #endregion */

/* Modal styling */
.channel-modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    margin-bottom: 20px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.channel-modal-content {
    background-color: #110f0f;
    padding: 0px;
    border-radius: 10px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* Space between elements */
}

#channel-modal-logo {
    max-width: 100px;
    height: auto;
}

#modal-header {
    font-size: 2rem;
    margin: 0;
}

#modal-description {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.5;
}

#channel-close-button {
    background-color: #0084FA;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    margin-top: 20px;
}