body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Aufteilung in drei Zeilen */
  min-height: 100vh;
  margin: 0;
}

.top-menu {
  background-color: lightgray;
}

.top-menu .bu
.bottom-menu {
  background-color: lightgray;
}


.grid-container {
  display: grid;
  grid-template-columns: 10% 65% 25%; /* Aufteilung in drei Spalten */
  grid-gap: 1rem;
}

.sidebar {
  grid-column: 1; /* Belegung der ersten Spalte */
  /* Weitere CSS-Stile für die Sidebar */
}

.docker-content {
  grid-column: 2; /* Belegung der zweiten Spalte */
  /* Weitere CSS-Stile für den Docker-Inhalt */
}

.messages-container {
  grid-column: 3; /* Belegung der dritten Spalte */
  padding: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  /* Weitere CSS-Stile für die Messages */
}


h1 {
  font-size: 2.5rem;
  margin: 3rem 0 1rem;
  grid-column: 1 / span 2; /* Belegung von beiden Spalten */
}
.docker-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}

.docker-table th,
.docker-table td {
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #dee2e6;
}

.docker-table th {
  background-color: #007bff;
  color: #fff;
}

.docker-table td:first-child {
  font-weight: 600;
}

.docker-table td:last-child {
  white-space: nowrap;
}

.docker-table tr {
  display: block;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

.docker-table tbody {
  display: flex;
  flex-direction: column;
}

.docker-table tbody tr:last-child {
  margin-bottom: 0;
}

.docker-table .btn {
  margin-right: 0.5rem;
}

.docker-table .btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.docker-table .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

.docker-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container-block {
  flex: 0 0 calc(33.33% - 4rem);
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid black;
  border-radius: 0.25rem;
  margin-right: 1rem;
}

.docker-container::after {
  content: "";
  flex: auto;
}

.container-name,
.container-image,
.container-version,
.container-id,
.container-state {
  margin-bottom: 0.5rem;
  order: 1;
}

.container-name h3,
.container-image h3,
.container-version h3,
.container-id h3,
.container-state h3 {
  text-align: center;
  margin: auto;
  background-color: lightblue;
}

.container-buttons {
  order: 2;
}

.messages-container h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

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

.messages li {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.messages .alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.messages .alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.button-container-row {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.button-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border-radius: 6px;
  border: none;
  margin: 0.25rem 0.5rem;

  background: #6E6D70;
  box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
  color: #DFDEDF;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-container:focus {
  box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}

/* Custom styles for navbar */
.navbar-nav .nav-link {
    transition: background-color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background-color: #f8f9fa; /* Light background on hover */
}

.navbar-nav .nav-link.active {
    background-color: #007bff; /* Bootstrap primary color for active state */
    color: white; /* Change text color for active state */
}

.spinner-border {
  width: 3rem;
  height: 3rem;
  margin: 1rem auto;
}