/* Freenet: old-web look. Fixed 791px page, Tahoma 11px, no frameworks. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 11px tahoma, verdana, arial, sans-serif;
}

a { color: #2b587a; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

h1, h2, h3, p, ul { margin: 0; }

.layout { width: 791px; margin: 0 auto; }

/* Header */

.header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 42px;
  padding-left: 10px;
  background: linear-gradient(#636363, #3e3e3e);
  border: 1px solid #333;
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font: bold 21px tahoma, verdana, arial, sans-serif;
  letter-spacing: -1px;
}
.logo:hover { text-decoration: none; }

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #fff;
  color: #3e3e3e;
  font-size: 18px;
}

.header-links { display: flex; }

.header-links a {
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: #fff;
  font-weight: bold;
  border-left: 1px solid #2f2f2f;
  box-shadow: inset 1px 0 #6f6f6f;
}
.header-links a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* Columns */

.columns { display: flex; gap: 8px; margin-top: 6px; }

.sidebar { width: 140px; flex-shrink: 0; }

.page { width: 643px; }

.page-title {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
  background: #eee5b8;
  border: 1px solid #d7cf9e;
  font-weight: bold;
}

.page-title .aside { color: #9c9670; font-weight: normal; }

.page-body {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-top: 0;
}

/* Sidebar */

.menu a {
  display: block;
  padding: 3px 6px;
}
.menu a:hover { background: #e9edf1; text-decoration: none; }
/* The unread counter next to "Мои Ответы", as on openvk. */
.menu .counter {
  float: right;
  margin-top: -1px;
  padding: 1px 7px;
  background: #e6e6e6;
  border-radius: 2px;
  color: #2b587a;
  font-weight: bold;
}

.sidebar-form label { display: block; margin: 6px 0 2px; }
.sidebar-form .button { width: 100%; margin-top: 6px; }
.sidebar-form .hint { margin-top: 6px; }

/* Blocks */

.section-title {
  position: relative;
  margin: 12px -10px 8px;
  padding: 3px 10px 3px 22px;
  background: #e6e6e6;
  border-top: 1px solid #8b8b8b;
  color: #626262;
  font-weight: bold;
}
.section-title:first-child { margin-top: -10px; }

.section-title::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  border: 4px solid transparent;
  border-top: 5px solid #8b8b8b;
}

.notice {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f7f1d6;
  border: 1px solid #ddd09a;
}

.error {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #ffefe8;
  border: 1px solid #e89b88;
}

.hint { color: #808080; }

.bullets { padding: 0; margin: 8px 0; }
.bullets li { position: relative; list-style: none; padding: 2px 0 2px 12px; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 4px;
  height: 4px;
  background: #5b7aa1;
}

.center { text-align: center; }

/* Controls */

.button {
  padding: 4px 9px;
  background: #595959;
  border: 1px solid #595959;
  border-radius: 2px;
  color: #fff;
  font: 12px tahoma, verdana, arial, sans-serif;
  cursor: pointer;
}
.button:hover { background: #6b6b6b; text-decoration: none; }
.button:disabled { opacity: 0.6; cursor: default; }
.button.secondary { background: #f2f2f2; border-color: #c4c4c4; color: #333; }
.button.secondary:hover { background: #e6e6e6; }

input[type="text"],
input[type="email"],
select {
  width: 100%;
  padding: 3px 4px;
  background: #fff;
  border: 1px solid #c0cad5;
  font: 11px tahoma, verdana, arial, sans-serif;
}
input:focus, select:focus { outline: 1px solid #8fa7c2; }

/* Sized by the columns, so every section lines up the same way. */
.form { border-collapse: collapse; }
.form th {
  width: 160px;
  padding: 4px 10px 4px 0;
  color: #555;
  font-weight: normal;
  text-align: right;
  vertical-align: top;
  line-height: 18px;
}
.form td { padding: 3px 0; }
.form td.control { width: 260px; }
.form td.note { padding-left: 10px; }
.form textarea {
  width: 100%;
  padding: 3px 4px;
  border: 1px solid #c0cad5;
  font: 11px tahoma, verdana, arial, sans-serif;
  resize: vertical;
}
.form textarea:focus { outline: 1px solid #8fa7c2; }
.required::after { content: " *"; color: #c33; }

.date { display: flex; gap: 4px; }
.date select:first-child { width: 60px; }
.date select:nth-child(2) { width: 110px; }
.date select:last-child { width: 64px; }

.checks label { display: block; padding: 2px 0; }
.checks input { vertical-align: middle; margin: 0 4px 0 0; }

.actions { display: flex; gap: 6px; margin-top: 12px; padding-left: 170px; }

/* Profile */

.profile { display: flex; gap: 12px; }
.profile-left { width: 200px; flex-shrink: 0; }
.profile-right { flex: 1; }

.avatar {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid #e0e0e0;
}
.profile-left .button { display: block; width: 100%; margin-top: 6px; text-align: center; }

.name { color: #45688e; font-size: 13px; font-weight: bold; }
.status { margin: 3px 0 10px; }
.status.empty { color: #999; }
/* openvk's deleted page: what is left instead of the information. */
.settings-delete { margin-top: 20px; padding-left: 170px; }
.deleted-info { margin: 40px 0; color: #aaa; font-size: 13px; text-align: center; }

.info { width: 100%; border-collapse: collapse; }
.info th {
  width: 150px;
  padding: 2px 0;
  color: #808080;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}
.info td { padding: 2px 0; }
/* Text people write, as a club's description: their line breaks stay. */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.private-mark { color: #a0a0a0; }

/* Footer */

.footer {
  margin-top: 12px;
  padding: 10px 0 20px;
  color: #808080;
  text-align: center;
}
.footer a { margin: 0 6px; }
.footer p { margin-top: 6px; }

/* Wall */

.section-title .count { margin-left: 4px; color: #8b8b8b; font-weight: normal; }

.wall-form { margin-bottom: 12px; }
.wall-form textarea,
.modal-body textarea {
  display: block;
  width: 100%;
  height: 30px;
  padding: 4px;
  resize: vertical;
  border: 1px solid #c0cad5;
  font: 11px tahoma, verdana, arial, sans-serif;
}
.wall-form textarea:focus, .modal-body textarea:focus { outline: 1px solid #8fa7c2; }
/* Set by wall.js: grows on focus and shrinks only when empty, so the
   button does not jump away between pressing and releasing the mouse. */
.wall-form.expanded textarea { height: 70px; }
.wall-form .row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

.post { display: flex; gap: 8px; margin-bottom: 10px; }
.post-avatar img { display: block; width: 50px; height: 50px; }
.post-main { flex: 1; min-width: 0; }

.post-author {
  padding: 3px 5px;
  background: #f6f6f6;
  border-top: 1px solid #8b8b8b;
  border-bottom: 1px solid #ececec;
}
.post-name { font-weight: bold; }
/* "на стене Петра Петрова" in the news feed, bold as on openvk. */
.post-wall { font-weight: bold; }
.post-date { color: #777; font-size: 9px; }

.post-text {
  padding: 6px 4px;
  border-bottom: 1px solid #ececec;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.post-date a { color: #777; }

/* Editing in place, as on openvk: the form takes the place of the text
   and photos (postedit.js). */
.post.editing .post-content { display: none; }
.post-edit { margin: 6px 0 4px; }
.post-edit-buttons { display: flex; gap: 4px; }

/* As on openvk: links on the left, the heart with its count on the right. */
.post-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px;
  font-size: 9px;
}
.post-menu a { color: #999; }
.separator { margin: 0 5px; color: #ccc; }

.like { display: inline-flex; align-items: center; gap: 3px; color: #2b587a; }
.like svg { width: 11px; height: 10px; fill: #2b587a; opacity: .4; }
a.like { cursor: pointer; }
a.like:hover { text-decoration: none; }
a.like:hover svg { opacity: .7; }
.like.liked svg { fill: #d94c4c; opacity: 1; }
.like-count { color: #000; font-size: 9px; }

/* Comments: a post with a small avatar. */
.comment .post-avatar img { width: 30px; height: 30px; }
.comment .post-author { padding: 2px 5px; }
.comment-form { margin-top: 10px; }
.comment-form textarea { height: 50px; }
.comment-hint { margin-top: 10px; }

.post-deleted {
  margin-bottom: 10px;
  padding: 8px;
  background: #f6f6f6;
  color: #808080;
}

.wall-more {
  display: block;
  padding: 5px;
  background: #f0f0f0;
  border-top: 1px solid #ccc;
  color: #777;
  text-align: center;
}
.wall-more:hover { background: #e9e9e9; text-decoration: none; }

/* Follows */

.follow-state { margin-top: 4px; color: #808080; text-align: center; }
.profile-left button.button { width: 100%; margin-top: 6px; }

.side-block { margin-top: 12px; }
.side-block .section-title { margin: 0; }

.subtitle {
  display: flex;
  justify-content: space-between;
  padding: 3px 8px;
  background: #f0f0f0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #eee;
  color: #777;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 0;
  padding: 8px 0;
  text-align: center;
}
.person-cell { min-width: 0; overflow-wrap: anywhere; }
.person-cell img { display: block; width: 45px; height: 45px; margin: 0 auto 3px; }

.person {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #ececec;
}
.person img { display: block; width: 50px; height: 50px; }
.person-status { margin-top: 3px; color: #555; }

.tabs {
  display: flex;
  margin: -10px -10px 10px;
  padding: 0 10px;
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
}
.tabs a { padding: 5px 10px; }
.tabs a.active {
  margin-bottom: -1px;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #fff;
  color: #000;
  font-weight: bold;
}
.tabs a.active:hover { text-decoration: none; }

/* Photo */

.avatar { object-fit: cover; }
.avatar-actions { padding: 4px 0 0; text-align: center; }
.avatar-actions a { display: block; padding: 2px 0; }
.post-avatar img, .person img, .person-cell img { object-fit: cover; }

/* Search */

.search-form { display: flex; gap: 6px; margin-bottom: 10px; }
.search-form input { flex: 1; }
.search-count { margin-bottom: 4px; color: #808080; }

/* Notifications: a post-like row with the sentence of openvk. */
.notification { padding-bottom: 8px; border-bottom: 1px solid #ececec; }
.notification-text { padding: 2px 0 3px; line-height: 1.5; overflow-wrap: anywhere; }

/* Messages, as on openvk: the list of dialogs and the messenger. */
.dialogs { margin: 0 -10px; border-top: 1px solid #d6d6d6; }
.dialog {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 8px 10px;
  border-bottom: 1px solid #d6d6d6;
  color: #000;
}
.dialog:hover { background: #f9f9f9; text-decoration: none; }
.dialog-avatar { width: 50px; height: 50px; object-fit: cover; border-radius: 3px; }
.dialog-info { width: 130px; margin-top: 4px; }
.dialog-name { color: #2b587a; }
.dialog-date { margin-top: 2px; color: grey; }
.dialog-message { display: flex; gap: 8px; flex: 1; min-width: 0; padding: 3px; border-radius: 3px; }
.dialog-message.unread { background: #e6e6e6; }
.dialog-message img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; }
.dialog-text { max-height: 40px; overflow: hidden; color: #404036; overflow-wrap: anywhere; }

.messenger { margin: -10px; border-bottom: 1px solid #c3cad2; }
.messenger-messages { height: 420px; padding: 10px 20px; overflow-y: auto; }
.im-message { display: flex; gap: 10px; margin-bottom: 3px; padding: 8px 10px; border-radius: 3px; }
.im-message.unread { background: #ededed; }
.im-message img { display: block; width: 37px; height: 37px; object-fit: cover; border-radius: 3px; }
.im-message-content { flex: 1; min-width: 0; line-height: 1.45; }
.im-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.im-message-date { width: 100px; color: #404036; font-size: 9px; text-align: right; }
/* Shown on hover, as the message actions of VK; always on touch screens. */
.im-message-delete { display: block; margin-top: 4px; font-size: 10px; visibility: hidden; }
.im-message:hover .im-message-delete { visibility: visible; }
@media (hover: none) { .im-message-delete { visibility: visible; } }

.messenger-input {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
  background: #f9f9f9;
  border-top: 1px solid #d6d6d6;
}
.messenger-avatar { width: 52px; height: 52px; object-fit: cover; border-radius: 3px; }
.messenger-box { flex: 1; }
.messenger-box textarea {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: 6px;
  padding: 4px;
  resize: none;
  border: 1px solid #c0cad5;
  font: 11px tahoma, verdana, arial, sans-serif;
}
.messenger-buttons { display: flex; align-items: center; gap: 10px; }
.messenger-box .attachments { margin: 0 0 6px; }
.messenger-blocked { padding: 20px; background: #f9f9f9; border-top: 1px solid #d6d6d6; font-weight: bold; text-align: center; }

/* Photos of a post, as on openvk: one at its own proportions, more as tiles. */
.post-photos { display: grid; gap: 3px; padding: 6px 4px; border-bottom: 1px solid #ececec; }
.post-photos img { display: block; width: 100%; object-fit: cover; cursor: zoom-in; }
.post-photos.single img { width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.post-photos.grid-2 { grid-template-columns: repeat(2, 1fr); }
.post-photos.grid-3 { grid-template-columns: repeat(3, 1fr); }
.post-photos.grid-2 img, .post-photos.grid-3 img { aspect-ratio: 1; }

/* Photos of comments and messages: the same tiles, smaller. The rule
   for the avatar of a message must not shrink them. */
.comment .post-photos, .im-message .post-photos { max-width: 300px; padding: 4px 0; border-bottom: 0; }
.comment .post-photos.single img, .im-message .post-photos.single img { max-height: 240px; }
.im-message .post-photos img { width: 100%; height: auto; border-radius: 0; }
.im-message .post-photos.single img { width: auto; }

/* "Ответ на комментарий ×" over the comment form, as openvk's. */
.reply-to { margin-top: 4px; color: #777; }
.reply-cancel { margin-left: 4px; color: #999; font-weight: bold; cursor: pointer; }
.reply-cancel:hover { color: #555; text-decoration: none; }

/* Photos attached to a post being written. */
.attach-link { margin-right: 8px; }
.attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.attachment { position: relative; }
.attachment img { display: block; width: 75px; height: 75px; object-fit: cover; border: 1px solid #ccc; }
.attachment-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  background: #f6f6f6;
  border: 1px solid #ccc;
  color: #808080;
}
.attachment-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 0 4px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: bold;
  line-height: 14px;
}
.attachment-remove:hover { background: rgba(0, 0, 0, .8); text-decoration: none; }

/* The photo viewer, as openvk's. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .7);
}
.viewer-box { max-width: 95vw; background: #fff; border: 1px solid #555; }
.viewer-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 10px;
  background: #e6e6e6;
  color: #45688e;
  font-weight: bold;
}
.viewer-close { cursor: pointer; }
.viewer-body { position: relative; padding: 10px; text-align: center; }
.viewer-photo { display: block; max-width: calc(95vw - 22px); max-height: calc(100vh - 110px); cursor: pointer; }
.viewer-nav {
  position: absolute;
  top: 50%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}
.viewer-nav:hover { background: rgba(0, 0, 0, .6); text-decoration: none; }
.viewer-prev { left: 10px; }
.viewer-next { right: 10px; }

/* A shared post inside its repost, compact as on openvk. */
.post-shared { display: flex; gap: 6px; margin: 6px 4px; padding-left: 6px; border-left: 2px solid #dae1e8; }
.post-shared .post-avatar img { width: 30px; height: 30px; }
.post-shared .post-author { padding: 2px 5px; }
.post-shared .post-text { border-bottom: 0; }
.post-shared.deleted { padding: 6px; color: #777; }
.post-shared-link { display: inline-block; padding: 2px 4px; }

/* openvk's message box: the "Поделиться" dialog. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .7);
}
.modal-box { width: 400px; max-width: 100%; background: #fff; border: 1px solid #555; }
.modal-header { padding: 10px 12px; background: linear-gradient(#636363, #3e3e3e); color: #fff; font-size: 13px; font-weight: bold; }
.modal-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 12px; }
.modal-body textarea { height: 60px; }
.modal-body .error { margin-bottom: 0; }
.modal-option input { margin: 0 4px 0 0; vertical-align: middle; }
/* openvk's "Загрузка новой фотографии" (avatar.js). */
.modal-box.avatar-dialog { width: 487px; }
.avatar-crop { display: block; margin: 4px auto; cursor: move; touch-action: none; }
.avatar-turn { display: flex; justify-content: center; gap: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px; background: #f2f2f2; border-top: 1px solid #ddd; }

/* Links under the profile photo, as openvk's profile_link. */
.profile-link { display: block; margin-top: 4px; padding: 3px 6px; background: #f2f2f2; color: #2b587a; cursor: pointer; }
.profile-link:hover { background: #e6e6e6; text-decoration: none; }

/* The blacklist page: people with "Удалить из чёрного списка". */
.blacklist-row { display: flex; justify-content: space-between; align-items: center; }
.blacklist-row .person { flex: 1; }

/* The page of a community, as openvk's: the information, members and
   wall on the left, the photo and links in a narrow column on the right
   (a person's page is the other way round). */
.club { display: flex; gap: 10px; }
.club-main { flex: 1; min-width: 0; }
.club-main .section-title { margin-right: 0; }
/* Blocks that may be hidden open with their title: not the page's first. */
.club-main > div > .section-title:first-child { margin-top: 12px; }
.club-side { width: 200px; flex-shrink: 0; }
.club-side .section-title,
.club-side > div > .section-title:first-child { margin: 10px 0 0; }
.club-side .button { display: block; width: 100%; margin-top: 6px; }
.side-text { padding: 4px; }
.people-grid.wide { grid-template-columns: repeat(6, 1fr); }

/* An item of an openvk list: "Создатель", admins. */
.avatar-item { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.avatar-item img { width: 32px; height: 32px; object-fit: cover; }

/* "От имени сообщества" and "Подпись автора" under the form. */
.post-options { margin-top: 4px; }
.post-options label { display: block; padding: 1px 0; color: #555; }
.post-options input { vertical-align: middle; margin: 0 3px 0 0; }
.club-role { color: #808080; }
.club-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ececec; }
.club-row img { width: 50px; height: 50px; object-fit: cover; }

/* The clubs pinned to the left menu, under a line, as on openvk. */
.menu-divider { margin: 4px 0; border-top: 1px solid #dadada; }

/* "Автор: Иван Иванов" under a signed post of a community. */
.post-signature { padding: 2px 4px 4px; }
.post-signature span { color: #808080; }
.post-signature a { font-weight: bold; }

/* openvk's lists ("Мои Группы", search): the photo, the information and
   the links on the right. */
.list-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ececec; }
.list-cover img { display: block; width: 75px; height: 75px; object-fit: cover; }
.list-info { flex: 1; min-width: 0; }
.list-info .info th { width: 70px; }
.list-description { padding-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.list-actions { width: 200px; flex-shrink: 0; }
.list-actions .profile-link { margin-top: 0; margin-bottom: 2px; }

/* The grey bar of "Мои Группы": search and "Создать группу". */
.gray-bar { display: flex; gap: 8px; margin: -10px -10px 0; padding: 12px; background: #f6f6f6; }
.gray-bar-search { flex: 1; }
.summary-bar { margin: 0 -10px; padding: 11px 10px; border-bottom: 1px solid #dedede; color: #45688e; font-weight: bold; }
.profile-links { margin-top: 6px; }

/* "Предложка": the link above the wall, the head of the suggestions and
   the buttons of an admin under each, as on openvk. */
.sugglist { margin: 5px 0 -5px; padding: 5px 9px; border-top: 1px solid #808080; background: #e6e6e6; }
.sugglist a { color: #626262; }
.suggested-count { margin: 0 0 7px; border-bottom: 1px solid #e8ebee; color: #45688e; font-size: 12px; font-weight: bold; }
.suggestion-controls { margin: 4px 0 7px; text-align: center; }
.suggestion-controls .button { margin: 0 2px; }
.publish-signed { display: block; margin-top: 4px; }
.publish-signed input { vertical-align: middle; margin: 0 3px 0 0; }

/* openvk's "Обсуждения": the list of topics (board.js), the head of a
   topic and the block on the page of a club. */
.board-search { display: flex; gap: 6px; margin-bottom: 8px; }
.board-search input { flex: 1; padding: 3px 4px; border: 1px solid #c0cad5; font: inherit; }
.board-count { margin: 0 0 8px; }
.topic-item { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border: 1px solid #dae1e8; }
.topic-name { font-weight: bold; }
.topic-last { display: flex; gap: 6px; align-items: flex-start; min-width: 170px; }
.topic-last img { width: 30px; height: 30px; object-fit: cover; }
.topic-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; padding: 10px; background: #f2f2f2; }
.topic-short { padding: 4px 0; }
.page-title .title-links { font-weight: bold; }
.topic-form textarea { width: 100%; height: 80px; }

/* openvk's "Фон страницы": the photos on the sides, behind the page,
   which a white column with soft edges keeps readable. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -100;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left, center right;
  pointer-events: none;
  opacity: .8;
}
.backdrop-dripper {
  width: 800px;
  height: 100%;
  margin: auto;
  background: #fff;
  box-shadow: -30px 0 20px 20px #fff, -70px 0 20px 20px rgb(255 255 255 / 43%), -110px 0 20px 20px rgb(255 255 255 / 28%),
    30px 0 20px 20px #fff, 70px 0 20px 20px rgb(255 255 255 / 43%), 110px 0 20px 20px rgb(255 255 255 / 28%);
}

/* The settings: a scheme of the page with "Обзор" on each side. */
.backdrop-form h4 { margin: 0 0 6px; }
.backdrop-editor { display: flex; gap: 8px; width: 550px; height: 220px; margin: 10px auto; padding: 8px; border: 4px inset #cfcfcf; background: #f7f7f7; }
.backdrop-side { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.backdrop-side img { max-width: 100%; max-height: 150px; object-fit: contain; }
.backdrop-page { width: 220px; background: #fff; border: 1px solid #d0d0d0; }

/* openvk's photo albums: the list (a grey box of white items with their
   covers), the head and the photos of an album, the upload with its white
   box of limits, the page of a photo and the block on a page. */
.gray-box { padding: 12px; background: #f6f6f6; }
.gray-box-title { margin: 0 0 10px; font-size: 11px; }
.summary-bar .summary-links { font-weight: normal; }
.album-list .hint { margin: 0; }
.album-item { display: flex; gap: 10px; margin-bottom: 6px; padding: 4px; background: #fff; border: 1px solid #dedede; }
.album-item:last-child { margin-bottom: 0; }
.album-cover img { display: block; width: 170px; height: 130px; object-fit: cover; }
.album-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.album-form input, .album-form textarea { width: 100%; }
.album-delete { text-align: center; }
.album-head { margin-bottom: 12px; }
.album-grid { display: flex; flex-wrap: wrap; }
.album-photo { position: relative; width: 25%; margin-bottom: 8px; text-align: center; }
.album-photo img { max-width: 83%; max-height: 120px; padding: 8px; border: 1px solid #ccc; background: #fff; vertical-align: top; }
.album-photo-delete {
  position: absolute;
  top: 0;
  right: 0;
  margin: 4px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
.album-photo-delete:hover { text-decoration: none; }
.album-photo:hover .album-photo-delete { opacity: 1; }
.upload-box { min-height: 344px; }
.white-box { width: 421px; max-width: 100%; margin: 7% auto 0; background: #fff; border: 1px solid #e8e8e8; }
.white-box h4 { margin: 24px 38px 0; font-size: 11px; }
.upload-limits { margin: 17px 38px 24px; }
.upload-limits > b { color: #45688e; }
.upload-limits ul { margin: 6px 0 0; padding-left: 18px; }
.upload-button { padding-top: 4px; text-align: center; }
.upload-tip { margin: 19px 0 0; line-height: 15px; }
.upload-again { text-align: center; }
.uploaded-photo { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; padding-bottom: 9px; border-bottom: 1px solid #e8e8e8; }
.uploaded-description { display: flex; flex: 1; gap: 6px; color: #464646; }
.uploaded-description textarea { flex: 1; height: 86px; resize: none; }
.uploaded-image { display: flex; flex-direction: column; width: 125px; }
.uploaded-image img { width: 125px; }
.upload-finish { display: block; margin: 12px auto 0; }
.photo-page-image { margin-bottom: 8pt; text-align: center; }
.photo-page-image img { max-width: 85%; max-height: 60vh; }
.photo-page-description { padding: 5px 30px; }
.photo-page-description .hint { font-size: 10px; }
.photo-page-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.photo-page-columns { display: flex; justify-content: space-between; gap: 10px; min-height: 100px; }
.photo-page-main { width: 68%; }
.photo-page-actions { width: 30%; }
.photo-page-author { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.photo-page-author img { width: 30px; height: 30px; object-fit: cover; }
.side-albums { padding: 5px 0; }
.side-album { display: flex; gap: 6px; margin-bottom: 8px; overflow-wrap: anywhere; }
.side-album img { width: 80px; max-height: 72px; object-fit: cover; }

/* openvk's page of a person: the table under the name, "Информация" with
   "Контактная информация" and "Личная информация", and the tabs of
   "Редактировать страницу". */
.basic-info { margin-bottom: 10px; }
.about { padding: 6px 8px 12px; }
.about-title { margin: 6px 0 4px; font-size: 11px; }
.about-title .edit-link { margin-left: 4px; color: #808080; font-weight: normal; }
.about-none { margin: 0; padding: 10px; color: #808080; text-align: center; }
.about-text { white-space: pre-line; overflow-wrap: anywhere; }
#partner, #birth-year-shown { display: block; margin-top: 4px; }
.extra-field { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #ececec; }
.extra-field textarea { width: 100%; height: 60px; }
.field-remove { padding: 0 6px; color: #808080; font-size: 14px; }
.field-remove:hover { color: #c00; text-decoration: none; }
.edit-avatar { display: block; width: 200px; margin-bottom: 6px; }
.search-filter { margin: 0 0 8px; }

/* openvk's "Заполненность страницы": a grey gauge, gold when full, and
   to the owner the hints of what to fill in. */
.profile-hints { margin-top: 8px; }
.completeness-gauge { position: relative; height: 16px; background: #e6e6e6; border-top: 1px solid #bbb; }
.completeness-gauge > div { height: 100%; background: #d4d4d4; }
.completeness-gauge > span { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
.completeness-gauge-gold { background: #f6ebbb; border-top-color: #b9b597; }
.completeness-gauge-gold > div { background: #e1d7a2; }
.completeness-hints a { display: block; margin-top: 4px; }

/* The status edited on the page, as openvk's box under the name. */
.status-editable { cursor: pointer; }
.status-edit { display: flex; gap: 4px; }
.status-edit input { flex: 1; }

/* "Все" on the right of a block's title. */
.section-title .title-link { float: right; font-weight: normal; }

/* openvk's "Понравилось N людям": a tooltip over a heart and a box. */
.likers-tooltip { position: absolute; z-index: 50; width: 196px; background: #fff; border: 1px solid #c5d0db; box-shadow: 0 2px 6px rgb(0 0 0 / 20%); }
.likers-tooltip-head { display: block; padding: 5px 8px; background: #f2f5f8; border-bottom: 1px solid #e0e6ec; cursor: pointer; }
.likers-tooltip-grid { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; }
.likers-tooltip-grid img { display: block; width: 30px; height: 30px; object-fit: cover; }
.likers-box { width: 460px; }
.likers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-height: 360px; overflow-y: auto; }
.likers-item { text-align: center; overflow-wrap: anywhere; }
.likers-item img { display: block; width: 64px; height: 64px; margin: 0 auto 4px; object-fit: cover; }

/* "Поделиться": the community and the dialog to share in. */
.modal-body select { display: block; width: 100%; margin: 2px 0 6px; }
.share-signs label { display: block; margin-top: 4px; }

/* Under a photo of an album in the viewer: its description, heart,
   comments and "Поделиться". */
.viewer-details { padding: 8px 12px; background: #fff; }
.viewer-description { margin: 0 0 6px; white-space: pre-wrap; }
.viewer-actions { display: flex; gap: 14px; align-items: center; }
.photo-page-meta .like { display: inline-flex; margin-left: 4px; }

/* "Это архив записей" over the archive of a wall, as on openvk. */
.archive-banner { margin-bottom: 10px; padding: 8px 10px; border: 1px solid #d5ddb6; background: #f9f6e7; }
.archive-banner b { display: block; margin-bottom: 2px; }

/* Long text of a post or a comment, cut short as on openvk until
   "Показать больше". */
.post-text.collapsed { max-height: 115px; overflow: hidden; }
.post-text-more { display: block; margin-top: 2px; cursor: pointer; }