@import url("../../user_interface_standards/styles/colors/qmd_cores.css");
@import url("../../user_interface_standards/styles/fonts/qmd_fonte.css");

.box-details details {
  border: 1px solid var(--neutral-gray-200); 
  border-radius: 15px;
  padding: 1rem 2rem;
  margin-bottom: var(--font-size-sm);
  background-color: var(--neutral-gray-50);
  font-family: var(--fonts);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--neutral-gray-950);
}

.box-details details h2 {
  margin: 2rem 0 0 1rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.box-details details p {
  margin: 1rem 0 1rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.box-details details a {
  text-decoration: none;
  color: var(--primary-color-600);
  background-color: var(--primary-color-100);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.box-details details a:hover {
  color: var(--neutral-gray-0);
  text-decoration: underline dotted var(--neutral-gray-0);
  background-color: var(--primary-color-600);
}

.box-details ul {
  margin-left: 1rem;
}

.box-details li {
  padding-bottom: 0.5rem;
  font-size: var(--font-size-sm);
}

.box-details summary {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.box-details summary::marker {
  color: var(--neutral-gray-600);              
}

.box-details img {
  margin-top: 2rem;
  width: 100%;
}