.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-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  white-space: nowrap;
  padding: 7px;
  width: 69px;
  background: #f6f6f6;
  color: #888888;
  bottom: 0;
  left: 20px; }
  .offline-ui .offline-ui-content {
    padding-left: 16px; }
    .offline-ui .offline-ui-content:after {
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      bottom: 1px;
      left: 8px;
      margin: auto;
      height: 9px;
      width: 9px; }
  .offline-ui.offline-ui-up .offline-ui-content:after {
    background: #80d580; }
  .offline-ui.offline-ui-down .offline-ui-content:after {
    background: #ec8787; }