/* Тамбы webm-видео со старого сайта (norma/topic.css): пунктирная рамка, бейдж «webm», рука.
   Курсор вешается на обёртку — картинки контента получают cursor: inherit из темы,
   и рука от обёртки доходит до тамба без конфликта специфичности */
.webm {
	border: thin dashed #008000;
}
.webm-wrapper {
	position: relative;
	cursor: pointer;
}
.webm-wrapper:before {
	position: absolute;
	content: "webm";
	color: #4679BD;
	font-size: 10px;
	font-family: 'Courier New', Courier, monospace;
	background: rgba(255,255,255,0.6);
	padding: 0 4px;
	z-index: 1;
	font-smooth: never;
	-webkit-font-smoothing: none;
}
.webm-wrapper:hover:before {
	content: "";
}
/* youtube thumbnails */
[data-youtube-id] {
	width: 100%;
	position: relative;
	cursor: pointer;
	margin: 5px auto;
	display: block;
	/* тёмный фон как у плеера: виден при загрузке превью и вместо не дозагрузившихся картинок */
	background-color: #000;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
[data-youtube-id] > div {
	/* 16:9 через padding-хак — обложка тех же пропорций, что и плеер */
	padding-top: 56.25%;
	background: url(/_run/assets/75bf4923/youtube_preload_blank.png) no-repeat center center;
	background-size: auto;
}
iframe {
	margin: 5px auto;
	display: block;
	background-size: contain;
}
iframe[src=""] {
	display: none;
}
/* плеер после клика: не вылезает на узких экранах, пропорции как у обложки */
iframe[src^="https://www.youtube.com/embed/"] {
	max-width: 100%;
	aspect-ratio: 16/9;
	height: auto;
}
video {
	max-width: 100%;
}
@charset "UTF-8";
/*
 * jQuery File Upload Plugin CSS 1.3.0
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

.fileinput-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px;
  direction: ltr;
  cursor: pointer;
}

/* Fixes for IE < 8 */
@media screen\9 {
  .fileinput-button input {
    filter: alpha(opacity=0);
    font-size: 100%;
    height: 100%;
  }
}
@charset "UTF-8";
/*
 * jQuery File Upload UI Plugin CSS 9.0.0
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}
.progress-animated .progress-bar,
.progress-animated .bar {
  background: url("/_run/assets/2239ea7d/progressbar.gif") !important;
  filter: none;
}
.fileupload-process {
  float: right;
  display: none;
}
.fileupload-processing .fileupload-process,
.files .processing .preview {
  display: block;
  width: 32px;
  height: 32px;
  background: url("/_run/assets/2239ea7d/loading.gif") center no-repeat;
  background-size: contain;
}
.files audio,
.files video {
  max-width: 300px;
}

@media (max-width: 767px) {
  .fileupload-buttonbar .toggle,
  .files .toggle,
  .files .btn span {
    display: none;
  }
  .files .name {
    width: 80px;
    word-wrap: break-word;
  }
  .files audio,
  .files video {
    max-width: 80px;
  }
  .files img,
  .files canvas {
    max-width: 100%;
  }
}
#multiple-file-upload .table > tbody > tr > td {
	vertical-align: middle;
}

#multiple-file-upload .size {
	color: #000;
	white-space: nowrap;
}

#multiple-file-upload .table {
	margin-bottom: 0;
}

.multiple-file-upload-block {
	margin: 10px 0;
}

ul.multiple-file-upload {
	counter-reset: mfu-item;
	margin: 5px 0 0;
}

ul.multiple-file-upload > li {
	counter-increment: mfu-item;
}

ul.multiple-file-upload > li::before {
	content: counter(mfu-item) ". ";
}

/* Ссылка «показать остальные» — без номера */
ul.multiple-file-upload > li.mfu-more {
	counter-increment: none;
}

ul.multiple-file-upload > li.mfu-more::before {
	content: none;
}

#multiple-file-upload .fileinput-button input {
	bottom: 0;
}

#multiple-file-upload .progress {
	margin-bottom: 0;
}
.nsfw-pictures canvas {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;

	vertical-align: top;
}

.nsfw-pictures canvas[align="right"] {
	float: right;
	margin: 0 0 12px 12px;
}

.nsfw-pictures canvas[align="left"] {
	float: left;
	margin: 0 12px 12px 0;
}

.nsfw-pictures canvas.image-center {
	display: block;
	margin: 0 auto;
}

.no-js .nsfw-pictures .topic-text img,
.no-js .nsfw-pictures .topic-photoset img {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}

.no-js .nsfw-pictures .topic-text img:hover,
.no-js .nsfw-pictures .topic-photoset img:hover {
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: none;
}

.nsfw-pictures.topic {
	overflow: visible;
}

.content {
	overflow: hidden;
}

/* в теме experience simple недостаточно точные селекторы, так что переопределяем тут */
.content .topic .topic-footer ul ul {
	height: auto;
	padding: 0;
}

.content .topic .topic-footer ul li li {
	display: block;
	float: none;
	padding: 0;
}
/*
 * Иконка кнопки «Ромадзи» в тулбаре MarkItUp!
 * (свои картинки вместо скинового спрайта editor_icons.png)
 */
.markItUp .editor-romaji a {
	background: url(/_run/assets/12a2c6ac/romaji.png) no-repeat;
}
.markItUp .editor-romaji a:hover,
.markItUp .editor-romaji a:active {
	background: url(/_run/assets/12a2c6ac/romaji-active.png) no-repeat;
}

/*
 * Стиль контента: ромадзи хранится как <span class="romaji" title="..."> —
 * пунктирное подчёркивание + курсор «помощь» (нативный тултип по title).
 * Правило глобальное: класс romaji порождается только колбэком плагина,
 * других источников нет — покрывает контент топиков (.topic-text),
 * комментариев (.comment-text), кастом-полей (panel-body p) и прочие
 * контексты (лента, дайджест) без дублирования скоупов скина.
 */
.romaji {
	border-bottom: 1px dotted #999;
	cursor: help;
}
.user-rating-container .vote-total {
    padding: 12px;
    margin: 0;
    border-radius: 24px;
    color: white;
}

.user-rating-container span.vote-count-positive, .user-rating-container span.vote-total {
    background-color: rgb(87, 168, 57) !important;
}

.user-rating-container span.vote-count-negative, .user-rating-container span.vote-total {
    background-color: rgb(196, 58, 58);
}

.user-rating-container .user-rating-header {
    margin-bottom: 24px;
    margin-top: 6px;
    padding-top: 6px;
    border-radius: 0;
}

.user-info .user-power-container > div {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
    padding-top: 12px;
}

.user-power-header, .user-rating-header {
    line-height: 20px;
    color: #1c374c;
    font-size: 18px;
    margin-bottom: 10.5px;
}

.user-power-container .user-power {
    padding: 12px;
    margin: 0;
    border-radius: 24px;
    background-color: #dae2e5;
}

.vote-popover + .popover {
    border-radius: 0 !important;
    padding: 0 !important;
    max-height: 126px !important;
    height: 126px !important;
    max-width: 72px !important;
    width: 72px !important;
    margin-left: -3px !important;
    border: 1px solid rgb(188, 188, 188) !important;
}

.vote-popover + .popover .arrow::after {
    border-top-color: rgb(245, 246, 248) !important;
}

.vote-popover + .popover .popover-content {
    padding: 0 !important;
    background: rgb(245, 246, 248) !important;
    height: 100% !important;

}

.vote-popover + .popover ul {
    display: block !important;
    width: 100%;
    position: absolute;
    bottom: 12px;
}

.vote-popover + .popover ul li.positive { color: rgb(87, 168, 57); }
.vote-popover + .popover ul li.abstain { color: rgb(147, 166, 173)}
.vote-popover + .popover ul li.negative {  color: rgb(196, 58, 58); }
.vote-popover + .popover ul li {
    display: block !important;
    padding: 2px 0 !important;
    text-align: center;
}


.graph-container {
    height: 100px;
}
.graph-background {
    background-color: rgb(147, 166, 173);
    position: absolute;
    width: 48px;
    height: 48px;
    margin: 11px;
    border-radius: 48px;

}
.graph {
    position: absolute;
    width: 48px;
    height: 48px;
    margin: 11px;
    border-radius: 48px;
    clip: rect(0px, 48px, 48px, 24px);
}
.graph-holder {
    position: absolute;
    padding: 15px 0;
    margin: 15px;
    z-index: 2;
    text-align: center;
    font-size: 13px;
    color: #1c374c;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 20px;
}
.graph > div {
    position: absolute;
    width: 48px;
    height: 48px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    clip: rect(0px, 24px, 48px, 0px);
}

.graph-negative {
    /*-webkit-transform:rotate(0deg);*/
    /*-moz-transform:rotate(0deg);*/
    /*-o-transform:rotate(0deg);*/
    /*transform:rotate(0deg);*/
}
.graph-negative > div {
    background-color: rgb(196, 58, 58);
    /*-webkit-transform:rotate(120deg);*/
    /*-moz-transform:rotate(120deg);*/
    /*-o-transform:rotate(120deg);*/
    /*transform:rotate(120deg);*/
}

.graph-positive {
    /*-webkit-transform:rotate(0deg);*/
    /*-moz-transform:rotate(0deg);*/
    /*-o-transform:rotate(0deg);*/
    /*transform:rotate(0deg);*/
}
.graph-positive > div {
    background-color: rgb(87, 168, 57);
    /*-webkit-transform:rotate(120deg);*/
    /*-moz-transform:rotate(120deg);*/
    /*-o-transform:rotate(120deg);*/
    /*transform:rotate(120deg);*/
}