/*<div class="box-led">
    <div class="led-blue blinking-slow">
       <div class="shine"></div>
    </div>
</div>*/

.box-led {
    height: 15px;
    width: 15px;
    text-align: center !important;
    /*background-color: #eee;*/
    /*border-radius: 50%;*/
    /*box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 5px, inset rgba(0, 0, 0, 0.2) 0 -1px 9px, rgba(0, 0, 0, 0.3) 0 2px 0;*/
}

.shine {
    position: absolute;
    background-color: rgba(256,256,256,0.5);
    height: 6px;
    width: 6px;
    margin: 5px;
    border-radius: 50%;
}

.led-red {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #F00;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px;
}
.led-purple {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ab5ee8;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px;
}

.led-yellow {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FF0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px;
}

.led-green {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ABFF00 !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px;
}

.led-blue {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #24E0FF;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px;
}
.led-orange {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #eab20a;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #FF9800 0 -1px 9px;
}
.led-off {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #9E9E9E 0 -1px 9px;
}
.led-black {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #000000;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #61696d 0 -1px 9px;
}
.blinking-fast {
    -webkit-animation: blinkKF 0.5s infinite;
    -moz-animation: blinkKF 0.5s infinite;
    -ms-animation: blinkKF 0.5s infinite;
    -o-animation: blinkKF 0.5s infinite;
    animation: blinkKF 0.5s infinite;
}

.blinking-slow {
    -webkit-animation: blinkKF 1s infinite;
    -moz-animation: blinkKF 1s infinite;
    -ms-animation: blinkKF 1s infinite;
    -o-animation: blinkKF 1s infinite;
    animation: blinkKF 1s infinite;
}

@-webkit-keyframes blinkKF {
    50% {
        box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 5px, inset rgba(0, 0, 0, 0.2) 0 -1px 9px, rgba(0, 0, 0, 0.3) 0 2px 0;
    }
}

@-moz-keyframes blinkKF {
    50% {
        box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 5px, inset rgba(0, 0, 0, 0.2) 0 -1px 9px, rgba(0, 0, 0, 0.3) 0 2px 0;
    }
}

@-ms-keyframes blinkKF {
    50% {
        box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 5px, inset rgba(0, 0, 0, 0.2) 0 -1px 9px, rgba(0, 0, 0, 0.3) 0 2px 0;
    }
}

@-o-keyframes blinkKF {
    50% {
        box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 5px, inset rgba(0, 0, 0, 0.2) 0 -1px 9px, rgba(0, 0, 0, 0.3) 0 2px 0;
    }
}

@keyframes blinkKF {
    50% {
        box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 5px, inset rgba(0, 0, 0, 0.2) 0 -1px 9px, rgba(0, 0, 0, 0.3) 0 2px 0;
    }
}