/**************************************** DATATABLE ****************************************/

.edit-btn{
    color: orange;
    font-weight: bold;
    font-size: 18px;
}

.view-btn{
    color: #DD3A49;
    font-weight: bold;
    font-size: 18px;
}

.center-align{
    text-align: center;
}

.read-only{
    background: white !important;
}

/**************************************** EVAL-PROGRESS-BAR ****************************************/

/* Main Progress Bar Container */
.eval-progress-bar {
    position: relative;
    display: block;
    width: 90%;
    height: 20px;
    border-radius: 4px;
    margin: 60px auto;
    background: linear(to right, #E6E7E8, green);
    /*background: linear-gradient(to right, #ffee58, #ffeb3b, #66bb6a ,  #ef5350, #f44336 , #e53935 , #d32f2f ) !important; */
}
/* Set Bar Properties */
.eval-bar {
    background: transparent !important;
    position: absolute;
    display: block;
    height: 100%;
    background: #FCB31C;
    border-radius: 4px;
    /* jQuery uses the .progress-bar data-percentage attribute to modify the .bar width property */
    width: 0%;
}

/* Set Label Properties*/
.eval-label { 
    position: absolute;
    display: block;
    padding: 5px 10px;
    height: 30px;
    line-height: 30px;
    top: -35px;
    background: #fff;
    font-size: 12px;
    font-family: sans-serif;
    text-align: center;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    white-space: nowrap;
    /* jQuery animates the opacity property to fade in the label*/
    opacity: 0;
    /* 
    left:/right: properties are set by jQuery.
    They depend on data-percentage attributes of each .progress-bar <div>
    */
}

/* 
Set Arrow Properties
(arrows are attached to <span> tag within .bar <div>) 
*/
.eval-bar span:after {
    transition : all .5s linear;
    position: absolute;
    display: block;
    content:"";
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: rgba(0, 0, 0, 0.2);
    top: -10px;
    right: 0%
}
            
.eval-label-text{
    color:black;
    margin-top: -6px;
}
/* HERE ENDS THE CSS FOR PROGRESS BAR */

/* CSS FOR PROGRESSBAR IN EVALUATION */
#compositionIMCMaleFemale {
    background-image:
        linear-gradient(to right, #7F39FB, #7F39FB), /* gradient 1 as solid color */
        linear-gradient(to right, #66bb6a, #66bb6a), /* gradient 3 as solid color */
        linear-gradient(to right, #fdd835 , #fdd835), /* gradient 2 as solid color */
        linear-gradient(to right, #ef5350, #ef5350); /* gradient 1 as solid color */


    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0% 0, /* gradient 1 */
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0; /* gradient 2 */


    background-size:
        23% auto,
        46% auto,
        64% auto,
        100% auto;

} 
    
#compositionIGCMaleFemale {
    background-image:
       linear-gradient(to right, #7F39FB, #7F39FB), /* gradient 1 as solid color */
        linear-gradient(to right, #66bb6a, #66bb6a), /* gradient 3 as solid color */
        linear-gradient(to right, #fdd835 , #fdd835), /* gradient 2 as solid color */
        linear-gradient(to right, #ef5350, #ef5350); /* gradient 1 as solid color */

    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0; /* gradient 3 */

    background-size:
        18% auto,
        61% auto,
        82% auto,
        100% auto;
}
    
#compositionMuscleMaleFemale {
    background-image:
      linear-gradient(to right, #7F39FB, #7F39FB), /* gradient 1 as solid color */
        linear-gradient(to right, #66bb6a, #66bb6a), /* gradient 3 as solid color */
        linear-gradient(to right, #fdd835 , #fdd835), /* gradient 2 as solid color */
        linear-gradient(to right, #ef5350, #ef5350); /* gradient 1 as solid color *

    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0; /* gradient 3 */

    background-size:
        24% auto,
        52% auto,
        76% auto,
        100% auto;
}
        
#compositionViceralMaleFemale {
    background-image:
        linear-gradient(to right, #7F39FB, #7F39FB), /* gradient 1 as solid color */
        linear-gradient(to right, #66bb6a , #66bb6a), /* gradient 2 as solid color */
        linear-gradient(to right, #fdd835 , #fdd835), /* gradient 3 as solid color */
        linear-gradient(to right, #ef5350, #ef5350); /* gradient 1 as solid color */

    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0, /* gradient 2 */
        0% 0; /* gradient 3 */

    background-size:
        15% auto,
        39% auto,
        83% auto,
        100% auto;
}

/******************** PRELOADER & LOADING SECTION *********************/
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../img/loader/other/dumbell.gif) center no-repeat #fff;
}

#se-pre-con-h1{
    position: fixed;
    left: 0px;
    top: 70%;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.loading-bg{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity:1;
    background: url(../img/loader/other/loading01.gif) center no-repeat ;
    display:none
}

/* table caption */
.top caption {
  caption-side: top;
}

th, td {
    white-space: nowrap;
}

/*********************************** TEXT STYLES ***********************************/
.male-text{
    color: #1565c0;
    font-weight: bold;
    padding: 22px;
    border-radius: 50%;
}

.female-text{
    color: #e91e63 ;
    font-weight: bold;
}

.active-text{
    color: #4caf50 ;
    font-weight: bold;
}

.inactive-text{
    color: #f44336;
    font-weight: bold;
}

.warning-text{
    color: #ff9800  ;
    font-weight: bold;
}