/* Container for scrollable table with adjusted padding */
.table-container {
    max-height: 80vh;
    max-width: 90vw;
    overflow: auto;
    margin: 20px;
    position: relative;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    z-index: 0;
}
.table-container:hover {
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: auto; /* IE and Edge */
}
.table-container::-webkit-scrollbar {
    display: none;
}
.table-container:hover::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}
.table-container::-webkit-scrollbar-track {
    background: #000000;
}
.table-container::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover {
    background-color: #4A4A4A;
}

/* Override .container width */
.container {
    max-width: 90% !important;
}

/* Table general styling */
table {
    border-collapse: separate; /* Ensure borders are cell-specific */
    border-spacing: 0; /* Remove default spacing */
    width: 100%; /* Ensure table fills container */
    text-align: center;
}

/* Cell base styling - no top or left borders */
td, th {
    border-top: none; /* No top border */
    border-left: none; /* No left border */
    padding: 8px; /* Consistent padding */
}

/* Header styling */
.table-header {
    border-bottom: 1px solid #6600CC; /* Thin bottom border in #6600CC */
    background-color: #000000; /* Black background for OSI Layer column */
}


/* First column right border in #6600CC */
.first-column {
    border-right: 1px solid #6600CC; /* Right border for first column */
    background-color: #000000; /* Black background for OSI Layer column */
}

/* Border classes for other cells */
.border-right {
    border-right: 1px solid #CCCCCC; /* Right border in #CCCCCC */
}

.border-bottom {
    border-bottom: 1px solid #CCCCCC; /* Bottom border in #CCCCCC */
}

.border-right-bottom {
    border-right: 1px solid #CCCCCC; /* Right and bottom border in #CCCCCC */
    border-bottom: 1px solid #CCCCCC;
}

.no-border {
    border: none; /* No borders */
}

.sender {
    background-color: #000000; /* White background for Sender column */
    color: #ffffff; /* Black text */
}

.receiver {
    background-color: #000000; /* White background for Receiver column */
    color: #ffffff; /* Black text */
}

/* Additional styling to prevent text from flowing into logos */
td {
    position: relative; /* Maintains positioning context */
    padding-right: 25px; /* Adds space on the right to accommodate logos */
}

.vendor-logo-container {
    position: absolute;
    right: 5px; /* Align to right of cell with padding */
    top: 50%;
    transform: translateY(-50%); /* Vertically center */
    display: inline-block; /* Ensures proper rendering */
}

.vendor-logo {
    width: 20px; /* Small fixed width */
    height: 20px; /* Small fixed height */
    vertical-align: middle; /* Align with text */
    opacity: 0.7; /* Slight transparency for subtlety */
    transition: opacity 0.3s; /* Smooth hover effect */
}

.vendor-logo:hover {
    opacity: 1; /* Full opacity on hover */
}

/* New class for summary logos to control placement */
.summary-logo-container {
    display: inline-block; /* Keeps logo in flow with text */
    vertical-align: middle; /* Aligns with text baseline */
    margin-left: 10px; /* Space after text */
    position: relative; /* Avoids floating issues */
}