/*Main overlay box class*/
.preview-overlay {
    position: absolute;
    opacity: 0.92;
    z-index: 10;
    background-color: white;
    border: 1px solid #999;
    padding: 2px 2px 2px 2px;
}

#previewContainer {
    position: relative;
}

/*Each type of preview data*/
.preview-below {
    white-space: nowrap;
    display: block;
}
.preview-near {
    white-space: nowrap;
    display: block;
}
.preview-above {
    white-space: nowrap;
    display: block;
}
.preview-skill{
    white-space: nowrap;
    display: block;
}

/*Specific color for each data range*/
/*Below, t,m,f vars*/
.data-tmf-lt50-below {
    color: #4686BA;
}
.data-tmf-lt60-below {
    color: #2A74A3;
}
.data-tmf-lt70-below {
    color: #5571C7;
}
.data-tmf-lt80-below {
    color: #3C61CC;
}
.data-tmf-lt90-below {
    color: #264699;
}
.data-tmf-gte90-below {
    color: #0E2977;
}

/*Below, p,i,c,s vars*/
.data-pics-lt50-below {
    color: #DAC28C;
}
.data-pics-lt60-below {
    color: #B99D6E;
}
.data-pics-lt70-below {
    color: #B59164;
}
.data-pics-lt80-below {
    color: #A4784E;
}
.data-pics-lt90-below {
    color: #8C503D;
}
.data-pics-gte90-below {
    color: #B65345;
}
                   
/*Near, all vars*/
.data-tpmifcs-lt50-near {
    color: #9A93AC;
}
.data-tpmifcs-lt60-near {
    color: #98819E;
}
.data-tpmifcs-lt70-near {
    color: #966F90;
}
.data-tpmifcs-lt80-near {
    color: #945F84;
}
.data-tpmifcs-lt90-near {
    color: #903D69;
}
.data-tpmifcs-gte90-near {
    color: #AE356C;
}

/*Above, t,m,f vars*/
.data-tmf-lt50-above {
    color: #F4CE00;
}
.data-tmf-lt60-above {
    color: #E99D37;
}
.data-tmf-lt70-above {
    color: #DA7A27;
}
.data-tmf-lt80-above {
    color: #E25C15;
}
.data-tmf-lt90-above {
    color: #CB242C;
}
.data-tmf-gte90-above {
    color: #A81319;
}

/*Above, p,i,c,s vars*/
.data-pics-lt50-above {
    color: #74CBB2;
}
.data-pics-lt60-above {
    color: #51C295;
}
.data-pics-lt70-above {
    color: #26B26B;
}
.data-pics-lt80-above {
    color: #02A043;
}
.data-pics-lt90-above {
    color: #007E3B;
}
.data-pics-gte90-above {
    color: #006378;
}

/*Skill data*/
.low-skill {
    color: red;
}

.medium-skill {
    color: #DAA520;
}

.high-skill {
    color: green;
}