<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<style>
    .online {
        width:auto;
        height:auto;
        background-color: #7af442;
        font-family: 'Oswald', sans-serif;
        color: white;
        font-weight: bold;
        font-size: 1em;
        padding: 2px 5px;
        border-radius: 3.5px 3.5px;
        box-shadow: 2px 2px 2px grey;
        margin: 5px;
        vertical-align: middle;
    }

    .offline {
        width:auto;
        height:auto;
        font-family: 'Oswald', sans-serif;
        background-color: red;
        color: white;
        font-weight: bold;
        font-size: 1em;
        padding: 2px 5px;
        border-radius: 3.5px 3.5px;
        box-shadow: 2px 2px 2px grey;
        margin: 5px;
    }

    .onlinedot {
        box-shadow: 2px 2px 2px grey;
        font-size: 1em;
        color: white;
        padding-bottom: 5px;
        padding-top: 2px;
        vertical-align: middle;
        height: 20px;
        width: 20px;
        background-color: #7af442;
        border-radius: 20%;
        display: inline-block;
        text-align: center;
        opacity: 1;
        animation: fade 2s linear;
        animation-iteration-count: infinite;
    }
    @keyframes fade {
        0%,100% { opacity: 0 }
        50% { opacity: 1 }
    }

    .offlinedot {
        box-shadow: 2px 2px 2px grey;
        font-size: 1em;
        padding-bottom: 5px;
        height: 20px;
        width: 20px;
        background-color: red;
        border-radius: 20%;
        display: inline-block;
        text-align: center;
        font-weight: bold;
        color: white;
        font-family: 'Oswald', sans-serif;
    }
</style>