/*
 * Copy this file into your theme to customize it.
 * https://www.phpboost.com/wiki/structure-d-un-theme#paragraph-le-repertoire-theme
 *
 * Contains css for specific containers
 * 		breadcrumb
 * 		notation
 * 		progress bar
 * 		related links
 * 		suggested links
 * 		options (for filters)
*/

/* --- Breadcrumb --- */
#breadcrumb {
	padding: 0.618em;
	font-size: 0.809em;
}

#breadcrumb ol {
	margin: 0;
	list-style: none;
}

#breadcrumb li { display: inline; }

#breadcrumb li:not(.current):after { content: '/'; }

/* --- Item infos --- */
.more {
	font-size: 0.809em;
	font-style: italic;
}

.more .pinned {
	border: none;
	background-color: transparent !important;
}

/* --- Item control Icons (edit, delete, etc) --- */
.controls a {
	display: inline-block;
	padding: 0.228em;
}

/* --- Main content --- */
.cat-description,
.content {
	margin-bottom: 0.618em;
	padding: 0.456em;
}

@media (min-width: 769px) {
	.cat-description,
	.content {
		padding: 0.809em;
		margin-bottom: 1.618em;
	}
}

.cat-description::before,
.cat-description::after,
.content::before,
.content::after {
    content: '';
    display: block;
    clear: both;
}

.several-items #comment-form .section-header { display: none; }

aside:not(#menu-left):not(#menu-right) {
	padding: 0.809em;
	margin-bottom: 1.618em;
}

aside:not(#menu-left):not(#menu-right)::before,
aside:not(#menu-left):not(#menu-right)::after {
    content: '';
    display: block;
    clear: both;
}

.content img,
.cell-content img { vertical-align: bottom; }

/* --- Id Card --- */
.id-card { margin: 1.618em 0 0; }

.id-card::after,
.id-card::before {
    content: '';
    display: block;
    clear: both;
}

/* --- Sibling links --- */
.related-links {
	display: flex;
	flex-direction: column;
}

.related-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
}

.suggested-item:hover,
.related-item:hover { text-decoration: none; }

.related-item img { max-height: 80px; }

.related-item.previous-item img,
.related-item.previous-item i { padding: 0 0.618em 0 0; }
.related-item.next-item img,
.related-item.next-item i 	  { padding: 0 0 0 0.618em; }

@media (min-width: 769px) {
	.related-item { max-width: 45%; }
    .related-links {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* --- Main thumbnail in item --- */
.item-thumbnail {
	margin: 0.309em 0;
	display: block;
}

@media (min-width: 769px) {
	.item-thumbnail {
		max-width: 38%;
		float: right;
		margin: 0.309em 0 0.618em 0.618em;
		position: relative;
		z-index: 2;
	}
}

/* --- Media --- */
.media-content {
	position: relative;
	max-width: 100%;
}

.media-content object,
.media-content embed,
.media-content video,
.media-content iframe,
.media-content [class$="-player"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --- Progress bar --- */
.progressbar-container {
	position: relative;
	margin: 0.228em 0 0.618em;
}

.progressbar-container .progressbar-infos {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	line-height: 0.809em;
	font-size: 0.618em;
	text-align: center;
}

.progressbar-container .progressbar {
	height: 1.618em;
	transition: width .6s ease;
}

/* --- Notation --- */
.notation,
.static-notation { display: inline-block; }

.notation .star,
.static-notation .star {
	position: relative;
	font-size: 1.5rem;
	text-decoration: none;
}

.static-notation .star { cursor: default; }

.notation .star-width {
	position: absolute;
	display: inline-block;
	top:0;
	left:0;
}

.notation .star-width:before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	left: 0;
	top:0;
	content:"\f005";
	display:block;
	overflow:hidden;
}

.star-width-0   { width: 0%;   }
.star-width-10  { width: 30%;  }
.star-width-25  { width: 41%;  }
.star-width-50  { width: 50%;  }
.star-width-75  { width: 65%;  }
.star-width-90  { width: 78%;  }
.star-width-100 { width: 100%; }

/* --- Options --- */
.options {
	margin: 0.309em 0;
	padding: 0.456em 0.809em;
	max-width: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	font-size: 0.809em;
}

.options .form-element {padding: 0;}

@media (min-width: 769px) {
	.options {
		float: right;
		margin: 0.309em 0 0.309em 1em;
	}
}

.options .horizontal-fieldset,
.options .horizontal-fieldset-element,
.options .horizontal-fieldset .form-element { margin: 0; }

/* --- Coulor picker --- */
.color-picker {
	position: absolute;
	z-index: 100;
}

.color-picker td {
	padding: 0;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
}

.color-picker td a {
	display: block;
	width: 0.809em;
	height: 0.809em;
}

/* --- Maintain --- */
#maintain { margin: 0.618em 0; }

.delay { margin: 1.309em 0; }

#message-maintain { z-index: 20; }

#release { margin-top: 1.309em; }

/* --- Friends content (e.g web) --- */
.content-friends { border-width: 7px 1px 1px 1px; }

.content-privileged-friends { border-width: 7px 1px 1px 1px; }

/* --- Wikipedia link --- */
a.wikipedia-link {
	position: relative;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: transparent;
	cursor: help;
	padding-right: 0.809em;
}

a.wikipedia-link:after {
	position: absolute;
	vertical-align: middle;
	top: 1px;
	right: 0;
	content: "\f266" ;
	font-family: 'Font Awesome 6 Brands';
	font-weight: 400;
	font-size: 0.618em;
}

/* --- Publication status --- */
.publication-status { font-weight: bold; }

/* --- Categories color on sortable --- */
.category-color {
	border-left-width: 5px !important;
	border-left-style: solid;
}

/* --- Slideboost --- */
[id|="slideboost"]::before,
[id|="slideboost"]::after {
	content:'';
	display: block;
	clear: both;
}

/* --- calendar picker --- */
.calendar-block .hide-modal {
	justify-content: flex-end;
	padding: 0 0 0.228em 0;
}
