/* General Rules and Resets */
.title {
  background-image: none;
}

main {
  background: url(/img/onboarding-4.png) no-repeat;
  background-position: 200px 0;
  background-size: 120px;
  margin-inline-start: -350px;
  padding-inline-start: 350px;
}

.container-name {
  font-weight: bold;
}

button .container-name,
#current-container-name {
  font-weight: bold;
}

@media only screen and (max-width: 900px) {
  main {
    background: none;
  }

  /* for a mid sized window we have enough for this but not our image */
  .title {
    background-image: url('chrome://global/skin/icons/info.svg');
  }
}

html {
  box-sizing: border-box;
  font: message-box;
}

#redirect-url,
#redirect-origin {
  font-weight: bold;

  /* max-inline-size is needed to force this text smaller than the layout at a mid-sized window */
  max-inline-size: 40rem;
  word-break: break-all;
}

#redirect-url {
  background: #efedf0; /* Grey 20 */
  border-radius: 2px;
  line-height: 1.5;
  padding-block-end: 0.5rem;
  padding-block-start: 0.5rem;
  padding-inline-end: 0.5rem;
  padding-inline-start: 0.5rem;
}

/* stylelint-disable media-feature-name-no-unknown */
@media (prefers-color-scheme: dark) {
  #redirect-url {
    background: #38383d; /* Grey 70 */
    color: #eee; /* White 20 */
  }
}
/* stylelint-enable */

#redirect-url img {
  block-size: 16px;
  inline-size: 16px;
  margin-inline-end: 6px;
  offset-block-start: 3px;
  position: relative;
}

dfn {
  font-style: normal;
}

#deny,
#confirm {
  flex-grow: 1;
}

.button-container > button {
  min-inline-size: 240px;
}

.check-label {
  align-items: center;
  display: flex;
}
