@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i&display=swap');

* {
    font-family: 'Open Sans', "Lucida Grande","Lucida Sans Unicode","Lucida Sans","Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: 0.2px;
}

.user-img {
    border: white 3px solid;
    border-radius: 100px;
    width: 38px;
    height: 38px;
    float: left;
}

.username {
    /* color: white; */
    font-weight: bold;
}

.online-indicator {
    width: 12px;
    background: #859aa4;
    height: 12px;
    border-radius: 20px;
    border: 1px white solid;
}

.online-indicator.online {
    background: #5ece08;
}

#sidepanel {
    position: fixed;
    top: 0;
    left: 0;
    /* width: 20vw; */
    width: 250px;
    background: #f4f4f4;
    height: 100%;
    /* max-width: 250px; */
    z-index: 2;
}

#side-bottom-information {
    position: absolute;
    width: 100%;
    height: 67px;
    background: #859aa4;
    bottom: 0;
}

#side-bottom-username {
    color: white;
    font-weight: bold;
    left: 66px;
    top: 20px;
    position: absolute;
}

#side-bottom-image {
    margin-top: 10px;
    margin-left: 8px;
}

#side-bottom-indicator {
    left: 39px;
    position: absolute;
    top: 41px;
}

#side-top-area {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 85px;
    /* box-shadow: #bbbbbb -5px -2px 5px 2px; */
    z-index: 1;
}

#side-top-logo img {
    width: 56%;
    margin-top: 3px;
    border: none;
}

#side-top-logo {
    position: absolute;
    left: 62px;
    top: 4px;
    /* padding-left: 40px; */
    /* box-shadow: #bbbbbb -5px -1px 5px 2px; */
    /* top: 0; */
    height: 42px;
}

#side-top-search-bar {
    position: absolute;
    top: 48px;
    width: 100%;
}

#start-convo {
    width: 90%;
    border-radius: 4px;
    border: none;
    box-shadow: 0px 0px 1px 1px #cdcdcd;
    margin-left: 4.5%;
    padding-left: 9px;
    box-sizing: border-box;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    outline: none;
    height: 24px;
}

#start-convo:focus {
    box-shadow: 0px 0px 2px 1px #9e9e9e;
}

.side-chat-list {
    position: absolute;
    width: 100%;
    height: calc(100% - 153px);
    top: 86px;
    overflow-y: auto;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    overflow-x: hidden;
}

.chat-info .online-indicator {
    position: relative;
    left: 32px;
    top: 31px;
}

.chat-info .username {
    position: relative;
    left: 16px;
    font-size: 14px;
    overflow: hidden;
    max-width: 165px;
    text-overflow: ellipsis;
    top: -14px;
}

.chat-info {
    padding-left: 8px;
    display: block;
    height: 62px;
    /* box-sizing: border-box; */
    /* display: grid; */
    padding-top: 10px;
}

.chat-info.tier-1 .user-img {
    border-color: orange;
}

.chat-info.tier-1 .username {
    color:orange;
}

.chat-info.tier-2 .user-img {
    border-color: #f36100;
}

.chat-info.tier-2 .username {
    color: #f36100;
}

.chat-info.tier-3 .user-img {
    border-color: #872af0;
}

.chat-info.tier-3 .username {
    color: #872af0;
}

.chat-info.tier-4 .user-img {
    border-color: #23b7f3;
}

.chat-info.tier-4 .username {
    color: #23b7f3;
}

.chat-info.tier-5 .user-img {
    border-color: #6aaa25;
}

.chat-info.tier-5 .username {
    color:#6aaa25;
}

#top-username.tier-1 {
    color:orange;
}

#top-username.tier-2 {
    color: #f36100;
}

#top-username.tier-3 {
    color: #872af0;
}

#top-username.tier-4 {
    color: #23b7f3;
}

#top-username.tier-5 {
    color: #6aaa25;
}
#top-username.moderator {
    color: teal;
}

.chat-info.moderator .user-img {
    border-color: teal;
}

.chat-info.moderator .username {
    color: teal;
}

.chat-info:first-child {
    /* margin-top: 10px; */
    padding-top: 8px;
}

.chat-info:first-child .username {
    top: -15px;
}

.chat-info:first-child .unread-indicator {
    margin-top: 8px;
}

.side-chat-list::-webkit-scrollbar {
    display:none;
    width: 3px;
    height: 9px;
    margin-left: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.side-chat-list::-webkit-scrollbar-button {
    display: none
}

.side-chat-list::-webkit-scrollbar-corner {
    display: none
}

/*.side-chat-list::-webkit-scrollbar-track-piece {
    background-color: #efefef;
    margin-top: 5px;
    margin-bottom: 5px
}*/

.side-chat-list::-webkit-scrollbar-thumb {
    display:none;
    background-color: #dedede;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: #d3d3d3 0 0 5px 1px inset;
    -webkit-box-shadow: #d3d3d3 0 0 5px 1px inset;
    -o-box-shadow: #d3d3d3 0 0 5px 1px inset;
    box-shadow: #d3d3d3 0 0 5px 1px inset
}

.side-chat-list:hover::-webkit-scrollbar, .side-chat-list:hover::-webkit-scrollbar-thumb {
    display:block;
}

.side-chat-list::-webkit-scrollbar-thumb:hover {
    background-color: #cdcdcd;
    -moz-box-shadow: #bfbfbf 0 0 5px 1px inset;
    -webkit-box-shadow: #bfbfbf 0 0 5px 1px inset;
    -o-box-shadow: #bfbfbf 0 0 5px 1px inset;
    box-shadow: #bfbfbf 0 0 5px 1px inset
}

#top-bar.active {
    position: absolute;
    width: calc(100% - 250px);
    right: 0;
    height: 50px;
    background: white;
    top: 0;
    box-shadow: #bbbbbb 1px -2px 5px 2px;
    z-index:1;
}

#search-convo {
    width: 30%;
    border-radius: 4px;
    border: none;
    box-shadow: 0px 0px 1px 1px #cdcdcd;
    margin-left: 4.5%;
    padding-left: 9px;
    box-sizing: border-box;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    outline: none;
    right: 0;
    position: absolute;
    top: 13px;
    right: 18px;
    max-width: 200px;
}

#search-convo:focus {
    box-shadow: 0px 0px 2px 1px #9e9e9e;
}

.chat-info.active {
    background: white;
    border-radius: 14px;
    margin-right: 5px;
}

#top-username {
    position: absolute;
    left: 24px;
    font-weight: bolder;
    font-size: 20px;
    /* top: 8px; */
    line-height: 50px;
    color: grey;
}

#top-username .online-indicator {
    display: inline-block;
    margin-left: 5px;
}

.chat-info .last-message {
    font-size: 14px;
    color: grey;
    position: absolute;
    margin-left: 60px;
    margin-top: -13px;
    width: 156px;
    height: 20px;
    text-overflow: ellipsis;
    /* overflow: hidden; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-info:first-child .last-message {
    margin-top: -15px;
}

#messages {
    position: fixed;
    right: 0;
    /*bottom: 66px;*/
    top: 50px;
    width: calc(100% - 250px);
    height: calc(100% - 116px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.direct-message .username {
    position: relative;
    left: 12px;
    font-size: 14px;
    top: -3px;
    display: inline;
}

.direct-message .online-indicator {
    position: relative;
    left: 43px;
    top: -15px;
}

.direct-message {
    padding-left: 20px;
    /* margin-left: 10px; */
    /* display: flex; */
}

.direct-message {
    margin-top: 20px;
    margin-bottom: 0px;
    padding-top: 2px;
    padding-bottom: 8px;
    /* height: 100%; */
    min-height: 10px;
}

.direct-message.tier-1 .user-img {
    border-color: orange;
}

.direct-message.tier-1 .username {
    color:orange;
}

.direct-message.tier-2 .user-img {
    border-color: #f36100;
}

.direct-message.tier-2 .username {
    color: #f36100;
}

.direct-message.tier-3 .user-img {
    border-color: #872af0;
}

.direct-message.tier-3 .username {
    color: #872af0;
}

.direct-message.tier-4 .user-img {
    border-color: #23b7f3;
}

.direct-message.tier-4 .username {
    color: #23b7f3;
}

.direct-message.tier-5 .user-img {
    border-color: #6aaa25;
}

.direct-message.tier-5 .username {
    color:#6aaa25;
}

.direct-message.moderator .user-img {
    border-color: teal;
}

.direct-message.moderator .username {
    color: teal;
}

.direct-message .message {
    font-size: 14px;
    color: black;
    margin-left: 56px;
    top: 0px;
    width: 85%;
    position: relative;
    margin-top: 0px;
    /* line-height: 18px; */
    /* top: 2px; */
    white-space: pre-wrap;
    word-wrap: break-word;
    /* min-height: 10px; */
}

.direct-message  .time {
    position: relative;
    display: inline;
    margin-left: 15px;
    font-size: 11px;
    color: #9a9a9a;
    top: -3px;
}

#messages::-webkit-scrollbar {
    width: 8px;
    height: 9px;
    margin-left: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

#messages::-webkit-scrollbar-button {
    display: none
}

#messages::-webkit-scrollbar-corner {
    display: none
}

#messages::-webkit-scrollbar-track-piece {
    background-color: #efefef;
}

#messages::-webkit-scrollbar-thumb {
    background-color: #dedede;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: #d3d3d3 0 0 5px 1px inset;
    -webkit-box-shadow: #d3d3d3 0 0 5px 1px inset;
    -o-box-shadow: #d3d3d3 0 0 5px 1px inset;
    box-shadow: #d3d3d3 0 0 5px 1px inset
}

#messages::-webkit-scrollbar-thumb:hover {
    background-color: #cdcdcd;
    -moz-box-shadow: #bfbfbf 0 0 5px 1px inset;
    -webkit-box-shadow: #bfbfbf 0 0 5px 1px inset;
    -o-box-shadow: #bfbfbf 0 0 5px 1px inset;
    box-shadow: #bfbfbf 0 0 5px 1px inset
}

/*For regular Input*/
/*#message-convo {
    width: 96%;
    border-radius: 4px;
    border: none;
    box-shadow: 0px 0px 1px 1px #91a3ae;
    margin-left: 2%;
    box-sizing: border-box;
    font-size: 13px;
    padding-top: 3px;
    padding-bottom: 3px;
    outline: none;
    top: 19px;
    position: relative;
    height: 32px;
    padding-left: 44px;
}*/

/*For TextArea Input*/
#message-convo {
    width: 96%;
    border-radius: 4px;
    border: none;
    box-shadow: 0px 0px 1px 1px #91a3ae;
    margin-left: 2%;
    box-sizing: border-box;
    font-size: 13px;
    padding:0;
    padding-top: 6px;
    padding-bottom: 6px;
    outline: none;
    top: 19px;
    position: relative;
    height: 32px;
    padding-left: 44px;
    resize: none;
    padding-right: 30px;
    min-height: 32px;
}

#message-convo::placeholder {
    line-height:22px;
}

#message-convo::-webkit-input-placeholder {
    line-height:22px;
}

#message-convo::-moz-placeholder {
    line-height:22px;
}

#message-convo:-ms-input-placeholder {
    line-height:22px;
}

#message-convo:-moz-placeholder {
    line-height:22px;
}

#message-convo:focus {
    box-shadow: 0px 0px 2px 1px #73818a;
}

#bottom-input {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: calc(100% - 250px);
    height: 67px;
    border-top: #c3c3c3 1px solid;
    box-sizing: border-box;
}

#settings {
    height: 25px;
    width: 25px;
    position: absolute;
    right: 20px;
    top: 20px;
}

#message-attach {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 2%;
    top: 19px;
    z-index: 1;
    padding-right: 6px;
    /* border-right: 1.3px solid #91a3ae; */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
    transition: transform 150ms;
}

#message-attach:hover path {
    fill: #859aa4!important;
}

.chat-info.subscribed .online-indicator, #top-username.subscribed .online-indicator {
    border-radius:0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(45deg);
}

.chat-info:hover {
    background: #ffffff;
    cursor: pointer;
}

.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 225px;
    position: absolute!important;
    top: 72px!important;
    z-index: 2;
    background: white;
    list-style: none;
    padding: 0;
    left: 11px!important;
    box-shadow: 0px 0px 1px 1px #9e9e9e;
    border-radius: 0px 0px 5px 5px;
}

.ui-state-active {
	background: #859aa4;
	font-weight: normal;
	color: #ffffff;
}

.auto-load img,  .ajax {
    height:15px;
    width:15px;
    margin-right: 5px;
}

.ajax.auto-load {
    width: 100%;
}

.chat-info .unread-indicator {
    background: #859aa4;
    position: absolute;
    font-size: 10px;
    color: white;
    padding: 2px;
    right: 0px;
    margin-top: 8px;
}

.group-alert {
    width: 420px;
    padding: 10px;
    color: red;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9;
    -moz-box-shadow: #ccc 0 0 1px 1px;
    -webkit-box-shadow: #ccc 0 0 1px 1px;
    -o-box-shadow: #ccc 0 0 1px 1px;
    box-shadow: #ccc 0 0 1px 1px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,rgba(255,253,197,0.95)),color-stop(100%,rgba(255,234,119,0.95)));
    background-image: -webkit-linear-gradient(rgba(255,253,197,0.95),rgba(255,234,119,0.95));
    background-image: -moz-linear-gradient(rgba(255,253,197,0.95),rgba(255,234,119,0.95));
    background-image: -o-linear-gradient(rgba(255,253,197,0.95),rgba(255,234,119,0.95));
    background-image: -ms-linear-gradient(rgba(255,253,197,0.95),rgba(255,234,119,0.95));
    background-image: linear-gradient(rgba(255,253,197,0.95),rgba(255,234,119,0.95));
}

.group-alert .close {
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    background-image: url(/images/session-close-buttonf540.png?1406796772);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 13px;
    height: 13px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.group-alert .close, .group-alert .close:hover {
    text-decoration: none;
}

.group-alert {
    font-size:10px;
    padding-top:2px;
    padding-bottom:2px;
    max-width: 52vw;
}

#search-convo {
    display:none;
}

.menu-button {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 8px;
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 5px;
    background-color: #859aa4;
    margin: 4px 0;
    transition: 0.4s;
    border-radius: 30px;
}

.menu-button.active .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 6px);
    -moz-transform: rotate(-45deg) translate(-8px, 6px);
    -ms-transform: rotate(-45deg) translate(-8px, 6px);
    -o-transform: rotate(-45deg) translate(-8px, 6px);
    transform: rotate(-45deg) translate(-8px, 5px);
}

.menu-button.active .bar2 {opacity: 0;}

.menu-button.active .bar3 {
    -webkit-transform: rotate(45deg) translate(-7px, -5px);
    -moz-transform: rotate(45deg) translate(-7px, -5px);
    -ms-transform: rotate(45deg) translate(-7px, -5px);
    -o-transform: rotate(45deg) translate(-7px, -5px);
    transform: rotate(45deg) translate(-7px, -5px);
}

body.mobile #sidepanel {
    -webkit-transform: translate(-250px,0px);
    -moz-transform: translate(-250px,0px);
    -ms-transform: translate(-250px,0px);
    -o-transform: translate(-250px,0px);
    transform: translate(-250px, 0px);
    transition: all 500ms;
}

body.mobile #top-bar, body.mobile #messages, body.mobile #bottom-input, body.mobile #fans {
    width:100%;
}

body.mobile.menu-active #sidepanel {
    -webkit-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    transform: translate(0px, 0px);
}

body.mobile.menu-active #sidepanel #side-bottom-information-user {
    display:block;
}

body:not(.mobile) #top-bar .menu-button {
    display: none;
}

body.mobile #top-username {
    left: 60px;
}

body.mobile.menu-active #blackback {
    /* opacity:1; */
    -webkit-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    transform: translate(0px,0px);
}

body.mobile .direct-message .message {
    width: calc(90vw - 60px)
}

body.mobile .youtube-preview {
    width: calc(85vw - 60px);
    height: auto;
}

#blackback {
    transition: all 600ms;
    width: 100%;
    /* opacity:0; */
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    height: 100%;
    z-index: 1;
    -webkit-transform: translate(-100%,0px);
    -moz-transform: translate(-100%,0px);
    -ms-transform: translate(-100%,0px);
    -o-transform: translate(-100%,0px);
    transform: translate(-100%,0px);
}

.menu-button .messages-count {
    background: #fb8181;
    color: white;
    font-size: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50px;
    text-align: center;
    position: absolute;
    top: 18px;
    left: 20px;
    line-height: 17px;
}

a {
    color: #00b1f2;
    text-decoration: none;
}

.new-messages-line {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid red;
    margin: 1em 0;
    padding: 0;
    margin-bottom: -15px;
    margin-top: 42px;
}

.new-messages-text {
    color: black;
    background: #ffffff;
    padding: 4px;
    position: relative;
    top: -15px;
    font-size: 9px;
    border-radius: 20px;
    border: 1px solid red;
}

a:hover {
    text-decoration: underline;
}

body:not(.mobile) .menu-button {
    display: none;
}

body:not(.mobile) #side-top-logo {
    padding-left: 62px;
    left:0px;
}



#blackback.active {
    z-index: 2;
    -webkit-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    -o-transform: translate(0px,0px);
    transform: translate(0px,0px);
}

#settings-menu {
    position: absolute;
    width: 80vw;
    max-width: 1000px;
    height: 85vh;
    background: white;
    z-index: 3;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -moz-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -o-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    border-radius: 40px;
    overflow: hidden;
    max-height: 600px;
    display: none; 
    box-shadow: 0px 0px 5px 1px #cdcdcd;
}

#settings-left {
    background: #f4f4f4;
    position: absolute;
    width: 250px;
    height: 100%;
    border-right: 1px solid black;
}

.settings-button {
    position: relative;
    width: 100%;
    height: 75px;
    font-size: 20px;
    text-align: center;
    background: #859aa4;
    padding-top: 20px;
    box-sizing: border-box;
    color: white;
    border-bottom: 1px solid white;
}

#loading-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #f2f2f2;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 1;
    font-size: 5vw;
}

#loading-overlay span {
    top: 38%;
    position:absolute;
    width:100%;
    left:0;
    top:38vh;
}

#loading-overlay img {
    width: 75px;
    height:75px;
    height:5vw;
    width:5vw;
}

.bbcode_img {
    max-width: 250px;
    /* max-height: 100px; */
    display: block;
    cursor: zoom-in;
}

.bbcode_smiley {
    width: 22px;
    margin-bottom: -5px;
    margin-top: -5px;
}

.file_upload_dialog {
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -moz-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -o-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    position: absolute;
    width: 500px;
    z-index: 2;
    border: 1px solid black;
    border-radius: 15px;
    background: white;
}

.file_upload_header {
    font-size: 20px;
    height: 38px;
    border-bottom: solid 1px black;
    padding-left: 16px;
    padding-top: 10px;
    font-weight: bold;
}

.file_upload_input {
    resize: none;
    width: calc(100% - 40px);
    box-sizing: border-box;
    border: 1px solid black;
    margin-top: 10px;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 50px;
    padding: 5px;
    padding-left: 8px;
    outline: none;
}

.file_upload_background {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #00000047;
    z-index: 2;
    left: 0;
    top: 0;
}

.file_upload_message {
    font-size: 18px;
    margin-left: 20px;
    margin-top: 20px;
}

.file_upload_footer {
    margin-top: 10px;
    margin-bottom: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

.file_upload_cancel {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 20px;
    background: none;
    border: none;
    padding: 5px;
    color: #4690ff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.file_upload_accept {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 20px;
    background: #008952;
    border: none;
    padding: 5px;
    color: white;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.file_upload_accept:hover {
    background: #00c65b;
}

.file_upload_cancel:hover {
    text-decoration:underline;
}

.file_upload_file {
    max-height:200px;
    margin-top:20px;
}

.file_upload_file img {
    max-height:200px;
    max-width:90%;
    object-fit: contain;
}

.file_upload_file audio {
    width: 90%;
}

body.mobile .file_upload_dialog {
    width:100%;
    border-radius:0px;
    height: 100%;
}

body.mobile .file_upload_file {
    max-width: 90%;
    max-height: 200px;
}

body.mobile .file_upload_file img {
    max-width:90%;
    height: 100%;
    max-height: 200px;
}

.direct-message .message audio {
    display: block;
    width: 75%;
    max-width: 500px;
}

div.bbcode_code {
    border: 1px solid black;
    margin: 0.5em 0;
    line-height: 0px;
    text-shadow: none;
    /* margin-top: -17px; */
    margin-bottom: -17px;
}

div.bbcode_code_head {
    line-height: 1.5em;
    background-color: black;
    color: white;
    font-weight: bold;
    padding: 0.25em 0.5em;
    text-shadow: none;
}

div.bbcode_code_body {
    background-color: #e2dede;
    color: black;
    font: 10pt monospace;
    padding: 0.5em 1em;
    text-shadow: none;
    max-width: 100%;
    overflow: auto;
}

.chat-info .last-message span, .chat-info .last-message b, .chat-info .last-message i, .chat-info .last-message div, .chat-info .last-message strike, .chat-info .last-message u {
    color:grey!important;
    font-size:14px!important;
    background:none!important;
    border:none!important;
    margin:0!important;
    padding:0!important;
    font-weight:normal!important;
    font-style:normal!important;
    text-decoration:none!important;
}

div.bbcode_quote {
    border: 1px solid #68C;
    margin: 0.5em 0;
    line-height: 0em;
    text-shadow: none;
    /* margin-top: -17px; */
    margin-bottom: -17px;
}

div.bbcode_quote_head {
    background-color: #68C;
    color: #FFF;
    font-weight: bold;
    padding: 0.25em 0.5em;
    line-height: 1.5em;
    text-shadow: none;
}

div.bbcode_quote_body {
    background-color: #F0F8FF;
    color: #000;
    padding: 0.5em 1em;
    line-height: 1.5em;
    text-shadow: none;
}

.big.bbcode_smiley {
    width: 50px;
    margin: 0;
}

.chat-info .last-message img {
    display: none;
}

#emojiPicker {
    display: none;
    width: 265px;
    height: 350px;
    background: white;
    position: fixed;
    z-index: 5;
    box-shadow: #bbbbbb 0px 0px 5px 2px;
    padding: 7px;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;
    right: 0;
}

.emopick-emj {
    width: 32px;
    height: 32px;
    margin: 0;
    display: inline-block;
    padding: 7px;
    cursor: pointer;
    margin-top: -7px;
}

.emopick-emj:first-child {
    margin-top: 0;
}

.emopick-emj:hover {
    background: #dedede;
}

.emojiMenuButton {
    width: 20px;
    height: 20px;
    position: absolute;
    right: calc(2% + 6px);
    top: 25px;
    background: none;
    border: none;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    transition: 100ms all;
}

.emopick-title {
    display: block;
    margin-left: 6px;
    font-size: 12px;
    color: dimgray;
    margin-bottom: 4px;
    margin-top: 6px;
}

.direct-message.combine {
    margin-top: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.direct-message.combine .username, .direct-message.combine .user-img, .direct-message.combine .time {
    display: none;
}

.new-messages {
    top: -28px;
    position: relative;
    margin-top: 30px;
}

.ui-menu-item-wrapper {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 95%;
    padding-left: 10px;
}

.file_upload_file .file {
    padding: 15px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #f4f4f4;
    max-width: 550px;
    position: relative;
    width: 80%;
    height: 40px;
}

body.mobile .file_upload_file .file .file-thumb {
    top: 0;
}

body.mobile .direct-message .files {
    width: calc(90% - 60px);
}

.file_upload_file .file .file-thumb {
    position: absolute;
    left: 10px;
}

.file_upload_file .file .file-thumb {
    position: absolute;
    left: 10px;
}

.file_upload_file .file .file-name {
    margin-top: 5px;
    text-align: left;
    position: initial;
    margin-left: 45px;
    width: calc(100% - 45px);
}

.direct-message .files {
    position:relative;
    margin-left: 60px;
    top: -12px;
    width: 85%;
}

.files .file {
    padding: 15px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #f4f4f4;
    max-width: 550px;
    position: relative;
    margin-top: 15px;
    height: 50px;
}

.file .file-thumb {
    width: 42px;
}

.file .file-name {
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 6px;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% - 85px);
}

.file .file-download {
    width: 30px;
    position: absolute;
    right: 12px;
    top: 22px;
    cursor: pointer;
}

.user.tier-1 .user-img {
    border-color: orange;
}

.user.tier-1 .username {
    color:orange;
}

.user.tier-2 .user-img {
    border-color: #f36100;
}

.user.tier-2 .username {
    color: #f36100;
}

.user.tier-3 .user-img {
    border-color: #872af0;
}

.user.tier-3 .username {
    color: #872af0;
}

.user.tier-4 .user-img {
    border-color: #23b7f3;
}

.user.tier-4 .username {
    color: #23b7f3;
}

.user.tier-5 .user-img {
    border-color: #6aaa25;
}

.user.tier-5 .username {
    color:#6aaa25;
}

.user.moderator .user-img {
    border-color: teal;
}

.user.moderator .username {
    color: teal;
}

#fans {
    position: fixed;
    right: 0;
    bottom: 0;
    width: calc(100% - 250px);
    height: calc(100% - 51px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

#fans .online-indicator {
    position: relative;
    left: 32px;
    top: 32px;
}

#fans .user {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 66px;
    padding: 5px;
    padding-right: 15px;
    padding-left: 15px;
    border-bottom: 1px solid #859aa4;
    padding-top: 10px;
    cursor:pointer;
    box-sizing: border-box;
}

#fans .user:hover {
    background: #f4f4f4;
}

#fans .user .username {
    margin-left: 58px;
    margin-top: -4px;
}

.message-menu {
    position: relative;
    right: 10px;
    cursor: pointer;
}

.message-menu-item {
    background: none;
    border: none;
    color: white;
    display: block;
    padding: 4px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
    cursor: pointer;
}

.message-menu-item:first-child {
    padding-top:6px;
}

.message-menu-item:last-child {
    padding-bottom:6px;
}

.message-menu-item:hover {
    background: #859aa4;
}

.message-menu-list {
    background: #b0b0b0;
    border-radius: 4px;
    position: absolute;
    right: 6px;
    top: 12px;
    overflow: hidden;
    cursor: pointer;
    display: none;
}

.direct-message:hover .message-menu:after {
    display: block;
}

.direct-message .message-menu:after {
    content: '\2807';
    font-size: 20px;
    color: #859aa4;
    float: right;
    margin-top: -12px;
    display: none;
}

.direct-message.combine .message-menu:after {
    margin-top: -18px;
}

.dialog.report * {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#shim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: alpha(opacity=40);
    opacity: .4;
    background-color: #000;
    margin: 0;
    z-index: 4
}


body.mobile #shim+.dialog {
    left:0;
    position:absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

#shim+.dialog {
    position: fixed;
    z-index: 4;
    margin: 0 auto;
    width: 30%;
    left: 30%;
    right: 30%;
    height: 30%;
    background-color: #fff;
    border: 5px solid #fff;
    border-radius: 10px
}

#shim+.dialog.report {
    top: 30%;
    border: 0;
    height: auto
}

#shim+.dialog.report .report {
    line-height: 1.5em;
    margin-bottom: 1em
}

#shim+.dialog.report .consider {
    font-size: 10px;
    line-height: 14px;
    color: #878787
}

#shim+.dialog.report h2 {
    padding: 7px;
    color: #fff;
    padding-left: 10px;
    background-color: #ee4242;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: .875em;
    line-height: 1.71429em
}

#shim+.dialog.report .close.corner {
    position: absolute;
    top: 12px;
    right: 12px;
    font-weight: bold;
    font-size: 21px;
    margin: 0;
    width: 13px;
    height: 13px;
    background: url('/images/white-close-buttonf540.png?1406796772')
}

#shim+.dialog.report .close.corner:hover {
    text-decoration: none
}

#shim+.dialog.report .username {
    color: #00b1f2;
    font-weight: bold
}

#shim+.dialog.report .close {
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 5px 0 0;
    color: #00b1f2;
    cursor: pointer
}

#shim+.dialog.report form {
    padding: 15px;
    overflow: hidden;
    *zoom:1;font-size: .75em;
    line-height: 2em
}

#shim+.dialog.report form label {
    margin-top: 15px;
    display: block
}

#shim+.dialog.report form textarea {
    width: 100%;
    height: 90px;
    margin: 5px 0
}

#shim+.dialog.report form fieldset {
    overflow: hidden;
    border: none;
}

#shim+.dialog.report form fieldset .close {
    float: left
}

#shim+.dialog.report form fieldset .submit {
    float: right;
    border: 0;
    background: #ee4242;
    border-radius: 4px;
    width: 115px;
    height: 23px;
    color: #fff;
    cursor: pointer;
    position: relative
}

#shim+.dialog.report form fieldset .submit:active {
    top: 1px;
    left: 1px
}

#shim+.dialog.report form fieldset .submit:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    bottom: 0
}

#shim+.dialog.report .success {
    padding: 10px;
    margin: 40px 0;
    text-align: center;
    color: #006400;
    font-size: .75em;
    line-height: 2em
}

.message-menu-item.delete {
    display: none;
}

/*.direct-message .files {
    position:relative;
    margin-left: 60px;
    top: -12px;
    width: 85%;
}

.files .file {
    padding: 15px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #f4f4f4;
    max-width: 550px;
    position: relative;
    margin-top: 15px;
}

.file .file-thumb {
    width: 42px;
}

.file .file-name {
    position: absolute;
    display: inline-block;
    bottom: 50%;
    -webkit-transform: translate(0, 50%);
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -o-transform: translate(0, 50%);
    transform: translate(0, 50%);
    margin-left: 6px;
    cursor: pointer;
}

.file .file-download {
    width: 30px;
    position: absolute;
    right: 12px;
    top: 22px;
    cursor: pointer;
}*/

/*
.direct-message.combine:hover .time {
    display: block;
    float:right;
    margin-right:10px;
}
*/

.message code {
    border: 1px solid #cfcfcf;
}

.direct-message:last-child {
    margin-bottom: 30px!important;
}

.direct-message.combine .message-menu {
    top: 14px;
}

.direct-message:not(.combine) {
    margin-bottom: 0px;
    /* padding-bottom: 0px; */
    /* min-height: 10px; */
    padding-bottom: 5px;
    padding-top: 2px;
}

.direct-message.combine:hover .time {display: block;float: right;top: 1px;margin-left: 0;}

.direct-message:hover {
    background: #f4f4f4;
}

body.mobile .direct-message.combine .message-menu {
    float: left;
}

body.mobile .message-menu-list {
    left: 0px;
    right: initial;
}

.emojiMenuButton:hover {
    transform: scale(1.1);
}

.emojiMenuButton:hover circle {
    fill: #fddd58!important;
}

ol, ul {
    list-style: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

div.short-profile {
    background-color: #fff;
    border: 1px solid #b4b4b4;
    -moz-box-shadow: rgba(0,0,0,0.6) 0 0 5px 0;
    -webkit-box-shadow: rgba(0,0,0,0.6) 0 0 5px 0;
    -o-box-shadow: rgba(0,0,0,0.6) 0 0 5px 0;
    box-shadow: rgba(0,0,0,0.6) 0 0 5px 0;
    display: none;
    position: fixed;
    left: 25px;
    z-index: 6;
    width: 338px;
    padding: 15px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px
}

div.short-profile>.ajax-loader {
    position: absolute;
    display: none;
    top: 8em;
    left: 10em
}

div.short-profile.ajax-loading>.ajax-loader {
    display: block
}

div.short-profile.ajax-loading li.fanning .become-a-fan,div.short-profile.ajax-loading li.fanning .already-a-fan {
    display: none
}

div.short-profile.ajax-loading li.fanning .checking-fan-status {
    display: block
}

div.short-profile .close {
    position: absolute;
    top: 5px;
    right: 5px
}

div.short-profile .close button {
    border: 0;
    background: transparent;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    background-image: url('/images/common-sprite.png?1406796772');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-position: -101px -19px;
    height: 13px;
    width: 13px;
    cursor: pointer
}

div.short-profile .user-link {
    font-weight: bold;
    display: block
}

div.short-profile .detailed-link {
    font-size: .875em;
    line-height: 1.71429em;
    line-height: 2em
}

div.short-profile .become-a-fan,div.short-profile .already-a-fan {
    display: block
}

div.short-profile .checking-fan-status {
    display: none
}

div.short-profile .rank {
    font-weight: normal
}

div.short-profile .user-tools {
    margin: 15px 0 0 0;
    *zoom:1}

div.short-profile .user-tools:after {
    content: "";
    display: table;
    clear: both
}

div.short-profile .user-tools li {
    display: inline-block;
    float: left;
    width: 32%;
    margin-left: 2%
}

div.short-profile .user-tools li:first-child {
    margin-left: 0
}

div.short-profile .user-tools li.unblock {
    display: none
}

div.short-profile .user-tools li .message-user,div.short-profile .user-tools li .block-user,div.short-profile .user-tools li .unblock-user,div.short-profile .user-tools li .become-a-fan {
    margin: 0;
    width: 100%;
    white-space: nowrap;
    padding: 4px 10px
}

div.short-profile .user-tools li .message-user,div.short-profile .user-tools li .become-a-fan {
    color: #fff;
    font-size: 12px;
    background: #51c9ff;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#51c9ff),color-stop(100%,#24b1f8));
    background-image: -webkit-linear-gradient(#51c9ff,#24b1f8);
    background-image: -moz-linear-gradient(#51c9ff,#24b1f8);
    background-image: -o-linear-gradient(#51c9ff,#24b1f8);
    background-image: -ms-linear-gradient(#51c9ff,#24b1f8);
    background-image: linear-gradient(#51c9ff,#24b1f8);
    border: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -webkit-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -o-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    cursor: pointer;
    padding: 3px 10px;
    position: relative;
}

div.short-profile .user-tools li .message-user:hover,div.short-profile .user-tools li .become-a-fan:hover {
    text-decoration: none;
    background: #1eb9ff;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#1eb9ff),color-stop(100%,#0799e2));
    background-image: -webkit-linear-gradient(#1eb9ff,#0799e2);
    background-image: -moz-linear-gradient(#1eb9ff,#0799e2);
    background-image: -o-linear-gradient(#1eb9ff,#0799e2);
    background-image: -ms-linear-gradient(#1eb9ff,#0799e2);
    background-image: linear-gradient(#1eb9ff,#0799e2)
}

div.short-profile .user-tools li .message-user:active,div.short-profile .user-tools li .become-a-fan:active {
    top: 1px;
    left: 1px
}

div.short-profile .user-tools li .message-user:before,div.short-profile .user-tools li .become-a-fan:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    bottom: 0;
}

div.short-profile .user-tools li .message-user.disabled,div.short-profile .user-tools li .become-a-fan.disabled {
    background: #bfbfbe;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#bfbfbe),color-stop(100%,#949492));
    background-image: -webkit-linear-gradient(#bfbfbe,#949492);
    background-image: -moz-linear-gradient(#bfbfbe,#949492);
    background-image: -o-linear-gradient(#bfbfbe,#949492);
    background-image: -ms-linear-gradient(#bfbfbe,#949492);
    background-image: linear-gradient(#bfbfbe,#949492);
    color: #ebebeb;
    cursor: not-allowed
}

div.short-profile .user-tools li .message-user.disabled:active,div.short-profile .user-tools li .become-a-fan.disabled:active {
    top: 0;
    left: 0
}

div.short-profile .user-tools li .block-user,div.short-profile .user-tools li .unblock-user {
    color: #fff;
    font-size: 12px;
    background: #ff6262;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff6262),color-stop(100%,#ff5f5f));
    background-image: -webkit-linear-gradient(#ff6262,#ff5f5f);
    background-image: -moz-linear-gradient(#ff6262,#ff5f5f);
    background-image: -o-linear-gradient(#ff6262,#ff5f5f);
    background-image: -ms-linear-gradient(#ff6262,#ff5f5f);
    background-image: linear-gradient(#ff6262,#ff5f5f);
    border: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -webkit-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -o-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    cursor: pointer;
    padding: 3px 10px;
    position: relative
}

div.short-profile .user-tools li .block-user:hover,div.short-profile .user-tools li .unblock-user:hover {
    text-decoration: none;
    background: #ff2f2f;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff2f2f),color-stop(100%,#ff2c2c));
    background-image: -webkit-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: -moz-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: -o-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: -ms-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: linear-gradient(#ff2f2f,#ff2c2c)
}

div.short-profile .user-tools li .block-user:active,div.short-profile .user-tools li .unblock-user:active {
    top: 1px;
    left: 1px
}

div.short-profile .user-tools li .block-user:before,div.short-profile .user-tools li .unblock-user:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    bottom: 0
}

div.short-profile .user-tools li .block-user.disabled,div.short-profile .user-tools li .unblock-user.disabled {
    background: #bfbfbe;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#bfbfbe),color-stop(100%,#949492));
    background-image: -webkit-linear-gradient(#bfbfbe,#949492);
    background-image: -moz-linear-gradient(#bfbfbe,#949492);
    background-image: -o-linear-gradient(#bfbfbe,#949492);
    background-image: -ms-linear-gradient(#bfbfbe,#949492);
    background-image: linear-gradient(#bfbfbe,#949492);
    color: #ebebeb;
    cursor: not-allowed
}

div.short-profile .user-tools li .block-user.disabled:active,div.short-profile .user-tools li .unblock-user.disabled:active {
    top: 0;
    left: 0
}

div.short-profile .user-tools.blocked li {
    display: none
}

div.short-profile .user-tools.blocked li.unblock {
    display: inline-block;
    width: 100%;
    margin: 0;
    color: #ff2f2f;
    font-size: .9em;
    font-weight: bold;
    line-height: 1.6em;
    *zoom:1}

div.short-profile .user-tools.blocked li.unblock:after {
    content: "";
    display: table;
    clear: both
}

div.short-profile .user-tools.blocked li.unblock span {
    float: left
}

div.short-profile .user-tools.blocked li.unblock button {
    width: auto;
    float: right;
    padding-left: 25px;
    padding-right: 25px
}

div.short-profile .testimonial {
    margin: 10px 0;
    font-size: .75em
}

div.short-profile .testimonial h6 {
    margin-bottom: 5px;
    color: #878787
}

div.short-profile .testimonial div.edit-testimonial,div.short-profile .testimonial div.current-testimonial,div.short-profile .testimonial div.no-testimonial {
    top: 5px;
    margin: 10px 0
}

div.short-profile .testimonial div.no-testimonial,div.short-profile .testimonial #tooltip-testimonial {
    background: #d0f2ff;
    border: 1px solid #bce6f6;
    margin: 0;
    padding: 10px
}

div.short-profile .testimonial div.no-testimonial h6,div.short-profile .testimonial div.no-testimonial button {
    text-shadow: #fff 1px 1px
}

div.short-profile .testimonial div.current-testimonial {
    overflow: hidden;
    *zoom:1;text-shadow: #fff 1px 1px
}

div.short-profile .testimonial div.current-testimonial p {
    display: block;
    padding: 5px 10px;
    line-height: 1.5em;
    margin-bottom: 10px;
    border: 1px solid #a6e6ff;
    background: #e3f7ff;
    max-height: 4em;
    overflow: hidden
}

div.short-profile .testimonial div.current-testimonial h6 {
    float: left;
    margin: 0
}

div.short-profile .testimonial div.current-testimonial button {
    float: right;
    font-style: normal;
    font-weight: bold;
    text-shadow: #fff 1px 1px
}

div.short-profile .testimonial div.edit-testimonial label {
    text-align: left;
    top: 7px;
    right: 9px;
    line-height: 1.5em;
    color: #373737
}

div.short-profile .testimonial div.edit-testimonial label.focused {
    color: gray
}

div.short-profile .testimonial div.edit-testimonial #tooltip-testimonial {
    padding: 7px;
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 10px;
    resize: none;
    height: 80px;
    overflow-y: auto
}

div.short-profile .testimonial div.edit-testimonial .cancel {
    float: left;
    margin-top: 5px;
    font-weight: bold
}

div.short-profile .moderator-tools {
    padding: 0;
    margin-top: 15px;
    margin-left: -2px;
    overflow: hidden;
    *zoom:1}

div.short-profile .no-group+.moderator-tools {
    margin-top: 0
}

div.short-profile img.avatar {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px
}

div.short-profile .avatar-link {
    float: left
}

div.short-profile .the-profile {
    overflow: hidden;
    *zoom:1}

div.short-profile .the-profile>.avatar {
    margin: 2px 5px 0 0
}

div.short-profile .the-profile h5 {
    overflow: hidden;
    *zoom:1;display: inline;
    font-size: 87.5%;
    margin-left: 0!important
}

div.short-profile .the-profile h5 .username {
    display: inline-block!important;
    margin-bottom: 2px
}

div.short-profile .the-profile h5 .moderator {
    color: #872af0
}

div.short-profile .the-profile .parenless-fans {
    font-size: 85.71%;
    font-weight: bold;
    line-height: 1.2em
}

div.short-profile p.activity {
    word-wrap: break-word;
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: normal;
    color: #373737;
    display: inline-block;
    margin: 10px 0;
    font-size: .625em;
    line-height: 2.4em;
    line-height: 1em
}

div.short-profile p.activity a.action-link {
    text-decoration: none
}

div.short-profile p.activity a.action-link:hover {
    text-decoration: underline
}

.user-profile .avatar,.short-profile .avatar {
    float: left
}

.user-profile h5,.user-profile .name,.short-profile h5,.short-profile .name {
    font-size: .75em;
    line-height: 2em;
    line-height: 1.5em
}

.user-profile h5,.short-profile h5 {
    font-weight: bold;
    margin-top: -2px;
    margin-left: 60px
}

.user-profile h5 .username,.short-profile h5 .username {
    display: block
}

.user-profile .name,.short-profile .name {
    line-height: 2em
}

.user-profile .moderator-tools li,.short-profile .moderator-tools li {
    float: left
}

.user-profile .moderator-tools button,.short-profile .moderator-tools button {
    color: #fff;
    font-size: 12px;
    background: #ff6262;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff6262),color-stop(100%,#ff5f5f));
    background-image: -webkit-linear-gradient(#ff6262,#ff5f5f);
    background-image: -moz-linear-gradient(#ff6262,#ff5f5f);
    background-image: -o-linear-gradient(#ff6262,#ff5f5f);
    background-image: -ms-linear-gradient(#ff6262,#ff5f5f);
    background-image: linear-gradient(#ff6262,#ff5f5f);
    border: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -webkit-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -o-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    cursor: pointer;
    padding: 3px 10px;
    position: relative
}

.user-profile .moderator-tools button:hover,.short-profile .moderator-tools button:hover {
    text-decoration: none;
    background: #ff2f2f;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff2f2f),color-stop(100%,#ff2c2c));
    background-image: -webkit-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: -moz-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: -o-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: -ms-linear-gradient(#ff2f2f,#ff2c2c);
    background-image: linear-gradient(#ff2f2f,#ff2c2c)
}

.user-profile .moderator-tools button:active,.short-profile .moderator-tools button:active {
    top: 1px;
    left: 1px
}

.user-profile .moderator-tools button:before,.short-profile .moderator-tools button:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    bottom: 0
}

.user-profile .moderator-tools button.disabled,.short-profile .moderator-tools button.disabled {
    background: #bfbfbe;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#bfbfbe),color-stop(100%,#949492));
    background-image: -webkit-linear-gradient(#bfbfbe,#949492);
    background-image: -moz-linear-gradient(#bfbfbe,#949492);
    background-image: -o-linear-gradient(#bfbfbe,#949492);
    background-image: -ms-linear-gradient(#bfbfbe,#949492);
    background-image: linear-gradient(#bfbfbe,#949492);
    color: #ebebeb;
    cursor: not-allowed
}

.user-profile .moderator-tools button.disabled:active,.short-profile .moderator-tools button.disabled:active {
    top: 0;
    left: 0
}

.user-profile .testimonial,.short-profile .testimonial {
    position: relative;
    margin-top: 10px
}

.user-profile .testimonial div.no-testimonial,.user-profile .testimonial div.edit-testimonial,.user-profile .testimonial div.current-testimonial,.short-profile .testimonial div.no-testimonial,.short-profile .testimonial div.edit-testimonial,.short-profile .testimonial div.current-testimonial {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    filter: alpha(opacity=100);
    opacity: 1
}

.user-profile .has-testimonial div.no-testimonial,.user-profile .has-testimonial div.edit-testimonial,.short-profile .has-testimonial div.no-testimonial,.short-profile .has-testimonial div.edit-testimonial {
    position: absolute;
    z-index: 0;
    filter: alpha(opacity=0);
    opacity: 0
}

.user-profile .editing-testimonial div.no-testimonial,.user-profile .editing-testimonial div.current-testimonial,.short-profile .editing-testimonial div.no-testimonial,.short-profile .editing-testimonial div.current-testimonial {
    position: absolute;
    z-index: 0;
    filter: alpha(opacity=0);
    opacity: 0
}

.user-profile .has-no-testimonial div.edit-testimonial,.user-profile .has-no-testimonial div.current-testimonial,.short-profile .has-no-testimonial div.edit-testimonial,.short-profile .has-no-testimonial div.current-testimonial {
    position: absolute;
    z-index: 0;
    filter: alpha(opacity=0);
    opacity: 0
}

.short-profile .testimonial {
    clear: both
}

.testimonial h6 {
    color: #878787;
    margin-bottom: 10px
}

.testimonial button.edit-testimonial,.testimonial button.cancel {
    font-size: inherit;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    color: #00b1f2;
    cursor: pointer
}

.testimonial button.edit-testimonial:hover,.testimonial button.cancel:hover {
    text-decoration: underline
}

.testimonial .no-testimonial .edit-testimonial {
    display: block;
    font-weight: bold
}

.testimonial .current-testimonial p {
    display: inline
}

.testimonial .current-testimonial .edit-testimonial {
    font-style: italic
}

.testimonial div.edit-testimonial {
    position: relative
}

.testimonial div.edit-testimonial label {
    position: absolute;
    top: 5px;
    left: 5px
}

.testimonial div.edit-testimonial textarea {
    border: 1px solid #d4d4d4;
    padding: 5px
}

.user-profile .testimonial button.submit,.short-profile .testimonial button.submit {
    color: #fff;
    color: #fff;
    font-size: 12px;
    background: #51c9ff;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#51c9ff),color-stop(100%,#24b1f8));
    background-image: -webkit-linear-gradient(#51c9ff,#24b1f8);
    background-image: -moz-linear-gradient(#51c9ff,#24b1f8);
    background-image: -o-linear-gradient(#51c9ff,#24b1f8);
    background-image: -ms-linear-gradient(#51c9ff,#24b1f8);
    background-image: linear-gradient(#51c9ff,#24b1f8);
    border: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -webkit-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    -o-box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    box-shadow: rgba(255,255,255,0.3) 1px 1px 1px inset,rgba(0,0,0,0.1) -1px -1px 1px inset;
    cursor: pointer;
    padding: 3px 10px;
    position: relative;
    margin-left: 20px
}

.user-profile .testimonial button.submit:hover,.short-profile .testimonial button.submit:hover {
    text-decoration: none;
    background: #1eb9ff;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#1eb9ff),color-stop(100%,#0799e2));
    background-image: -webkit-linear-gradient(#1eb9ff,#0799e2);
    background-image: -moz-linear-gradient(#1eb9ff,#0799e2);
    background-image: -o-linear-gradient(#1eb9ff,#0799e2);
    background-image: -ms-linear-gradient(#1eb9ff,#0799e2);
    background-image: linear-gradient(#1eb9ff,#0799e2)
}

.user-profile .testimonial button.submit:active,.short-profile .testimonial button.submit:active {
    top: 1px;
    left: 1px
}

.user-profile .testimonial button.submit:before,.short-profile .testimonial button.submit:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    bottom: 0
}

.user-profile .testimonial button.submit.disabled,.short-profile .testimonial button.submit.disabled {
    background: #bfbfbe;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#bfbfbe),color-stop(100%,#949492));
    background-image: -webkit-linear-gradient(#bfbfbe,#949492);
    background-image: -moz-linear-gradient(#bfbfbe,#949492);
    background-image: -o-linear-gradient(#bfbfbe,#949492);
    background-image: -ms-linear-gradient(#bfbfbe,#949492);
    background-image: linear-gradient(#bfbfbe,#949492);
    color: #ebebeb;
    cursor: not-allowed
}

.user-profile .testimonial button.submit.disabled:active,.short-profile .testimonial button.submit.disabled:active {
    top: 0;
    left: 0
}

.user-profile .testimonial div.edit-testimonial,.short-profile .testimonial div.edit-testimonial {
    text-align: right
}

.user-profile .testimonial textarea,.short-profile .testimonial textarea {
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 10px
}

.fanning .checking-fan-status {
    font-size: .625em;
    line-height: 2.4em;
    line-height: 2.1em
}

.fanning .already-a-fan {
    color: #5cb705;
    font-weight: bold;
    text-align: center;
    font-size: .625em;
    line-height: 2.4em
}

.fanning .already-a-fan .stop-fanning {
    border: 0;
    background: transparent;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    background-image: url('/images/common-sprite.png?1406796772');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-position: 0 -200px;
    height: 13px;
    width: 13px;
    position: relative;
    top: 1px;
    left: 0;
    padding: 0;
    margin-left: 7px
}

.fanning .already-a-fan .stop-fanning:active {
    top: 1px;
    left: 1px
}

.fanning .already-a-fan .stop-fanning:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    bottom: 0
}

#profile-tooltip.ajax-loading>div.smarts {
    visibility: hidden
}

#profile-tooltip>div.smarts {
    font-weight: bold
}

#profile-tooltip>div.smarts>ul {
    min-height: 79px
}

#profile-tooltip>div.smarts>.level {
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    font-size: 40px;
    height: 79px;
    width: 79px;
    line-height: 79px;
    -moz-border-radius: 79px;
    -webkit-border-radius: 79px;
    -o-border-radius: 79px;
    -ms-border-radius: 79px;
    -khtml-border-radius: 79px;
    border-radius: 79px;
    float: left;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 2;
    background: #f60;
}

#profile-tooltip>div.smarts>.level.tier-2 {
    background: #f09d2a
}

#profile-tooltip>div.smarts>.level.tier-3 {
    background: #eeca01
}

#profile-tooltip>div.smarts>.level.tier-4 {
    background: #cbc14f
}

#profile-tooltip>div.smarts>.level.tier-5 {
    background: #85c540
}

#profile-tooltip>div.smarts li.component {
    position: relative;
    height: 25px;
    line-height: 25px;
    margin: 0 0 2px 42px;
    margin-bottom: 2px;
    text-align: right;
    background: #fac800;
    width: 180px;
    padding-right: 25px;
    font-size: 12px;
    color: #fff;
    background-repeat: no-repeat
}

#profile-tooltip>div.smarts li.component>.score {
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    position: absolute;
    top: 0;
    right: -13px;
    height: 25px;
    width: 25px;
    line-height: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    -ms-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    text-align: center
}

#profile-tooltip>div.smarts li.component>.score {
    background: #f60
}

#profile-tooltip>div.smarts li.component.tier-2>.score {
    background: #f09d2a
}

#profile-tooltip>div.smarts li.component.tier-3>.score {
    background: #eeca01
}

#profile-tooltip>div.smarts li.component.tier-4>.score {
    background: #cbc14f
}

#profile-tooltip>div.smarts li.component.tier-5>.score {
    background: #85c540
}

#profile-tooltip>div.smarts li.component>.title {
    position: absolute;
    top: 0;
    right: -120px;
    width: 100px;
    color: #fac800;
    text-align: left
}

#profile-tooltip>div.smarts li.component>.title {
    color: #f36100
}

#profile-tooltip>div.smarts li.component.tier-2>.title {
    color: #e8921b
}

#profile-tooltip>div.smarts li.component.tier-3>.title {
    color: #d8b700
}

#profile-tooltip>div.smarts li.component.tier-4>.title {
    color: #a29823
}

#profile-tooltip>div.smarts li.component.tier-5>.title {
    color: #6aaa25
}

#profile-tooltip>div.smarts li.component.teamwork {
    background: #f60;
    background: -webkit-gradient(radial,0 150%,0,0 150%,100,color-stop(39px,rgba(255,102,0,0)),color-stop(39px,#f60),color-stop(100%,#f60)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(255,102,0,0)),color-stop(14px,#f60),color-stop(100%,#f60)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 150%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -moz-radial-gradient(0 150%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -o-radial-gradient(0 150%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -ms-radial-gradient(0 150%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: radial-gradient(0 150%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.teamwork.tier-2 {
    background: #f09d2a;
    background: -webkit-gradient(radial,0 150%,0,0 150%,100,color-stop(39px,rgba(240,157,42,0)),color-stop(39px,#f09d2a),color-stop(100%,#f09d2a)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(240,157,42,0)),color-stop(14px,#f09d2a),color-stop(100%,#f09d2a)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 150%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -moz-radial-gradient(0 150%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -o-radial-gradient(0 150%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -ms-radial-gradient(0 150%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: radial-gradient(0 150%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.teamwork.tier-3 {
    background: #eeca01;
    background: -webkit-gradient(radial,0 150%,0,0 150%,100,color-stop(39px,rgba(238,202,1,0)),color-stop(39px,#eeca01),color-stop(100%,#eeca01)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(238,202,1,0)),color-stop(14px,#eeca01),color-stop(100%,#eeca01)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 150%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -moz-radial-gradient(0 150%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -o-radial-gradient(0 150%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -ms-radial-gradient(0 150%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: radial-gradient(0 150%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.teamwork.tier-4 {
    background: #cbc14f;
    background: -webkit-gradient(radial,0 150%,0,0 150%,100,color-stop(39px,rgba(203,193,79,0)),color-stop(39px,#cbc14f),color-stop(100%,#cbc14f)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(203,193,79,0)),color-stop(14px,#cbc14f),color-stop(100%,#cbc14f)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 150%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -moz-radial-gradient(0 150%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -o-radial-gradient(0 150%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -ms-radial-gradient(0 150%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: radial-gradient(0 150%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.teamwork.tier-5 {
    background: #85c540;
    background: -webkit-gradient(radial,0 150%,0,0 150%,100,color-stop(39px,rgba(133,197,64,0)),color-stop(39px,#85c540),color-stop(100%,#85c540)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(133,197,64,0)),color-stop(14px,#85c540),color-stop(100%,#85c540)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 150%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -moz-radial-gradient(0 150%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -o-radial-gradient(0 150%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -ms-radial-gradient(0 150%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: radial-gradient(0 150%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.problem-solving {
    margin-left: 43px;
    width: 179px;
    background: #f60;
    background: -webkit-gradient(radial,0 50%,0,0 50%,100,color-stop(39px,rgba(255,102,0,0)),color-stop(39px,#f60),color-stop(100%,#f60)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(255,102,0,0)),color-stop(14px,#f60),color-stop(100%,#f60)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -moz-radial-gradient(0 50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -o-radial-gradient(0 50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -ms-radial-gradient(0 50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: radial-gradient(0 50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.problem-solving.tier-2 {
    background: #f09d2a;
    background: -webkit-gradient(radial,0 50%,0,0 50%,100,color-stop(39px,rgba(240,157,42,0)),color-stop(39px,#f09d2a),color-stop(100%,#f09d2a)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(240,157,42,0)),color-stop(14px,#f09d2a),color-stop(100%,#f09d2a)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -moz-radial-gradient(0 50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -o-radial-gradient(0 50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -ms-radial-gradient(0 50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: radial-gradient(0 50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.problem-solving.tier-3 {
    background: #eeca01;
    background: -webkit-gradient(radial,0 50%,0,0 50%,100,color-stop(39px,rgba(238,202,1,0)),color-stop(39px,#eeca01),color-stop(100%,#eeca01)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(238,202,1,0)),color-stop(14px,#eeca01),color-stop(100%,#eeca01)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -moz-radial-gradient(0 50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -o-radial-gradient(0 50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -ms-radial-gradient(0 50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: radial-gradient(0 50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.problem-solving.tier-4 {
    background: #cbc14f;
    background: -webkit-gradient(radial,0 50%,0,0 50%,100,color-stop(39px,rgba(203,193,79,0)),color-stop(39px,#cbc14f),color-stop(100%,#cbc14f)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(203,193,79,0)),color-stop(14px,#cbc14f),color-stop(100%,#cbc14f)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -moz-radial-gradient(0 50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -o-radial-gradient(0 50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -ms-radial-gradient(0 50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: radial-gradient(0 50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.problem-solving.tier-5 {
    background: #85c540;
    background: -webkit-gradient(radial,0 50%,0,0 50%,100,color-stop(39px,rgba(133,197,64,0)),color-stop(39px,#85c540),color-stop(100%,#85c540)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(133,197,64,0)),color-stop(14px,#85c540),color-stop(100%,#85c540)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -moz-radial-gradient(0 50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -o-radial-gradient(0 50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -ms-radial-gradient(0 50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: radial-gradient(0 50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.engagement {
    background: #f60;
    background: -webkit-gradient(radial,0 -50%,0,0 -50%,100,color-stop(39px,rgba(255,102,0,0)),color-stop(39px,#f60),color-stop(100%,#f60)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(255,102,0,0)),color-stop(14px,#f60),color-stop(100%,#f60)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 -50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -moz-radial-gradient(0 -50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -o-radial-gradient(0 -50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: -ms-radial-gradient(0 -50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    background: radial-gradient(0 -50%,circle,rgba(255,102,0,0) 39px,#f60 39px,#f60) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(255,102,0,0) 14px,#f60 14px,#f60) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.engagement.tier-2 {
    background: #f09d2a;
    background: -webkit-gradient(radial,0 -50%,0,0 -50%,100,color-stop(39px,rgba(240,157,42,0)),color-stop(39px,#f09d2a),color-stop(100%,#f09d2a)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(240,157,42,0)),color-stop(14px,#f09d2a),color-stop(100%,#f09d2a)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 -50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -moz-radial-gradient(0 -50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -o-radial-gradient(0 -50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: -ms-radial-gradient(0 -50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    background: radial-gradient(0 -50%,circle,rgba(240,157,42,0) 39px,#f09d2a 39px,#f09d2a) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(240,157,42,0) 14px,#f09d2a 14px,#f09d2a) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.engagement.tier-3 {
    background: #eeca01;
    background: -webkit-gradient(radial,0 -50%,0,0 -50%,100,color-stop(39px,rgba(238,202,1,0)),color-stop(39px,#eeca01),color-stop(100%,#eeca01)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(238,202,1,0)),color-stop(14px,#eeca01),color-stop(100%,#eeca01)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 -50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -moz-radial-gradient(0 -50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -o-radial-gradient(0 -50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: -ms-radial-gradient(0 -50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    background: radial-gradient(0 -50%,circle,rgba(238,202,1,0) 39px,#eeca01 39px,#eeca01) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(238,202,1,0) 14px,#eeca01 14px,#eeca01) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.engagement.tier-4 {
    background: #cbc14f;
    background: -webkit-gradient(radial,0 -50%,0,0 -50%,100,color-stop(39px,rgba(203,193,79,0)),color-stop(39px,#cbc14f),color-stop(100%,#cbc14f)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(203,193,79,0)),color-stop(14px,#cbc14f),color-stop(100%,#cbc14f)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 -50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -moz-radial-gradient(0 -50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -o-radial-gradient(0 -50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: -ms-radial-gradient(0 -50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    background: radial-gradient(0 -50%,circle,rgba(203,193,79,0) 39px,#cbc14f 39px,#cbc14f) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(203,193,79,0) 14px,#cbc14f 14px,#cbc14f) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

#profile-tooltip>div.smarts li.component.engagement.tier-5 {
    background: #85c540;
    background: -webkit-gradient(radial,0 -50%,0,0 -50%,100,color-stop(39px,rgba(133,197,64,0)),color-stop(39px,#85c540),color-stop(100%,#85c540)) no-repeat 0 0,-webkit-gradient(radial,100% 50%,0,100% 50%,100,color-stop(14px,rgba(133,197,64,0)),color-stop(14px,#85c540),color-stop(100%,#85c540)) no-repeat 100% 0;
    background: -webkit-radial-gradient(0 -50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-webkit-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -moz-radial-gradient(0 -50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-moz-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -o-radial-gradient(0 -50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-o-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: -ms-radial-gradient(0 -50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,-ms-radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    background: radial-gradient(0 -50%,circle,rgba(133,197,64,0) 39px,#85c540 39px,#85c540) no-repeat 0 0,radial-gradient(100% 50%,circle,rgba(133,197,64,0) 14px,#85c540 14px,#85c540) no-repeat 100% 0;
    -moz-background-size: 51% 100%;
    -webkit-background-size: 51% 100%;
    -o-background-size: 51% 100%;
    background-size: 51% 100%
}

.fan .become-a-fan {
    display: none!important
}

.not-fan .already-a-fan {
    display: none!important
}

a.user-link.detailed-link {
    display: inline-block;
}

a.user-link.detailed-link:before {
    content: "| ";
    color: black;
}

#fanned-indicator.open .panel ol>li.moderator img.avatar {
    border: 2px solid teal;
}

div.short-profile .the-profile h5 .moderator {
    color: teal !important;
}

.ambassador .username:before {
    content: "\24B6  ";
    color: #3FADD1;
}

#top-username.ambassador:before {
    content: "\24B6  ";
    color: #3FADD1;
}

div.short-profile .the-profile h5 .ambassador:before {
    content: "\24B6  ";
    color: #3FADD1;
}

.ambassador .username {
    color: #3FADD1;
}

body.mobile div.short-profile .user-tools {
    position: absolute;
    width: calc(100% - 26px);
    bottom: 10px;
}

body.mobile #profile-tooltip .moderator-tools li button {
    border-radius: 0 !important;
    background: #ff6060 !important;
    border: 1px solid #ff8e8d;
    width: 100%;
    font-size: 14px;
    height: 32px;
}

body.mobile #profile-tooltip .parenless-fans {
    display: inline;
}

body.mobile #profile-tooltip .detailed-link {
    display: inline;
}

body.mobile a.user-link.detailed-link:before {
    color: white;
}

body.mobile #profile-tooltip li.component {
    width: calc(100% - 80px) !important;
}

body.mobile .short-profile .moderator-tools li {
    width: 100%;
}

body.mobile #profile-tooltip .moderator-tools li:last-child button {
    border-radius: 0 0 10px 10px !important;
}

body.mobile #profile-tooltip .moderator-tools li:first-child button {
    border-radius: 10px 10px 0 0 !important;
}

body.mobile #profile-tooltip .user-tools li button {
    margin-bottom: 0;
    border-radius: 0 !important;
    box-sizing: border-box;
}

body.mobile #profile-tooltip .user-tools li {
    padding-right: 6px;
    box-sizing: border-box;
    height: 30px;
}

body.mobile #profile-tooltip .user-tools li:last-child button {
    border-radius: 0 0 10px 10px !important;
}

body.mobile #profile-tooltip .user-tools li:first-child button {
    border-radius: 10px 10px 0 0 !important;
}

div.authorized div.user-block div.avatar {
    height: 69px;
}

button.message-user {
    background: #2edaaa !important;
}

#profile-tooltip .moderator-tools button {
    border-radius: 100px !important;
    margin-right: 2.5px;
}

#profile-tooltip .user-tools button {
    border-radius: 100px !important;
}


.no-testimonial {
    border-color: #2edaaa !important;
    background: #7cffda !important;
}

.edit-testimonial>textarea {
    border-color: #2edaaa !important;
    background: #7cffda !important;
}

.edit-testimonial .cancel {
    color: #2edaaa !important;
}

button.message-user:hover {
    background: #1bbf91 !important;
}

button.become-a-fan:hover {
    background: #1bbf91 !important;
}

.edit-testimonial .submit {
    background: #2edaaa !important;
    border-radius: 16px !important;
}

.edit-testimonial .submit:hover {
    background: #1bbf91 !important;
}

.current-testimonial>p {
    border-color: #2edaaa !important;
    background: #7cffda !important;
    max-height: 10em !important;
}

.current-testimonial .edit-testimonial {
    color: #2edaaa !important;
}

button.become-a-fan {
    background: #2edaaa !important;
}

div#online-users ul li.moderator a.user-link>img.avatar,
#online-users a.user-link.moderator>img.avatar,
li.update>a.user-link.moderator>img.avatar,
li.reply>a.user-link.moderator>img.avatar,
div.update-content>h2>a.user-link.moderator>img.avatar {
    color: teal !important;
    border-color: teal !important;
}

.moderator.avatar-link .level,
.moderator .level {
    border-color: turquoise !important;
    background-color: teal !important;
}

div.short-profile .the-profile h5 .moderator {
    color: teal !important;
}

.username.tier-1,
.component.tier-1 .title {
    color: orange !important;
}

.tier-1.level {
    background: #e8921b !important;
}

.component.tier-1,
.tier-1 .level {
    background: orange !important;
}

.component.tier-1 .score {
    background: #e8921b !important;
}

.username.tier-2,
.component.tier-2 .title {
    color: #f36100 !important;
}

.tier-2.level {
    background: #c10101 !important;
}

.component.tier-2,
.tier-2 .level {
    background: #f36100 !important;
}

.component.tier-2 .score {
    background: #c10101 !important;
}

.username.tier-3,
.component.tier-3 .title {
    color: #872af0 !important;
}

.tier-3.level {
    background: darkviolet !important;
}

.component.tier-3,
.tier-3 .level {
    background: #872af0 !important;
}

.component.tier-3 .score {
    background: darkviolet !important;
}

.username.tier-4,
.component.tier-4 .title {
    color: #23b7f3 !important;
}

.tier-4.level {
    background: #1691c3 !important;
}

.component.tier-4,
.tier-4 .level {
    background: #23b7f3 !important;
}

.component.tier-4 .score {
    background: #1691c3 !important;
}

.username.moderator {
    color: teal !important;
}

.moderator.avatar-link .level,
.moderator .level {
    background-color: teal !important;
}

.ultrilliam_dialog_box {
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 20;
    display:none;
}

.ultrilliam_dialog_header {
    background: linear-gradient(rgb(81, 201, 255), rgb(36, 177, 248));
    border-radius: 5px 5px 0px 0px;
    border-width: 1px 1px 0px;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    cursor: move;
}

.ultrilliam_dialog_body {
    background: #fff;
    padding: 10px;
    border: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-radius: 0px 0px 0px 0px;
    overflow-y: scroll;
    overflow: auto;
    resize: both;
}

.ultrilliam_dialog_footer {
    background: #DCDCDC;
    border-radius: 0px 0px 5px 5px;
    border: solid 1px;
    border-top-width: 0;
    height: 30px;
}

.ultrilliam_dialog_header_text {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    padding: 6px;
}


.ultrilliam_dialog_header_button {
    position: absolute;
    right: 0;
    margin: 4px;
    border: none;
    width: 22px;
    height: 22px;
    background: url(/images/close-filled.svg);
    cursor: pointer;
}

.ultrilliam_dialog_header_close {
    color: red;
    position: absolute;
    right: 0;
    margin: 4px;
    background: white;
    border: 1px grey solid;
    border-radius: 20px;
    width: 23px;
    height: 22px;
    font-weight: bold;
}


/*HLJS-LIGHT*/
.hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;background: #f7f7f7!important;}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#a626a4}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#50a14f}.hljs-built_in,.hljs-class .hljs-title{color:#c18401}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#986801}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#4078f2}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}


/*Streamlined UI
body:not(.mobile) .menu-button {
    display: none;
}

body:not(.mobile) #side-top-logo {
    display: none;
}

body:not(.mobile) #side-top-search-bar {
    top:0px;
    height:50px;
    box-shadow: 0px 0px 1px 1px #cdcdcd;
}

body:not(.mobile) #start-convo {
    position:absolute;
    margin-top: 14px;
}

body:not(.mobile) .side-chat-list {
    height:calc(100% - 117px);
    top:50px;
}

body:not(.mobile) .ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 225px;
    position: absolute!important;
    top: 20px!important;
    z-index: 2;
    background: white;
    list-style: none;
    padding: 0;
    left: 11px!important;
    box-shadow: 0px 0px 1px 1px #cdcdcd;
    border-radius: 0px 0px 5px 5px;
}
*/