.dialog-container {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  background-color: #000c;
}

.dialog {
  font-size: 1em;
  color: #4a4a4a;
  box-shadow: #000 0px 20px 60px;
  border-radius: 1em 1em .6em .6em;
  width: 40%;
  min-width: 44ch;
}

.dialog form {
  width: calc(100% - 1em);
}

.dialog-heading {
  padding: 1em;
  border-radius: .9rem .9rem 0 0;
  font-size: 1.1em;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
  text-align: center;
  background-image: none, linear-gradient(to bottom, hsl(from var(--color-base) h s 50%) 0, hsl(from var(--color-base) h s 30%) 100%);
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px, rgba(0, 0, 0, 0.5) 0 1px, rgba(0, 0, 0, 0.3) -1px 2px;
  text-transform: uppercase;
}

  .dialog-content,
  .dialog-content form.default {
    overflow-y: auto;
    background-color: hsl(from var(--color-base) h s 95%);
    border-radius: 0 0 .6em .6em;
  }

.dialog-footer {
  padding: 1em;
  padding-top: 0;
}



#Confirm .dialog {
  background-color: hsl(from var(--color-base) h s 95%);
  min-width: 20%;
  max-width: 30%;
}

#Confirm .dialog-content {
  padding: 1em;
}


.feedback {
  font-family: Poppins, Helvetica, sans-serif;
  margin: 20px;
  padding: 12px 4px;
  border: 2px solid hsl(from var(--color-accent) h s 50%);
  border-radius: 4px;
  font-size: 0.9em;
  background-color: hsl(from var(--color-accent) h s 80%);
  color: hsl(from var(--color-accent) h s 50%);
  box-shadow: #0004 0px 2px 20px;
}