/**
 * Modale médiathèque : pastilles ALT + alignement du libellé « ALT Status ».
 * Chargé après media-views.css (dépendance) pour surcharger le float / le responsive.
 */

.media-modal .filikod-modal-alt-status-root.filikod-alt-badges--stack {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.media-modal .filikod-modal-alt-status-root .filikod-alt-badge {
	display: inline-flex;
	align-items: center;
}

.media-modal tr.compat-field-filikod_alt_status th.label,
.media-modal tr.compat-field-filikod_alt_status td.field {
	vertical-align: middle;
}

/*
 * Core (media-views.css) : .compat-item label span { float:left; } + sous 900px :
 * float:none; display:inline-block; text-align:inherit : le libellé part à gauche.
 * On réaligne comme les autres champs (bordure du libellé côté champ).
 */
.media-modal .compat-item tr.compat-field-filikod_alt_status th.label label span,
.media-modal .compat-item tr.compat-field-filikod_alt_status th.label label span.alignleft,
.media-modal tr.compat-field-filikod_alt_status th.label label span,
.media-modal tr.compat-field-filikod_alt_status th.label label span.alignleft {
	float: none !important;
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	text-align: end !important;
}

@media only screen and (max-width: 900px) {
	.media-modal .compat-item tr.compat-field-filikod_alt_status th.label label span,
	.media-modal .compat-item tr.compat-field-filikod_alt_status th.label label span.alignleft,
	.media-modal tr.compat-field-filikod_alt_status th.label label span,
	.media-modal tr.compat-field-filikod_alt_status th.label label span.alignleft {
		float: none !important;
		display: block !important;
		width: 100% !important;
		text-align: end !important;
		margin: 0 !important;
		padding: 8px 2px 2px !important;
		min-height: 16px !important;
	}
}