/* Utilities
---------------------------------------------------------------------------- */
.d-flex			{ display: flex; }
.d-inline-flex	{ display: inline-flex; }
.align-center	{ align-items: center; }
.gap-1em		{ gap: 1em;}
.space-around	{ justify-content: space-around; }
.space-between	{ justify-content: space-between; }
.row-2			{ width: 50%; }
.row-4			{ width: 25%; }

.margin-top-1em		{ margin-top: 1em; }
.margin-bottom-1em	{ margin-bottom: 1em; }

.padding-05em		{ padding: 0.5em }
.padding-top-1em	{ padding-top: 1em; }
.padding-bottom-1em	{ padding-bottom: 1em; }

.text-center	{ text-align: center; }

.font-bold		{ font-weight: bold; }
.font-larger	{ font-size: larger;}
.font-smaller	{ font-size: smaller;}

.no-pointer		{ pointer-events: none; }

.space			{ width: 100%; height: 6px; }


/* Charts navbar
---------------------------------------------------------------------------- */
.navbar-charts {
	margin-bottom: 1.1em;
}

.navbar-charts .navlinks li {
	float: none;
	text-align: center;
}

.navigation_songs i {
	font-size: 0.8rem;
}

.navigation_actual,
.navigation_actual:hover,
.navigation_actual:active {
	color: red;
	font-weight: bold;
	font-size: 0.75rem;
}

.title_report {
	color: red;
	font-weight: bold;
	display: block;
	padding-bottom: 0.5em;
}

h4.report, p.report {
	text-align: center;
	margin: 6px 0;
}

#smilies_core {
	font-weight: bold;
}

#span_view {
	font-size: 0.8rem;
}

/* Random videos
---------------------------------------------------------------------------- */
.random-container {
	padding: 5px;
}

.random-item {
	font-size: 0.7rem;
	flex-direction: column;
}

.sub-item-2 {
	flex: 1;
}

@media (width > 576px) {
	.random-item {
		flex-direction: row;
	}

	.sub-item-1 {
		width: 25%;
	}
}

dl.tab_charts > dd {
	font-size: 0.6rem;
	align-content: center;
	text-align: center;
}

textarea.bzh {
	width: 80%;
}

dl.dl-default {
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
}

.vote-info,
.check-info {
	background: var(--validity-img, none) no-repeat 0 0 / 1.1em;
	padding-inline-start: 1.5em;
}

.rated,
.is-valid {
	--validity-img: url("./images/rated.svg");
}

.not-rated,
.is-invalid {
	--validity-img: url("./images/rated_no.svg");
}

.check-info strong,
.no-color {
	color: initial;
}

.is-valid { color: green; }
.is-invalid { color: #bc2a4d; }

div.title-pm {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

div.uploaders {
	background-color: #D5ECE6;
	color: #2A5CBC;
	margin: 10px 0;
	font-size: 0.7rem;
	padding: 5px 10px;
	border-radius: 7px;
}

div.on_left {
	float: left;
}

div.message-box {
	width: 80%;
	float: left;
}

div.bc-smilies {
	float: right;
	width: 18%;
	max-height: 300px;
	overflow: auto;
}

div.second-smilies {
	max-height: 250px;
	overflow: auto;
}

div.bc-smilies > a > img {
	margin: 3px;
}

/* Thumbnails view */
.bzh-thumbnail {
	padding: 2px 0;
	width: clamp(55px, 10vw, 85px);
	height: auto;
}

.new-song {
	color: red;
}

h2.charts {
	margin: 0.7rem 0;
}

.user-navigation {
	display: block;
	margin: 3px auto;
	text-align: center;
}

dl.title_tab {
	font-size: 0.7rem;
	font-weight: bold;
	display: flex;
	align-content: center;
	align-items: center;
}

dl.content_tab {
	text-align: center;
}

ul.topiclist dt.fantom {
	width: 0;
	margin-right: 0;
	font-size: 1px;
}

ul.topiclist li.bg3 dl.title_tab dd {
	text-align: center;
	font-weight: bold;
}

.centered {
	text-align: center;
}

div.add-time {
	font-size: 0.55rem;
	margin-top: 5px;
	display: block;
}

div.bzh-tendency {
	display: block;
	margin-top: 3px;
}

div.bzh-tendency span, div.bzh-box span, ul.bzh-box span {
	font-weight: bold;
}

div.bzh-box {
	margin-top: 6px;
	padding: 0;
	line-height: 1.3em;
}

div.close {
	text-align: center;
	width: 100%;
	font-weight: bold;
}

#error.error strong {
	color: initial;
}

.bzh-clr {
	clear: both;
}

span.song-title, a.song-title {
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0 3px;
}

a.report-button {
	padding: 3px;
}

span.position {
	color: darkgreen;
	font-size: 0.8rem;
}

span.total {
	color: #ff6000;
}

span.actions-report {
	margin: 2px 6px;
}

img.youtube-img {
	vertical-align: baseline;
}

h3.video-title {
	margin-top: 8px;
}

dt.label {
	/*width: 40%;*/
}

.mini {
	font-size: 9px;
}

.medium {
	font-size: 0.7rem;
}

.maxi {
	font-size: 13px;
}

dd.allmax, ul.allmax {
	width: 100%;
}

div.winnners {
	margin: 10px 1px 1px 8px;
	text-align: center;
}

/* Video page
---------------------------------------------------------------------------- */
.video-page {
	flex-direction: column;
	text-align: center;
}

.video-frame {
	flex: 1;
}

.rate-video .post-buttons {
	margin: 15px 0;
}

@media (width > 700px) {
	.video-page {
		flex-direction: row-reverse;
		gap: 1em;
	}
}

.video-frame iframe {
	--calc-width: calc(var(--video-width) * 1px);
	aspect-ratio: var(--video-width, 16) / var(--video-height, 9);
	max-width: var(--calc-width, 100%);
	width: 100%;
	height: auto;
}

/* Css for ajaxvote */
.song-nforate {
	margin: auto;
	text-align: center;
}

.bzh-inline-rating {
	display: inline-block;
	vertical-align: middle;
	line-height: 10px;
}

.song-nforate:has(.rated) .bzh-inline-rating {
	/*pointer-events: none;*/
}

.bzh-star-rating, .bzh-star-rating a:hover, .bzh-star-rating .current-rating , .bzh-star-rating .current-not-rating{
	background: url("./images/stars.png") left -1000px repeat-x;
}

.bzh-star-rating {
	position: relative;
	background-position: 0 0;
	width: 100px;
	height: 10px;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bzh-star-rating li {
	display: inline;
	background-image: none;
	padding: 0;
}

.bzh-star-rating a, .bzh-star-rating .current-rating , .bzh-star-rating .current-not-rating {
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -1000px;
	height: 10px;
	line-height: 10px;
	outline: none;
	overflow: hidden;
	border: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.bzh-star-rating a.one-star, .bzh-star-rating a.star-1		{ width: 10%; z-index: 11; }
.bzh-star-rating a.two-star, .bzh-star-rating a.star-2		{ width: 20%; z-index: 10; }
.bzh-star-rating a.three-star, .bzh-star-rating a.star-3	{ width: 30%; z-index: 9; }
.bzh-star-rating a.four-star, .bzh-star-rating a.star-4		{ width: 40%; z-index: 8; }
.bzh-star-rating a.five-star, .bzh-star-rating a.star-5		{ width: 50%; z-index: 7; }
.bzh-star-rating a.six-star, .bzh-star-rating a.star-6		{ width: 60%; z-index: 6; }
.bzh-star-rating a.seven-stars, .bzh-star-rating a.star-7	{ width: 70%; z-index: 5; }
.bzh-star-rating a.eight-stars, .bzh-star-rating a.star-8	{ width: 80%; z-index: 4; }
.bzh-star-rating a.nine-stars, .bzh-star-rating a.star-9	{ width: 90%; z-index: 3; }
.bzh-star-rating a.ten-stars, .bzh-star-rating a.star-10	{ width: 100%; z-index: 2; }

.bzh-star-rating a:hover {
	background-position: 0 -20px;
}

.bzh-star-rating .current-rating {
	z-index: 1;
	background-position: 0 -30px;
}

.bzh-star-rating .current-not-rating {
	z-index: 1;
	background-position: 0 -10px;
}

/* Modal info
---------------------------------------------------------------------------- */
.bzh-modal {
	display: none;
	background-color: rgba(0, 0, 0, 0.3);
	position: fixed;
	left: 0;
	top: 30%;
	right: 0;
	bottom: 70%;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

.bzh-modal > span,
.bzh-modal > div {
	background: #fff;
	font-size: 1.1em;
	padding: 10px;
	margin-top: -30vh;
	max-width: 300px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 7px;
	border: 2px solid #8e8e8e;
}

.bzh-modal > span::before {
	float: left;
	content: "";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 14px;
	line-height: 1;
	text-rendering: auto;
	margin-right: -1em;
}

span.succes-div::before { color: green; content: "\f00c"; }
span.error-div::before { color: crimson; content: "\f06a"; }


/* Table display
---------------------------------------------------------------------------- */
.d-table,
ul.d-table,
ul.topiclist li.d-table {
	display: table;
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

.d-tablecaption,
ul.d-table .d-tablecaption {
	display: table-caption;
	padding: 4px;
}

.caption-bottom {
	caption-side: bottom;
}

.d-tablerow,
ul.topiclist li.d-tablerow {
	display: table-row;
}

.d-tableheading,
ul.d-table .d-tableheading,
ul.d-tableheading {
	display: table-header-group;
	font-weight: bold;
	line-height: 1.6em;
}

ul.d-tableheading li .d-tablehead {
	color: var(--tablehead-color, #fff);
	padding-bottom: 6px;
}

.d-tablecell,
.d-tablehead {
	display: table-cell;
	padding: 4px;
	vertical-align: middle;
}

.cell-border > :not(:last-child) {
	border-right: 1px solid var(--cell-border-color, #fff);
}

.d-tablehead::first-letter {
	text-transform: capitalize;
}

.d-tablefoot {
	display: table-footer-group;
}

.d-tablebody,
ul.d-table .d-tablebody,
ul.d-tablebody {
	display: table-row-group;
}

.d-tablerow > :first-child { width: var(--col1, auto); }
.d-tablerow > :nth-child(2) { width: var(--col2, auto); }
.d-tablerow > :nth-child(3) { width: var(--col3, auto); }
.d-tablerow > :nth-child(4) { width: var(--col4, auto); }
.d-tablerow > :nth-child(5) { width: var(--col5, auto); }
.d-tablerow > :nth-child(6) { width: var(--col6, auto); }
.d-tablerow > :nth-child(7) { width: var(--col7, auto); }
.d-tablerow > :nth-child(8) { width: var(--col8, auto); }

.no-result {
	padding: 0.5em;
	font-weight: bold;
	font-size: 1.6em;
}

/* Ranking
---------------------------------------------------------------------------- */
.rank-icon {
	font-size: 2.4em;
	position: relative;
	text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.6);
	--fa-bounce-height: -0.15em;
}

.rank-2 { --fa-animation-delay: 0.15s; }
.rank-3 { --fa-animation-delay: 0.3s; }

.rank-1::before { color: gold; }
.rank-2::before { color: silver; }
.rank-3::before { color: burlywood; }

.rank-icon .rank-text {
	position: absolute;
	left: 0;
	right: 0;
	font-size: 0.5em;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.42), -1px -1px rgba(68, 68, 68, 0.122);
	font-weight: bold;
	top: 0.2em;
}

/* Trends
---------------------------------------------------------------------------- */
.bzh-trend {
	--trend-size: 18px;
	background: var(--trend-image, none) no-repeat 0 0 / contain;
	display: inline-flex;
	width: var(--trend-size);
	height: var(--trend-size);
}

.trend-new		{ --trend-image: url("./images/trend-new.svg"); }
.trend-equal	{ --trend-image: url("./images/trend-equal.svg"); }
.trend-up		{ --trend-image: url("./images/trend-up.svg"); }
.trend-down		{ --trend-image: url("./images/trend-down.svg"); }


/* Forms
---------------------------------------------------------------------------- */
/* Restore default accessibility */
[class*="section-app\/breizhcharts"] select:focus {
	outline: auto;
}

/* Disabled input status handling */
[class*="section-app\/breizhcharts"] input[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}


/* Medias queries
---------------------------------------------------------------------------- */

/* Initialise animations according to the user's browser settings */
@media not (prefers-reduced-motion: reduce) {
	.bzh-rotate {
		-webkit-transition: transform 0.5s ease;
		transition: transform 0.5s ease;
	}

	:has(>.bzh-rotate):hover .bzh-rotate {
		-webkit-transform: rotate(35deg);
		transform: rotate(35deg);
	}

	.new-song {
		-webkit-animation: blink-song 2s steps(2, start) infinite;
		animation: blink-song 2s steps(2, start) infinite;
	}

	.fa-bounce {
		-webkit-animation-name: fa-bounce;
		animation-name: fa-bounce;
		-webkit-animation-delay: var(--fa-animation-delay, 0s);
		animation-delay: var(--fa-animation-delay, 0s);
		-webkit-animation-direction: var(--fa-animation-direction, normal);
		animation-direction: var(--fa-animation-direction, normal);
		-webkit-animation-duration: var(--fa-animation-duration, 1s);
		animation-duration: var(--fa-animation-duration, 1s);
		-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
		animation-iteration-count: var(--fa-animation-iteration-count, infinite);
		-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(.28, .84, .42, 1));
		animation-timing-function: var(--fa-animation-timing, cubic-bezier(.28, .84, .42, 1));
	}
}

/* Keyframes
---------------------------------------------------------------------------- */
@-webkit-keyframes blink-song {
	from {color: blue;}
	to {color: red;}
}

@keyframes blink-song {
	from {color: white;}
	to {color: red;}
}

@-webkit-keyframes fa-bounce {
	0% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0)
	}
	10% {
		-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
		transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
	}
	30% {
		-webkit-transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
		transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
	}
	50% {
		-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
		transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
	}
	57% {
		-webkit-transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
		transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
	}
	64% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0)
	}
	to {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0)
	}
}

@keyframes fa-bounce {
	0% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0)
	}
	10% {
		-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
		transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
	}
	30% {
		-webkit-transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
		transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
	}
	50% {
		-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
		transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
	}
	57% {
		-webkit-transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
		transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
	}
	64% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0)
	}
	to {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0)
	}
}