/*
  Overrides Claro layout and styling for node form.
  @see https://github.com/az-digital/az_quickstart/issues/1716
  @see https://github.com/az-digital/az_quickstart/issues/2824
  @see https://www.drupal.org/project/drupal/issues/3184667
*/

@media screen and (min-width: 61rem) {
  div.layout-form {
    grid-template-columns: calc(65% - var(--space-l)) minmax(22.5rem, 1fr);
  }

  .layout-region.layout-region--main,
  .layout-region.layout-region--footer {
    margin-inline: 0;
    width: initial;
  }
}

.layout-region--main .claro-details__summary {
  color: unset;
}

tr.odd {
  background-color: #eee;
}

/** 
 * Match styling of node form with that of style.css.
 * See https://github.com/az-digital/az_quickstart/pull/4195.
 */
@media screen and (min-width: 576px) {
  .align-left {
    margin-right: 1em;
    margin-bottom: 0.7em;
  }
  .align-right {
    margin-left: 1em;
    margin-bottom: 0.7em;
  }
}

.align-left ~ ul,
.align-left ~ ol {
  overflow: auto;
  overflow-wrap: anywhere;
  padding-inline-start: revert;
}

.form-select {
  width: unset !important;
}
