@charset "UTF-8";
/**
* @file photoreports.css
* Раздел «Фото» (новый дизайн 2014): список фотоотчетов + страница альбома.
*
* В комплекте нового дизайна этот файл отсутствовал (эталонная разметка
* /clubbergallery/clubberindex.php 2016 года ссылается на него), поэтому
* недостающие классы собраны здесь. Подключается шаблонами gallery_v2.tpl
* и album_v2.tpl, общие стили — в common.css (album-container, album-header-*,
* album-photos-*, ico-*, .wrapper, .section-header).
*/

/* шапка раздела */
#photoReports .wrapper-gap {
  padding-bottom: 70px;
}

.section-header-actions {
  float: right;
  padding-top: 10px;
  font-family: 'Proxima Nova Bold';
  font-size: 12pt;
  text-transform: none;
}

.header-action {
  display: inline-block;
  margin-left: 30px;
  text-decoration: none;
  color: #00aeef;
  white-space: nowrap;
}

.header-action:hover {
  color: #1d8cc4;
}

/* иконка «фото» для действий раздела: рисуется средствами CSS,
   т.к. в спрайте i/s.png голубого фотоаппарата нет */
.ico-photos-cyan-big {
  background-image: none;
  width: 24px;
  height: 18px;
  border: 3px solid #00aeef;
  border-radius: 3px;
  position: relative;
  vertical-align: middle;
}

.ico-photos-cyan-big:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 10px;
  height: 10px;
  border: 3px solid #00aeef;
  border-radius: 50%;
}

/* панель фильтров */
.filter-panel-cnt {
  margin-bottom: 35px;
  overflow: hidden;
}

.filter-panel-title {
  float: left;
  margin: 7px 15px 0 0;
  font-size: 12pt;
  text-transform: uppercase;
  color: #999;
}

.filter-panel {
  overflow: hidden;
}

.filter-panel-item {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 6px 15px 5px;
  font-size: 11pt;
  color: #555;
  text-decoration: none;
  border: 2px solid #e6e6e6;
  border-radius: 3px;
}

.filter-panel-item:hover {
  border-color: #00aeef;
  color: #00aeef;
}

.filter-panel-item-active {
  border-color: #00aeef;
  color: #00aeef;
}

.filter-panel-item-static {
  border-color: transparent;
  color: #999;
  cursor: default;
}

/* дни и карточки альбомов */
.photoreport-day-cnt {
  margin-bottom: 45px;
}

.photoreport-day-title {
  font-family: 'Proxima Nova Condensed Bold';
  font-size: 20pt;
  text-transform: uppercase;
  color: #000;
  padding-bottom: 8px;
  margin-bottom: 25px;
  border-bottom: 3px solid #00aeef;
}

.photoreport-day-albums-cnt {
  overflow: hidden;
}

.album-header-title-container {
  max-width: 690px;
}

.album-header-title a {
  text-decoration: none;
}

.album-header-title a:hover {
  color: #00aeef;
}

.album-header-title-info {
  font-size: 12pt;
}

.album-header-title-barname {
  margin-right: 15px;
}

.album-header-title-barname a:hover {
  color: #00aeef;
}

.album-header-title-city {
  color: #999;
}

.album-header-info-container {
  font-size: 12pt;
  white-space: nowrap;
}

.album-header-info-container > span {
  display: inline-block;
}

.album-header-info-container a:hover {
  color: #00aeef;
}

/* обложка и миниатюры карточки */
/* фон виден, если файл картинки отсутствует/битый (в локальном дампе часть
   файлов нулевого размера) — тогда img скрывается по onerror */
.album-cover-container {
  background-color: #f0f0f0;
}

.album-cover-container img {
  display: block;
  width: 530px;
  height: 300px;
  object-fit: cover;
}

.album-cover-container-empty {
  width: 530px;
  height: 300px;
  background-color: #f0f0f0;
}

.album-photos-item {
  background-color: #f0f0f0;
}

.album-photos-item img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.album-photos-item:hover img {
  opacity: .85;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}

.photoreport-empty {
  padding: 30px 0 50px;
  font-size: 14pt;
  color: #999;
}

/* страница альбома */
.album-page-back {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 12pt;
  color: #999;
  text-decoration: none;
}

.album-page-back:hover {
  color: #00aeef;
}

.album-page-info {
  font-size: 12pt;
  padding-bottom: 20px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e6e6e6;
}

.album-page-info > span {
  display: inline-block;
  margin-right: 25px;
}

.album-page-info a:hover {
  color: #00aeef;
}

.album-photos-grid {
  overflow: hidden;
}

.album-photos-grid .album-photos-item {
  width: 180px;
  height: 180px;
  margin: 0 18px 18px 0;
}

.album-photos-grid .album-photos-item img {
  width: 180px;
  height: 180px;
}

.album-photos-grid .album-photos-item:nth-child(6n) {
  margin-right: 0;
}

#galleryLoader {
  padding: 25px 0 10px;
}

/* пагинация «показать еще» (если infinite scroll недоступен) */
.photoreport-more {
  display: block;
  margin: 30px auto 0;
  padding: 12px 0 10px;
  width: 320px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Proxima Nova Bold';
  color: #00aeef;
  border: 3px solid #00aeef;
}

.photoreport-more:hover {
  color: #fff;
  background-color: #00aeef;
}

/* ==================================================================
   ОТМЕТКИ ЛЮДЕЙ НА ФОТОГРАФИЯХ (новый дизайн)
   Классы .mark_div / .markwrap_div / .mark_title_div / .mark_a /
   .markdel_a и разметка #makemark / #markdiv / #markview взяты из старого
   дизайна (style/gallery/album_xhtml.css + clubbergallery/photo.tpl), чтобы
   js/photoRoutinues.js и js/jquery/jquery.marque.js работали без правок.
   ================================================================== */

/* --- прямоугольник отметки (как в старом дизайне) --- */
.mark_div,
.markwrap_div {
  position: absolute;
}

.mark_div {
  border: 1px dotted #ffd900;
  display: none;
}

.markwrap_div:hover .mark_div {
  display: block;
}

.mark_title_div {
  position: absolute;
  left: 0;
  top: 100%;
  color: #fff;
  background: #2461d8;
  font-weight: bold;
  font-size: 11px;
  line-height: 16px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* --- отметки на плитке альбома: рамка видна всегда, имя — при наведении --- */
.album-photos-item {
  position: relative;
}

.album-photos-marks {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* клик по плитке не перехватываем */
}

/* Координаты отметки (x/y/w/h) в веб-архиве не сохранились, поэтому рамку
   нарисовать нечем. Чтобы отмеченные люди всё равно были видны, имена
   показываем плашкой у нижнего края плитки, а не только в подсказке.
   Селекторы начинаются с .album-photos-item: ниже по файлу есть правила
   той же специфичности (.album-photos-item .mark_title_div { display: none }),
   и без этого они перебивали плашку. */
.album-photos-item .album-photos-marks-nopos {
  top: auto;
  bottom: 0;
  height: auto;
  min-height: 21px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  line-height: 15px;
}

.album-photos-item .album-photos-marks-nopos .markwrap_div,
.album-photos-item .album-photos-marks-nopos .mark_div {
  display: inline;
  border: 0;
  box-shadow: none;
}

.album-photos-item .album-photos-marks-nopos .mark_title_div {
  display: inline;
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  max-width: none;
}

.album-photos-item .album-photos-marks-nopos .markwrap_div + .markwrap_div .mark_title_div::before {
  content: ', ';
}

.album-photos-item .mark_div {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.album-photos-item .mark_title_div {
  display: none;
  font-size: 10px;
  line-height: 14px;
  padding: 1px 4px;
  max-width: 170px;
  overflow: hidden;
}

.album-photos-item:hover .mark_title_div {
  display: block;
}

/* --- просмотрщик фотографии --- */
#photoViewer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  overflow: auto;
}

.photoViewer-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
}

.photoViewer-box {
  position: relative;
  width: 1150px;
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  padding: 12px 20px 20px;
  background: #1c1c1c;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.photoViewer-close {
  position: absolute;
  right: 20px;
  top: 12px;
  z-index: 5;
  font-size: 12pt;
  color: #9a9a9a;
  text-decoration: none;
}

.photoViewer-close:hover {
  color: #00aeef;
}

.photoViewer-bar {
  height: 30px;
  line-height: 30px;
  font-size: 12pt;
}

.photoViewer-album {
  color: #9a9a9a;
  margin-right: 15px;
}

.photoViewer-num {
  color: #00aeef;
}

.photoViewer-arrow {
  float: right;
  margin-left: 12px;
  font-size: 14pt;
  color: #00aeef;
  text-decoration: none;
}

.photoViewer-arrow:hover {
  color: #fff;
}

.photoViewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  padding: 10px 0;
  text-align: center;
  overflow: auto;
}

#photo_holder {
  position: relative;
  display: inline-block;
  line-height: 0;
  background-color: #000;
}

#photo {
  position: relative;
  display: block;
}

#photo_img {
  display: block;
  max-width: 1100px;
  max-height: calc(100vh - 330px);
}

#photoViewer.mark-mode #photo_img {
  cursor: crosshair;
}

/* в просмотрщике отметки видно всегда (прямоугольник + имя под ним),
   в режиме выделения photoRoutinues.js прячет их сам */
#photo_holder .mark_div {
  display: block;
  border: 1px solid #00aeef;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

#photoViewerError {
  padding: 60px 0;
  font-size: 12pt;
  color: #9a9a9a;
}

.photoViewer-foot {
  padding-top: 12px;
}

#markview {
  font-size: 12pt;
  min-height: 22px;
  color: #cfcfcf;
}

#markview .mark_a {
  margin-right: 4px;
  color: #00aeef;
  text-decoration: none;
}

#markview .mark_a:hover {
  color: #fff;
}

#markview .markdel_a {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 10px 0 2px;
  vertical-align: middle;
  background: url(/images/st_btn_icons.gif) no-repeat 0 0;
}

#makemark {
  margin: 6px 0 12px;
}

#makemark .markact_a {
  display: inline-block;
  padding: 6px 16px;
  border: 2px solid #00aeef;
  color: #00aeef;
  font-family: 'Proxima Nova Bold';
  font-size: 11pt;
  text-transform: uppercase;
  text-decoration: none;
}

#makemark .markact_a:hover {
  color: #fff;
  background-color: #00aeef;
}

#markdiv {
  display: none;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px dashed #5a5a5a;
}

#helpdiv {
  display: none;
  margin-bottom: 8px;
  color: #ffd900;
}

#markdiv form {
  margin-bottom: 10px;
}

#markdiv label {
  margin-right: 6px;
  color: #cfcfcf;
}

#markdiv input[type="checkbox"] {
  margin: 0 16px 0 4px;
  vertical-align: middle;
}

#markdiv input[type="text"] {
  width: 280px;
  padding: 4px 8px;
  border: 1px solid #5a5a5a;
  background-color: #2b2b2b;
  color: #fff;
}

#markdiv .mark-save {
  display: inline-block;
  margin-right: 12px;
  padding: 6px 16px;
  background-color: #00aeef;
  color: #fff;
  text-decoration: none;
}

#markdiv .mark-cancel {
  color: #9a9a9a;
  text-decoration: none;
}

#markdiv .mark-cancel:hover {
  color: #fff;
}

/* --- подсказка автодополнения (js/jq_autocomplete.js) --- */
div.ac_results {
  z-index: 99999;
  border: 1px solid #5a5a5a;
  background-color: #fff;
}

div.ac_results ul {
  margin: 0;
  padding: 0;
  background-color: #fff;
  list-style: none;
}

div.ac_results ul li {
  list-style: none;
}

div.ac_results ul li a {
  display: block;
  padding: 4px 6px;
  color: #000;
  font-size: 12px;
  text-decoration: none;
}

div.ac_results img {
  float: left;
  margin-right: 8px;
  width: 32px;
}

.ac_even {
  background: #ececec;
}

.ac_odd {
  background: #fff;
}

.ac_over,
div.ac_results ul li a:hover {
  background: #ffe6c0;
  color: #000;
}

.ac_loading {
  background: #fff url('/images/ajax-loader.gif') right center no-repeat;
}

/* --- дополнено из архивной версии (Wayback) --- */
#photoReport .widget { margin-top: 0;
  margin-bottom: 40px; }
#photoReport .widget:last-child { margin-bottom: 0; }
.photoreport-album-info { width: 23.2%; }
.photoreport-album-content { width: 76.8%;
  padding-left: 30px;
  position: relative;
  height: 100%; }
.photoreport-album-content-cnt { margin-right: -40px; }
.widget-ad img { width: 100%; }
.widget-photoreport-info .widget-cnt { background-color: #d0f2ff;
  padding: 20px; }
.widget-photoreport-info-title { font-family: "Proxima Nova";
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px; }
.widget-photoreport-info-blk { margin-bottom: 25px; }
.widget-photoreport-info-blk:last-child { margin-bottom: 0; }
.widget-photoreport-info-persona-avatar { float: left;
  margin-right: 14px; }
.widget-photoreport-info-persona-info { padding-left: 74px; }
.widget-photoreport-info-persona-type { color: #555; }
.widget-photoreport-info-persona-name { font-size: 20px;
  color: #000; }
.widget-photoreport-info-date { margin-top: 10px;
  color: #555; }
.widget-photoreport-info-count-ico { display: table-cell;
  text-align: right;
  width: 32px;
  height: 32px;
  vertical-align: middle; }
.widget-photoreport-info-count-link { padding-left: 7px;
  display: table-cell;
  height: 32px;
  vertical-align: middle; }
.widget-photoreport-info-count a { color: #000; }
.widget-photoreport-info-share a { display: block;
  float: left;
  margin-right: 10px; }
.widget-photoreport-info-share a:last-child { margin-right: 0; }
.widget-photoreport-links-item { margin-bottom: 10px; }
.widget-photoreport-links-item-ico { display: table-cell;
  text-align: right;
  width: 45px;
  height: 45px;
  vertical-align: middle; }
.widget-photoreport-links-item-link { padding-left: 10px;
  display: table-cell;
  vertical-align: middle; }
.widget-photoreport-links-item a { color: #00aeef;
  font-size: 20px; }
.widget-some-photoreports-item { margin-bottom: 25px; }
.widget-some-photoreports-item:last-child { margin-bottom: 0; }
.widget-some-photoreports-item-image { overflow: hidden;
  max-height: 153px;
  display: block; }
.widget-some-photoreports-item-image img { width: 100%; }
.widget-some-photoreports-item-title { margin-top: 10px;
  margin-bottom: 5px;
  font-size: 20px; }
.widget-some-photoreports-item-place { text-transform: uppercase;
  margin-right: 10px;
  color: #555; }
.widget-some-photoreports-item-date { white-space: nowrap;
  color: #555; }

/* ==================================================================
   ФОТОАЛЬБОМ ПО МАКЕТУ «ДИЗАЙН 4» (Album.png, Album_marks.png,
   Album_comments.png, 06_Photos_in_album_big_photo.jpg).

   Раскладка: левая голубая колонка 23.2% (#d0f2ff — цвет замерен по
   Album.png), справа плотная сетка ровно 4 в ряд, под каждой плиткой
   тёмная полоса «номер + счётчики». Поп-ап просмотрщик — тёмный, снизу
   комментарии слева и отмеченные справа.

   Все селекторы ограничены .photoreport-album / #albumPhotos / #photoViewer:
   у .album-photos-item есть общие правила в common.css (страница персоны
   и т.п.) — их не трогаем.
   ================================================================== */

/* --- иконки: белые варианты спрайта и CSS-рисованные --- */
.ico-eye-white,
.ico-comment-white,
.ico-author-white,
.ico-photos-white {
  filter: brightness(0) invert(1);
}

.ico-eye-white {
  background-position: 0 -115px;
  width: 24px;
  height: 12px;
}

.ico-comment-white {
  background-position: -26px -115px;
  width: 19px;
  height: 18px;
}

.ico-author-white {
  background-position: -65px -115px;
  width: 26px;
  height: 20px;
}

.ico-photos-white {
  background-position: -93px -115px;
  width: 31px;
  height: 32px;
}

/* «отметить человека»: рамка-видоискатель с человечком внутри */
.ico-mark-cyan {
  background-image: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #00aeef;
  border-radius: 3px;
  box-sizing: border-box;
}

.ico-mark-cyan:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00aeef;
}

.ico-mark-cyan:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: #00aeef;
}

/* CSS-рисованные квадратные значки левой колонки */
.album-ico {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  box-sizing: border-box;
}

.album-ico:before,
.album-ico:after {
  content: '';
  position: absolute;
}

.album-ico-add:before {
  left: 4px;
  top: 4px;
  width: 12px;
  height: 12px;
  border: 2px solid #1a1a1a;
  border-radius: 2px;
}

.album-ico-add:after {
  left: 8px;
  top: 10px;
  width: 4px;
  height: 0;
  border-top: 2px solid #1a1a1a;
}

.album-ico-edit:before {
  left: 4px;
  top: 12px;
  width: 16px;
  height: 3px;
  background: #1a1a1a;
  transform: rotate(-45deg);
  transform-origin: left center;
}

.album-ico-edit:after {
  left: 3px;
  top: 17px;
  width: 18px;
  height: 2px;
  background: #1a1a1a;
}

.album-ico-plus {
  border-color: #00aeef;
}

.album-ico-plus:before {
  left: 4px;
  top: 9px;
  width: 12px;
  height: 2px;
  background: #00aeef;
}

.album-ico-plus:after {
  left: 9px;
  top: 4px;
  width: 2px;
  height: 12px;
  background: #00aeef;
}

/* --- хлебные крошки --- */
.album-breadcrumbs {
  padding-bottom: 25px;
  font-size: 13pt;
}

.album-breadcrumbs-root {
  color: #555;
  text-decoration: none;
  text-transform: uppercase;
}

.album-breadcrumbs-root:hover {
  color: #00aeef;
}

.album-breadcrumbs-sep {
  margin: 0 8px;
  color: #555;
}

.album-breadcrumbs-name {
  color: #555;
  text-decoration: none;
}

.album-breadcrumbs-name:hover {
  color: #00aeef;
}

.album-breadcrumbs-current {
  font-family: 'Proxima Nova Bold';
  font-size: 20pt;
  color: #1a1a1a;
}

/* --- две колонки --- */
.photoreport-album {
  position: relative;
}

.photoreport-album-info {
  float: left;
  width: 23.2%;
}

.photoreport-album-content {
  float: left;
  width: 76.8%;
  padding-left: 30px;
  box-sizing: border-box;
}

/* --- левая голубая колонка --- */
.album-side-card {
  background-color: #d0f2ff;
  padding: 20px;
}

.album-side-blk {
  margin-bottom: 22px;
}

.album-side-blk:last-child {
  margin-bottom: 0;
}

.album-side-title {
  margin-bottom: 10px;
  font-family: 'Proxima Nova Bold';
  font-size: 14pt;
  color: #1a1a1a;
}

.album-side-label {
  font-size: 11pt;
  color: #6b6b6b;
}

.album-side-value {
  font-size: 11pt;
  color: #1a1a1a;
}

.album-side-blk .album-side-value:last-child {
  margin-bottom: 0;
}

.album-side-persona-avatar,
.album-side-avatar {
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  margin-right: 14px;
  overflow: hidden;
  background-color: #ececec;
}

.album-side-avatar img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.album-side-persona-info {
  display: block;
  padding-top: 2px;
}

.album-side-persona-type {
  display: block;
  font-size: 11pt;
  color: #6b6b6b;
}

.album-side-persona-name {
  display: inline-block;
  font-family: 'Proxima Nova Bold';
  font-size: 15pt;
  color: #1a1a1a;
  text-decoration: underline;
}

a.album-side-persona-name:hover {
  color: #00aeef;
}

.album-side-count {
  display: table;
  margin-bottom: 8px;
}

.album-side-count:last-child {
  margin-bottom: 0;
}

.album-side-count-ico {
  display: table-cell;
  width: 34px;
  height: 34px;
  border: 1px solid #6fc9e8;
  border-radius: 4px;
  background-color: #eafaff;
  text-align: center;
  vertical-align: middle;
}

.album-side-count-txt {
  display: table-cell;
  padding-left: 10px;
  font-size: 11pt;
  color: #1a1a1a;
  text-decoration: none;
  vertical-align: middle;
}

a.album-side-count-txt {
  text-decoration: underline;
}

a.album-side-count-txt:hover {
  color: #00aeef;
}

.album-side-share-link {
  display: block;
  float: left;
  margin-right: 10px;
  line-height: 0;
  text-decoration: none;
}

.album-side-share-link:last-child {
  margin-right: 0;
}

.album-side-link {
  display: table;
  margin-bottom: 10px;
}

.album-side-link:last-child {
  margin-bottom: 0;
}

.album-side-link-ico {
  display: table-cell;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
}

.album-side-link-txt {
  display: table-cell;
  padding-left: 8px;
  font-size: 12pt;
  color: #1a1a1a;
  text-decoration: underline;
  vertical-align: middle;
}

.album-side-link-txt:hover {
  color: #00aeef;
}

/* --- две кнопки под голубым блоком --- */
.album-side-btn {
  display: block;
  margin-top: 12px;
  padding: 12px 10px;
  font-family: 'Proxima Nova Bold';
  font-size: 11pt;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #00aeef;
  background-color: #fff;
  border: 2px solid #00aeef;
  box-sizing: border-box;
}

.album-side-btn-accent {
  color: #fff;
  background-color: #00aeef;
  border-color: #00aeef;
}

.album-side-btn:hover {
  color: #fff;
  background-color: #1d8cc4;
  border-color: #1d8cc4;
}

.album-side-btn .ico,
.album-side-btn .album-ico {
  vertical-align: middle;
}

.album-side-btn .album-ico {
  border-color: #00aeef;
}

.album-side-btn .album-ico-plus:before,
.album-side-btn .album-ico-plus:after {
  background-color: #00aeef;
}

/* --- другие фотоотчеты --- */
.album-side-others {
  padding-top: 25px;
}

.album-side-others-title {
  margin-bottom: 12px;
  font-family: 'Proxima Nova Bold';
  font-size: 13pt;
  color: #1a1a1a;
}

.album-side-other {
  display: block;
  margin-bottom: 20px;
  text-decoration: none;
}

.album-side-other:last-child {
  margin-bottom: 0;
}

.album-side-other-img {
  display: block;
  overflow: hidden;
  background-color: #ececec;
}

.album-side-other-img img {
  display: block;
  width: 100%;
  height: auto;
}

.album-side-other-empty {
  display: block;
  width: 100%;
  height: 120px;
}

.album-side-other-title {
  display: block;
  margin-top: 6px;
  font-family: 'Proxima Nova Bold';
  font-size: 12pt;
  color: #1a1a1a;
}

.album-side-other:hover .album-side-other-title {
  color: #00aeef;
}

.album-side-other-info {
  display: block;
  margin-top: 2px;
  font-size: 10pt;
  color: #7a7a7a;
}

.album-side-other-place {
  margin-right: 8px;
  text-transform: uppercase;
}

.album-side-other-date {
  white-space: nowrap;
}

/* --- сетка фотографий: ровно 4 в ряд, полоса «номер + счётчики» --- */
.photoreport-album .album-photos-grid {
  overflow: visible;
}

.photoreport-album .album-photos-grid:after {
  content: '';
  display: block;
  clear: both;
}

.photoreport-album .album-photos-grid .album-photos-item {
  position: relative;
  display: block;
  float: left;
  width: 21.83%;
  height: 0;
  /* 21.83% * (142/190) = 16.31% — плитка повторяет пропорцию превью 190m.
     Процент считается от ширины родителя, поэтому высота держится ровно. */
  padding-bottom: 16.31%;
  margin: 0 4.22% 25px 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

.photoreport-album .album-photos-grid .album-photos-item:nth-child(4n) {
  margin-right: 0;
}

.photoreport-album .album-photos-grid .album-photos-item img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photoreport-album .album-photos-grid .album-photos-marks {
  height: 100%;
}

.photoreport-album .album-photos-grid .album-photos-marks-nopos {
  top: auto;
  bottom: 26px;
  height: auto;
}

/* полоса внизу плитки: номер слева, счётчики справа */
.album-photos-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  z-index: 3;
}

.album-photos-bar-num {
  float: left;
  color: #fff;
}

.album-photos-bar-cnt {
  float: right;
}

.album-photos-bar-item {
  display: inline-block;
  margin-left: 10px;
  color: #fff;
  white-space: nowrap;
}

.album-photos-bar-item .ico {
  margin-right: 3px;
  vertical-align: -2px;
}

.album-photos-bar-val {
  vertical-align: middle;
}

.album-photos-item:hover .album-photos-bar {
  background: rgba(0, 0, 0, 0.72);
}

/* --- страницы «ОТМЕЧЕНО» и «КОММЕНТАРИИ К АЛЬБОМУ» --- */
.album-view-note {
  margin-bottom: 20px;
  font-size: 11pt;
  color: #6b6b6b;
}

.album-row {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px dotted #d5d5d5;
}

.album-row:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.album-row-photo {
  display: block;
  float: left;
  width: 190px;
  height: 142px;
  margin-right: 30px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.album-row-photo img {
  display: block;
  width: 190px;
  height: 142px;
  object-fit: cover;
}

.album-row-photo:hover img {
  opacity: .85;
}

.album-row-body {
  margin-left: 220px;
}

.album-row-title {
  margin-bottom: 12px;
  font-size: 11pt;
  color: #6b6b6b;
}

.album-row-chips {
  margin-right: -10px;
}

.album-chip {
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  padding: 4px 10px 4px 4px;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 11pt;
  line-height: 28px;
}

.album-chip:hover {
  border-color: #00aeef;
  color: #00aeef;
}

.album-chip-avatar {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  background-color: #ececec;
}

.album-chip-name {
  vertical-align: middle;
}

.album-row-comment {
  margin-bottom: 16px;
}

.album-row-comment:last-child {
  margin-bottom: 0;
}

.album-chip-avatar-wr {
  display: block;
  float: left;
  width: 28px;
  margin-right: 10px;
}

.album-row-comment-body {
  display: block;
  margin-left: 38px;
}

.album-row-comment-head {
  display: block;
}

.album-row-comment-user {
  font-family: 'Proxima Nova Bold';
  color: #1a1a1a;
  text-decoration: none;
}

.album-row-comment-user:hover {
  color: #00aeef;
}

.album-row-comment-date {
  margin-left: 10px;
  font-size: 10pt;
  color: #9a9a9a;
}

.album-row-comment-text {
  display: block;
  font-size: 11pt;
  color: #333;
}

/* ==================================================================
   ПОП-АП ПРОСМОТРЩИК (06_Photos_in_album_big_photo.jpg)
   ================================================================== */
#photoViewer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  overflow: auto;
  color: #fff;
}

.photoViewer-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 20, 32, 0.98);
}

.photoViewer-box {
  position: relative;
  width: 1170px;
  max-width: 96%;
  margin: 0 auto;
  padding: 20px 30px 40px;
  box-sizing: border-box;
}

.pv-head {
  padding-bottom: 12px;
}

.pv-title {
  float: left;
  font-family: 'Proxima Nova Bold';
  font-size: 14pt;
  text-transform: uppercase;
  color: #fff;
}

.photoViewer-close {
  float: right;
  font-size: 11pt;
  color: #8fa3b8;
  text-decoration: none;
}

.photoViewer-close:hover {
  color: #00aeef;
}

.pv-close-x {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border: 1px solid #5d7a95;
  border-radius: 50%;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

.pv-bar {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11pt;
}

.pv-counters {
  float: left;
}

.pv-cnt {
  display: inline-block;
  margin-right: 18px;
  color: #cfd8e3;
}

.pv-cnt .ico {
  margin-right: 5px;
  vertical-align: -2px;
}

.photoViewer-num {
  float: right;
  color: #00aeef;
}

.photoViewer-stage {
  position: relative;
  padding: 18px 60px;
  text-align: center;
}

#photo_holder {
  position: relative;
  display: inline-block;
  line-height: 0;
  background-color: #000;
}

#photo {
  position: relative;
  display: block;
}

#photo_img {
  display: block;
  max-width: 100%;
  max-height: 62vh;
}

#photoViewer.mark-mode #photo_img {
  cursor: crosshair;
}

#photo_holder .mark_div {
  display: block;
  border: 1px solid #00aeef;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

#photoViewerError {
  padding: 60px 0;
  font-size: 12pt;
  color: #9a9a9a;
}

.pv-arrow {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #cfe0f0;
  font-size: 26pt;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  z-index: 5;
}

.pv-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.pv-arrow-prev {
  left: 0;
}

.pv-arrow-next {
  right: 0;
}

.pv-share-bar {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11pt;
}

.pv-of {
  float: left;
  color: #cfd8e3;
}

.pv-share {
  float: right;
}

.pv-share-title {
  margin-right: 10px;
  color: #cfd8e3;
}

.pv-share .album-side-share-link {
  display: inline-block;
  float: none;
  vertical-align: middle;
}

.pv-cols {
  padding-top: 22px;
}

.pv-col {
  width: 48%;
}

.pv-col-comments {
  float: left;
}

.pv-col-marks {
  float: right;
}

.pv-col-title {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: 'Proxima Nova Bold';
  font-size: 12pt;
  text-transform: uppercase;
  color: #fff;
}

.pv-comment {
  margin-bottom: 14px;
}

.pv-comment:last-child {
  margin-bottom: 0;
}

.pv-comment-avatar {
  display: block;
  float: left;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  overflow: hidden;
  background-color: #22303f;
}

.pv-comment-avatar img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.pv-comment-body {
  display: block;
  margin-left: 42px;
}

.pv-comment-user {
  font-family: 'Proxima Nova Bold';
  color: #fff;
  text-decoration: none;
}

.pv-comment-user:hover {
  color: #00aeef;
}

.pv-comment-date {
  margin-left: 10px;
  font-size: 10pt;
  color: #7d8fa3;
}

.pv-comment-text {
  display: block;
  font-size: 11pt;
  color: #dfe7ef;
}

.pv-comments-empty {
  font-size: 11pt;
  color: #7d8fa3;
}

.pv-comment-form {
  margin-top: 18px;
}

.pv-comment-form .pv-comment-avatar {
  background-color: transparent;
}

.pv-comment-form form {
  display: block;
  margin-left: 42px;
}

.pv-comment-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 0;
  background-color: #fff;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 11pt;
  resize: vertical;
}

.pv-comment-actions {
  padding-top: 8px;
  text-align: right;
}

.pv-comment-send {
  padding: 8px 26px;
  border: 2px solid #00aeef;
  background-color: transparent;
  color: #00aeef;
  font-family: 'Proxima Nova Bold';
  font-size: 11pt;
  text-transform: uppercase;
  cursor: pointer;
}

.pv-comment-send:hover {
  color: #fff;
  background-color: #00aeef;
}

.pv-comment-send[disabled] {
  opacity: .5;
  cursor: default;
}

/* отмеченные на фото — чипы (разметку собирает js/photomarks_v2.js) */
.pv-marks-list {
  margin-right: -8px;
}

.pv-marks-list .mark_a {
  display: block;
  float: left;
  margin: 0 8px 8px 0;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  line-height: 24px;
  color: #dfe7ef;
  font-size: 10pt;
  text-decoration: none;
}

.pv-marks-list .mark_a:hover {
  border-color: #00aeef;
  color: #00aeef;
}

.pv-mark-avatar {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  background-color: #22303f;
}

.pv-mark-name {
  vertical-align: middle;
}

.pv-marks-list .markdel_a {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 2px 0 8px;
  vertical-align: middle;
  background: url(/images/st_btn_icons.gif) no-repeat 0 0;
}

#makemark {
  margin-top: 6px;
}

#makemark .markact_a {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid #00aeef;
  color: #00aeef;
  font-family: 'Proxima Nova Bold';
  font-size: 10pt;
  text-transform: uppercase;
  text-decoration: none;
}

#makemark .markact_a:hover {
  color: #fff;
  background-color: #00aeef;
}

#makemark .ico-mark-cyan {
  margin-right: 8px;
}

#markdiv {
  display: none;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #4a5a6d;
}

#helpdiv {
  display: none;
  margin-bottom: 8px;
  color: #ffd900;
}

#markdiv form {
  margin-bottom: 10px;
}

#markdiv label {
  margin-right: 6px;
  color: #cfcfcf;
}

#markdiv input[type="checkbox"] {
  margin: 0 16px 0 4px;
  vertical-align: middle;
}

#markdiv input[type="text"] {
  width: 260px;
  padding: 4px 8px;
  border: 1px solid #5a5a5a;
  background-color: #2b2b2b;
  color: #fff;
}

#markdiv .mark-save {
  display: inline-block;
  margin-right: 12px;
  padding: 6px 16px;
  background-color: #00aeef;
  color: #fff;
  text-decoration: none;
}

#markdiv .mark-cancel {
  color: #9a9a9a;
  text-decoration: none;
}

#markdiv .mark-cancel:hover {
  color: #fff;
}

body.marks-viewer-open {
  overflow: hidden;
}

/* FOTO-ALBUM-MOCKUP: явная очистка float.
   В простом .clearfix:after нет display:block, поэтому clear не работает
   и колонки страницы альбома выпадают из потока (футер налезал на сетку). */
.photoreport-album:after,
#photoReports .wrapper-gap:after,
.album-side-persona:after,
.album-side-share:after,
.album-row:after,
.album-row-chips:after,
.pv-head:after,
.pv-bar:after,
.pv-share-bar:after,
.pv-cols:after,
.pv-comment:after,
.pv-comment-form:after,
.pv-marks-list:after {
  content: '';
  display: block;
  clear: both;
}