body, html {
    height: 100%;
    margin: 0;
    font-family: 'Raleway';
    background-color_: rgb(224, 224, 224, 0.2);
    background-color: rgb(0, 76, 153, 0.05);
}

#agentListContainer_ {
    background-color: white;
    width: 50%;
    height: 85%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-top: 50px;
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}

#agentListContainer {
    background-color: white;
    width: 50%; /* Initial width */
    height: 98vh; /* Full viewport height */
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 50px; /* Keep padding inside the box */
    margin-top: 10px;
    box-sizing: border-box; /* Includes padding in total width */
    position: relative; /* Needed for the resize handle */
    border: 1px solid #ccc; /* Example border */
    border-radius: 3px;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.listing-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.agent-marketplace-title {
    font-size: 2.0em;
    font-weight: 500;
    color: #009ccb;
    margin-top: 20px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
}

.category-header {
    font-size: 1.5em;
    margin-top: 20px;
    border-bottom: 1.0px solid lightgrey;
    padding-bottom: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.toggle-symbol {
    margin-right: 10px;
    font-size: 1.2em;
}

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

.listing {
    border-bottom: 1px solid #ccc;
}

    .listing td {
        padding: 10px;
        vertical-align: top;
    }

.checkbox-cell {
    width: 10px; /* Adjust width as needed */
}

.name-cell {
    width: 75px; /* Adjust width as needed */
}

.title-cell {
    width: 100px; /* Adjust width as needed */
}

.persona-cell {
    width: auto;
}

.agent-marketplace-header {
    display: flex;
    align-items:center;
    gap: 50px; /* Adjust spacing between the heading and button */
}

/* Responsive adjustments for phone display */
@media (max-width: 768px) {
    html, body {
        min-height: 80vh; /* Ensure the full viewport height */
        overflow: auto; /* Allow regular scrolling */
    }

    .mainMenuHideDropElement {
        display: none;
    }

    .menu-container {
        display: flex; /* Use Flexbox for horizontal layout */
        align-items: center; /* Center items vertically */
        justify-content: space-between; /* Spread items across the width */
        padding: 0px 0px; /* Add padding for spacing */
        width: 100%; /* Full width */
        position: relative; /* Ensure correct stacking context */
    }

    .phone_logo {
        display: block;
    }

    .phone_logoImage {
        width: 100%; /* Set the width */
        aspect-ratio: 1; /* Maintain a 1:1 aspect ratio */
        object-fit: contain; /* Scale the image to fit within the container */
        display: flex; /* Ensure the image is treated as a block element */
        align-items: center; /* Center items vertically */
        mix-blend-mode: multiply; /* Other browsers */
        padding-left: 5px;
        height: 50px;
        -webkit-mix-blend-mode: multiply; /* Safari */
        mix-blend-mode: multiply; /* Other browsers */
    }

    .phone_logoTitle {
        font-size: 14px; /* Reduce font size for smaller screens */
        text-align: left; /* Align text to the left for a typical mobile layout */
        margin: 0 auto; /* Add horizontal margin for breathing room */
        display: none;
    }


    #agentListContainer {
        font-size: 0.8em;
        width: 96%;
        padding: 10px;
        margin: 5px;
        margin-top: 30px;
    }

    .agent-marketplace-title { 
        width: 50%;
        padding-left: 10px;
    }

    .agent-marketplace-header {
        gap: 10px;
    }

    .highlight-box {
        font-size: 14px;
    }

    .listing-container {
        padding-left: 5px;
    }

    .category-header {
        font-size: 1.3em;
    }

    table {
        width: 100%; /* Adjust based on your needs */
        border-collapse: collapse; /* Eliminates space between borders */
    }

    .listing td {
        padding: 5px;
        vertical-align: top;
    }

    .checkbox-cell {
        width:auto; /* Adjust width as needed */
    }

    .name-cell {
        width:auto; /* Adjust width as needed */
    }

    .title-cell {
        width:auto; /* Adjust width as needed */
    }

    .persona-cell {
        width: auto;
    }


}