.layout {
        display: flex;
        height: calc(100vh - 56px);
      }

      .left {
        width: 120px;
        border-right: 1px solid #eee;
        padding: 10px;

      }

      .right {
        flex: 1;
        padding: 18px;
        overflow: auto;
      }

      .tree {
        list-style: none;
        padding-left: 0;
      }

      .tree li {
        padding: 4px;
        border-radius: 6px;
        cursor: pointer;
      }

      .tree li:hover {
        background: #f0f4f9;
      }








        .info {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .info h3 {
            margin-top: 0;
            color: #333;
        }
        .info p {
            margin: 10px 0;
            color: #666;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }









        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            overflow-x: auto;
 color: #666;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
vertical-align:top;
        }

        th {
            background-color: #f4f4f4;
        }

    

        @media (max-width: 600px) {
            table {
                width: 100%;
            }

            th, td {
                padding: 8px;
            }
        }





  
        img {
            width: 100%;
            height: auto; /* Maintains aspect ratio */
            border: 0;   /* Removes border */
        }

li:not(:last-child) {
    margin-bottom: 5px;