html {
  font-size: 10px;
}

#net-error.hidden {
  display: none;
}

#net-error #actions {
  display: none;
}

#net-error.no-frame #actions {
  display: flex;
}

#net-error.framed form[role="dialog"] {
  background-image: none;
  background-color: #f4f4f4;
  color: black;
  padding-bottom: 0;
}

#net-error.framed form[role="dialog"] p {
  border-top-color: rgba(0, 0, 0, 0.10);
  padding-top: 1.2rem;
}

#net-error.framed .title {
  color: black;
}

#net-error.framed .message {
  color: black;
  font-size: 1.5rem;
  width: calc(100% - 3rem);
  line-height: 1.9rem;
}

#net-error #retry-icon {
  display: none;
}

#net-error.framed #retry-icon {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  padding-top: 0.2rem;
}
html[dir="ltr"] #net-error.framed #retry-icon { float: right; }
html[dir="rtl"] #net-error.framed #retry-icon { float: left; }

#net-error.framed #retry-icon.still {
  background: image-set(url("net_error/iframe_reload_icon.png") 1x, url("net_error/iframe_reload_icon@1.5x.png") 1.5x) center / 3rem no-repeat;
  animation: none;
}

#net-error.framed.netOffline #retry-icon {
  background: image-set(url("net_error/iframe_settings_icon.png") 1x, url("net_error/iframe_settings_icon@1.5x.png") 1.5x) center / 3rem no-repeat;
}

form[role="dialog"][data-type="action"] > menu > button.icon {
  background-repeat: no-repeat;
  padding-inline-start: 4rem;
  background-size: 3rem;
}
html[dir="ltr"] form[role="dialog"][data-type="action"] > menu > button.icon { background-position: left 0.5rem center; }
html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button.icon { background-position: right 0.5rem center; }

form[role="dialog"][data-type="action"] > menu > button.icon-settings {
  background-image: image-set(url("net_error/settings.png") 1x, url("net_error/settings@1.5x.png") 1.5x);
}

#net-error.no-frame.dialog .message {
  line-height: 3rem;
  font-size: 2.2rem;
  color: #fff;
  font-weight: normal;
}

#net-error.no-frame.alert .close {
  width: 100%;
}

#net-error.no-frame.alert .reload {
  display: none;
}

#net-error.no-frame.netOffline form[role="dialog"] > section {
  text-align: center;
  margin-top: -7rem;
  bottom: 14rem;
}

#net-error.no-frame.netOffline .title {
  font-size: 2.3rem;
  line-height: 3.6rem;
  font-weight: normal;
}

#failed-logo {
  display: inline-block;
  width: 7.4rem;
  height: 12.5rem;
  background-image: image-set(url("net_error/no_connectivity.png") 1x, url("net_error/no_connectivity@1.5x.png") 1.5x);
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-height: 380px) and (orientation: landscape) {
  html[dir="ltr"] #net-error.no-frame.netOffline form[role="dialog"] > section {
    text-align: left;
  }
  html[dir="rtl"] #net-error.no-frame.netOffline form[role="dialog"] > section {
    text-align: right;
  }

  #net-error.no-frame.netOffline .title {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-inline-start: 6.8rem;
  }

  #failed-logo {
    position: absolute;
    top: 2rem;
    offset-inline-start: 0;
    width: 5rem;
    height: 8.5rem;
  }
}