.fab-container{
    position: absolute;
    display: block;
    right: 24px;
    bottom: 20px;
    margin: auto;
    opacity: 0.6;
}

.fab-container:hover{
    opacity: 1;
}

.fab{
    display: block;

    width: 48px;
    height: 48px;
    border-radius: 100%;
    margin: 15px auto auto;
    box-shadow:  0 0 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.28);
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer;

    /*for ripple effect*/
    position: relative;
    overflow: hidden;
    -webkit-filter: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.order-table{
    display: inline-grid;
    width: 48px;
    height: 48px;
    border-radius: 100%;
    box-shadow:  0 0 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.28);
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer;

    /*for ripple effect*/
    position: relative;
    overflow: hidden;
    -webkit-filter: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.fab-default{
    background-color: #9DA5BE;
}

.fab-primary{
    background-color: #5093E1;
}

.fab-success{
    background-color: #50C14E;
}

.fab-warning{
    background-color: #F5A623;
}

.fab-danger{
    background-color: #F65177;
}

.fab-default:hover{
    background-color: #8289a0;
}

.fab-primary:hover{
    background-color: #4075b2;
}

.fab-success:hover{
    background-color: #3a8e39;
}

.fab-warning:hover{
    background-color: #c1831d;
}

.fab-danger:hover{
    background-color: #c93e5e;
}

.fab-lg{
    width: 70px;
    height: 70px;
}

.fab i{
    color: #FFFFFF;

    top: 50%;
    left: 50%;
    transform:  translate(-50%, -50%);
}