body {
  font: normal 12px/150% Arial, Helvetica, sans-serif;
}

.datagrid table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.datagrid {
  font: normal 12px/150% Arial, Helvetica, sans-serif;
  background: #fff;
  overflow: hidden;
  border: 1px solid #000000;
  border-radius: 3px;
}

  .datagrid table td,
  .datagrid table th {
    padding: 3px 10px;
  }

  .datagrid table thead th {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #A3A3A3;
  }

    .datagrid table thead th:first-child {
      border: none;
    }

  .datagrid table tbody td {
    color: #000000;
    border-left: 1px solid #DBDBDB;
    font-size: 12px;
    font-weight: normal;
  }

    .datagrid table tbody td:first-child {
      border-left: none;
    }

  .datagrid table tbody tr:nth-child(odd) td {
    background: #EBEBEB;
    color: #000000;
  }

  .datagrid table tbody tr:nth-child(even) td {
    background: #FBFBFB;
    color: #000000;
  }

  .datagrid table tbody tr:last-child td {
    border-bottom: none;
  }

  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-family: monospace;
    max-height: 80vh;
    overflow-y: auto;
  }