$background: #444;
$text: #fff;
$success: #50BA5B;
$warning: #F6A41C;
$failure: #D93C38;
$neutral: #888;

$error: #000;

.widget-nagios {
  li {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 25px;

    .alert {
      position: relative;
      padding: 2px 0 0 0;
    }

    .title-link {
      font-size: 30px;

      &:hover {
        color: rgba(255, 255, 255, 0.7);
      }
    }

    h3 {
      font-size: 60px;
      font-weight: bold;
    }

    h4 {
      font-size: 20px;
      font-weight: bold;
      text-transform: uppercase;
      display: inline;
    }

    p {
      &.widget-content {
        text-align: left;
        margin-left: 20px;
        font-size: 16px;
      }
    }

    &.green {
      background-color: $success;

      p {
        &.updated-at {
          color: lighten($success, 20%);
        }
      }
    }

    &.yellow {
      background-color: $warning;

      p {
        &.updated-at {
          color: lighten($warning, 20%);
        }
      }
    }

    &.red {
      background-color: $failure;

      p {
        &.updated-at {
          color: lighten($failure, 20%);
        }
      }
    }

    &.gray {
      background-color: $neutral;

      p {
        &.updated-at {
          color: lighten($neutral, 20%);
        }
      }
    }

    &.error {
      background-color: $error;

      p {
        &.updated-at {
          color: lighten($error, 20%);
        }
      }
    }
  }
}