.offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.offline-ui {
  display: none;
  position: fixed;
  background: white;
  z-index: 99999;
  margin: auto;
  top: 0;
  left: 0;
  right: 0; }
  .offline-ui .offline-ui-content:before {
    display: inline; }
  .offline-ui .offline-ui-retry {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: none; }
    .offline-ui .offline-ui-retry:before {
      display: inline;
      content: "Reconnect"; }
  .offline-ui.offline-ui-up {
    display: block; }
    .offline-ui.offline-ui-up .offline-ui-content:before {
      content: "Your computer is connected to the internet. "; }
      @media (max-width: 1024px) {
        .offline-ui.offline-ui-up .offline-ui-content:before {
          content: "Your device is connected to the internet. "; } }
      @media (max-width: 568px) {
        .offline-ui.offline-ui-up .offline-ui-content:before {
          content: "Your device is connected. "; } }
  .offline-ui.offline-ui-down {
    display: block; }
    .offline-ui.offline-ui-down .offline-ui-content:before {
      content: "Your computer lost its internet connection. "; }
      @media (max-width: 1024px) {
        .offline-ui.offline-ui-down .offline-ui-content:before {
          content: "Your device lost its internet connection. "; } }
      @media (max-width: 568px) {
        .offline-ui.offline-ui-down .offline-ui-content:before {
          content: "Your device isn't connected. "; } }
    .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before, .offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before {
      content: "Attempting to reconnect... "; }
    .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
      display: block; }
    .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:before {
      content: "Attempting to reconnect in " attr(data-retry-in-seconds) " seconds... "; }
      @media (max-width: 568px) {
        .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:before {
          content: "Reconnecting in " attr(data-retry-in-seconds) "s... "; } }
    .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
      display: none; }
    .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before {
      content: "Connection attempt failed. "; }