.nav-ubar {
    display: inline-block;
    zoom: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    vertical-align: top;
}
.nav-ubar li {
    display: block;
    float: left;
    margin: 0;
    padding: 0 2px;
    text-align: center;
}
.nav-ubar .head {
    font-size: 20px;
    font-weight: bold;
    line-height: 12px;
}
.nav-ubar .content {
    font-size: 11px;
    display: block;
}

*[rel=userinfobox]:hover > .inner, *[rel=userinfobox]:active > .inner, *[rel=userinfobox]:focus > .inner {
    display: block !important;
}

.userinfobox {
    display: block;
}
.userinfobox > img {
    max-width: 32px;
}
.userinfobox:hover .inner, .userinfobox:active .inner, .userinfobox:focus .inner {
    display: block;
}
.userinfobox .inner {
    position: absolute;
    z-index: 15000;
    display: none;
    min-height: 40px;
}

.account-user-preview {
    margin-bottom: 4px;
}
.account-user-preview .username-top {
    margin: 0;
    text-align: center;
    word-wrap: break-word;
}
.account-user-preview .account-user-preview-inner {
    display: flex;
    flex-direction: row;
    margin: 4px 0;
    padding-right: 30px;
}
.account-user-preview .account-user-preview-controls {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-start;
    width: 26px;
    margin-top: 18px;
    margin-right: 4px;
}
.account-user-preview .account-user-preview-content {
    text-align: center;
}
.account-user-preview .account-user-preview-content .account-user-preview-online {
    height: 14px;
    margin-bottom: 4px;
    text-align: center;
    white-space: nowrap;
}

.sideicon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.account-userinfo-status {
    font-weight: 600;
    margin-bottom: 2px;
    text-align: center;
}

.account-user-preview-windowed {
    font-size: 12px;
    position: relative;
    width: 200px;
    text-align: center !important;
    border-radius: 3px;
    top: 0;
    background: var(--card-body-background);
    box-shadow: var(--firefly-box-shadow);
}
.account-user-preview-windowed .account-user-preview-inner {
    padding: 0 8px;
}

.account-profile-layout {
    display: flex;
}

.account-profile-layout-head {
    margin-bottom: 12px;
}

.account-profile-layout-general {
    display: flex;
    flex-direction: column;
    width: 190px;
}
.account-profile-layout-general .profile-rating {
    margin: 0 30px;
    text-align: center;
}

.account-profile-layout-summary {
    margin-bottom: 0;
    text-align: center;
}

.account-profile-layout-chart {
    min-height: 100px;
    margin-bottom: 12px;
}
.account-profile-layout-chart:empty {
    display: none;
}

.account-profile-layout-relationship {
    margin-bottom: 12px;
    text-align: center;
}

.account-profile-layout-details-mobile {
    width: 100%;
    --card-margin-bottom: var(--space-small);
}

.account-interests-settings-list-interest {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 4px;
    padding: 4px;
    background: var(--background);
}

.account-interests-settings-list-heading {
    font-weight: bold;
    background: none;
}

.account-interests-settings-list-interest-el {
    margin: var(--space-medium);
}

.account-interests-settings-list-scope {
    width: 150px;
}

.account-interests-settings-list-weight {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    min-width: 100px;
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .layout-root .account-interests-settings-list-weight {
        width: 100%;
    }
}
.account-profile-view .account-profile-view-block {
    margin-bottom: 24px;
}
.account-profile-view .account-profile-view-contacts-inner {
    display: flex;
    word-break: break-word;
}
.account-profile-view .account-profile-view-contacts-inner div {
    flex: 1 1;
}

.account-profile-layout-content {
    width: 100%;
    min-width: 0;
}

.account-user-preview .levelbar, .account-profile-layout .levelbar {
    max-width: 128px;
    margin-bottom: 3px;
}
.account-user-preview table, .account-profile-layout table {
    margin: 0;
}
.account-user-preview .account-avatar-img, .account-profile-layout .account-avatar-img {
    width: auto;
    max-width: 128px;
    height: auto;
    min-height: 62px;
    max-height: 128px;
}
.account-user-preview .username-pop, .account-profile-layout .username-pop {
    margin: 0;
}
.account-user-preview .userprojects, .account-profile-layout .userprojects {
    font-size: 10px;
    padding-right: 2px;
    padding-left: 5px;
    text-align: left;
}

.relationinfo {
    text-align: center;
    vertical-align: top;
    border: 1px solid var(--relationinfo-border-color);
    background-color: var(--relationinfo-background-color);
}
.relationinfo img {
    max-height: 100%;
}

.relationinfo_team {
    border: 1px solid var(--relationinfo-team-border-color);
    background-color: var(--relationinfo-team-background-color);
}

.account-settings-avatar .card-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.levelbar {
    font-size: 12px;
    width: 128px;
    height: 16px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid var(--levelbar-border-color);
    border-radius: 3px;
    background: var(--levelbar-background);
}
.levelbar .xp {
    line-height: 15px;
    position: relative;
    top: -15px;
    width: 128px;
    height: 15px;
    text-align: center;
    color: var(--text-color-dark-max);
}
.levelbar .levelbar_full {
    height: 100%;
}
.levelbar a {
    color: var(--text-color-dark-max) !important;
}

.levelbar_color_warn {
    background: var(--highlight-color);
}

.levelbar_color_rating {
    cursor: default;
    background: var(--levelbar-rating-background);
    box-shadow: var(--levelbar-rating-box-shadow);
}

.userstatus-cast1.text {
    color: var(--userstatus-1-color) !important;
}

.userstatus-cast2.text {
    color: var(--userstatus-2-color) !important;
}

.userstatus-cast3.text {
    color: var(--userstatus-3-color) !important;
}

.userstatus-cast4.text {
    color: var(--userstatus-4-color) !important;
}

.userstatus-cast5.text {
    color: var(--userstatus-5-color) !important;
}

.userstatus-cast6.text {
    color: var(--userstatus-6-color) !important;
}

.userstatus-cast7.text {
    color: var(--userstatus-7-color) !important;
}

.userstatus-cast8.text {
    color: var(--userstatus-8-color) !important;
}

.userstatus-cast9.text {
    color: var(--userstatus-9-color) !important;
}

.userstatus-cast10.text {
    color: var(--userstatus-10-color) !important;
}

.relationinfo {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 1px !important;
    margin-bottom: 4px !important;
    padding: 2px !important;
    cursor: pointer;
    border-radius: 2px;
}

.achievements-progressive-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    padding: 1.5% 1.5% 0;
}

.achievement {
    --achievement-gutter: 6px;
    display: flex;
    flex-flow: row nowrap;
    width: 24%;
    margin-bottom: 1.5%;
    padding: var(--achievement-gutter);
    border: 1px solid var(--achievement-border-color);
    border-radius: 5px;
    background-color: var(--achievement-background-color);
}
.achievement.disabled img {
    opacity: 0.5;
}

.achievement-icon {
    --size: 40px;
    flex-basis: var(--size);
    cursor: pointer;
    width: var(--size);
    height: var(--size);
    margin-right: var(--achievement-gutter);
    border-radius: 3px;
    background-color: var(--achievement-icon-background-color);
}
.achievement-icon > img {
    width: 100%;
    height: 100%;
}

.achievement-content {
    display: flex;
    align-self: stretch;
    flex-flow: column nowrap;
    flex-grow: 1;
    justify-content: space-between;
}

.achievement-header {
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 4px;
    padding: 0;
}
.achievement-header.state-progress {
    color: var(--achievement-header-color-progress);
}
.achievement-header.state-completed {
    color: var(--achievement-header-color-completed);
}
.achievement-header.state-nothing {
    color: var(--achievement-header-color-nothing);
}

.achievement-progress {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    height: 16px;
    border: 1px solid var(--achievement-border-color);
    border-radius: 4px;
    background: var(--achievement-progress-bg);
}
.achievement-progress:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--achievement-progress-fill-width, 0px);
    content: "";
}
.achievement-progress:after {
    font-size: 12px;
    position: relative;
    z-index: 10;
    content: attr(data-caption);
    color: var(--text-color-light-max);
}
.achievement-progress.state-progress:before {
    background: var(--achievement-progress-bar-bg-progress);
}
.achievement-progress.state-completed:before {
    background: var(--achievement-progress-bar-bg-completed);
}

.user-fps .user-fps-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.user-fps .user-fp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.user-fps .fp-hash {
    font-weight: bold;
    flex: 5;
}
.user-fps .fp-controls {
    flex: 1;
    text-align: right;
}
.user-fps .fp-details {
    flex: 1 1 100%;
}
.user-fps .fp-details pre {
    display: block;
    overflow-y: auto;
    max-height: 260px;
}

.active-user {
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
}

.active-user-activity {
    min-width: 64px;
    text-align: right;
}
.active-user-activity.active-user-activity-top {
    font-weight: bold;
}

.active-user-username {
    font-weight: bold;
    margin-left: 16px;
}

.build-description {
    font-weight: normal;
}

.account-user-list-list {
    display: flex;
    flex-direction: column;
}

.account-user-list-element {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
}

.account-user-list-element-part {
    order: 1;
    margin-right: 8px;
    text-align: center;
}

.account-user-list-element-part-info {
    display: flex;
    flex: 3;
}

.account-user-list-element-part-info-el-avatar {
    max-width: 64px;
    margin-left: 8px;
}
.account-user-list-element-part-info-el-avatar .userpic-img {
    max-width: 64px;
    border-radius: 5px;
}

.account-user-list-element-part-info-el-name {
    overflow-x: hidden;
    margin-left: 8px;
    text-align: left;
    word-wrap: break-word;
}

.account-user-list-element-part-info-el-name-el-username a {
    font-weight: bold;
}

.account-user-list-element-part-stats {
    display: flex;
    align-items: center;
    flex: 3;
    justify-content: space-between;
}

.account-user-list-element-part-stats-el {
    flex: 1;
}

.account-user-list-element-part-controls {
    display: flex;
    align-items: center;
    flex: 4;
    justify-content: flex-end;
    white-space: nowrap;
}

.account-user-list-element-part-controls-el {
    margin-left: 4px;
}

.integration-vk-auth-head {
    font-weight: bold;
    text-align: center;
    color: var(--header-url-color);
}

.integration-vk-auth-body {
    display: flex;
}
.integration-vk-auth-body > div:first-child {
    flex: 4;
    padding-right: var(--space-standard);
    text-align: center;
}
.integration-vk-auth-body > div:last-child {
    flex: 6;
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .layout-root .account-profile-layout {
        flex-direction: column;
    }
    .account-profile-layout .account-profile-layout-general {
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
    }
    .account-profile-layout .account-profile-layout-general .account-profile-layout-head {
        margin-right: 6px;
    }
    .account-profile-layout .account-profile-layout-general .account-profile-layout-head .username-top {
        margin-left: 30px;
    }
    .account-profile-layout .account-profile-layout-general .account-profile-layout-head .username-top, .account-profile-layout .account-profile-layout-general .account-profile-layout-head .profile-rating {
        margin-right: 0;
    }
    .account-profile-layout .account-profile-layout-general .account-profile-layout-head .account-user-preview-inner {
        padding-right: 0;
    }
    .account-profile-layout .account-profile-layout-general .account-profile-layout-summary {
        margin-top: 38px;
    }
    .account-profile-view .account-profile-view-contacts-inner {
        flex-direction: column;
    }
    .account-profile-view .achievements-progressive-list .achievement {
        width: 49%;
    }
    .account-user-list-element {
        flex-wrap: wrap;
    }
    .account-user-list-element-part-stats {
        flex-basis: 100%;
        order: 0;
        margin: 8px;
    }
    .account-user-list-element-part-stats-el-level {
        text-align: left;
    }
    .account-user-list-element-part-stats-el-date {
        text-align: right;
    }
    .account-settings-avatar .card-body {
        flex-direction: column;
    }
    .integration-vk-auth-body {
        flex-direction: column;
    }
    .integration-vk-auth-body > div:first-child {
        margin-bottom: var(--space-standard);
        padding-right: 0;
    }
    
    *[rel=userinfobox] > .inner,
.userinfobox > .inner {
        right: 0;
        left: 0;
        max-width: 300px;
        margin: 0;
    }
}