.badge-green {  
background-color: #1ab394;  
}  
.badge-yellow {  
background-color: #fff933;  
}    
.badge-blue {  
background-color: #0000cc;  
}  
.badge-white {  
background-color: #FFFFFF;  
}  
.badge-red {  
background-color: #ff0000;  
} 
.badge {  
    color: #FFFFFF;  
    font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;  
    font-weight: 600;  
    padding: 2px 8px;  
    text-shadow: none;      
    border-radius: .25em;  
    float: right!important;  
}  
.r-content {
    background-color: #f0f5f5;
}
.r-topbar-page .r-body[data-body-width="compact"] {
    background-color: #f0f5f5;
}
 .r-content-col {
    background-color: #f0f5f5;
}
.r-small-page {
    background-color: #f0f5f5;
}
.r-small-page[data-body-width="standard"][data-body-align="center"] > :not( .container ) {
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}
table {
       background-color: #ffffff;
}
.btn-label {position: relative;right: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labell {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:0px; }

 .container {
      position: relative;
      width: 100%;
      }
      .image {
      display: block;
      width: 100%;
      height: auto;
      }
      .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #000099;
      overflow: hidden;
      width: 100%;
      height: 100%;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: .3s ease;
      transition: .3s ease;
      }
      .container:hover .overlay {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      }
      .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      }
.badge-green {  
background-color: #1ab394;  
}  
.badge-yellow {  
background-color: #fff933;  
}    
.badge-blue {  
background-color: #23c6c8;  
}  
.badge-white {  
background-color: #FFFFFF;  
}  
.badge-red {  
background-color: #ff0000;  
} 
.badge {  
    color: #FFFFFF;  
    font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;  
    font-weight: 600;  
    padding: 2px 8px;  
    text-shadow: none;      
    border-radius: .25em;  
    float: right!important;  
}  
.r-content {
    background-color: #f0f5f5;
}
.r-topbar-page .r-body[data-body-width="compact"] {
    background-color: #f0f5f5;
}
 .r-content-col {
    background-color: #f0f5f5;
}
.r-small-page {
    background-color: #f0f5f5;
}
.r-small-page[data-body-width="standard"][data-body-align="center"] > :not( .container ) {
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}
table {
       background-color: #ffffff;
}
.btn-label {position: relative;right: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labell {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:0px; }

#tooltip
{
    text-align: center;
    color: #fff;
    background: #03a3ff;
    position: absolute;
    z-index: 100;
    padding: 15px;
}
 
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #03a3ff;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #03a3ff;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }