/* CSS Module Ranking */

.ratednews-page .speedbar { margin-bottom: 20px; font-size: 12px; }
.ranking-filter { margin-bottom: 30px; }
.ranking-filter * { box-sizing: border-box; }
.ranking-filter + .title { margin-top: 0; }

.rank-range-list { display: flex; }
.rank-range-item {
	flex: 1; display: flex; color: inherit; text-decoration: none !important; min-height: 56px; min-width: 96px;
	flex-direction: column; align-items: center; justify-content: center; transition: color .2s ease;
}

.rank-range-item * { display: block; line-height: 16px; }
.rank-range-item > .title { font-weight: bold; }
.rank-range-item.active { pointer-events: none; color: #93AB7B; }

.rank-sort-list { display: flex; align-items: center; }
.rank-sort-item.active { pointer-events: none; }

@media (max-width: 639px) {
	.rank-range-item, .rank-sort { border-radius: 8px; background-color: #3B3B3B80; }
	.rank-range-item:not(:first-child) { margin-left: 8px; }
	.rank-range-item.active { background-color: #93AB7B1A; }

	.rank-sort { text-align: center; margin-top: 8px; }
	.rank-sort-label { display: block; font-size: 11px; line-height: 8px; padding: 8px; text-transform: uppercase; text-indent: .8em; letter-spacing: .8em; opacity: .5; }
	.rank-sort-list > a { width: 100%; max-width: 20%; flex: 0 0 20%; height: 36px; line-height: 20px; padding: 8px; color: inherit; position: relative; text-decoration: none !important; }
	.rank-sort-list > a:first-child { border-bottom-left-radius: 8px; }
	.rank-sort-list > a:last-child { border-bottom-right-radius: 8px; }

	.rank-sort-item .title { opacity: 0; left: 0; top: 0; width: 1px; height: 1px; position: absolute; pointer-events: none; }
	.rank-sort-item .rank-sort-icon { display: block !important; width: 20px; height: 20px; line-height: 20px; font-size: 17px; margin: 0 auto; }
	.rank-sort-item.active { color: #93AB7B; background-image: linear-gradient(180deg, #93AB7B00, #93AB7B1A); }

	.ico-Rating::before { content: "\f005"; }
	.ico-Comments::before { content: "\f086"; }
	.ico-Views::before { content: "\f06e"; }
	.ico-Bookmarks::before { content: "\f02e"; }
	.ico-Chapters::before { content: "\f02d"; }

}
@media (max-width: 575px) {
	.rank-range { overflow: hidden; margin-left: -20px; margin-right: -20px; }
	.rank-range-list::after, .rank-range-list::before { content: "" ; min-width: 20px; max-width: 20px; height: 20px; }
	.rank-range-list { padding-bottom: 1.5rem; margin-bottom: -1.5rem; overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 640px) {
	.ranking-filter { background-color: #3B3B3B80; border-radius: 10px; }
	.rank-range { border-bottom: 1px solid #3B3B3B; }
	
	.rank-range-item:first-child { border-top-left-radius: 10px; }
	.rank-range-item:last-child { border-top-right-radius: 10px; }
	.rank-range-item.active { background-image: linear-gradient(0deg, #93AB7B00, #93AB7B1A); }

	.rank-sort { display: flex; align-items: center; padding: 12px; }
	.rank-sort-item, .rank-sort-label { height: 32px; line-height: 15px; padding: 8px 10px 7px 10px; text-decoration: none !important; color: inherit; border: 1px solid; }
	.rank-sort-label { border-color: transparent; margin-left: -10px; margin-right: -8px; }
	.rank-sort-item {
		border-radius: 6px; font-weight: bold; border-color: #FFFFFF1A; margin-left: 8px;
		transition: border-color .2s ease, box-shadow .2s ease;
	}
	.rank-sort-item.active {
		border-color: #93AB7B !important; box-shadow: 0 0 6px 0 #93AB7B99, inset 0 0 6px 0 #93AB7B99;
	}
}
@media (min-width: 992px) {
	.rank-sort-item:hover { border-color: #FFFFFF33; }
	.rank-range-item:hover { color: #fff; }
}

.ranking__empty {
	display: flex; justify-content: center; align-items: center;
	font-size: 1.3em; height: 100px;
}

/* STORY */
.fit-cover { position: relative; display: flex; overflow: hidden; flex-direction: column; flex-grow: 1; background-color: #3B3B3B80; }
.fit-cover img {
	position: absolute; top: 0; left: 50%; display: block;
	min-width: 100%; height: 100%; transform: translateX(-50%);
	object-fit: cover; object-position: center center;
	-o-object-position: center center; -o-object-fit: cover;
}

.rank-story, .rank-story * { box-sizing: border-box; }
.rank-story { position: relative; }
.rank-story > .title { font-size: 16px; margin-bottom: 2px; margin-top: 0; }
.rank-story > .title a { color: inherit; text-decoration: none !important; transition: color .2s ease; }
.rank-story > .title a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 1; }

.rank-story .cover-img .fit-cover { width: 72px; height: 100px; border-radius: 6px; box-shadow: 0 8px 16px 0 #00000026; }

.rank-story-genre { display: flex; overflow: hidden; pointer-events: none; }
.rank-story-genre::after, .rank-story-genre::before { content: ""; position: relative; z-index: 3; width: 1px; background-color: #474747; box-shadow: 0 0 18px 18px #474747; pointer-events: none; }
.rank-story-genre::before { display: none; }

.rank-story-genre > .small { flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.rank-story-genre a { pointer-events: none; }

.rank-story-cont { margin: 10px 0; }
.moreless__toggle { color: #95ac7c; }

.rank-story-tools { display: flex; align-items: center; white-space: nowrap; }
.rank-story-tools .fav_btn { margin: -12px -16px; }

.rank-story-tools .addlist .trigger, .rank-story-genre a, .moreless__toggle { position: relative; z-index: 2; }
.rank-story-data { margin-left: auto; }
.rank-story-data-val { font-weight: bold; }

.rank-story-counter { position: absolute; left: 0; top: 0; z-index: 1; margin-left: -4px; margin-top: -4px; pointer-events: none; }
.rank-story-counter:after {
	background-color: #5F5F5F70; color: inherit; font-size: 12px; letter-spacing: -0.05em; text-indent: -0.05em;
	font-weight: bold; display: block; box-sizing: border-box; width: 26px; height: 20px; padding: 3px 0 1px 0;
	line-height: 16px; text-align: center; border-radius: 12px;
	backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
	content: counter(ranking-counter, decimal-leading-zero);
}

.rank-story:nth-child(1) .rank-story-counter:after { background-color: #F4C36570; color: #fff; }
.rank-story:nth-child(2) .rank-story-counter:after { background-color: #8A959B70; color: #fff; }
.rank-story:nth-child(3) .rank-story-counter:after { background-color: #D9944E70; color: #fff; }

@media (max-width: 639px) {
	.rank-story-data { font-size: 12px; color: #999999; }
	.rank-story-data > i { margin-right: 4px; }
	.v-mobile { display: inline !important; margin-left: 4px; }
}
@media (max-width: 575px) {
	.rank-story { padding: 20px; padding-bottom: 0; margin-bottom: 20px; border-top: 1px solid #3B3B3B; }
	.rank-story .cover-img { float: left; margin: 0 15px 5px 0; position: relative; }
	.rank-story-cont { color: #bdbdbd }
	.rank-story-cont::after { content: ""; display: block; clear: both; }
	.rank-story-tools { margin-top: 10px; }
	.rank-story-genre, .rank-story { margin-left: -20px; margin-right: -20px; }

	.rank-story-genre { pointer-events: auto; position: relative; z-index: 2; overflow: hidden; }
	.rank-story-genre::before { display: block; }
	.rank-story-genre > .small { padding-bottom: 1.5rem; margin-bottom: -1.5rem; overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.rank-story-genre > .small::after, .rank-story-genre > .small::before { content: "" ; display:inline-block; min-width: 20px; max-width: 20px; height: 10px; }

}
@media (min-width: 576px) {
	.rank-story { display: flex; flex-direction: column; min-height: 152px; padding-left: 120px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #3B3B3B; }
	.rank-story > .title { order: -1; }
	.rank-story-genre { order: 0; }
	.rank-story-cont { order: 1; margin-bottom: 14px; }
	.rank-story-tools { order: 2; }

	.rank-story .cover-img { position: absolute; left: 0; top: 0; }
	.rank-story .cover-img .fit-cover { width: 100px; height: 128px; }

	.rank-story-counter { margin-left: -16px; margin-top: 12px; }
	.rank-story-counter:after { font-size: 14px; width: 32px; height: 24px; padding: 5px 4px 3px 4px; }
}
@media (min-width: 640px) {
	.rank-story { padding-right: 150px; }
	.rank-story-data { position: absolute; right: 0; top: 0; width: 130px; text-align: center; color: #999999; opacity: .8; transition: opacity .2s ease; }
	.rank-story-data > i { display: block; margin: 0 auto; margin-bottom: 8px; width: 28px; height: 28px; text-align: center; line-height: 28px; font-size: 24px; }
	.rank-story-data-val { display: block; }
	.rank-story-data-info { font-size: 12px; }

	.v-pc { display: block !important; }
}
@media (min-width: 701px) {
	.rank-story { padding-left: 130px; padding-right: 160px; padding-bottom: 24px; margin-bottom: 24px; }
	.rank-story > .title { font-size: 18px; }
}
@media (min-width: 992px) {
	.rank-story > .title a:hover,
	.rank-story:hover > .title a { color: #94AB7B; }
	.rank-story:hover .rank-story-data { opacity: 1; }
}

.rank-story-counter { counter-increment: ranking-counter; }
.rank-story-counter:after { content: counter(ranking-counter, decimal-leading-zero); }
#ranking-content { counter-reset: ranking-counter; }

/* Новые стили для контейнера с стрелками */
.rank-range {position: relative;}
.rank-range-list .rank-part {display: inline-block;font-size: 11px;color: #93ab7b;}
.fa-sun {font-size: 9px;vertical-align: middle;}
.rank-range-list::-webkit-scrollbar {height: 3px;}
.rank-range-list::-webkit-scrollbar-thumb {background: #363636;border-radius: 0;}
.rank-range-list {overflow-x: auto;}
.rank-range-nav-arrow {
	position: absolute;
    top: 50% ;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #303030;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
    box-shadow: 0 2px 8px #303030;
}

.rank-range-nav-arrow:hover {
	background: #000;
}

.rank-range-nav-arrow.visible {
	opacity: 1;
	visibility: visible;
}

.rank-range-nav-arrow.visible:hover {
	opacity: 1;
}

.rank-range-nav-arrow.left {
	left: 10px;
}

.rank-range-nav-arrow.right {
	right: 10px;
}

.rank-range-nav-arrow svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

@media (max-width: 575px) {
	/* Скрываем стрелки на очень маленьких экранах */
	.rank-range-nav-arrow {
		display: none;
	}
}