/* =========== © 2024 Centroarts.com =========== */

body { background-color: var(--post-bg-color); }
.page-block:not(.conversation) {
	--page-pad: 24px;
	max-width: 680px; padding: var(--page-pad);
	margin-left: auto; margin-right: auto; position: relative;
}
.page-block-back { display: none; }

@media (min-width: 920px) {
	.page-block-back { display: block !important; position: absolute; left: 0; top: 0; bottom: 0; margin-left: -64px; padding-top: calc(var(--page-pad) - 4px); }
	.page-block-back a {
		position: sticky; top: calc(var(--gap) + var(--header-height) + var(--page-pad) - 4px); border-radius: 50%;
		display: flex; align-items: center; padding: 12px; width: 48px; height: 48px;
		background-color: rgba(var(--btn-tone-color-rgb), 0.1); color: var(--btn-tone-color);
		transition: background-color .2s ease, transform .2s ease;
	}
	.page-block-back a:hover { background-color: rgba(var(--btn-tone-color-rgb), 0.2); }
	.page-block-back a:active { transform: scale(0.9); }
	.page-block-back a > span { display: none; }
}

/* --- ADDNEWS --- */
.nav-tabs { display: flex; box-shadow: inset 0 -2px 0 0 rgba(var(--text-color-rgb), 0.15); margin-bottom: 32px; }
.nav-tabs .nav-item > a {
	display: block; padding: 12px 0; color: inherit !important; text-decoration: none !important;
	font-weight: bold; margin-right: 24px; font-size: var(--fs-sm); opacity: .6;
	transition: box-shadow .2s ease, opacity .2s ease;
}
.nav-tabs .nav-item:last-child > a { margin-right: 0; }
.nav-tabs .nav-item > a:hover { opacity: .9; }
.nav-tabs .nav-item.active > a { box-shadow: inset 0 -2px 0 0 var(--link-color); opacity: 1; cursor: default; }

.form-control_img {
	border: 1px solid rgba(var(--text-color-rgb), 0.15);
	padding: 12px; border-radius: var(--field-radius);
	user-select: none;
}
.has-success .form-control_img { border-color: var(--green-color); }
.fc_img_left {
	position: relative; overflow: hidden; background-color: rgba(var(--text-color-rgb), 0.05);
	min-width: 130px; border-radius: 4px;
}
.fc_img_left .cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.fc_img_left > svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(var(--text-color-rgb), 0.3); }
.fc_img_left > .img_del {
	position: absolute; z-index: 1; cursor: pointer; right: 0; top: 0;
	background-color: rgba(0, 0, 0, 0.2); width: 2rem; height: 100%; padding: 0.375rem;
	border: 0 none; color: #fff;
}
.fc_img_left > .img_del i { opacity: 0.8; }

@media (min-width: 576px) {
	.form-control_img { display: flex; }
	.fc_img_right { flex: 1 1 auto; }
	.fc_img_left { margin-right: 12px; }
	.upload-link { display: flex; }
	.upload-link .btn { margin-left: 8px; }
}
@media (max-width: 575px) {
	.fc_img_left { padding-top: 56.5%; margin-bottom: 12px; }
	.upload-link .btn { margin-top: 8px; width: 100%; }
}

@media (min-width: 992px) {
	.fc_img_left > .img_del {
		transform: translateX(100%); opacity: 0;
		transition: transform ease 0.2s, opacity ease 0.2s;
	}
	.fc_img_left:hover > .img_del { transform: translateX(0); opacity: 1; }
	.fc_img_left:hover > .img_del:hover i { opacity: 1; }
}

.dot_tablist { display: flex; margin-left: -12px; margin-top: -12px; font-size: var(--fs-sm); }
.dot_tablist .tab-item { display: flex; align-items: center; color: inherit; padding: 12px; text-decoration: none !important; }
.dot_tablist .tab-item::before {
	display: block; content: ""; width: 18px; height: 18px; border-radius: 50%; margin-right: 8px;
	border: 0px solid var(--post-bg-color); box-shadow: 0 0 0 1px rgba(var(--text-color-rgb), .1); background-color: var(--post-bg-color);
	transition: border .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.dot_tablist .tab-item.active::before { border: 3px solid var(--post-bg-color); box-shadow: 0 0 0 1px rgba(var(--link-color-rgb), .2); background-color: var(--link-color); }
.dot_tablist .tab-item:not(.active) { opacity: .7; }

.upload-btn {
	position: relative; box-shadow: inset 0 0 0 1px rgba(var(--text-color-rgb), .1);
	border-radius: var(--field-radius); line-height: 24px;
	height: 48px; padding: 12px; text-align: center; cursor: pointer;
	transition: color 0.2s ease, box-shadow 0.2s ease; overflow: hidden;
}

.upload-btn .qq-upload-button { position: static !important; overflow: visible !important; }
.upload-btn .moxie-shim { position: absolute; left: 0 !important; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; }
.upload-btn input { opacity: 0; z-index: 2 !important; cursor: pointer; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 48px !important; }
.upload-btn .qq-upload-button.disabled input { cursor: default !important; }
.upload-btn .qq-upload-button.disabled { opacity: 0.3; }
.form-control_img .progress { position: absolute; left: 0.25rem; bottom: 0.25rem; right: 0.25rem; height: 0.125rem;  }
.form-control_img .progress-bar-text,
.form-control_img .progress-bar > span { display: none !important; }
.form-control_img .progress-bar { transition: width 0.5s ease; height: 100%; display: block; background-color: var(--link-color); border-radius: var(--field-radius); }

.upload-btn .qq-upload-button.btn { padding: inherit; color: inherit !important; background-color: inherit; font-weight: inherit; transition: color .2s ease; }
.upload-btn:hover .qq-upload-button.btn:not(.disabled) { color: var(--link-color) !important; }
.upload-btn:has(input:disabled) .qq-upload-button.btn:not(.disabled) { opacity: 0.3; cursor: default !important; color: var(--text-color) !important; }

.rel_links { font-size: var(--fs-xsm); color: rgba(var(--link-color-rgb), 0.7); }
.rel_links > li { margin-top: 8px; }


/* Регистрация */
.regtext { margin: 0 0 var(--gap) 0; }
.social-register {
	margin-bottom: var(--gap); padding-bottom: var(--gap);
	border-bottom: 1px solid rgba(var(--text-color-rgb), 0.1);
}
.social-register .fw-b { margin-bottom: 8px; }

.login-check { position: relative; }
.login-check > input { padding-right: 120px; }

.btn-check {
	position: absolute; right: 0; top: 0; color: inherit;
	font-weight: bold; padding: 12px; height: 48px; line-height: 24px;
}

#result-registration li { list-style: none; font-size: 85%; margin-top: .5em; }

.static-text form#registration { display: flex; justify-content: center; }

/* STATS */
.page-stats .tabs { display: flex; flex-wrap: wrap; justify-content: center; background-color: rgba(var(--btn-tone-color-rgb), 0.05); border-radius: var(--drop-radius); }
.tabs > input[type="radio"] { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; }
.tabs > label {
	position: relative; padding: 4px 12px; margin: 24px 4px 0 4px; line-height: 16px; height: 24px; font-size: 12px; text-transform: uppercase;
	cursor: pointer; font-weight: bold; color: inherit; box-shadow: inset 0 0 0 1px rgba(var(--text-color-rgb), 0.1);
	opacity: 0.5; transition: color .2s ease, opacity .2s ease; border-radius: 12px;
}

.tabs > input:checked + label { color: var(--link-color); opacity: 1; box-shadow: inset 0 0 0 1px rgba(var(--btn-tone-color-rgb), 0.2); }

.page-stats .tab-content { width: 100%; margin-top: var(--gap); }
.page-stats .tab-content .tab-pane { display: none; }
.page-stats .tabs > input#stat-tab1:checked ~ .tab-content > #tab1,
.page-stats .tabs > input#stat-tab2:checked ~ .tab-content > #tab2,
.page-stats .tabs > input#stat-tab3:checked ~ .tab-content > #tab3 { display: flex !important; }

.stat_group { margin-top: var(--gap); }
.stat_group > .title { font-size: var(--fs-lg); margin-top: 0; margin-bottom: 16px; font-weight: bold; }
.stat_group > ul { list-style: none; padding: 0; margin: 0; }
.stat_group > ul > li { display: flex; padding: 16px 0; border-top: 1px solid rgba(var(--text-color-rgb), 0.1); }
.stats-list-left { flex: 1 1 auto; }
.stats-list-right { font-weight: bold; padding-left: 8px; }

.stats_big { max-width: 800px; margin: 32px auto; }
.stats_big { text-align: center; padding-left: 8px; padding-right: 8px; }
.stats_big_item { display: block; flex: 0 0 calc(100% / 3); padding: 0 8px; font-size: var(--fs-sm); }
.stats_big_item .title { display: block; margin: 0 0 8px 0; font-size: calc(32px + 1vw); line-height: 1; }

@media (max-width: 575px) {
	.stats_big_item .c-muted { font-size: var(--fs-sm); }
}

.stat-tabs { text-align: center; display: flex; justify-content: center; font-size: .875rem; font-weight: bold; text-transform: uppercase; }
.stat-tabs a { padding: .5rem 1rem; line-height: 1.5rem; text-decoration: none !important; border-radius: .125rem; }
.stat-tabs a.active { background-color: #9c373a; color: #fff; }

/* - TABLE - */
.table-box {
	overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0;
	border: 1px solid rgba(var(--text-color-rgb), 0.1); border-radius: 6px; font-size: var(--fs-sm);
}
.table-box table { margin: 0 !important; }

table.table { width: 100%; margin: 0; }
table.table td, table.table th { padding: 12px 8px; vertical-align: top; border-bottom: 1px solid rgba(var(--text-color-rgb), 0.1); }
table.table thead td { padding: 8px; vertical-align: bottom; text-transform: uppercase; font-size: var(--fs-xsm); font-weight: bold; color: inherit; }
table.table tbody tr:last-child > * { border-bottom-width: 0; }

/* Настройка стандартной капчи */
.c-capcha { position: relative; display: flex; }
.c-capcha > a { margin-right: 6px; }
.c-capcha img {
	position: relative; display: block;
	width: 120px; height: 48px; border-radius: var(--field-radius);
	z-index: 1; transition: all ease .2s;
}
.c-capcha:hover img {  box-shadow: 0 6px 20px 0 rgba(0,0,0,0.2); transform: scale(1.3); border-color: transparent; }
.c-capcha > input { float: left; width: 120px; text-align: center; }

/* Настройка стандартной капчи при ответах на комментарии */
.dle-captcha { position: relative; }
.dle-captcha:after { clear: both; display: block; content: ""; }
.dle-captcha > a { float: left; margin-right: 5px; }
.dle-captcha img {
	position: relative;
	display: block;
	width: 130px; height: 46px;
	-webkit-transition: all ease .2s; transition: all ease .2s;
}
.dle-captcha > input { float: left; width: 130px; }