/* ========================================
   VK Theme - Main Styles
   ======================================== */

/* Reset & Base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background: #edeef0 !important;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #000;
	background: #edeef0 !important;
}

a {
	color: #2a5885;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
}

.hidden {
	display: none !important;
}

/* ========================================
   CSS Variables (VKify 2016 style)
   ======================================== */
:root {
	--layout-width: 960px;
	--page-width: calc(var(--layout-width) - 165px);
	--header-height: 42px;
	--header-background-color: #507299;
	--header-background-color--hover: #486991;
	--header-background-color--active: #43648c;
	--header-text-color: #fff;
	--search-color: #31537a;
	--search-color--active: #fff;
	--search-text-color: #d9e2ec;
	--search-text-color--active: #2a5885;
	--search-text-color--placeholder: #8fadc8;
	--sidebar-text-color: #285473;
	--sidebar-color--hover: #e1e5eb;
	--sidebar-count-color: #d1d9e0;
	--sidebar-count-color--hover: #bbc7d3;
	--sidebar-count-text-color: #5b6e85;
	--menu-divider-color: #dfe2e8;
	--button-background-color: #e5ebf1;
	--button-background-color--hover: #dfe6ed;
	--button-background-color--active: #dde1e7;
	--button-background-color--light: #f2f4f7;
	--border-color: #e7e8ec;
	--muted-text-color: #939393;
	--link-color: #2a5885;
	--link-color-2: #55677d;
	--text-link: #2a5885;
	--module-background-color: #fff;
	--module-background-color--secondary: #f0f2f5;
	--module-header-background-color: #fafbfc;
	--text-color: #000;
	--accent-color-2: #5181b8;
	--body-background-color: #edeef0;
	--transparent: transparent;
}

body {
	background: #edeef0 !important;
}

/* ========================================
   Header / Navigation (VKify 2016 style)
   ======================================== */
.layout {
	width: var(--layout-width);
	margin: 0 auto;
	overflow: hidden;
}

.page_header {
	position: fixed;
	height: var(--header-height);
	width: 100%;
	background: var(--header-background-color);
	z-index: 100;
	display: flex;
	left: 0;
	justify-content: center;
	top: 0;
}

.page_header_inner {
	width: var(--layout-width, 960px);
	height: 100%;
}

.home_button {
	width: 165px;
	height: var(--header-height);
	position: static;
	display: block;
	float: left;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
}

.home_button:active {
	padding-top: 1px;
	height: calc(var(--header-height) - 1px);
}

.home_button .home_button_bg {
	background: url("/design/VK/img/head_icons.png") no-repeat;
	background-position: 0 -98px;
	height: 19px;
	width: 32px;
	margin: 11px 8px 0 0;
	display: inline-block;
}

.home_button .instance_name {
	font-size: 14px;
	color: var(--header-text-color);
	font-weight: 700;
	margin: 0 0 12px;
	border-left: 1px solid var(--header-text-color);
	padding-left: 8px;
	white-space: nowrap;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	height: 19px;
	vertical-align: middle;
	line-height: 20px;
}

.home_search {
	height: 100%;
	line-height: 16px;
	width: 230px;
	float: left;
}

#search_box select[name="section"], #search_box .search_box_button {
	display: none;
}

.page_header #search_box input[type="search"] {
	border: 0;
	box-sizing: border-box;
	height: 28px;
	border-radius: 14px;
	transition: background-color .05s, color .05s;
	background: var(--search-color) url(/design/VK/img/dev_head_magglass.png) no-repeat;
	background-position: left 8px;
	line-height: 16px;
	border-left: 8px solid transparent;
	color: var(--search-text-color);
	margin: 7px 0;
	padding: 6px 6px 6px 19px;
	font-size: 13px;
	width: 100%;
}

.page_header #search_box input[type="search"]:focus {
	background-color: var(--search-color--active);
	color: var(--search-text-color--active);
}

.home_search input[type~=search]::placeholder {
	color: var(--search-text-color--placeholder);
}

.home_search input[type=search]:focus::placeholder {
	color: transparent;
}

#searchBoxFastTips {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--module-background-color);
	border: 1px solid var(--border-color);
	border-radius: 0 0 var(--module-border-radius) var(--module-border-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	z-index: 1000;
}

.fastavatarlnk {
	display: flex;
	align-items: center;
	padding: 5px 10px;
	border-bottom: 1px solid var(--border-color);
}

#searchBoxFastTips div:not(:last-child) .fastresult {
	border-bottom: 1px solid var(--border-color);
}

#searchBoxFastTips .fastresult {
	padding: 10px;
}

#searchBoxFastTips .fastresult:hover, .fastavatarlnk:hover {
	background: var(--button-background-color--light);
}

.home_navigation, .end_navigation {
	margin-left: 12px;
	display: inline-flex;
	height: inherit;
}

#top_notify_btn_div {
	position: relative;
	display: inline-block;
	height: 100%;
	width: 46px;
}

/* Tippy.js notifications theme */
.tippy-box[data-theme~="notifications"] {
	width: 470px;
}

.tippy-box[data-theme~="notifications"] .scroll_container {
	max-height: 400px;
	overflow-y: auto;
}

.tippy-box[data-theme~="notifications"] .notifications_loading,
.tippy-box[data-theme~="notifications"] .no_notifications,
.tippy-box[data-theme~="notifications"] .notifications_error {
	padding: 20px;
	text-align: center;
	color: var(--muted-text-color);
}

.tippy-box[data-theme~="notifications"] .notifications_loading {
	width: 100%;
	height: 300px;
	text-align: center;
	position: relative;
}

.tippy-box[data-theme~="notifications"] .notifications_loading .pr {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading indicator */
.pr_bt {
	display: inline-block;
	vertical-align: top;
	width: 4px;
	height: 4px;
	background-color: #45688e;
	border-radius: 2px;
	margin-right: 3px;
	animation: pr_bt_animation 1.4s infinite ease-in-out;
}

.pr_bt:nth-child(1) {
	animation-delay: 0ms;
}

.pr_bt:nth-child(2) {
	animation-delay: 180ms;
}

.pr_bt:nth-child(3) {
	animation-delay: 360ms;
}

@keyframes pr_bt_animation {
	0%, 80%, 100% {
		transform: scale(0);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.feedback_row {
	padding: 12px 20px;
	border-top: 1px solid var(--border-color);
	margin-top: -1px;
}

.feedback_image {
	display: block;
	float: left;
	position: relative;
}

.feedback_image img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	-moz-force-broken-image-icon: 0;
	background-color: var(--module-background-color--secondary);
	position: relative;
	vertical-align: top;
}

.feedback_content {
	margin: 0 0 0 62px;
	word-wrap: break-word;
	min-height: 50px;
	font-size: 12.5px;
}

.feedback_header {
	padding: 2px 0 0 0;
	color: var(--text-color);
	line-height: 17px;
}

.feedback_footer {
	font-size: 12.5px;
	padding: 2px 0;
	color: var(--muted-text-color);
	overflow: hidden;
	line-height: 1.417;
}

.tippy-box[data-theme~="notifications"] .feedback_row {
	padding: 10px 14px;
	border-top: 1px solid var(--border-color);
	margin-top: -1px;
}

.tippy-box[data-theme~="notifications"] .feedback_row:first-child {
	border-top: none;
}

.tippy-box[data-theme~="notifications"] .feedback_image img {
	height: 40px;
	width: 40px;
}

.tippy-box[data-theme~="notifications"] .feedback_content {
	margin: 0 0 0 52px;
	min-height: 40px;
}

.top_notify_show_all {
	display: block;
	padding: 10px 0 12px;
	background-color: inherit;
	border-top: 1px solid var(--border-color);
	text-align: center;
	border-radius: 0 0 var(--module-border-radius) var(--module-border-radius);
	color: var(--link-color);
	text-decoration: none;
}

.top_notify_show_all:hover {
	background-color: var(--button-background-color--light);
	text-decoration: none;
}

.top_notify_count {
	display: none;
	padding: 1px 4px;
	border: 2px solid var(--header-background-color);
	border-radius: 12px;
	color: #fff;
	font-size: 9px;
	height: 11px;
	line-height: 11px;
	min-width: 5px;
	top: 6px;
	left: 21px;
	background-color: #ff734c;
	text-align: center;
	position: absolute;
	white-space: nowrap;
}

#top_notify_btn.has_notify .top_notify_count,
.top_notify_count:not([style*="display: none"]) {
	display: block !important;
}

.home_navigation .top_nav_btn {
	display: inline-block;
	width: 46px;
	transition: opacity 100ms linear;
	text-decoration: none;
}

.home_navigation .top_nav_btn_icon {
	display: block;
	margin: 11px auto;
	background: url(/design/VK/img/head_icons.png) no-repeat;
	background-position: -5px -23px;
	height: 20px;
	width: 20px;
}

.home_navigation .top_nav_btn:hover, .end_navigation .link:hover {
	background-color: var(--header-background-color--hover);
}

[aria-expanded="true"] .top_nav_btn, #userMenuTrigger.shown, .top_nav_btn_active {
	background-color: var(--header-background-color--active);
}

.top_nav_btn#top_notify_btn:hover .top_nav_btn_icon {
	background-position: -35px -23px;
}

[aria-expanded="true"] .top_nav_btn#top_notify_btn .top_nav_btn_icon,
.top_nav_btn#top_notify_btn.has_notify .top_nav_btn_icon {
	background-position: -65px -23px;
}

.end_navigation {
	float: right;
	line-height: var(--header-height);
	height: var(--header-height);
	position: relative;
}

.end_navigation a {
	color: var(--header-text-color);
	padding-bottom: 0;
	padding: 0 10px;
	font-weight: 700;
	height: var(--header-height);
	line-height: var(--header-height);
	display: block;
	text-decoration: none;
}

.end_navigation #userMenuTrigger {
	padding-right: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.end_navigation #userMenuName {
	margin-right: 10px;
}

.end_navigation #userMenuAvatar {
	height: 28px;
	width: 28px;
	border-radius: 14px;
	margin: 7px 0px;
}

.end_navigation #userMenuArrow {
	background: url(/design/VK/img/head_arrow.png) no-repeat;
	background-position: right 0;
	margin: 1px 8px 0 7px;
	width: 8px;
	height: 4px;
	opacity: 0.45;
}

/* Стрелка меню пользователя поворачивается при открытии через tippy.js */
#userMenuTrigger.shown #userMenuArrow,
#userMenuTrigger.top_nav_btn_active #userMenuArrow {
	transform: rotate(180deg);
}

/* User Menu теперь использует tippy.js - старые стили удалены */

/* Стили для tippy.js user-menu */
.tippy-box[data-theme~="user-menu"] {
	min-width: 150px;
	max-width: 250px;
	padding: 0 !important;
}

.tippy-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}

.tippy-menu a {
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0 13px;
	display: flex;
	gap: 6px;
	font-weight: 400;
	align-items: center;
	color: var(--link-color);
	text-decoration: none;
}

.tippy-menu a:hover {
	text-decoration: none !important;
	background-color: var(--button-background-color);
}

.tippy-menu .separator {
	height: 1px;
	background-color: var(--border-color);
	margin: 4px 13px;
}

.tippy-menu .separator:first-child {
	margin-top: 0;
}

.tippy-menu a:first-child {
	border-top-left-radius: var(--tooltip-border-radius);
	border-top-right-radius: var(--tooltip-border-radius);
}

/* ========================================
   Sidebar Menu (VKify 2016 style)
   ======================================== */
.sidebar {
	width: 149px;
	margin: calc(var(--header-height) + 15px) 16px 0 0;
	float: left;
}

.navigation {
	background: #edeef0;
	border-radius: 2px;
	position: sticky;
	top: 20px;
}

.navigation .link {
	display: flex;
	align-items: center;
	height: 28px;
	line-height: 27px;
	padding: 0;
	text-decoration: none;
	border-top: 0;
	color: var(--sidebar-text-color);
	font-size: 12.5px;
	position: relative;
}

.navigation .link:hover {
	background-color: var(--sidebar-color--hover);
	text-decoration: none;
}

.navigation .link .link_icon {
	background: url(/design/VK/img/menu_icon.png) no-repeat 7px -441px;
	height: 25px;
	width: 35px;
	opacity: .75;
	flex-shrink: 0;
}

.navigation .link.my_messages .link_icon {
	background-position: 7px -21px;
}

.navigation .link.my_page .link_icon {
	background-position: 7px 6px;
}

.navigation .link.my_feed .link_icon {
	background-position: 7px -917px;
}

.navigation .link.my_friends .link_icon {
	background-position: 7px -77px;
}

.navigation .link.my_photos .link_icon {
	background-position: 7px -133px;
}

.navigation .link.my_videos .link_icon {
	background-position: 7px -189px;
}

.navigation .link.my_audios .link_icon {
	background-position: 7px -161px;
}

.navigation .link.my_groups .link_icon {
	background-position: 7px -105px;
}

.navigation .link.my_apps .link_icon {
	background-position: 7px -217px;
}

.navigation .link.my_notes .link_icon {
	background-position: 7px -385px;
}

.navigation .link.my_docs .link_icon {
	background-position: 7px -273px;
}

.navigation .link.my_fave .link_icon {
	background-position: 7px -301px;
}

.navigation .link span {
	flex: 1;
	line-height: 27px;
}

.sidebar .navigation .link object[type="internal/link"] {
	font-size: 0;
	padding: 4px 7px;
	right: 0;
	border-radius: 2px;
	line-height: 17px;
	height: 16px;
	position: absolute;
	margin: 4px 0 4px -6px;
	background-color: var(--sidebar-count-color);
	color: var(--sidebar-count-text-color);
	text-align: center;
	min-width: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sidebar .navigation .link:hover object[type="internal/link"] {
	background-color: var(--sidebar-count-color--hover);
}

.sidebar .navigation .link object[type="internal/link"] b {
	font-size: 11px;
	color: var(--sidebar-count-text-color);
	font-weight: 500;
	line-height: 1.2;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	overflow: visible;
}

.menu_divider {
	height: 1px;
	background: var(--menu-divider-color);
	margin-top: 9px;
	margin-bottom: 9px;
	margin-left: 27px;
	margin-right: 6px;
}

.linkunderline {
	text-decoration: underline;
}

.left_menu_nav_wrap {
	line-height: 19px;
	font-size: 12px;
	padding: 7px 0px 4px;
}

.left_menu_nav_wrap a {
	padding-right: 10px;
	color: var(--muted-text-color);
	white-space: nowrap;
	text-decoration: none;
}

.left_menu_nav_wrap a:hover {
	text-decoration: underline;
}

.left_menu_nav_wrap #moreOptionsLink:after {
	display: inline-block;
	content: "";
	background: url(/design/VK/img/menu_arrow.png) no-repeat;
	background-position: right 0;
	width: 13px;
	height: 5px;
	opacity: .65;
	margin-right: -10px;
}

.left_menu_nav_wrap #moreOptionsLink:hover::after,
.left_menu_nav_wrap #moreOptionsLink[aria-expanded="true"]::after {
	opacity: 1;
}

.floating_sidebar {
	/* Floating sidebar styles - placeholder for future functionality */
	display: block;
}

#news {
	margin-top: 10px;
	padding: 10px;
	background-color: var(--module-header-background-color);
	border: 1px solid var(--menu-divider-color);
}

#news b {
	color: var(--link-color-2);
}

#news hr {
	background-color: var(--border-color);
	margin: 5px 0;
	border: 0;
	height: 1px;
}

/* ========================================
   Page Body / Content (VKify 2016 style)
   ======================================== */
.page_body {
	font-size: 13px;
	margin-top: calc(var(--header-height) + 0px);
	margin-right: 0;
	padding: 0;
	background-color: var(--transparent);
	box-shadow: none;
	float: left;
	width: var(--page-width);
	min-width: 0;
}

#page {
	width: 100%;
}

.wrap2, .wrap1, .page-wrap {
	border: 0;
	background: transparent;
}

.page_content {
	width: 100%;
	position: relative;
}

.no-sidebar .page_body,
.no-sidebar .page_content {
	width: 100%;
}

/* Скрытие sidebar для страниц входа и регистрации */
body.no-sidebar .sidebar {
	display: none;
}

body.no-sidebar .page_body {
	margin-left: 0;
	width: 100%;
}

/* ========================================
   Page Block Header (VKify 2016 style)
   ======================================== */
h2.page_block_h2 {
	margin: 0px;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	box-shadow:
		-1px 0 0 0 var(--shadow-outline-color),
		1px 0 0 0 var(--shadow-outline-color),
		0 -1px 0 0 var(--shadow-outline-color);
	border-bottom: 1px solid var(--shadow-outline-color);
}

.page_block_header_extra {
	float: right;
}

.page_block_header .button {
	margin: 11.5px 0;
}

.page_block_header_extra_left {
	float: left;
}

.page_block_header_inner {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page_block_header {
	display: block;
	background: var(--module-header-background-color);
	padding: 0 20px;
	height: 54px;
	line-height: 54px;
	border-radius: var(--module-border-radius) var(--module-border-radius) 0 0;
	font-size: 16px;
	outline: none;
	color: var(--link-color);
}

.page_block_header.unshown {
	display: none;
}

.page_block_header:hover {
	text-decoration: none;
}

.page_block_header_count {
	display: inline-block;
	font-size: 14px;
	color: var(--muted-text-color);
	margin-left: 6px;
}

h2.page_block_h2 + .scroll_container .page_block {
	border-radius: 0 0 var(--module-border-radius) var(--module-border-radius);
}

/* ========================================
   Base Input Styles (VKify 2016 style)
   ======================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
	box-sizing: border-box;
	font-family: var(--font-family);
	font-size: 13px;
	line-height: 1.4;
	padding: 6px 8px;
	border: 1px solid #d3d9de;
	border-radius: var(--button-border-radius);
	background-color: #fff;
	color: var(--text-color);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: #5181b8;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.profile_block {
	background: #fff;
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 15px;
}

/* ========================================
   Profile Page
   ======================================== */
.profile_page {
	display: flex;
	gap: 10px;
}

.profile_left {
	width: 220px;
	flex-shrink: 0;
}

.profile_right {
	flex: 1;
	min-width: 0;
}

.profile_avatar_block {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 10px;
	text-align: center;
}

.profile_avatar {
	width: 200px;
	height: 200px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.profile_btn {
	width: 100%;
	padding: 8px 15px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	margin-bottom: 8px;
}

.profile_btn:hover {
	background: #5b88bd;
}

.profile_btn_delete {
	background: #e64646;
}

.profile_btn_delete:hover {
	background: #ea5555;
}

.profile_btn_gift {
	background: #fff;
	color: #5181b8;
	border: 1px solid #d3d9de;
}

.profile_btn_gift:hover {
	background: #f7f8fa;
}

.profile_btn_edit {
	background: #fff;
	color: #5181b8;
	border: 1px solid #d3d9de;
	margin-top: 8px;
}

.profile_btn_edit:hover {
	background: #f7f8fa;
}

.profile_compendium {
	padding: 10px 0;
}

/* Compendium - Minimalist VK Style */
.compendium_item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.compendium_item[onclick]:hover {
	opacity: 0.85;
}

.compendium_level_icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #5181b8;
	border-radius: 4px;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.compendium_details {
	flex: 1;
	min-width: 0;
}

.compendium_level_text {
	font-size: 14px;
	font-weight: 500;
	color: #222;
	margin-bottom: 4px;
	line-height: 1.3;
}

.compendium_points {
	font-size: 12.5px;
	color: #656565;
	margin-bottom: 8px;
	line-height: 1.4;
}

.compendium_progress {
	width: 100%;
	height: 4px;
	background: #e7e8ec;
	border-radius: 2px;
	overflow: hidden;
}

.compendium_progress_fill {
	height: 100%;
	background: #5181b8;
	border-radius: 2px;
	transition: width 0.2s ease;
}

/* Compendium Modal - Modern Design */
.compendium_modal {
	background: #fff;
	border-radius: 2px;
	overflow: hidden;
}

.compendium_modal_header {
	padding: 20px 25px;
	border-bottom: 1px solid #e7e8ec;
	background: #fafbfc;
}

.compendium_modal_title {
	font-size: 18px;
	font-weight: 500;
	color: #222;
	margin: 0 0 4px 0;
	line-height: 1.3;
}

.compendium_modal_subtitle {
	font-size: 13px;
	color: #656565;
	line-height: 1.4;
}

.compendium_modal_content {
	padding: 20px 25px;
}

.compendium_features {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e7e8ec;
}

.compendium_feature_item {
	flex: 1;
	text-align: center;
}

.compendium_feature_icon {
	font-size: 32px;
	margin-bottom: 8px;
	line-height: 1;
}

.compendium_feature_label {
	font-size: 12.5px;
	color: #656565;
	line-height: 1.3;
}

.compendium_info_card {
	margin-bottom: 24px;
	padding: 16px;
	background: #f0f2f5;
	border-radius: 4px;
}

.compendium_info_title {
	font-size: 14px;
	font-weight: 500;
	color: #222;
	margin-bottom: 8px;
	line-height: 1.3;
}

.compendium_info_text {
	font-size: 13px;
	color: #656565;
	line-height: 1.5;
}

.compendium_levels_preview {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.compendium_level_card {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
}

.compendium_level_badge_small {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}

.compendium_level_info {
	flex: 1;
	min-width: 0;
}

.compendium_level_name {
	font-size: 14px;
	font-weight: 500;
	color: #222;
	margin-bottom: 4px;
	line-height: 1.3;
}

.compendium_level_desc {
	font-size: 12.5px;
	color: #656565;
	line-height: 1.4;
}

.compendium_purchase_section {
	text-align: center;
	padding-top: 20px;
	border-top: 1px solid #e7e8ec;
}

.compendium_balance {
	font-size: 13px;
	color: #656565;
	margin-bottom: 6px;
	line-height: 1.4;
}

.compendium_balance strong {
	color: #222;
	font-weight: 500;
}

.compendium_available {
	font-size: 12.5px;
	color: #939393;
	margin-bottom: 16px;
	line-height: 1.4;
}

.compendium_available strong {
	color: #656565;
	font-weight: 500;
}

.compendium_buy_btn {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

.profile_blacklist {
	padding: 40px 20px;
	text-align: center;
	color: #939393;
}

.blacklist_icon {
	font-size: 48px;
	margin-bottom: 10px;
}

.profile_block_header {
	font-weight: 500;
	margin-bottom: 10px;
	cursor: pointer;
}

/* People Module (Friends) - VKify 2016 style */
.module_body .search_row {
	display: flex;
	padding: 0;
	border: 0;
}

.module_body .people_cell {
	width: 70px;
	overflow: hidden;
	padding: 6px 0 5px;
	text-align: center;
	display: inline-block;
}

.module_body .people_cell_ava {
	display: block;
	height: 50px;
	width: 50px;
	margin: 0 10px;
	padding-bottom: 7px;
}

.module_body .people_cell_img {
	overflow: hidden;
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 50%;
}

.module_body .people_cell_name {
	line-height: 15px;
	font-size: 12px;
	text-align: center;
}

.module_body .people_cell_name a {
	color: #2a5885;
	text-decoration: none;
}

.module_body .people_cell_name a:hover {
	text-decoration: underline;
}

.profile_actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.profile_action_btn {
	width: 100%;
	padding: 8px 15px;
	background: #fff;
	color: #5181b8;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.profile_action_btn:hover {
	background: #f7f8fa;
}

/* Profile Cover */
.profile_cover {
	position: relative;
	height: 200px;
	background: #5181b8;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}

.cover_delete, .cover_upload {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	background: rgba(0,0,0,.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
	opacity: 0;
	transition: opacity 0.2s, background 0.2s;
}

.profile_cover:hover .cover_delete,
.profile_cover:hover .cover_upload {
	opacity: 1;
}

.cover_delete:hover, .cover_upload:hover {
	background: rgba(0,0,0,.7);
}

/* Profile Info (VKify 2016 style) */
.page_block {
	background: #fff;
	border-radius: 4px;
	margin-bottom: 10px;
	box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
}

.page_info_wrap {
	padding: 15px 20px;
	border-bottom: 1px solid #e7e8ec;
}

.page_info_wrap .page_top {
	padding: 0 0 15px;
	position: relative;
}

.page_top {
	position: relative;
}

.accountInfo {
	margin: 0;
	border: 0;
}

.page_name {
	font-size: 19px;
	line-height: 25px;
	font-weight: 400;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	margin: -1px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000;
}

.page_name .verify {
	background: url(/design/VK/img/verify.png) no-repeat 0;
	display: inline-block;
	position: relative;
	margin-left: 6px;
	padding: 6px 25px 2px 0px;
	width: 20px;
	height: 20px;
	background-size: contain;
	vertical-align: middle;
}

.page_name .verify:hover {
	opacity: 0.8;
}

.profile_online {
	color: #000;
	font-size: 1em;
	font-weight: 400;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	float: right;
	font-size: 12.5px;
	margin-top: 3px;
	line-height: 18px;
	color: #939393;
	text-align: center;
}

.profile_online.online {
	color: #4bb34b;
}

.page_status {
	padding: 3px 0 1px;
	line-height: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000;
	font-size: 13px;
}

.page_status a {
	color: #2a5885;
	text-decoration: none;
}

.page_status a:hover {
	text-decoration: underline;
}

.page_status .edit_link {
	color: #2a5885;
	cursor: pointer;
}


.page_status_edit_button {
	cursor: pointer;
	color: #2a5885;
}

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

.page_status .edit_link.page_status_edit_button {
	color: #939393;
}

.page_status_popup {
	border: 1px solid #d3d9de;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding: 10px;
	width: 510px;
	margin: 15px 0 0 -10px;
	position: absolute;
	z-index: 1000;
}

.page_status_popup .button {
	height: unset !important;
}

.page_status_popup input[type="text"] {
	width: 100%;
	padding: 5px;
	border: 1px solid #d3d9de;
	border-radius: 2px;
	font-size: 13px;
}

/* Counters Module (VKify 2016 style) */
.counts_module {
	text-align: center;
	border-top: 1px solid #e7e8ec;
	max-height: 69px;
	overflow: hidden;
	background: #fff;
}

.page_counter {
	display: inline-block;
	padding: 15px;
	text-decoration: none !important;
	cursor: pointer;
	color: inherit;
}

.page_counter:hover {
	background: #f7f8fa;
}

.page_counter .count {
	font-size: 19px;
	color: #2a5885;
	padding-bottom: 3px;
	line-height: 21px;
}

.page_counter .label {
	color: #656565;
	line-height: 15px;
	font-size: 13px;
	width: fit-content !important;
	text-transform: lowercase;
}

.page_counter:hover .label {
	color: #2a5885;
}

/* ========================================
   Wall / Posts
   ======================================== */
.wall_add {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 10px;
}

.wall_add_form {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.wall_add_avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.wall_add_form textarea {
	flex: 1;
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	resize: vertical;
	font-family: inherit;
	font-size: 13px;
}

.wall_add_actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wall_action {
	font-size: 18px;
	cursor: pointer;
	padding: 5px;
}

.wall_send_btn {
	margin-left: auto;
	padding: 8px 20px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.wall_send_btn:hover {
	background: #5b88bd;
}

.form-attach {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
	position: relative;
}

.wall-close-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	color: #939393;
}

/* Post */
.post {
	background: #fff;
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 15px;
}

.post_content {
	position: relative;
}

.post_header {
	display: flex;
	margin-bottom: 10px;
	position: relative;
}

.post_action {
	position: absolute;
	top: 0;
	right: 0;
	width: 24px;
	height: 24px;
	cursor: pointer;
	color: #939393;
	display: flex;
	align-items: center;
	justify-content: center;
}

.post_edit {
	right: 30px;
}

.post_delete {
	right: 0;
}

.post_author_avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 10px;
	flex-shrink: 0;
}

.post_header_info {
	flex: 1;
	min-width: 0;
}

.post_author_name {
	font-weight: 500;
	margin-bottom: 3px;
}

.post_author_name a {
	color: #000;
}

.post_action_text {
	color: #939393;
	font-weight: 400;
}

.post_date {
	color: #939393;
	font-size: 12px;
}

.post_body {
	margin-bottom: 10px;
}

.post_text {
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.post_show_more {
	color: #2a5885;
	cursor: pointer;
	margin-top: 5px;
}

.post_edit_form {
	margin: 10px 0;
}

.post_edit_textarea {
	width: 100%;
	min-height: 80px;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	resize: vertical;
	font-family: inherit;
	font-size: 13px;
	margin-bottom: 10px;
}

.post_edit_btn {
	padding: 8px 20px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.post_link_box {
	padding: 10px;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
	margin-top: 10px;
}

.post_link_title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px;
	font-weight: 500;
}

.post_link_favicon {
	width: 16px;
	height: 16px;
	border-radius: 2px;
}

.post_link_url {
	color: #939393;
	font-size: 12px;
}

.post_link_url a {
	color: #2a5885;
}

.post_footer {
	border-top: 1px solid #e7e8ec;
	padding-top: 10px;
}

.post_likes {
	margin-bottom: 10px;
}

.post_liked_users {
	color: #939393;
	font-size: 12px;
	cursor: pointer;
}

.post_actions {
	display: flex;
	gap: 15px;
}

.post_action_btn {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	background: none;
	border: 0;
	color: #939393;
	cursor: pointer;
	font-size: 13px;
}

.post_action_btn:hover {
	background: #f7f8fa;
	border-radius: 4px;
}

.post_action_icon {
	font-size: 16px;
}

.post_views {
	margin-left: auto;
}

/* Comments */
.post_comment_add {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e7e8ec;
}

.comment_avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.comment_input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	font-family: inherit;
	font-size: 13px;
}

.comment_item {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e7e8ec;
}

.comment_content {
	flex: 1;
	min-width: 0;
}

.comment_author {
	font-weight: 500;
	margin-bottom: 3px;
}

.comment_author a {
	color: #000;
}

.comment_text {
	line-height: 1.6;
	margin-bottom: 5px;
}

.comment_footer {
	font-size: 12px;
	color: #939393;
}

.comment_date {
	margin-right: 10px;
}

.comment_delete {
	color: #2a5885;
	cursor: pointer;
}

/* ========================================
   News Feed
   ======================================== */
.news_page {
	display: flex;
	gap: 10px;
}

.news_content {
	flex: 1;
	min-width: 0;
}

.news_sidebar {
	width: 220px;
	flex-shrink: 0;
}

.sidebar_block {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 10px;
}

.sidebar_header {
	font-weight: 500;
	margin-bottom: 10px;
}

.sidebar_menu {
	list-style: none;
}

.sidebar_link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	color: #000;
}

.sidebar_link:hover {
	text-decoration: none;
}

.sidebar_link_active {
	color: #5181b8;
	font-weight: 500;
}

.sidebar_icon {
	font-size: 16px;
}

/* ========================================
   Friends
   ======================================== */
.friends_page {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.friends_tabs {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e7e8ec;
}

.friends_tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	color: #939393;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.friends_tab:hover {
	color: #000;
	text-decoration: none;
}

.friends_tab_active {
	color: #5181b8;
	border-bottom-color: #5181b8;
}

.tab_icon {
	font-size: 16px;
}

.friends_list {
	display: grid;
	gap: 10px;
}

.friend_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
}

.friend_avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
}

.friend_info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.friend_details {
	flex: 1;
	min-width: 0;
}

.friend_name {
	font-weight: 500;
	color: #000;
	display: block;
	margin-bottom: 3px;
}

.friend_location {
	color: #939393;
	font-size: 12px;
}

.online_badge {
	width: 8px;
	height: 8px;
	background: #4bb34b;
	border-radius: 50%;
	display: inline-block;
}

.friend_actions {
	display: flex;
	gap: 8px;
}

.friend_btn {
	padding: 6px 12px;
	border: 1px solid #d3d9de;
	background: #fff;
	color: #5181b8;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.friend_btn:hover {
	background: #f7f8fa;
}

.friend_btn_message {
	background: #5181b8;
	color: #fff;
	border-color: #5181b8;
}

.friend_btn_message:hover {
	background: #5b88bd;
}

.friend_btn_delete {
	color: #e64646;
	border-color: #e64646;
}

.friend_btn_delete:hover {
	background: #ffebee;
}

/* ========================================
   Messages
   ======================================== */
.messages_page {
	display: flex;
	height: 600px;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.messages_dialogs {
	width: 280px;
	border-right: 1px solid #e7e8ec;
	display: flex;
	flex-direction: column;
}

.dialogs_header {
	padding: 15px;
	border-bottom: 1px solid #e7e8ec;
	font-weight: 500;
}

.dialogs_list {
	flex: 1;
	overflow-y: auto;
	list-style: none;
}

.dialog_item {
	display: flex;
	gap: 10px;
	padding: 10px 15px;
	cursor: pointer;
	border-bottom: 1px solid #e7e8ec;
}

.dialog_item:hover {
	background: #f7f8fa;
}

.dialog_avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dialog_info {
	flex: 1;
	min-width: 0;
}

.dialog_name {
	font-weight: 500;
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dialog_message {
	color: #939393;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.messages_content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.messages_empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #939393;
	text-align: center;
}

.empty_icon {
	font-size: 64px;
	margin-bottom: 15px;
}

.empty_text {
	max-width: 300px;
}

.messages_header {
	padding: 10px 15px;
	border-bottom: 1px solid #e7e8ec;
}

.messages_body {
	flex: 1;
	overflow-y: auto;
	padding: 15px;
}

.messages_list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.message_bubble {
	max-width: 60%;
	padding: 10px 15px;
	background: #f0f2f5;
	border-radius: 12px;
	line-height: 1.6;
}

.messages_list li.right {
	align-self: flex-end;
}

.messages_list li.right .message_bubble {
	background: #e1f0ff;
}

.message_info {
	display: flex;
	gap: 10px;
	margin-top: 3px;
	font-size: 11px;
	color: #939393;
}

.message_delete {
	cursor: pointer;
	color: #2a5885;
}

.messages_footer {
	padding: 10px 15px;
	border-top: 1px solid #e7e8ec;
}

.message_input_wrap {
	display: flex;
	gap: 8px;
	align-items: center;
}

.message_btn {
	padding: 5px 8px;
	background: none;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	color: #939393;
}

.message_btn:hover {
	color: #5181b8;
}

.message_input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	resize: none;
	font-family: inherit;
	font-size: 13px;
	min-height: 36px;
}

.message_send_btn {
	padding: 8px 15px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.message_send_btn:hover {
	background: #5b88bd;
}

/* Voice Message */
.voice_message {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: #f0f2f5;
	border-radius: 12px;
	cursor: pointer;
}

.voice_button {
	width: 40px;
	height: 40px;
	background: #5181b8;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.voice_title {
	flex: 1;
	font-size: 12px;
}

/* ========================================
   Videos & Images
   ======================================== */
.videos_page, .images_page {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.videos_header, .images_header {
	margin-bottom: 15px;
}

.videos_title {
	font-size: 18px;
	font-weight: 500;
}

.videos_list, .images_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 15px;
	margin-top: 15px;
}

.video_item, .image_item {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.video_thumb, .image_thumb {
	width: 100%;
	height: 150px;
	cursor: pointer;
	position: relative;
}

.video_play_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background: rgba(0,0,0,0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.video_play_icon::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 14px solid #fff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 3px;
}

.video_duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 500;
}

.video_info {
	margin-top: 8px;
}

.video_title {
	flex: 1;
	min-width: 0;
	padding-top: 10px;
}

.audio__player_title {
	font-size: 16px;
	font-weight: 500;
	color: #2a5885;
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.audio__player_performer {
	font-size: 14px;
	color: #656565;
	margin-bottom: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.audio__player_progress {
	margin-bottom: 8px;
	cursor: pointer;
	padding: 10px 0;
}

.audio__progress_line {
	height: 6px;
	background: #dae2ea;
	border-radius: 3px;
	position: relative;
	overflow: hidden;
}

.audio__progress_current {
	height: 100%;
	background: #5181b8;
	border-radius: 3px;
	position: relative;
	transition: width 0.1s linear;
}

.audio__progress_current::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 12px;
	height: 12px;
	background: #5181b8;
	border-radius: 50%;
	transform: translate(50%, -50%);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.audio__player_duration {
	font-size: 12px;
	color: #939393;
	margin-bottom: 15px;
}

.audio__duration_sep {
	margin: 0 3px;
}

.audio__player_controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.audio__player_btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #d3d9de;
	cursor: pointer;
	position: relative;
	transition: all 0.15s;
}

.audio__player_btn:hover {
	background: #f0f2f5;
	border-color: #c4c4c4;
}

.audio__player_btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-repeat: no-repeat;
	background-size: contain;
}

.audio__player_prev::before {
	width: 16px;
	height: 16px;
	background-image: url(/design/VK/img/prew.png);
}

.audio__player_play::before {
	width: 16px;
	height: 16px;
	background-image: url(/design/VK/img/play-small-blue.png);
	margin-left: 2px;
}

.audio__player_pause::before {
	width: 16px;
	height: 16px;
	background-image: url(/design/VK/img/audio_playpause.png);
}

.audio__player_next::before {
	width: 16px;
	height: 16px;
	background-image: url(/design/VK/img/next.png);
}

/* Audio List (Tracks) */
.audio__list_wrap {
	padding: 0;
}

.audio__list {
	padding: 0;
}

.audio__row {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	border-bottom: 1px solid #e7e8ec;
	transition: background 0.15s;
	position: relative;
	cursor: pointer;
}

.audio__row:hover {
	background: #f5f7fa;
}

.audio__row:hover .audio__btns,
.audio__row:hover .audio__actions {
	opacity: 1;
}

.audio__row_content {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}

.audio__row_info {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.audio__title_wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	overflow: hidden;
}

.audio__title {
	font-size: 13px;
	color: #2a5885;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1;
}

.audio__title_sep {
	color: #939393;
	flex-shrink: 0;
	font-size: 13px;
}

.audio__performer {
	font-size: 13px;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1;
}

.audio__duration {
	font-size: 12px;
	color: #939393;
	flex-shrink: 0;
}

/* Audio Buttons (Play/Pause) */
.audio__btns {
	width: 32px;
	height: 32px;
	margin-right: 8px;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.15s;
	position: relative;
}

.audio__btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #5181b8;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	transition: background 0.15s;
}

.audio__btn:hover {
	background: #5b88bd;
}

.audio__btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-repeat: no-repeat;
	background-size: contain;
}

.audio__play::before {
	width: 12px;
	height: 12px;
	background-image: url(/design/VK/img/play-small-white.png);
	margin-left: 1px;
}

.audio__pause::before {
	width: 12px;
	height: 12px;
	background-image: url(/design/VK/img/audio_playpause.png);
	filter: brightness(0) invert(1);
}

/* Audio Actions (Add/More) */
.audio__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	opacity: 0;
	transition: opacity 0.15s;
}

.audio__action {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	transition: background 0.15s;
}

.audio__action:hover {
	background: rgba(0,0,0,.05);
}

.audio__action::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.6;
}

.audio__add::before {
	content: '+';
	font-size: 18px;
	line-height: 16px;
	color: #939393;
	background: none;
}

.audio__more::before {
	content: '...';
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 16px;
	color: #939393;
	background: none;
}

/* Audio Friends */
.audio__friend {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	color: #2a5885;
	text-decoration: none;
	transition: opacity 0.15s;
	cursor: pointer;
}

.audio__friend:hover {
	opacity: 0.8;
	text-decoration: none;
}

.audio__friend_avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.audio__friend_info {
	flex: 1;
	min-width: 0;
}

.audio__friend_name {
	font-size: 13px;
	font-weight: 400;
	color: #2a5885;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio__friend_count {
	font-size: 12px;
	color: #939393;
}

/* Hide "Add" button for own tracks */
.audio__row[data-owner="1"] .audio__add {
	display: none;
}

/* Hide upload button on others' pages */
.audio__sidebar_block[data-owner="0"] .audio__upload_btn {
	display: none;
}

/* Context Menu */
.audio__context_menu {
	position: fixed;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,.3);
	z-index: 1000;
	min-width: 160px;
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.2s, transform 0.2s;
}

.audio__context_menu_show {
	opacity: 1;
	transform: scale(1);
}

.audio__context_item {
	padding: 10px 15px;
	font-size: 13px;
	color: #000;
	cursor: pointer;
	transition: background 0.15s;
}

.audio__context_item:hover {
	background: #f5f7fa;
}

.audio__context_item:first-child {
	border-radius: 4px 4px 0 0;
}

.audio__context_item:last-child {
	border-radius: 0 0 4px 4px;
}

/* Empty State */
.audio__empty {
	padding: 40px 20px;
	text-align: center;
	color: #939393;
	font-size: 14px;
}

/* ========================================
   Audio Popup (VKify 2016 style)
   ======================================== */
#audio_popup_overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
}

#audio_popup_overlay.show {
	display: flex;
}

#audio_popup {
	background: #fff;
	border-radius: 4px;
	width: 90%;
	max-width: 800px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0,0,0,.3);
	animation: popupAppear 0.2s ease;
}

@keyframes popupAppear {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
}
}

#audio_popup_header {
	padding: 15px 20px;
	border-bottom: 1px solid #e7e8ec;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

#audio_popup_title {
	font-size: 15px;
	font-weight: 500;
	color: #2a5885;
}

#audio_popup_close {
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	cursor: pointer;
	color: #939393;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.15s;
}

#audio_popup_close:hover {
	background: #f0f0f0;
}

#audio_popup_body {
	overflow-y: auto;
	flex: 1;
	padding: 15px;
}

/* Audio Popup Content */
.audio_popup_content_wrap {
	display: flex;
	gap: 15px;
	padding: 15px;
	flex: 1;
	overflow: hidden;
}

.audio_popup_main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
}

.audio_popup_list {
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e7e8ec;
}

.audio_popup_list .audio__list {
	padding: 0;
}

.audio_popup_list .audio__row {
	border-bottom: 1px solid #e7e8ec;
}

.audio_popup_list .audio__row:last-child {
	border-bottom: none;
}

.audio_popup_sidebar {
	width: 220px;
	flex-shrink: 0;
}

.audio_popup_actions {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid #e7e8ec;
}

.audio_popup_actions .button {
	margin-bottom: 8px;
}

.audio_popup_actions .button:last-child {
	margin-bottom: 0;
}

.audio_popup_friends_block {
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e7e8ec;
}

.audio_popup_friends_title {
	padding: 12px 15px;
	font-size: 13px;
	font-weight: 500;
	color: #656565;
	border-bottom: 1px solid #e7e8ec;
}

.audio_popup_friends_block .audio__friends {
	padding: 8px 15px;
	max-height: 300px;
	overflow-y: auto;
}

.audio_popup_footer {
	padding: 15px 20px;
	border-top: 1px solid #e7e8ec;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	background: #fafbfc;
}

.playingNow {
	flex: 1;
	font-size: 13px;
	color: #656565;
}

#ajclosebtn {
	padding: 7px 16px;
}

/* ========================================
   Videos & Images
   ======================================== */
.videos_page, .images_page {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.videos_header, .images_header {
	margin-bottom: 15px;
}

.videos_title {
	font-size: 18px;
	font-weight: 500;
}

.videos_list, .images_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.video_item, .image_item {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.video_thumb, .image_thumb {
	width: 100%;
	height: 150px;
	cursor: pointer;
	position: relative;
}

.video_play_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
}

.video_duration {
	position: absolute;
	bottom: 5px;
	right: 5px;
	background: rgba(0,0,0,.7);
	color: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 11px;
}

.video_info {
	padding: 10px;
}

.video_title {
	font-weight: 500;
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.video_views {
	color: #939393;
	font-size: 12px;
}

.video_delete, .image_delete {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
	background: rgba(0,0,0,.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
}

.video_delete:hover, .image_delete:hover {
	background: rgba(0,0,0,.7);
}

.images_upload {
	text-align: center;
	padding: 30px;
	border: 2px dashed #d3d9de;
	border-radius: 4px;
	margin-bottom: 15px;
	cursor: pointer;
}

.images_upload:hover {
	border-color: #5181b8;
}

.upload_icon {
	font-size: 48px;
	margin-bottom: 10px;
}

.upload_loading {
	color: #939393;
}

.images_albums {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 15px;
}

.album_item {
	display: block;
	text-align: center;
	color: #000;
}

.album_item:hover {
	text-decoration: none;
}

.album_thumb {
	width: 100%;
	height: 150px;
	border-radius: 4px;
	margin-bottom: 8px;
}

.album_name {
	font-weight: 500;
	font-size: 13px;
}

/* ========================================
   Groups
   ======================================== */
.groups_page {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.groups_tabs {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e7e8ec;
}

.groups_tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	color: #939393;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.groups_tab:hover {
	color: #000;
}

.groups_tab_active {
	color: #5181b8;
	border-bottom-color: #5181b8;
}

.groups_list {
	display: grid;
	gap: 10px;
}

.group_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
}

.group_avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
}

.group_link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	color: #000;
}

.group_link:hover {
	text-decoration: none;
}

.group_info {
	flex: 1;
	min-width: 0;
}

.group_name {
	font-weight: 500;
	margin-bottom: 3px;
}

.group_members {
	color: #939393;
	font-size: 12px;
}

.group_btn {
	padding: 6px 15px;
	border: 1px solid #d3d9de;
	background: #fff;
	color: #5181b8;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.group_btn:hover {
	background: #f7f8fa;
}

.group_btn_join {
	background: #5181b8;
	color: #fff;
	border-color: #5181b8;
}

.group_btn_join:hover {
	background: #5b88bd;
}

/* ========================================
   Settings
   ======================================== */
.setting_page {
	display: flex;
	gap: 10px;
}

.setting_sidebar {
	width: 200px;
	flex-shrink: 0;
}

.setting_menu {
	background: #fff;
	border-radius: 4px;
}

.setting_link {
	display: block;
	padding: 10px 15px;
	color: #000;
	border-bottom: 1px solid #e7e8ec;
}

.setting_link:hover {
	background: #f7f8fa;
	text-decoration: none;
}

.setting_link_active {
	background: #f7f8fa;
	color: #5181b8;
	font-weight: 500;
}

.setting_content {
	flex: 1;
	min-width: 0;
}

.setting_block {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.setting_header {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 15px;
}

.setting_item {
	margin-bottom: 15px;
}

.setting_label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.setting_input, .setting_textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	font-family: inherit;
	font-size: 13px;
}

.setting_textarea {
	resize: vertical;
	min-height: 80px;
}

.setting_actions {
	margin-top: 20px;
}

.setting_btn {
	padding: 8px 20px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.setting_btn:hover {
	background: #5b88bd;
}


/* ========================================
   Search
   ======================================== */
.search_page {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.search_header {
	margin-bottom: 15px;
}

.search_tabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid #e7e8ec;
}

.search_tab {
	padding: 10px 0;
	color: #939393;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.search_tab:hover {
	color: #000;
}

.search_tab_active {
	color: #5181b8;
	border-bottom-color: #5181b8;
}

.search_filters {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.search_input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	font-size: 13px;
}

.search_btn {
	padding: 8px 20px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.search_btn:hover {
	background: #5b88bd;
}

.search_user_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
	margin-bottom: 10px;
}

.search_user_link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	color: #000;
}

.search_user_link:hover {
	text-decoration: none;
}

.search_user_avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
}

.search_user_info {
	flex: 1;
	min-width: 0;
}

.search_user_name {
	font-weight: 500;
	margin-bottom: 3px;
}

.search_user_details {
	color: #939393;
	font-size: 12px;
	margin-bottom: 3px;
}

.search_user_online {
	color: #4bb34b;
	font-size: 12px;
}

.search_user_actions {
	display: flex;
	gap: 8px;
}

.search_user_btn {
	padding: 6px 12px;
	border: 1px solid #d3d9de;
	background: #fff;
	color: #5181b8;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.search_user_btn:hover {
	background: #f7f8fa;
}

.search_user_btn_add {
	background: #5181b8;
	color: #fff;
	border-color: #5181b8;
}

.search_user_btn_add:hover {
	background: #5b88bd;
}

/* ========================================
   Signup/Login
   ======================================== */
.signup_page {
	display: flex;
	min-height: 100vh;
	background: #edeef0;
}

.signup_left, .signup_right {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.signup_form {
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 4px;
	padding: 30px;
}

.signup_title {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 20px;
	text-align: center;
}

.signup_form h4 {
	font-size: 14px;
	margin-bottom: 8px;
	margin-top: 15px;
}

.signup_input {
	width: 100%;
	padding: 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	font-size: 13px;
	margin-bottom: 10px;
}

.signup_btn {
	width: 100%;
	padding: 10px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
}

.signup_btn:hover {
	background: #5b88bd;
}

.signup_form h5 {
	text-align: center;
	color: #939393;
	font-size: 12px;
	margin-top: 20px;
}

/* ========================================
   Anime
   ======================================== */
.anime_page {
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.anime_banner {
	display: flex;
	gap: 15px;
	padding: 30px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 4px;
	color: #fff;
	margin-bottom: 20px;
}

.anime_banner_icon {
	font-size: 64px;
}

.anime_banner_title {
	font-size: 32px;
	margin-bottom: 10px;
}

.anime_section {
	margin-bottom: 20px;
}

.anime_section_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 500;
}

.anime_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.anime_card {
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
	transition: transform .2s;
}

.anime_card:hover {
	transform: translateY(-5px);
}

.anime_card_thumb {
	width: 100%;
	height: 240px;
	position: relative;
}

.anime_card_overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
	padding: 10px;
	color: #fff;
	font-size: 11px;
}

.anime_card_info {
	padding: 10px;
}

.anime_card_title {
	font-weight: 500;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.anime_card_description {
	color: #939393;
	font-size: 12px;
	line-height: 1.4;
	max-height: 2.8em;
	overflow: hidden;
}

/* ========================================
   Talk (Беседы)
   ======================================== */
.talk_page {
	display: flex;
	height: 600px;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.talk_sidebar {
	width: 280px;
	border-right: 1px solid #e7e8ec;
	display: flex;
	flex-direction: column;
}

.talk_tabs {
	display: flex;
	border-bottom: 1px solid #e7e8ec;
}

.talk_tab {
	flex: 1;
	padding: 12px;
	text-align: center;
	color: #939393;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.talk_tab:hover {
	color: #000;
	text-decoration: none;
}

.talk_tab_active {
	color: #5181b8;
	border-bottom-color: #5181b8;
}

.talk_search {
	padding: 10px;
	border-bottom: 1px solid #e7e8ec;
}

.talk_search_input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	font-size: 13px;
}

.talk_list {
	flex: 1;
	overflow-y: auto;
}

.talk_item {
	display: flex;
	gap: 10px;
	padding: 10px 15px;
	cursor: pointer;
	border-bottom: 1px solid #e7e8ec;
	position: relative;
}

.talk_item:hover {
	background: #f7f8fa;
}

.talk_item_avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	flex-shrink: 0;
}

.talk_item_info {
	flex: 1;
	min-width: 0;
}

.talk_item_title {
	font-weight: 500;
	margin-bottom: 3px;
}

.talk_item_message {
	color: #939393;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.talk_item_badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #5181b8;
	color: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

.talk_content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.talk_empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #939393;
}

.talk_empty_icon {
	font-size: 64px;
	margin-bottom: 15px;
}

.talk_footer {
	padding: 10px 15px;
	border-top: 1px solid #e7e8ec;
}

.talk_actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.talk_action_btn {
	padding: 8px 12px;
	background: none;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.talk_action_btn:hover {
	background: #f7f8fa;
}

.talk_input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #d3d9de;
	border-radius: 4px;
	font-size: 13px;
}

.talk_send_btn {
	padding: 8px 15px;
	background: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.talk_send_btn:hover {
	background: #5b88bd;
}

/* ========================================
   Notifications
   ======================================== */
.notify_page {
	display: flex;
	gap: 10px;
}

.notify_content {
	flex: 1;
	background: #fff;
	border-radius: 4px;
	padding: 15px;
}

.notify_sidebar {
	width: 200px;
	flex-shrink: 0;
}

.notify_header {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 15px;
}

.notify_list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.notify_item {
	display: flex;
	gap: 10px;
	padding: 10px;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
	position: relative;
}

.notify_item:hover {
	background: #f7f8fa;
}

.notify_item_avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.notify_item_content {
	flex: 1;
	min-width: 0;
}

.notify_item_text {
	line-height: 1.4;
	margin-bottom: 3px;
}

.notify_item_date {
	color: #939393;
	font-size: 11px;
}

.notify_item_delete {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #939393;
	font-size: 18px;
}

.notify_menu {
	background: #fff;
	border-radius: 4px;
	padding: 10px;
}

.notify_menu_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	color: #000;
	border-radius: 4px;
	margin-bottom: 5px;
}

.notify_menu_item:hover {
	background: #f7f8fa;
	text-decoration: none;
}

.notify_menu_item_active {
	background: #f7f8fa;
	color: #5181b8;
}

.notify_menu_icon {
	font-size: 16px;
}

.notify_dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	border-radius: 4px;
	min-width: 300px;
	max-width: 400px;
	z-index: 100;
}

.notify_dropdown_item {
	border-bottom: 1px solid #e7e8ec;
}

.notify_dropdown_item:last-child {
	border-bottom: none;
}

.notify_dropdown_item a {
	display: flex;
	gap: 10px;
	padding: 10px 15px;
	color: #000;
}

.notify_dropdown_item:hover {
	background: #f7f8fa;
}

.notify_dropdown_avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.notify_dropdown_text {
	flex: 1;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 3px;
}

.notify_dropdown_date {
	font-size: 11px;
	color: #939393;
}

/* ========================================
   Error Pages
   ======================================== */
.error_page, .confirm_page, .offline_page, .ban_page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: #edeef0;
}

.error_content, .confirm_content, .offline_content, .ban_content {
	text-align: center;
	background: #fff;
	border-radius: 4px;
	padding: 60px 40px;
	max-width: 500px;
}

.error_icon, .confirm_icon, .offline_icon, .ban_icon {
	font-size: 80px;
	margin-bottom: 20px;
}

.error_title, .confirm_title, .offline_title, .ban_title {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 15px;
}

.error_message, .confirm_message, .offline_message, .ban_message {
	color: #939393;
	line-height: 1.6;
	margin-bottom: 20px;
}

.error_btn, .confirm_btn {
	display: inline-block;
	padding: 10px 30px;
	background: #5181b8;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
}

.error_btn:hover, .confirm_btn:hover {
	background: #5b88bd;
	text-decoration: none;
}

/* ========================================
   Utilities
   ======================================== */
.text-center {
	text-align: center;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-15 {
	margin-bottom: 15px;
}

.mt-10 {
	margin-top: 10px;
}

.clear {
	clear: both;
}

.off_display {
	display: none;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
	#page_wrap {
		flex-direction: column;
	}
	
	.side_bar {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	
	.profile_page, .news_page {
		flex-direction: column;
	}
	
	.profile_left, .profile_right,
	.news_content, .news_sidebar {
		width: 100%;
	}
	
	.messages_page, .talk_page {
		flex-direction: column;
		height: auto;
	}
	
	.messages_dialogs, .talk_sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #e7e8ec;
	}
}

/* ========================================
   Additional Utility Classes
   ======================================== */

/* Кнопка "наверх" */
.ev_top_button {
	position: fixed;
	top: 60px;
	left: 0px;
	bottom: 0px;
	width: calc((100% - 750px) / 2);
	cursor: pointer;
	display: none;
}

.ev_top_button .top_button_block {
	width: 115px;
	position: absolute;
	top: 0px;
	left: 0;
	height: 100%;
}

.ev_top_button:hover .top_button_block {
	background: rgba(51, 51, 51, 0.06);
}

.ev_top_button.nobg .top_button_block {
	background: transparent !important;
}

.ev_top_button .str_bl {
	font-weight: bold;
	font-size: 15px;
	color: #428bca;
	position: absolute;
	top: 15px;
	left: 0px;
	text-align: center;
	width: 115px;
	opacity: 0.6;
	transition: all 200ms ease;
}

.ev_top_button .str_bl .glyphicon-chevron-up,
.ev_top_button .str_bl .glyphicon-chevron-down {
	font-size: 30px;
}

.ev_top_button:hover .str_bl {
	opacity: 1;
}

.ev_top_button .str {
	display: block;
	margin-top: 5px;
}

/* Utility classes */
.no_select {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.no_display {
	display: none;
}

/* Counter badges */
.counter-message {
	position: absolute;
	margin-top: -25px;
	margin-left: 15px;
}

.counter-events {
	position: absolute;
	margin-top: -24px;
	margin-left: 12px;
}

/* Icons */
.icon_msg {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url('/img/icons/message.png') no-repeat center;
	background-size: contain;
}

/* Sidebar inner */
.side_bar_inner {
	padding: 10px 0;
}

/* Fixed layout header */
.fixed_layout_header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* Profile page additional styles - cover_delete styles moved to main .cover_delete rule above */

.profile_detail {
	color: #656565;
	font-size: 13px;
	margin-bottom: 5px;
}

.profile_online {
	color: #656565;
	font-size: 13px;
}

.profile_online.online {
	color: #4bb34b;
}

.profile_wall {
	margin-top: 20px;
}

.profile_load_more {
	display: block;
	text-align: center;
	padding: 15px;
	background: #fff;
	border: 1px solid #e7e8ec;
	border-radius: 4px;
	margin-top: 10px;
	color: #2a5885;
	text-decoration: none;
	transition: background 0.2s;
}

.profile_load_more:hover {
	background: #f7f8fa;
	text-decoration: none;
}

/* ========================================
   VKify 2016 Theme - Additional Styles
   ======================================== */

/* Utility classes */
.fl_l {
	float: left;
}

.fl_r {
	float: right;
}

.clear_fix {
	display: block;
}

.clear_fix::after {
	content: '.';
	display: block;
	height: 0;
	font-size: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}

.clear {
	float: none;
	clear: both;
}

/* Page Block */
.page_block.photo_block {
	padding: 15px;
	clip-path: unset;
}

/* Avatar Block */
.avatar_block {
	margin-bottom: 10px;
}

.avatar_block_inner {
	position: relative;
}

.avatar_controls {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;
	gap: 5px;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.2s;
}

.avatar_block_inner:hover .avatar_controls {
	opacity: 1;
}

.avatarDelete {
	width: 24px;
	height: 24px;
	background: rgba(0,0,0,.5);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
}

.avatarDelete:hover {
	background: rgba(0,0,0,.7);
}

.avatar_variants {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.6);
	border-radius: 0 0 4px 4px;
	padding: 10px 0;
	text-align: center;
	width: 100%;
	margin-bottom: -100%;
	transition: margin-bottom 0.2s ease;
}

.avatar_block:hover .avatar_variants {
	display: block;
	margin-bottom: 0;
}

.avatar_variants a {
	display: block;
	padding: 8px 15px;
	color: #fff;
	text-decoration: none;
}

.avatar_variants a:hover {
	background: rgba(255,255,255,.1);
	text-decoration: none;
}

#bigAvatar {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Buttons (VKify 2016 style) */
.button {
	text-shadow: none;
	margin: 0;
	display: inline-block;
	cursor: pointer;
	white-space: nowrap;
	outline: 0;
	vertical-align: top;
	text-decoration: none;
	box-sizing: border-box;
	user-select: none;
	border-radius: 3px;
	line-height: 15px;
	text-align: center;
	padding: 7px 16px 8px;
	font-size: 12.5px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	border: 0;
}

.button.button_blue {
	background-color: #5181b8;
	color: #fff;
}

.button.button_blue:hover {
	background-color: #5b88bd;
	color: #fff;
	text-decoration: none;
}

.button.button_gray {
	background-color: #e5ebf1;
	color: #2a5885;
}

.button.button_green {
	background-color: #4bb34b;
	color: #fff;
}

.button.button_green:hover {
	background-color: #57c957;
	color: #fff;
	text-decoration: none;
}

.button.button_light {
	background-color: #fff;
	color: #2a5885;
	border: 1px solid #d3d9de;
}

.button.button_light:hover {
	background-color: #f7f8fa;
	color: #2a5885;
	text-decoration: none;
}

.button.button_big_text {
	font-size: 13px;
	padding: 10px 20px;
	min-width: 100px;
}

.nobold {
	font-weight: normal;
	color: #656565;
}

.button.button_gray:hover {
	background-color: #dae2ea;
	color: #2a5885;
	text-decoration: none;
}

.button:hover {
	text-decoration: none;
}

.button:active,
.button:focus,
.button:visited,
a.button:active,
a.button:focus,
a.button:visited {
	text-decoration: none;
}

.button.button_wide {
	padding-left: 3px;
	padding-right: 3px;
	display: block;
	width: 100%;
}

.register-block .register_btn {
	text-align: center;
	text-decoration: none;
}

/* Profile Actions */
.profile_actions {
	margin-top: 10px;
}

.profile_actions .button + .button {
	margin-top: 10px;
}

.profile_msg_split {
	display: flex;
	gap: 0;
}

.profile_msg_split .cut_left {
	flex: 1;
}

.profile_msg_split .cut_left .button {
	border-radius: 3px 0 0 3px;
	border-right: 1px solid rgba(255,255,255,.2);
}

.profile_msg_split .cut_right {
	width: 38px;
}

.profile_msg_split .cut_right .button {
	border-radius: 0 3px 3px 0;
	width: 38px;
	padding-left: 11px;
}

.profile_gift_icon {
	background: url(/design/VK/img/gift.png) no-repeat;
	background-position: left 2px;
	padding-right: 21px;
	display: inline-block;
	width: 16px;
	height: 16px;
}

.profile_actions_split {
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.profile_actions_split .profile_link_form {
	flex: 1;
	margin-right: 5px;
}

.profile_actions_split .profile_link_form:last-child {
	margin-right: 0;
}

.profile_more_btn {
	background-image: url(/design/VK/img/more.png);
	background-repeat: no-repeat;
	background-position: 100% 13px;
	width: 36px;
	padding-right: 7px;
	border-right: 9px solid transparent;
	cursor: pointer;
}

#profile_actions_tooltip {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 5px;
	z-index: 1000;
}

.tippy-menu {
	display: block;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	padding: 5px 0;
	min-width: 200px;
}

.tippy-menu-item {
	display: block;
	padding: 8px 15px;
	color: #2a5885;
	text-decoration: none;
}

.tippy-menu-item:hover {
	background: #f7f8fa;
	text-decoration: none;
}

/* Guest Actions */
.guest_actions {
	line-height: 160%;
	text-align: center;
	color: #939393;
	padding: 20px 0;
}

.guest_actions a {
	font-weight: bold;
	color: #2a5885;
	text-decoration: none;
}

.guest_actions a:hover {
	text-decoration: underline;
}

/* Modules */
.module {
	margin: 0;
}

.module_header {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 10px 15px;
	border-bottom: 1px solid #e7e8ec;
}

.module_header:hover {
	text-decoration: none;
	background: #f7f8fa;
}

.header_top {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.header_label {
	font-size: 13px;
	font-weight: 500;
	color: #000;
}

.header_count {
	font-size: 13px;
	font-weight: 500;
	color: #939393;
}

.header_count.fl_l {
	margin-left: 5px;
}

.header_count.fl_r {
	margin-right: 0;
}

.module_body {
	padding: 10px 15px;
}

.people_module .module_body {
	padding: 6px 10px 8px;
}

.leftDataBlock {
	margin-top: 0;
}

/* Basic Info Table */
.basicInfo {
	padding: 5px 15px;
}

.ugc-table {
	border: 0;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.ugc-table td {
	padding: 0;
	line-height: 150%;
	vertical-align: top;
}

.ugc-table .label {
	width: 165px !important;
	color: #939393;
	font-size: 13px;
	padding-right: 10px;
}

.ugc-table .data {
	width: 100% !important;
	color: #2a5885;
	font-size: 13px;
	padding: 0;
}

.ugc-table tr>td:nth-of-type(2) {
	font-size: 13px;
}

.nobold {
	font-weight: normal;
}

.profile_more_info {
	margin-top: 10px;
}

.profile_more_info_link {
	display: block;
	padding-left: 0;
	margin: 10px 0 0;
	border-radius: 2px;
	height: 34px;
	line-height: 32px;
	user-select: none;
	color: #2a5885;
	text-decoration: none;
	font-size: 12.5px;
	text-align: center;
}

.profile_more_info_link:hover {
	background-color: #f7f8fa;
	text-decoration: none;
}

.no_info {
	margin: 20px 0 0;
	text-align: center;
	color: #939393;
}

/* Photos Module */
.page_photos_module {
	padding: 13px 20px 20px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page_square_photo {
	position: relative;
	display: inline-block;
	height: 123px;
	width: 123px;
	margin-left: 6px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border-radius: 4px;
	cursor: pointer;
}

.page_square_photo:first-child {
	margin-left: 0;
}

.page_square_photo:hover {
	opacity: 0.9;
}

/* Boxs Modal Windows */
.new_boxs {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	display: block;
}

.new_boxs_container {
	margin: auto;
	width: 300px;
	margin-top: 180px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.new_boxs_title {
	font-size: 13px;
	font-weight: bold;
	padding-left: 15px;
	color: #fff;
	line-height: 41px;
	background: #5181b8;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
	position: relative;
}

.new_boxs_close {
	float: right;
	font-size: 17px;
	padding: 13px 15px;
	margin-right: 0px;
	cursor: pointer;
	margin-top: -1px;
	color: rgba(255,255,255,0.8);
	transition: color 0.2s;
}

.new_boxs_close:hover {
	color: #fff;
}

.new_boxs_content {
	background: #fff;
	position: relative;
	min-height: 50px;
}

.new_boxs_footer {
	padding: 12px 15px;
	background: #f7f8fa;
	white-space: nowrap;
	border-radius: 0 0 4px 4px;
	border-top: 1px solid #e7e8ec;
}

.new_boxs_footer .new_button,
.new_boxs_footer .button {
	margin: 0;
}

.new_boxs_footer .fl_r {
	float: right;
}

.new_boxs_footer .fl_l {
	float: left;
	margin-right: 8px;
}

.new_button {
	display: inline-block;
	padding: 7px 16px 8px;
	font-size: 12.5px;
	line-height: 15px;
	text-align: center;
	background-color: #5181b8;
	color: #fff;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.new_button:hover {
	background-color: #5b88bd;
	color: #fff;
	text-decoration: none;
}

.new_button.red {
	background-color: #e64646;
}

.new_button.red:hover {
	background-color: #d32e2e;
}

/* ========================================
   Audio Player (VKify 2016 style)
   ======================================== */
.top_nav_btn#headerMusicBtn .top_nav_btn_icon {
	background-position: -5px -53px;
}

.top_nav_btn#headerMusicBtn:hover .top_nav_btn_icon {
	background-position: -35px -53px;
}

[aria-expanded="true"] .top_nav_btn#headerMusicBtn .top_nav_btn_icon,
.top_nav_btn#headerMusicBtn.top_nav_btn_active .top_nav_btn_icon {
	background-position: -65px -53px;
}

.top_audio_player {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--search-text-color);
	padding-right: 10px;
	position: relative;
	max-width: 300px;
	line-height: 0;
	cursor: pointer;
	display: none;
	height: 42px;
}

.top_audio_player.top_audio_player_enabled, .top_nav_audio {
	display: inline-block;
	vertical-align: top;
}

.top_audio_player .top_audio_player_btn {
	display: inline;
	float: left;
	padding: 16px 4px 12px;
	cursor: pointer;
}

.top_audio_player .top_audio_player_next {
	margin-right: 7px;
}

.top_audio_player .top_audio_player_prev {
	padding-left: 10px;
}

.top_audio_player .top_audio_player_play {
	padding: 14px 4px;
}

.top_audio_player .top_audio_player_btn_icon {
	width: 14px;
	height: 14px;
	background-image: url(/design/VK/img/head_icons.png);
	opacity: 0.65;
	transition: opacity 60ms linear;
	display: block;
}

.top_audio_player .top_audio_player_btn:hover .top_audio_player_btn_icon {
	opacity: 1;
}

.top_audio_player .top_audio_player_prev .top_audio_player_btn_icon {
	background-position: -32px -80px;
}

.top_audio_player .top_audio_player_play .top_audio_player_btn_icon {
	background-position: 0 -78px;
}

.top_audio_player.top_audio_player_playing .top_audio_player_play .top_audio_player_btn_icon {
	background-position: -17px -78px;
}

.top_audio_player .top_audio_player_next .top_audio_player_btn_icon {
	background-position: -48px -80px;
}

.top_audio_player .top_audio_player_title_wrap {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 42px;
	padding-left: 7px;
	max-width: 250px;
}

.top_audio_player .top_audio_player_title {
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ========================================
   Footer (VKify 2016 style)
   ======================================== */
.footer_wrap {
	margin: 0;
	line-height: 1.36em;
	padding: 16px 10px 35px;
	text-align: center;
}

.footer_nav {
	max-width: var(--layout-width);
	margin: 0 auto;
	overflow: hidden;
}

.footer_wrap .footer_copy {
	float: left;
	color: var(--muted-text-color);
	font-size: 12.5px;
}

.footer_wrap .footer_copy a {
	color: var(--link-color);
	text-decoration: none;
}

.footer_wrap .footer_copy a:hover {
	text-decoration: underline;
}

.footer_wrap .footer_lang {
	float: right;
}

.footer_wrap .footer_lang a {
	margin-left: 5px;
	color: var(--link-color);
	text-decoration: none;
}

.footer_wrap .footer_lang a:hover {
	text-decoration: underline;
}

.footer_wrap .footer_links {
	clear: both;
	margin-top: 10px;
}

.footer_wrap .footer_links a {
	padding: 2px 5px;
	color: var(--link-color);
	text-decoration: none;
}

.footer_wrap .footer_links a:hover {
	text-decoration: underline;
}
/* ========================================
   ToTop Button (VKify 2016 style)
   ======================================== */
.toTop {
	position: fixed;
	right: 0;
	top: 42px;
	z-index: 99;
	display: none;
}

.toTop.has_down {
	display: block;
}

.toTop #to_up {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	background-color: var(--module-background-color);
	border: 1px solid var(--border-color);
	border-right: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	cursor: pointer;
	transition: background-color 0.2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toTop #to_up:hover {
	background-color: var(--button-background-color--hover);
}

.toTop #to_up img {
	display: block;
}

.toTop #to_up span {
	margin-left: 4px;
	font-size: 12px;
	color: var(--link-color);
	line-height: 1;
}

/* ========================================
   FastLogin Form (VKify 2016 style)
   ======================================== */
#fastLogin {
	padding: 11px 0 0;
}

#fastLogin br {
	display: none;
}

#fastLogin label {
	margin-bottom: 8px;
	color: #656565;
	font-size: 13px;
	font-weight: normal;
	display: block;
}

#fastLogin input:not(.button) {
	width: 100%;
	margin-bottom: 13px;
}

#fastLogin input.button {
	width: 100%;
	margin: 0;
}

#fastLogin ~ a.button[href="/reg"],
.navigation > a.button[href="/reg"] {
	width: 100%;
	margin-top: 10px;
	display: block;
	text-align: center;
	text-decoration: none;
}

#fastLogin span {
	padding: 0;
}

.navigation #fastLogin .forgot,
.navigation .forgot {
	padding-top: 16px;
	text-align: center;
	display: block;
	width: 100%;
}

.navigation #fastLogin .forgot a,
.navigation .forgot a {
	color: var(--link-color);
	text-decoration: none;
	font-size: 12px;
}

.navigation #fastLogin .forgot a:hover,
.navigation .forgot a:hover {
	text-decoration: underline;
}

/* ========================================
   Login and Registration Pages (VKify 2016 style)
   ======================================== */
#auth {
	padding: 0;
}

#auth.page_block {
	padding: 37px 30px;
	background: var(--module-background-color);
	border-radius: var(--module-border-radius);
	margin: 0 auto;
	max-width: 400px;
}

.login_header {
	margin: 0 0 25px;
	text-align: center;
	font-size: 20px;
}

#login_form {
	margin: 0 auto;
	width: 270px;
}

#login_form input:not(.button, :last-of-type) {
	margin-bottom: 15px;
}

.login_buttons_wrap {
	margin-top: 20px;
	display: flex;
}

.login_buttons_wrap .button_blue {
	margin-right: 10px;
}

#login_form .button {
	width: 100%;
}

.big_text {
	font-size: 14px;
	padding: 6px 12px 8px;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #d3d9de;
	border-radius: var(--button-border-radius);
	color: var(--text-color);
	background-color: #fff;
	transition: border-color 0.2s;
}

.big_text:focus {
	border-color: #5181b8;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.page_block h4 {
	margin-top: 15px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--heading-color);
}

.page_block .nobold {
	font-weight: 400;
	color: var(--muted-text-color);
}

.page_block select {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #d3d9de;
	border-radius: var(--button-border-radius);
	font-size: 13px;
	box-sizing: border-box;
	color: var(--text-color);
	background-color: #fff;
	transition: border-color 0.2s;
}

.page_block select:focus {
	border-color: #5181b8;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.page_block .checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.page_block .checkbox input[type="checkbox"] {
	margin-right: 8px;
}

#login_form .forgot {
	padding-top: 16px;
	text-align: center;
}

#login_form .forgot a {
	color: var(--link-color);
	text-decoration: none;
	font-size: 12px;
}

#login_form .forgot a:hover {
	text-decoration: underline;
}

.reg_step {
	width: 100%;
}

.reg_step input.big_text {
	margin-bottom: 15px;
}

.reg_field {
	margin-bottom: 15px;
}

.reg_label {
	display: block;
	margin-bottom: 5px;
	color: #656565;
	font-size: 13px;
}

/* Login Page Styles (Index/About page for unauthorized users) */
.page_content {
	padding: 14px 0 105px;
}

.index_rcolumn {
	float: right;
	width: 320px;
}

.index_rcolumn .page_block {
	margin: 30px 0 20px;
	padding: 25px;
}
.index_rcolumn .page_block:first-child {
	margin-top: 0;
}
.index_rcolumn input:not([type="submit"], [type="checkbox"]) {
	margin-bottom: 15px;
}
.index_rcolumn .login_button {
	margin-right: 15px;
	width: 100px;
}
.index_rcolumn .forgot {
	display: inline-block;
	padding-top: 12px;
	text-align: left;
	vertical-align: top;
}

.index_rcolumn #login_form .forgot {
	padding-top: 12px;
	text-align: left;
}

.ij_header {
	margin: -4px 0 0;
	font-size: 20px;
	text-align: center;
}
.ij_subheader {
	padding: 5px 0 21px;
	text-align: center;
	color: #656565;
	font-size: 12.5px;
}
.ij_label {
	margin: 0 0 10px 1px;
	font-weight: 500;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	color: #939393;
}

.login_mobile_promo_wrap {
	line-height: 19px;
	margin-right: 420px;
	text-align: center;
}

.login_mobile_header {
	margin-bottom: 12px;
	font-size: 22px;
}

.login_mobile_info {
	font-size: 14px;
	color: #222;
	line-height: 23px;
}

.login_mobile_apps {
	position: relative;
	padding: 14px 0 0;
}

.login_app_devices {
	white-space: nowrap;
	padding: 44px 0 2px;
}

.login_app_device {
	display: inline-block;
	vertical-align: bottom;
}

.login_app_device_android {
	margin-right: 116px;
}
.login_app_device_ios {
	margin-left: -348px;
	margin-right: 156px;
}

.login_app_device_screen {
	width: 192px;
	height: 397px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.login_app_download_wrap {
	margin-top: 20px;
}

.login_app_download_wrap .button {
	line-height: 19px;
}

.login_app_device_android .login_app_device_screen {
	background-image: url('/design/VK/img/auth/android_ru.png');
}

.login_app_device_wp .login_app_device_screen {
	background-image: url('/design/VK/img/auth/wp_ru.png');
}

.login_app_device_ios .login_app_device_screen {
	background-image: url('/design/VK/img/auth/ios_ru.png');
}

.login_app_download_icon {
	background-image: url('/design/VK/img/auth/platforms.png');
	width: 18px;
	height: 22px;
	display: inline-block;
	margin: -1px 8px -7px 0;
}
.login_app_device_ios .login_app_download_icon {
	background-position: 0px 0px;
}
.login_app_device_android .login_app_download_icon {
	background-position: 0px -23px;
}
.login_app_device_wp .login_app_download_icon {
	background-position: 0px -44px;
}

.tour_promo {
	margin-top: 20px;
	display: block;
}

/* Alert notifications */
.alert_box {
	position: relative;
	padding: 15px 20px;
	margin-bottom: 20px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.5;
	animation: slideDown 0.3s ease-out;
	z-index: 9999;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.alert_error {
	background-color: #faebeb;
	border: 1px solid #e7a6a6;
	color: #c14646;
}

.alert_success {
	background-color: #e8f5e9;
	border: 1px solid #a5d6a7;
	color: #388e3c;
}

/* ========================================
   Profile - Completeness Block (VKify 2016)
   ======================================== */
.completeness_block {
	margin-bottom: 10px;
}

.profile_warning_row {
	color: #000;
	display: block;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

.profile_warning_row:hover {
	text-decoration: none;
	background-color: #f0f2f5;
}

.profile_warning_img {
	float: left;
	width: 21px;
	height: 21px;
	margin: 10px;
	background: url(/design/VK/img/add_info_icons.png) no-repeat 0 0;
}

.profile_warning_img.interests,
.profile_warning_img.status {
	background-position: 0 -150px;
}

.profile_warning_img.email {
	background-position: 0 -75px;
}

.profile_warning_img.phone {
	background-position: 0 -75px;
}

.profile_warning_img.telegram {
	background-position: 0 -175px;
}

.profile_warning_label {
	overflow: hidden;
	display: table-cell;
	vertical-align: middle;
	height: 25px;
	padding: 8px 0;
}

.profile_warning_label a {
	color: #2a5885;
	text-decoration: none;
}

.profile_warning_label a:hover {
	text-decoration: underline;
}

.unfilled_rating {
	color: #939393;
	font-size: 12px;
}

/* ========================================
   Profile - Page List Module (Groups, Albums, etc.)
   ======================================== */
.page_list_module .line_cell {
	display: flex;
	padding: 0;
	margin: 0;
	margin-top: 12px;
	line-height: 130%;
}

.page_list_module .line_cell:first-child {
	margin-top: 0;
}

.page_list_module .thumb {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.page_list_module .thumb .cell_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page_list_module .desc_info {
	width: 147px;
	overflow: hidden;
	word-wrap: break-word;
	padding: 4px 0 0 12px;
	flex: 1;
	min-width: 0;
}

.page_list_module .group_name {
	margin-bottom: 2px;
}

.page_list_module .group_name a {
	color: #2a5885;
	text-decoration: none;
	font-weight: 500;
}

.page_list_module .group_name a:hover {
	text-decoration: underline;
}

.page_list_module .group_desc {
	font-size: 12px;
	max-height: 48px;
	overflow: hidden;
	color: #656565;
}

/* ========================================
   Profile - Album Module
   ======================================== */
.album_module .page_album_row {
	margin: 15px 0 -1px;
	display: inline-block;
	vertical-align: top;
	border-radius: 4px;
	overflow: hidden;
	width: 200px;
}

.album_module .page_album_row:first-child {
	margin: 0;
}

.page_album_link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
}

.page_album_thumb_wrap {
	background-color: #e4e6eb;
	text-align: center;
	overflow: hidden;
	height: 132px;
	width: 200px;
}

.page_album_thumb {
	max-width: 100%;
	vertical-align: top;
	width: 200px;
	object-fit: cover;
	height: 100%;
}

.page_album_title {
	font-size: 12.5px;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px 10px;
}

.page_album_title_text {
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	visibility: visible;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.page_album_size {
	float: right;
	font-size: 13.5px;
	opacity: 0.9;
	margin: -1px 0 0 5px;
}

.page_album_nocover {
	background: #e4e6eb url(/design/VK/img/camera_big.png) no-repeat 50% 45%;
	width: 200px;
	height: 132px;
}

.page_album_nocover .page_album_size {
	display: none;
}

.page_album_nocover .page_album_title {
	background: none;
	color: #939393;
}

/* ========================================
   Profile - Video Module
   ======================================== */
.video_module .video_row {
	width: 100%;
	margin-bottom: 12px;
}

.video_module .video_row:last-child {
	margin-bottom: 0;
}

.video_module .video {
	position: relative;
	float: left;
	width: 120px;
	height: 90px;
	margin-right: 12px;
	border-radius: 4px;
	overflow: hidden;
}

.page_video_thumb {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.page_video_play_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	background: rgba(0,0,0,0.5) url(/design/VK/img/video_play.png) no-repeat center;
	background-size: 20px 20px;
	border-radius: 50%;
}

.video_module .info {
	overflow: hidden;
	text-overflow: ellipsis;
	padding-top: 4px;
}

.video_module .info a {
	color: #2a5885;
	text-decoration: none;
}

.video_module .info a:hover {
	text-decoration: underline;
}

/* ========================================
   Profile - Audio Module
   ======================================== */
.audio_module .audio_row {
	width: 100%;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
}

.audio_module .audio_row:last-child {
	margin-bottom: 0;
}

.audio_module .audio {
	position: relative;
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 12px;
	border-radius: 4px;
	overflow: hidden;
	background: #e4e6eb;
	flex-shrink: 0;
}

.page_audio_play_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,0.5) url(/design/VK/img/audio_play.png) no-repeat center;
	background-size: 15px 15px;
	border-radius: 50%;
}

.audio_module .info {
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.audio_module .info a {
	color: #2a5885;
	text-decoration: none;
}

.audio_module .info a:hover {
	text-decoration: underline;
}

/* ========================================
   Profile - Detailed Information Block
   ======================================== */
.profile_info_block {
	padding: 0 0 29px;
	border-top: 1px solid #d3d9de;
}

.profile_info_block:last-child {
	padding-bottom: 0;
}

.profile_info_header_wrap {
	border-bottom: none;
	position: relative;
	margin: -11px 0 4px;
}

.profile_info_header {
	padding-bottom: 4px;
	padding-right: 7px;
	background: #fff;
	font-weight: 600;
	color: #2a5885;
}

.profile_info_full {
	padding-top: 10px;
}

.profile_info_block .ugc-table {
	padding-top: 5px;
}

.no_info {
	color: #939393;
	font-style: italic;
	padding: 10px 0;
}

/* ========================================
   Profile - Upload Module (VKify 2016)
   ======================================== */
.page_module_upload {
	padding: 28px 13px 28px 230px;
	text-align: left;
	line-height: 16px;
	white-space: nowrap;
	display: block;
	color: #2a5885;
	text-decoration: none;
	position: relative;
}

.page_module_upload:hover {
	text-decoration: none;
}

.page_module_upload:hover .page_upload_label {
	opacity: 1;
}

.page_upload_label {
	background: url(/design/VK/img/group_icons.png) no-repeat;
	position: absolute;
	display: block;
	width: 17px;
	height: 19px;
	left: 13px;
	top: 50%;
	margin-top: -9.5px;
	opacity: 0.6;
}

.page_upload_label.page_photos_upload {
	background-position: 0px 2px;
}

.page_module_upload span {
	display: inline-block;
	vertical-align: middle;
}