* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    height: 100%;
    font-family: Arial, sans-serif;
  }
  
  /* Flex container */
  .container {
    display: flex;
    height: 100vh;
  }
  
  /* Sidebar (left panel) */
  .sidebar {
    width: 15%;
    background-color: #2c3e50;
    color: #fff;
    padding: 20px;
  }
  
  .sidebar h2 {
    margin-bottom: 20px;
  }
  
  .sidebar ul {
    list-style: none;
  }
  
  .sidebar ul li {
    margin: 10px 0;
  }
  
  .sidebar ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  .sidebar ul li a:hover {
    text-decoration: underline;
  }
  
  /* Main content (right panel) */
  .main-content {
    width: 85%;
    padding: 20px;
    background-color: #f4f4f4;
    overflow-y: auto;
  }
  .main-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .main-content li {
    background-color: #fff;
    margin-bottom: 0px;
    padding: 0px 0px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    margin-bottom: 10px;
  }
  
  .main-content li:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .main-content ul li .medium {
    display: inline-block;
    width: 200px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 10px;
    border-left: 1px solid #ddd;/* Add border between spans */
    word-wrap: break-word;     /* wrap long words */
    word-break: break-word;    /* force break when needed */
    font-size: 12px;
  }
  .main-content ul li .span120 {
    display: inline-block;
    width: 120px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 10px;
    border-left: 1px solid #ddd;/* Add border between spans */
    word-wrap: break-word;     /* wrap long words */
    word-break: break-word;    /* force break when needed */
  }
  .main-content ul li .span100 {
    display: inline-block;
    width: 100px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 10px;
    border-left: 1px solid #ddd;/* Add border between spans */
    word-wrap: break-word;     /* wrap long words */
    word-break: break-word;    /* force break when needed */
    font-size: 12px;
  }
  .main-content ul li .first {
    display: inline-block;
    width: 30px;                /* Fixed width for each span */
    overflow: hidden;           /* Hides overflow text */
    white-space: nowrap;        /* Prevents line break */
    text-overflow: ellipsis;    /* Adds "..." if text is too long */
    text-align: center;         /* Center-align text */
    padding: 10px;
  }
  .main-content ul li .big {
    display: inline-block;
    width: 250px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 10px;
    border-left: 1px solid #ddd;/* Add border between spans */
    word-wrap: break-word;     /* wrap long words */
    word-break: break-word;    /* force break when needed */
    font-size: 12px;
  }
  .main-content ul li .small {
    display: inline-block;
    width: 50px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 10px;
    border-left: 1px solid #ddd;/* Add border between spans */
  }
  .main-content ul li .last {
    display: inline-block;
    width: 50px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 10px;
    border-left: 1px solid #ddd;/* Add border between spans */
    font-size: 13px;
  }
  /* Lead details (top box) */
.lead-details-box {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
  
  /* Bottom row with 3 equal boxes */
  .lead-bottom-row {
    display: flex;
    gap: 20px;
  }
  
  .lead-box {
    flex: 1;
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-height: 500px;
  }
  .lead-details-grid {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
  }
  
  .lead-info-box {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0px;
    min-height: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    text-align: left;
  }
  
  .lead-info-box h4 {
    margin-top: 0;
    color: #333;
    font-size: 15px;
  }
  
  .lead-info-box p {
    margin: 8px 0 0;
    color: #555;
    font-size: 14px;
  }
  .lead-info-box .heading {
    display: inline-block;
    width: 100px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 5px;
    font-size: 13px;
  }
  .lead-info-box .data {
    display: inline-block;
    width: 360px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    /*white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 5px;
    font-size: 13px;
  }
  .lead-box h4 {
    margin-top: 0;
    color: #333;
    font-size: 15px;
  }
  .lead-box h1 {
    margin-top: 0;
    color: #333;
    font-size: 17px;
  }
  
  .lead-box p {
    margin: 8px 0 0;
    color: #555;
    font-size: 14px;
  }
  .lead-box .heading {
    display: inline-block;
    width: 120px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 5px;
    font-size: 13px;
  }
  .lead-box .data {
    display: inline-block;
    width: 300px; /* fixed width */
    overflow: hidden;       /* optional: hides overflow text */
    /*white-space: nowrap;    /* optional: keeps text on one line */
    text-overflow: ellipsis;/* optional: adds ... if text overflows */
    padding: 5px;
    font-size: 13px;
  }
/* Responsive breakpoints */
@media (max-width: 1024px) {
  .sidebar {
    width: 20%;
    min-width: 160px;
  }
  .main-content ul li span {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
  }
  .sidebar {
    width: 100%;
    min-width: auto;
    padding: 10px;
  }
  .main-content {
    width: 100%;
  }
  .main-content ul li span {
    display: block;
    width: 100%;
    border-left: none;
    border-top: 1px solid #ddd;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .lead-bottom-row {
    flex-direction: column;
  }
  .lead-box {
    min-height: auto;
  }
  .main-content ul li {
    padding: 5px;
  }
  .main-content ul li span {
    font-size: 10px;
    padding: 5px;
  }
}