html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  vertical-align: top;
  text-align: left;
}

a {
  cursor: pointer;
}

td > a {
  text-decoration: underline;
}

.table-wrapper,
.dt-container {
  width: 100%;
  max-width: 100vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#positions-table {
  width: 100%;
}

.bct-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1em;
  align-items: end;
  margin: 0 0 1em 0;
}

.bct-filters label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  font-size: 0.95em;
}

.bct-filters input,
.bct-filters select {
  margin-top: 0.2em;
  padding: 0.35em 0.45em;
  font-size: 1em;
  max-width: 100%;
}

.position-title {
  display: block;
  font-size: large;
  color: black;
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 0.35em;
}

.position-title strong {
  display: inline;
  margin: 0;
}

.position-summary {
  display: block;
  margin-top: 0.25em;
  line-height: 1.4;
}

.position-summary strong,
td span strong {
  display: inline;
  margin: 0;
}

.position-detail {
  white-space: pre-line;
  line-height: 1.2;
  margin: 0.2em 0 0.3em 0;
}

.position-detail strong {
  display: block;
  margin: 0.3em 0 0 0;
}

.contact-line {
  display: block;
  white-space: nowrap;
  margin-bottom: 0.4em;
}

.contact-line strong,
.contact-line a {
  display: inline;
  margin: 0;
}

@media (max-width: 700px) {
  .bct-filters {
    display: block;
  }

  .bct-filters label {
    margin-bottom: 0.6em;
  }

  .bct-filters input,
  .bct-filters select {
    width: 100%;
    box-sizing: border-box;
  }

  .contact-line {
    white-space: normal;
  }
}