body {
    font-family: 'Courier New', monospace;
}
.body-section {
    text-align: left;
    margin-left: 50px;
    margin-right: 50px;
}

.search-container {
    margin-bottom: 10px; /* Add spacing below the search box */
}

#searchInput {
    width: 100%; /* Make the search box width fit within the left column */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
    padding: 8px; /* Add padding for better appearance */
}

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

.container {
    display: flex;
}

.left-column {
    width: 130px;
    min-width: 130px;
    position: relative;
    height: 100vh;
    overflow-y: auto; /* Add scrollbar if content exceeds viewport height */
    background-color: #e6e6e6;
}

.right-column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    overflow-y: auto;
}

.right-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/inc/Farisita-Logo.png') no-repeat center center;
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

.body-background-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('/inc/Farisita-Logo.png') no-repeat center center;
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/*.right-column {*/
/*    flex-grow: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    padding: 10px;*/
/*    box-sizing: border-box;*/
/*    position: relative;*/
/*    height: 100vh;*/
/*}*/

#videoTitle {
    font-size: 24px;
    font-weight: bold;
    display: none;
    text-align: center;
    margin-top: 20px;
    width: 100%;
    z-index: 2;
}

#videoPlayer {
    max-width: 90%;
    max-height: 80vh;
    display: none;
    margin-bottom: 0;
    border: 1px solid gray;
}

/*#videoPlayer {*/
/*    margin-bottom: 0;*/
/*    border: 2px solid red;*/
/*}*/


.thumbnail-container {
    position: relative;
    margin-bottom: 20px;
    text-align: center;
}

.thumbnail-container img {
    width: 100px;
    height: auto;
    border-radius: 5px;
    border: 1px solid gray;
}

/* Add red outline when hovering over thumbnail */
.thumbnail-container:hover img {
    outline: 1px solid red;
}

.video-title {
    font-family: 'Arial Narrow', sans-serif;
    font-weight: bold;
    display: block;
}

.video-info {
    display: none;
    position: fixed; /* Change from absolute to fixed */
    left: 150px; /* Adjust the left position to align with the right edge of the left column */
    top: 50px; /* Add padding from the top */
    background-color: white;
    border: 1px solid red;
    padding: 10px 10px 10px; /* Adjust padding (top, right, bottom, left) */
    width: 30%;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
    text-align: left; /* Align description text to the left */
}

/* Keep the title centered */
.video-title {
    text-align: center;
}

.thumbnail-container:hover .video-info {
    display: block;
}

#loadingAnimation {
    display: none;
    font-size: 20px;
    color: black;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}

.countdown {
    display: none;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    z-index: 201;
}

#placeholderText {
    position: absolute;
    top: 10px;
    display: block;
    text-align: center;
}

#placeholderText .main-title {
    font-size: 24px;
    font-weight: bold;
}

#placeholderText .sub-title {
    font-size: 18px;
}

/* Make the Login and MFA forms look a little nicer */

/* General form styling */
form {
    background: #f7f7f7;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid gray;
    width: 300px;
    margin: 20px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

/* Label styling */
form label {
    display: block;
    margin: 10px 0 5px;
}

/* Input styling */
form input[type="email"], form input[type="text"], form input[type="submit"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Submit button enhancement */
form input[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background-color: #0056b3;
}


.right-column {
    padding-bottom: 0;
}

/*INVITE USER SECTION*/

#inviteSection {
    display: none;
    text-align: center;
    width: 70%;
    margin: 0 auto; /* Combines top margin and auto horizontal margin */
    box-sizing: border-box; /* Includes padding and border in the element's width */
}

#inviteUserForm {
    display: block;
    border: 1px solid #ccc;
    padding: 5px; /* Set padding once for the form */
    width: 100%; /* Form takes full width of its container */
    margin: 0; /* Reset default margins */
    background-color: black;
}

/* Styles for individual form elements to ensure uniform width and spacing */
#inviteUserForm, #inviteUserForm textarea, #inviteUserForm input[type="email"], #inviteUserForm input[type="submit"] {
    width: 100%; /* Ensures all elements are the same width */
    box-sizing: border-box; /* Includes padding and border in the element's width */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Rounds the corners of the input fields and button */
    margin-top: 5px; /* Adds space between form elements */
}

#inviteUserForm input[type="submit"] {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    margin-top: 10px; /* Adds more space before the submit button */
}

#optionalText {
    display: none;
    text-align: center;
    margin-top: 5px;
    font-weight: bolder;
    color: white;
}

@keyframes moveArrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

#arrow {
    font-size: 2.0em;
    margin-right: 5px;
    color: white;
    display: inline-block; /* Required for transform animations */
    animation: moveArrow 2s infinite ease-in-out; /* 2 seconds duration, infinitely repeating */
}

#personalMessage {
    min-height: 100px; /* Ensures the textarea has sufficient vertical space */
    resize: vertical; /* Allows resizing only vertically */
    display: none;
}

/* CROSSOVER INVITE AND FORM SECTIONS */

#inviteSection, #commentsSection {
    display: none; /* Initially hidden */
    text-align: center;
    margin-top: 0; /* No top margin */
    padding: 0; /* No padding around the sections */
    background-color: black; /* Background color to match the design */
    border: none!important; /* Removes the top border to blend with buttons */
    border-radius: 5px!important;
}
#inviteUserForm, #commentForm {
    display: flex;
    flex-direction: column; /* Stacks the form elements vertically */
    border: 0!important;
    border-radius: 5px!important;
    padding: 15px; /* Padding inside the form */
}

/* COMMENT FORM SECTION */
#commentsSection, #commentsContainer {
    text-align: center;
    width: 70%;
    margin: 0 auto; /* Uniform margin setup with inviteSection */
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
}

#commentSection {
    background-color: black;
}

#commentForm {
    display: block;
    border: 1px solid #ccc;
    padding: 0 auto; /* Set padding once for the form */
    width: 100%; /* Form takes full width of its container */
    margin: 0; /* Reset default margins */
    background-color: black;

}

/* Ensures all elements are the same width and properly styled */
#commentForm, #commentText, #commentForm input[type="submit"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px; /* Adds space between form elements */
    box-sizing: border-box; /* Includes padding and border in the element's width */
}

#commentText {
    min-height: 75px; /* Adequate vertical space for input */
    resize: vertical; /* Allows resizing only vertically */
}

#commentForm input[type="submit"] {
    background-color: #007bff; /* Consistent button color with inviteSection */
    color: white;
    cursor: pointer;
    margin-top: 10px; /* More space before the submit button to separate from other inputs */
}

/* CONTROL BUTTONS */
button {
    padding: 5px 16px;
    margin: 0;
    background-color: #f9f9f9; /* Light gray background for inactive state */
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

button:hover {
    background-color: #e6e6e6; /* Slightly darker on hover */
}

button.active {
    background-color: black; /* Brighter blue for active state */
    color: white; /* White text for better contrast */
    font-weight: bold; /* Bold text to make it stand out more */
}

#videoControls {
    display: flex; /* Enables flexible layouts */
    justify-content: center; /* Center aligns the buttons horizontally */
    gap: 10px; /* Spacing between buttons */
    margin-bottom: 0;
}

#videoControls button {
    min-width: 120px; /* Set a specific narrow width */
    max-width: 150px; /* Limit the maximum width */
    width: auto; /* Auto width to allow side by side on wider screens */
}

/* Responsive styles to help index.php look ok on a mobile phone */

@media only screen and (min-width: 360px) and (max-width: 1080px) {
    .left-column {
        width: 30%; /* Ensure full width on small screens */
    }
    .right-column {
        width: 70%; /* Ensure full width on small screens */
    }

    #videoPlayer {
        width: 100%;
        height: auto;
    }

    #loginForm, #mfaForm {
        width: 100%;
        margin: 20px auto;  /* Ensure consistent margin around forms */
    }

    #loginForm input[type="email"], #loginForm input[type="submit"],
    #mfaForm input[type="mfa_code"], #mfaForm input[type="submit"] {
        padding: 20px 15px; /* Increased padding for larger touch targets */
        font-size: 20px; /* Larger font size for better visibility */
        min-height: 60px; /* Increase minimum height for better tap targets */
    }

    form input[type="email"], form input[type="text"], form input[type="submit"], form textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 15px; /* Ensure adequate padding for all form elements */
        min-height: 60px; /* Consistent min-height across all form elements */
    }

    form input[type="submit"] {
        padding: 25px 15px; /* Even greater vertical padding for a taller button */
        font-size: 20px; /* Consistent large font size for better readability */
    }

    #inviteSection, #commentsSection {
        width: 100%;
    }

    #commentsContainer {
        width: 100%;
    }

    #videoControls {
        flex-direction: column;
        align-items: stretch; /* Align items to stretch ensures buttons fill the container */
        width: 100%; /* Ensures the controls section is full width */
        padding: 0; /* Optional: Removes padding to allow button to reach the edges */
    }
    #videoControls button {
        margin-top: 10px;
        width: 100%; /* Ensures each button stretches to fill the width */
        min-width: 100%; /* Overrides any other minimum width */
        box-sizing: border-box; /* Includes padding and border in the width calculation */
    }

}