main {
  box-sizing: border-box;
}

.main-content {
  width: var(--main-content-width);
  padding: 2rem 3rem 3rem;
  box-shadow: var(--box-shadow);
  margin: 0 auto;
}

.content-container {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
}

.container-actions {
  display: inline-block;
  width: fit-content;
  margin: var(--container-actions-margin);

}

.main-container-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  column-gap: 0.5rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.main-container-buttons > button {
  flex: 1 1 20rem;
  max-width: 20rem;
  min-width: 10rem;
}

.other-container-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 0.5rem;
  max-width: 20rem;
}

.hidden-container {
  display: none;
}

.locked-container {
  overflow-y: hidden;
}

.notification {
  display: block;
  border: solid;
  background-color: var(--background-color);
  padding: var(--notification-padding);
  width: var(--notification-width);
  border-radius: var(--border-radius);
  border-width: var(--notification-border-width);
  filter: var(--notification-shadow);
  margin: var(--notification-margin);
}

.info-notification {
  border-color: var(--secondary-color);
}

.error-notification {
  border-color: var(--error-notification-border-color);
}

.warning-notification {
  border-color: var(--warning-notification-border-color);
}

.clarification {
  max-width: var(--clarification-max-width);
}