.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;
  display: inline-block; }
  .offline-ui .offline-ui-retry {
    display: none; }
  .offline-ui.offline-ui-up {
    display: block; }
    .offline-ui.offline-ui-up .offline-ui-content:before {
      content: "Online"; }
  .offline-ui.offline-ui-down {
    display: block; }
    .offline-ui.offline-ui-down .offline-ui-content:before {
      content: "Offline"; }

.offline-ui {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-family: "Helvetica Neue", sans-serif;
  white-space: nowrap;
  padding: 1em;
  width: 5em;
  max-width: 100%;
  bottom: 1em;
  left: 1em; }
  .offline-ui.offline-ui-up {
    background: #aacbf5;
    color: #1f4779; }
  .offline-ui.offline-ui-down {
    background: #ec8787;
    color: #551313; }