body {
    width: 33%;
    margin-left: 33%;
  }
  
  h1 {
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
  }

  p {
    font-size: 1em;
  }

  table {
    border-collapse: collapse;
    width: 110%;
    overflow-x: auto;
    display: block;
  }

  th {
    cursor: pointer;
  }

  td.detailsColumn {
    padding-inline-start: 2em;
    text-align: end;
    white-space: nowrap;
  }

  a.icon {
    padding-inline-start: 1.5em;
    text-decoration: none;
    user-select: auto;
  }

  a.icon:hover {
    text-decoration: underline;
  }

  a.file {
    background: url("./icons/icon_page.png") left top no-repeat;
  }

  a.dir {
    background: url("./icons/icon_folder.png") left top no-repeat;
  }

  a.up {
    background: url("./icons/icon_back.png") left top no-repeat;
  }

  a.link {
    background: url("./icons/icon_link.png") left top no-repeat;
  }

  a.missing {
    background: url("./icons/icon_missing.png") left top no-repeat;
  }

  html[dir=rtl] a {
    background-position-x: right;
  }

  #parentDirLinkBox {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  /* Mobile Styles */
  @media (max-width: 600px) {
    table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th.detailsColumn, td.detailsColumn {
      display: table-cell;
    }

    body {
      width: 90%;
      margin-left: 5%;
    }


  }