html {
  font-size: 14px; /* You can adjust this value as needed */
}



body {
    min-height: 75rem;
    padding-top: 4.5rem;
  }

  h1 {
      color: green;
    }

  img.bookcover {
    height: 300px;
    width: auto;
  }

  .green {
      color: green;
  }

  .red {
      color: red;
  }

.no-underline {
    text-decoration: none;
}

.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table th,
.table td {
    padding: 8px;
    text-align: left;
    border: 1px solid lightgray; /* Add border for cells */
}

.table th {
    background-color: #f2f2f2;
    border-bottom: 1px solid #ddd;
}

/*
 changelog
 */

h2.changelog {
    font-size: 0.9rem;
    font-weight: bold;
    color: #343a40;
}


#progress-container {
    height: 60px;
    width: 100%;
    padding-left: 12px; /* Adjust as necessary */}

#report-container {
    height: 500px;
    width: 100%;
    overflow-y: scroll;
    border: 1px solid black; /* Add a border around the container */
    font-family: 'Courier New', Courier, monospace; /* Use a monospaced "computer" font */
    padding: 10px; /* Add some padding inside the box */
    line-height: 0.8;  /* Decrease line height */
}

/* Then, in your CSS stylesheet you would add a
 rule to make .search-form a flexible
  container and align its items in a row: */
.search-form {
    display: flex;
    gap: 10px; /* Optional: Add some gap between the fields */
    align-items: center; /* Optional: Align fields vertically */
}
.search-form input {
    flex: 1; /* This will make the inputs take equal widths. Adjust as needed. */
}

.content-container-max-width-400 {
    max-width: 400px;
}

.content-container-max-width-800 {
    max-width: 800px;
}

.content-container-max-width-1000 {
    max-width: 1000px;
}

.content-container-max-width-1200 {
    max-width: 1200px;
}

.form-check-input {
  margin-left: 0.5rem;
}

.form-check-label {
  padding-left: 2.5rem;
}

.form-check {
  width: fit-content;
}

.bg-prod {
  background-color: #327839 !important;
}

.bg-dev {
  background-color: #0056b3 !important;
}

.bg-docker {
  background-color: #7f50c6 !important;
}

/* in en uitklapbare tekst */
#collapseButton .when-open,
#collapseButton[aria-expanded="true"] .when-closed {
    display: none;
}
#collapseButton[aria-expanded="true"] .when-open {
    display: inline;
}