/* color system */
/* Generate CSS below go to http://jsfiddle.net/yL2ascLj/3/ */

.colorify-text{ color: black; } /* default to black */
*[data-level="1"] .colorify-bg { background: #f60; }
*[data-level="1"] .colorify-text { color: #f36100; }
*[data-level="2"] .colorify-bg { background: #f60; }
*[data-level="2"] .colorify-text { color: #f36100; }
*[data-level="3"] .colorify-bg { background: #f60; }
*[data-level="3"] .colorify-text { color: #f36100; }
*[data-level="4"] .colorify-bg { background: #f60; }
*[data-level="4"] .colorify-text { color: #f36100; }
*[data-level="5"] .colorify-bg { background: #f60; }
*[data-level="5"] .colorify-text { color: #f36100; }
*[data-level="6"] .colorify-bg { background: #f60; }
*[data-level="6"] .colorify-text { color: #f36100; }
*[data-level="7"] .colorify-bg { background: #f60; }
*[data-level="7"] .colorify-text { color: #f36100; }
*[data-level="8"] .colorify-bg { background: #f60; }
*[data-level="8"] .colorify-text { color: #f36100; }
*[data-level="9"] .colorify-bg { background: #f60; }
*[data-level="9"] .colorify-text { color: #f36100; }
*[data-level="10"] .colorify-bg { background: #f60; }
*[data-level="10"] .colorify-text { color: #f36100; }
*[data-level="11"] .colorify-bg { background: #f60; }
*[data-level="11"] .colorify-text { color: #f36100; }
*[data-level="12"] .colorify-bg { background: #f60; }
*[data-level="12"] .colorify-text { color: #f36100; }
*[data-level="13"] .colorify-bg { background: #f60; }
*[data-level="13"] .colorify-text { color: #f36100; }
*[data-level="14"] .colorify-bg { background: #f60; }
*[data-level="14"] .colorify-text { color: #f36100; }
*[data-level="15"] .colorify-bg { background: #f60; }
*[data-level="15"] .colorify-text { color: #f36100; }
*[data-level="16"] .colorify-bg { background: #f60; }
*[data-level="16"] .colorify-text { color: #f36100; }
*[data-level="17"] .colorify-bg { background: #f60; }
*[data-level="17"] .colorify-text { color: #f36100; }
*[data-level="18"] .colorify-bg { background: #f60; }
*[data-level="18"] .colorify-text { color: #f36100; }
*[data-level="19"] .colorify-bg { background: #f60; }
*[data-level="19"] .colorify-text { color: #f36100; }
*[data-level="20"] .colorify-bg { background: #f60; }
*[data-level="20"] .colorify-text { color: #f36100; }
*[data-level="21"] .colorify-bg { background: #f60; }
*[data-level="21"] .colorify-text { color: #f36100; }
*[data-level="22"] .colorify-bg { background: #f60; }
*[data-level="22"] .colorify-text { color: #f36100; }
*[data-level="23"] .colorify-bg { background: #f60; }
*[data-level="23"] .colorify-text { color: #f36100; }
*[data-level="24"] .colorify-bg { background: #f60; }
*[data-level="24"] .colorify-text { color: #f36100; }
*[data-level="25"] .colorify-bg { background: #f60; }
*[data-level="25"] .colorify-text { color: #f36100; }
*[data-level="26"] .colorify-bg { background: #f60; }
*[data-level="26"] .colorify-text { color: #f36100; }
*[data-level="27"] .colorify-bg { background: #f60; }
*[data-level="27"] .colorify-text { color: #f36100; }
*[data-level="28"] .colorify-bg { background: #f60; }
*[data-level="28"] .colorify-text { color: #f36100; }
*[data-level="29"] .colorify-bg { background: #f60; }
*[data-level="29"] .colorify-text { color: #f36100; }
*[data-level="30"] .colorify-bg { background: #f09d2a; }
*[data-level="30"] .colorify-text { color: #e8921b; }
*[data-level="31"] .colorify-bg { background: #f09d2a; }
*[data-level="31"] .colorify-text { color: #e8921b; }
*[data-level="32"] .colorify-bg { background: #f09d2a; }
*[data-level="32"] .colorify-text { color: #e8921b; }
*[data-level="33"] .colorify-bg { background: #f09d2a; }
*[data-level="33"] .colorify-text { color: #e8921b; }
*[data-level="34"] .colorify-bg { background: #f09d2a; }
*[data-level="34"] .colorify-text { color: #e8921b; }
*[data-level="35"] .colorify-bg { background: #f09d2a; }
*[data-level="35"] .colorify-text { color: #e8921b; }
*[data-level="36"] .colorify-bg { background: #f09d2a; }
*[data-level="36"] .colorify-text { color: #e8921b; }
*[data-level="37"] .colorify-bg { background: #f09d2a; }
*[data-level="37"] .colorify-text { color: #e8921b; }
*[data-level="38"] .colorify-bg { background: #f09d2a; }
*[data-level="38"] .colorify-text { color: #e8921b; }
*[data-level="39"] .colorify-bg { background: #f09d2a; }
*[data-level="39"] .colorify-text { color: #e8921b; }
*[data-level="40"] .colorify-bg { background: #f09d2a; }
*[data-level="40"] .colorify-text { color: #e8921b; }
*[data-level="41"] .colorify-bg { background: #f09d2a; }
*[data-level="41"] .colorify-text { color: #e8921b; }
*[data-level="42"] .colorify-bg { background: #f09d2a; }
*[data-level="42"] .colorify-text { color: #e8921b; }
*[data-level="43"] .colorify-bg { background: #f09d2a; }
*[data-level="43"] .colorify-text { color: #e8921b; }
*[data-level="44"] .colorify-bg { background: #f09d2a; }
*[data-level="44"] .colorify-text { color: #e8921b; }
*[data-level="45"] .colorify-bg { background: #f09d2a; }
*[data-level="45"] .colorify-text { color: #e8921b; }
*[data-level="46"] .colorify-bg { background: #f09d2a; }
*[data-level="46"] .colorify-text { color: #e8921b; }
*[data-level="47"] .colorify-bg { background: #f09d2a; }
*[data-level="47"] .colorify-text { color: #e8921b; }
*[data-level="48"] .colorify-bg { background: #f09d2a; }
*[data-level="48"] .colorify-text { color: #e8921b; }
*[data-level="49"] .colorify-bg { background: #f09d2a; }
*[data-level="49"] .colorify-text { color: #e8921b; }
*[data-level="50"] .colorify-bg { background: #eeca01; }
*[data-level="50"] .colorify-text { color: #d8b700; }
*[data-level="51"] .colorify-bg { background: #eeca01; }
*[data-level="51"] .colorify-text { color: #d8b700; }
*[data-level="52"] .colorify-bg { background: #eeca01; }
*[data-level="52"] .colorify-text { color: #d8b700; }
*[data-level="53"] .colorify-bg { background: #eeca01; }
*[data-level="53"] .colorify-text { color: #d8b700; }
*[data-level="54"] .colorify-bg { background: #eeca01; }
*[data-level="54"] .colorify-text { color: #d8b700; }
*[data-level="55"] .colorify-bg { background: #eeca01; }
*[data-level="55"] .colorify-text { color: #d8b700; }
*[data-level="56"] .colorify-bg { background: #eeca01; }
*[data-level="56"] .colorify-text { color: #d8b700; }
*[data-level="57"] .colorify-bg { background: #eeca01; }
*[data-level="57"] .colorify-text { color: #d8b700; }
*[data-level="58"] .colorify-bg { background: #eeca01; }
*[data-level="58"] .colorify-text { color: #d8b700; }
*[data-level="59"] .colorify-bg { background: #eeca01; }
*[data-level="59"] .colorify-text { color: #d8b700; }
*[data-level="60"] .colorify-bg { background: #eeca01; }
*[data-level="60"] .colorify-text { color: #d8b700; }
*[data-level="61"] .colorify-bg { background: #eeca01; }
*[data-level="61"] .colorify-text { color: #d8b700; }
*[data-level="62"] .colorify-bg { background: #eeca01; }
*[data-level="62"] .colorify-text { color: #d8b700; }
*[data-level="63"] .colorify-bg { background: #eeca01; }
*[data-level="63"] .colorify-text { color: #d8b700; }
*[data-level="64"] .colorify-bg { background: #eeca01; }
*[data-level="64"] .colorify-text { color: #d8b700; }
*[data-level="65"] .colorify-bg { background: #eeca01; }
*[data-level="65"] .colorify-text { color: #d8b700; }
*[data-level="66"] .colorify-bg { background: #eeca01; }
*[data-level="66"] .colorify-text { color: #d8b700; }
*[data-level="67"] .colorify-bg { background: #eeca01; }
*[data-level="67"] .colorify-text { color: #d8b700; }
*[data-level="68"] .colorify-bg { background: #eeca01; }
*[data-level="68"] .colorify-text { color: #d8b700; }
*[data-level="69"] .colorify-bg { background: #eeca01; }
*[data-level="69"] .colorify-text { color: #d8b700; }
*[data-level="70"] .colorify-bg { background: #85c540; }
*[data-level="70"] .colorify-text { color: #6aaa25; }
*[data-level="71"] .colorify-bg { background: #85c540; }
*[data-level="71"] .colorify-text { color: #6aaa25; }
*[data-level="72"] .colorify-bg { background: #85c540; }
*[data-level="72"] .colorify-text { color: #6aaa25; }
*[data-level="73"] .colorify-bg { background: #85c540; }
*[data-level="73"] .colorify-text { color: #6aaa25; }
*[data-level="74"] .colorify-bg { background: #85c540; }
*[data-level="74"] .colorify-text { color: #6aaa25; }
*[data-level="75"] .colorify-bg { background: #85c540; }
*[data-level="75"] .colorify-text { color: #6aaa25; }
*[data-level="76"] .colorify-bg { background: #85c540; }
*[data-level="76"] .colorify-text { color: #6aaa25; }
*[data-level="77"] .colorify-bg { background: #85c540; }
*[data-level="77"] .colorify-text { color: #6aaa25; }
*[data-level="78"] .colorify-bg { background: #85c540; }
*[data-level="78"] .colorify-text { color: #6aaa25; }
*[data-level="79"] .colorify-bg { background: #85c540; }
*[data-level="79"] .colorify-text { color: #6aaa25; }
*[data-level="80"] .colorify-bg { background: #85c540; }
*[data-level="80"] .colorify-text { color: #6aaa25; }
*[data-level="81"] .colorify-bg { background: #85c540; }
*[data-level="81"] .colorify-text { color: #6aaa25; }
*[data-level="82"] .colorify-bg { background: #85c540; }
*[data-level="82"] .colorify-text { color: #6aaa25; }
*[data-level="83"] .colorify-bg { background: #85c540; }
*[data-level="83"] .colorify-text { color: #6aaa25; }
*[data-level="84"] .colorify-bg { background: #85c540; }
*[data-level="84"] .colorify-text { color: #6aaa25; }
*[data-level="85"] .colorify-bg { background: #85c540; }
*[data-level="85"] .colorify-text { color: #6aaa25; }
*[data-level="86"] .colorify-bg { background: #85c540; }
*[data-level="86"] .colorify-text { color: #6aaa25; }
*[data-level="87"] .colorify-bg { background: #85c540; }
*[data-level="87"] .colorify-text { color: #6aaa25; }
*[data-level="88"] .colorify-bg { background: #85c540; }
*[data-level="88"] .colorify-text { color: #6aaa25; }
*[data-level="89"] .colorify-bg { background: #85c540; }
*[data-level="89"] .colorify-text { color: #6aaa25; }
*[data-level="90"] .colorify-bg { background: #31B0F4; }
*[data-level="90"] .colorify-text { color: #00ABF5; }
*[data-level="91"] .colorify-bg { background: #31B0F4; }
*[data-level="91"] .colorify-text { color: #00ABF5; }
*[data-level="92"] .colorify-bg { background: #31B0F4; }
*[data-level="92"] .colorify-text { color: #00ABF5; }
*[data-level="93"] .colorify-bg { background: #31B0F4; }
*[data-level="93"] .colorify-text { color: #00ABF5; }
*[data-level="94"] .colorify-bg { background: #31B0F4; }
*[data-level="94"] .colorify-text { color: #00ABF5; }
*[data-level="95"] .colorify-bg { background: #31B0F4; }
*[data-level="95"] .colorify-text { color: #00ABF5; }
*[data-level="96"] .colorify-bg { background: #31B0F4; }
*[data-level="96"] .colorify-text { color: #00ABF5; }
*[data-level="97"] .colorify-bg { background: #31B0F4; }
*[data-level="97"] .colorify-text { color: #00ABF5; }
*[data-level="98"] .colorify-bg { background: #31B0F4; }
*[data-level="98"] .colorify-text { color: #00ABF5; }
*[data-level="99"] .colorify-bg { background: #31B0F4; }
*[data-level="99"] .colorify-text { color: #00ABF5; }


/* put silver crown in front of mod */
.colorify-text::before{
    width: 13px;
    height: 13px;
    display: inline-block;
    top: 3px;
    margin-right: 3px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

*[data-tag="mod"] .colorify-text::before{
    content: "";
    background-image: url('/images/mod/silver_crown.png');
}

/* put silver crown in front of mod */
*[data-tag="admin"] .colorify-text::before{
    content: "";
    background-image: url('/images/mod/gold_crown.png');
}

/* site donor */
*[data-tag="donor"] .colorify-text::before{
    content: "";
    background-image: url('/images/user_tags/donor.png');
    width: 15px;
    height: 15px;
}
*[data-tag="donor"] .colorify-text::after{
    content: " (donor)";
}
*[data-tag="donor"] .bChatMessage_user::after{ /* without this, colon would not appear*/
    content: " (donor):";
}

/* question pic */
*[data-level="100"] .QuestionsUsersPic {
    border-radius: 100px;
    border-color: white;
}
/* message pic */
*[data-level="100"] .bChatMessage_pic, *[data-level="100"] .dropDown_content_img {
    border-radius: 100px;
}

*[data-level="100"] .colorify-text { color: black; }
*[data-level="100"] .colorify-bg { background: #31B0F4; display: none; }


/* gender */
.gender{
    color: white;
    font-size: 12px;
    text-align: center;
    width: 32px;
    padding: 0px;
    padding-left: 1px;
    padding-right: 2px;
    border-radius: 2px;
    color: white;
    height: 16px;
    margin-top: 5px;
    line-height: 16px;
    font-weight: 400;
}
.gender[data-gender="male"]{
    background-color: #88BFF7;
}
.gender[data-gender="male"]::before {
    content: "♂";
    transform: rotate(20deg);
    display: inline-block;
    margin-right: 4px;
}

.gender[data-gender="female"]{
    background-color: #FAA1B5;
}
.gender[data-gender="female"]::before {
    content: "♀";
    transform: rotate(0deg);
    display: inline-block;
    margin-right: 1px;
}

/* location */
.distance{
    color: #8899A6;
}

.distance::before{
    content: "";
    background-image: url('/images/social/pin.png');
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    top: 1px;
}