/* OMC HTML / main CSS FILE */
/* Created by E J Belala, 04 MARCH 2025 - HAPPY MARDI GRAS */
/* Derived from the original EJND LLC main CSS file. */

/* --------------------- Basic HTML element styles. ----------------- */
body {
    background-color: #ffffff;
}

h1 {
    color: darkblue;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

h2 {
    color: darkblue;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

h4 {
    color: darkblue;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

h5 {
    color: darkblue;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: small;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

h6 {
    color: darkblue;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

p {
    color: darkblue;
    border-width: thin;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-weight: normal;
    font-size: medium;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: flex;  /*Aligns items in a row*/ 
    justify-content: flex-start;  /*Aligns to the left*/ 
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

li {
    float: left;
    margin-right: 20px;
}

    li a {
        display: block;
        color: darkblue;
        text-align: center;
        padding: 5px 10px;
        text-decoration: none;
    }

        li a:hover:not(.active) {
            background-color: lightcyan;
        }

    li.active {
        background-color: lightcyan;
    }

.row-layout {
    display: flex;
    flex-direction: row; /* Arrange items in a horizontal row */
    justify-content: center; /* Centers items horizontally within the row */
    gap: 10px; /* Spacing between columns */
    padding: 10px;
    max-width: 100%; /* Allows the layout to stretch across the screen */
    overflow-x: auto; /* Ensures horizontal scrolling if items exceed the screen width */
}

.row-layout0 {
    display: flex;
    flex-direction: row; /* Arrange items in a horizontal row */
    justify-content: center; /* Centers items horizontally within the row */
    justify-items: center;
    gap: 10px; /* Spacing between columns */
    padding: 10px;
    max-width: 100%; /* Allows the layout to stretch across the screen */
    overflow-x: auto; /* Ensures horizontal scrolling if items exceed the screen width */
}

/*.row-layout-MbrShp {
    display: flex;
    flex-direction: row;*/ /* Arrange items in a horizontal row */
    /*justify-content: left;*/ /* Centers items horizontally within the row */
    /*gap: 10px;*/ /* Spacing between columns */
    /*padding: 10px;
    max-width: 100%;*/ /* Allows the layout to stretch across the screen */
    /*overflow-x: auto;*/ /* Ensures horizontal scrolling if items exceed the screen width */

    /*width: 100%;*/ /* Adjusts to fill the width of the parent container */
    /*max-width: 400px;*/ /* Limits the width for better readability */
    /*padding: 10px;*/
    /*border-radius: 5px;*/
    /*text-align: left;
    font-family: Arial, sans-serif;
    font-size: 16px;
}*/

.left-section-box {
    width: 95%; /* Adjusts to fill the width of the parent container */
    max-width: 400px; /* Limits the width for better readability */
    border: 1px solid #007BFF; /* Blue border for distinction */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/* Styling for individual sections */
.section-box00 {
    width: 100%; /* Adjusts to fill the width of the parent container */
    max-width: 400px; /* Limits the width for better readability */
    padding: 10px;
    /*border-radius: 5px;*/
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

#leftContainer {
    width: 23vw; /* Adjust as needed */
    height: 75vh; /* Adjust as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional border for visibility */
}

#middleContainer {
    width: 57vw; /* Adjust as needed */
    height: 75vh; /* Adjust as needed */
    /*overflow-y: auto;*/ /* Enable vertical scrolling */
    /*border: 1px solid #ccc;*/ /* Optional border for visibility */
}

#rightContainer {
    width: 20vw; /* Adjust as needed */
    height: 75vh; /* Adjust as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional border for visibility */
}

.column {
    display: flex;
    overflow-y: scroll;
    flex-direction: column;
    padding: 10px;
    background-color: #ffffff;
    width: 20vw; /* Adjust as needed */
    height: 65vh; /* Adjust as needed */
    text-align: left;
    align-items: flex-start; /* Aligns items horizontally (centered in the column) */
}

/* Parent container for column layout */
.column-layout-home {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns items horizontally (centered in the column) */
    gap: 20px; /* Spacing between rows */
    padding: 20px;
    max-width: 800px;
    margin: 0 auto; /* Centers the layout on the page */
    background-color: #ffffff;
    text-align: left;
}

.left-column-layout {
    display: flex;
    /*overflow-y: scroll;*/
    flex-direction: column;
    padding: 10px;
    background-color: #ffffff;
    width: 25vw; /* Adjust as needed */
    height: 75vh; /* Adjust as needed */
    text-align: left;
    align-items: flex-start; /* Aligns items horizontally (centered in the column) */
}

.right-column-layout-MmbrShp {
    display: none;
    flex-direction: column;
    padding: 20px;
    background-color: #ffffff;
    width: 200px; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    text-align: center;
   /* box-shadow: none;*/
}

.middle-column-layout {
    display: flex;
    overflow-y: scroll;
    flex-direction: column;
    padding: 10px;
    background-color: #ffffff;
    width: 50vw; /* Adjust as needed */
    height: 75vh; /* Adjust as needed */
    text-align: left;
    align-items: flex-start; /* Aligns items horizontally (centered in the column) */
}

.right-column-layout {
    display: flex;
    overflow-y: scroll;
    flex-direction: column;
    padding: 10px;
    background-color: #ffffff;
    width: 25vw; /* Adjust as needed */
    height: 75vh; /* Adjust as needed */
    text-align: left;
    align-items: flex-start; /* Aligns items horizontally (centered in the column) */
}

/* THIS IS THE ASP LABEL STYLE ELEMENT */
.message-label {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}

/*      BELOW ARE FOR THE IMAGE SLIDE SHOW      */

#jboxImageUp {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything horizontally */
    text-align: center;
    margin: 10px;
    width: 100%;
}

/*      THIS ONE IS NOT FOR THE SLIDESHOW - DO NOT MESS WITH IT!     */
.content-image {
    display: block;
    max-width: auto; /*Images scale with container*/
    height: 150px; /*Maintain aspect ratio*/
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content-image00 {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain; /* Ensures the entire image is visible */
    border-radius: 15px; /* Matches container rounding */
}

.content-image01 {
    max-width: 100%;
    max-height: 75px;
    object-fit: contain; /* Ensures the entire image is visible */
    border-radius: 15px; /* Matches container rounding */
    justify-content: center;
}

.content-image-slideshow {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain; /* Ensures the entire image is visible */
    border-radius: 15px; /* Matches container rounding */
}

.slideshowContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Makes sure it adapts to different screen sizes */
    max-width: 800px; /* Adjust as needed */
    max-height: 450px; /* Prevents scrolling */
    overflow: hidden;
    border-radius: 15px; /* Adds rounded corners */
    background-color: #ffffff; /* Optional: Creates a nice border effect */
}

/* Center the buttons together below the image */
#slideshowButtons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adds space between buttons */
    margin-top: 10px;
    position: absolute;
}

/*      BELOW ARE FOR THE VIDEO PLAYER      */

.audioList0 {
    margin-top: 15px;
    width: 100%;
    max-height: 200px; /*Prevents excessive list size*/
    width: 100%;
    max-height: 100%; /*Prevents excessive list size*/
    overflow-y: auto;
    text-align: left;
}

    .audioList0 a {
        display: block;
        padding: 5px;
        text-decoration: none;
        color: #007bff;
        border-bottom: 1px solid #ccc;
    }

        .audioList0 a:hover {
            background-color: #f0f0f0;
        }

.videoList {
    margin-top: 15px;
    width: 100%;
    max-height: 200px; /*Prevents excessive list size*/
    width: 100%;
    max-height: 100%; /*Prevents excessive list size*/
    overflow-y: auto;
    text-align: center;
}

    .videoList a {
        display: block;
        padding: 5px;
        text-decoration: none;
        color: #007bff;
        border-bottom: 1px solid #ccc;
    }

        .videoList a:hover {
            background-color: #f0f0f0;
        }

.ejnVideoPlayer {
    width: 100%; /* Ensures responsiveness */
    max-width: 800px; /* Adjust width as needed */
    max-height: 450px; /* Ensures no vertical scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Ensures content stays within rounded edges */
    background-color: #000; /* Optional: Gives a dark background for better contrast */
}

.video-player video {
    width: 100%;
    height: 100%;
    max-height: 450px; /* Limits the height */
    object-fit: contain; /* Ensures the entire video is visible */
    border-radius: 15px; /* Matches container rounding */
}

.videoShowContainer {
    display: flex;
    justify-content: center; /* Centers the video container */
    align-items: center; /* Centers vertically if needed */
    width: 100%;
}

/* ------------- CHAT MESSAGE STYLES EXAMPLES BELOW HERE ---------------- */

/* Style for the chat container (<div>) */
#txtMessageDisplay {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #ffffff;
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
}

#memberTalkContainer {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #ffffff;
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
}

.requesterID {
    text-align: right;
    color: darkblue; /* Adjust color as needed */
}

.responderID {
    text-align: left;
    color: darkgreen; /* Adjust color as needed */
}

.mbrTalkRequesterID {
    text-align: right;
    color: darkblue; /* Adjust color as needed */
}

.mbrTalkResponderID {
    text-align: left;
    color: darkgreen; /* Adjust color as needed */
}

/*     THE DROP DOWN LIST EXPERIMENT     */
.dropdown {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    border-color: darkblue;
    background: white;
    width: 600px;
    height: auto;
    overflow-x: auto;
    width: 800px;
}

    .dropdown ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .dropdown li {
        padding: 5px;
        cursor: pointer;
    }

        .dropdown li:hover {
            background-color: #ffffff;
        }

#dropdownList {
    color: darkblue;
    font-weight: bold;
    width: 90%;
    height: auto;
}

/* Dropdown container */
#dropdownTalks {
    display: none;
    position: absolute;
    max-height: 300px;
    overflow-y: auto;
    width: 800px;
    border: 1px solid #ccc;
    border-color: darkblue;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

/* List items inside the dropdown */
#dropdownListTalks {
    list-style-type: none;
    color: darkblue;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

    #dropdownListTalks .dropdown-item {
        padding: 10px;
        cursor: pointer;
    }

        #dropdownListTalks .dropdown-item:hover {
            background-color: #f1f1f1;
        }

#iframeContainer {
    width: 100%; /* Ensures it takes the full width of its container */
    height: 500px; /* Adjust based on your design */
    display: flex;
    justify-content: center;
    align-items: center;
}

#fileUploadFrame {
    width: 100%; /* Use 100% if you want it to stretch */
    height: 500px; /* Adjust height accordingly */
    border: none; /* Optional: removes default border */
}

/*      FOR THE FILE LISTS        */

#divAudioEdit ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0;
    margin: 0;
}

#divAudioEdit li {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Adds spacing between items */
}

.audio-checkbox {
    margin-right: 10px; /* Ensures spacing between checkbox and filename */
}

.image-checkbox {
    margin-right: 10px; /* Ensures spacing between checkbox and filename */
}

.video-checkbox {
    margin-right: 10px; /* Ensures spacing between checkbox and filename */
}

/* === Responsive Layout for Login Page === */

@media only screen and (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 16px;
    }

    #loginhder table,
    #loginhder td,
    #loginhder ul {
        width: 100% !important;
        display: block;
    }

    #loginhder ul {
        padding: 0;
        margin: 0;
        text-align: center;
    }

    #loginhder li {
        display: inline-block;
        margin: 0 10px;
    }

    .content-image01 {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px auto;
    }

    .row-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .column-layout {
        width: 100%;
        max-width: 400px;
        padding: 10px;
        box-sizing: border-box;
    }

    .section-box00 {
        margin-bottom: 15px;
    }

    input[type="text"],
    input[type="password"] {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        box-sizing: border-box;
    }

    input[type="button"] {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .row-layout {
        flex-direction: column;
    }

    .column-layout {
        width: 100%;
    }
}

.responsive-layout {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.form-wrapper {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: sans-serif;
    font-size: 14px;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .form-row label {
        flex: 0 0 30%;
        min-width: 80px;
        white-space: nowrap;
    }

    .form-row input[type="text"],
    .form-row input[type="password"],
    .form-row input[type="tel"],
    .form-row textarea {
        flex: 1;
        padding: 6px 8px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #ccc;
        width: 100%;
        box-sizing: border-box;
    }

input[type="button"] {
    padding: 8px 14px;
    font-size: 14px;
    background-color: lightgoldenrodyellow;
    border-color: darkblue;
    color: darkblue;
    cursor: pointer;
}

.non-usa-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}

/* Optional tighter tweaks for smaller phones */
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        align-items: flex-start;
    }

        .form-row label {
            flex: none;
            margin-bottom: 4px;
        }

    input[type="button"] {
        width: 100%;
    }
}

.phone-row {
    display: flex;
    align-items: center;
    gap: 10px; /* spacing between input and checkbox */
    flex-wrap: wrap; /* optional: wraps on small screens */
}

    .phone-row input[type="tel"] {
        max-width: 220px; /* adjust width as needed */
    }

.non-usa-checkbox {
    display: flex;
    align-items: center;
    font-weight: normal;
    gap: 5px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* spacing between buttons */
    margin-top: 20px; /* optional spacing from above content */
    justify-content:center;
}

    .button-row input[type="button"] {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 16px;
    }

/*.fileListVertical {
    display: flex;
    flex-direction: column;*/ /* Stack items vertically */
    /*gap: 10px;*/ /* Space between items */
/*}

.file-item {
    display: flex;
    align-items: center;
    gap: 10px;*/ /* Space between checkbox and file name */
/*}

.file-checkbox {
    margin-right: 5px;
}*/

/* This will ensure the files are displayed in a vertical list */
/*.file-list-container {
    display: flex;
    flex-direction: column;*/ /* Align items vertically */
/*}*/

/* Style for each file item (checkbox and file name) */
/*.file-item {
    display: flex;
    align-items: center;*/ /* Align checkbox and label horizontally */
    /*margin-bottom: 10px;*/ /* Add spacing between items */
/*}*/

    /* Optional: Adjust space between checkbox and file name */
    /*.file-item input[type="checkbox"] {
        margin-right: 10px;
    }*/

/* Style for the container holding all file items */
/*.file-list-container {
    display: flex;
    flex-direction: column;*/ /* Align items vertically */
/*}*/

/* Style for each individual file item */
/*.file-item {
    display: flex;
    align-items: center;*/ /* Align checkbox and label horizontally */
    /*margin-bottom: 10px;*/ /* Add spacing between items */
/*}*/

    /* Style for the checkbox */
    /*.file-item input[type="checkbox"] {
        margin-right: 10px;*/ /* Optional: space between checkbox and file name */
    /*}*/

/*.fileListVertical {
    display: flex;
    flex-direction: column;*/ /* Align items vertically */
/*}*/

/*.file-list-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;*/ /* Ensure the container takes full width */
/*}

.file-item {
    display: flex;
    justify-content: space-between;*/ /* Ensures elements inside spread out */
    /*align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    background-color: #f9f9f9;
    width: 100%;*/ /* Stretch across the container */
/*}*/