.my-native-garden-block {
  border: 2px solid #444;
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 1rem;
}

.my-native-garden-block h2,
.my-native-garden-block h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.my-native-garden-block p {
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {

  .my-native-garden-block {
    margin-left: 1.5rem;
  }
}
.my-native-garden-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.my-native-garden-action,
.my-native-garden-actions .form-actions,
.my-native-garden-actions .native-plant-havelist-count-block,
.my-native-garden-actions form {
  margin: 0;
}

.my-native-garden-actions .button,
.my-native-garden-actions .native-plant-havelist-count-link,
.my-native-garden-actions input[type="submit"] {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
}

/* Change the Add to have list button to green instead of blue */
.native-plant-havelist-toggle.is-add,
.my-native-garden-actions input[type="submit"].button--primary {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

.native-plant-havelist-toggle.is-add:hover,
.native-plant-havelist-toggle.is-add:focus,
.my-native-garden-actions input[type="submit"].button--primary:hover,
.my-native-garden-actions input[type="submit"].button--primary:focus {
  background-color: #157347;
  border-color: #146c43;
  color: #fff;
}

/* Remove button */
.native-plant-havelist-toggle.is-remove,
.my-native-garden-actions .button.button--danger,
.my-native-garden-actions input[type="submit"].button--danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.native-plant-havelist-toggle.is-remove:hover,
.native-plant-havelist-toggle.is-remove:focus,
.my-native-garden-actions .button.button--danger:hover,
.my-native-garden-actions .button.button--danger:focus,
.my-native-garden-actions input[type="submit"].button--danger:hover,
.my-native-garden-actions input[type="submit"].button--danger:focus {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}

/* Make the View have list look like a button */
.native-plant-havelist-count-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #0d6efd;
  color: #fff;
  text-decoration: none;
  border-radius: 0.375rem;
  font-weight: 600;
  line-height: 1.2;
}

.native-plant-havelist-count-link:hover,
.native-plant-havelist-count-link:focus {
  background-color: #0b5ed7;
  color: #fff;
  text-decoration: none;
}

.native-plant-havelist-table {
  width: 100%;
  border-collapse: collapse;
}

.native-plant-havelist-table th,
.native-plant-havelist-table td {
  padding: 0.5rem;
  border: 1px solid #d0d7de;
  vertical-align: top;
}

.native-plant-havelist-actions,
.native-plant-havelist-inline-actions,
.native-plant-havelist-count-block {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}

.native-plant-havelist-inline-actions form {
  margin: 0;
}

@media (max-width: 575px) {
  .my-native-garden-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .my-native-garden-actions .button,
  .my-native-garden-actions .native-plant-havelist-count-link,
  .my-native-garden-actions input[type="submit"] {
    width: 100%;
    max-width: 100%;
  }
}

@media print {
  .native-plant-havelist-actions,
  .messages,
  .native-plant-havelist-inline-actions,
  .native-plant-havelist-count-block,
  .my-native-garden-actions {
    display: none;
  }
}