/* ###################   ComposedContentEditor   ################### */


.BlockListEditor {

}

.BlockListEditor > .container > .row {
	border-radius: 5px;
	border: 1px solid transparent;
}

.BlockListEditor > .container > .ExistingItem  {
	padding-bottom: 0.5em;
}

.BlockListEditor .ExistingItem .replaceableParent .Authoring-Container{
	padding: 0px;
}

.BlockListEditor .ExistingItem .replaceableParent .Authoring-Container .card{
	border: 0px;
	background: transparent;
}


.BlockListEditor .ExistingItem .replaceableParent .Authoring-Container .card .card-body {
	padding: 0px;
}

.BlockListEditor .ExistingItem .replaceableParent .Authoring-Container .card .card-body .container-fluid{
	padding: 0px;
}

/* ###################   defaultStyle   ################### */
 
.visibilityButton {
	cursor: pointer;
}


.ActionButton {
	margin-right: 0.5em !important;
	margin-bottom: 0.5em !important;
}

label {
	/*override the bootstrap margins to better align the labels to their content.
	If the bottom margin is bigger than the top margin (default) then the labels look like they are underneath the input and belong to the input above them. */
	margin-top: 10px;
	margin-bottom: 2px;
}

/* ###################   Embeddededitor   ################### */


.EmbeddedEditor {
	display: inline-block;
	width: 100%;
	padding: 0.5em;
}

/* ###################   keepAliveStyles   ################### */
 

.KeepAliveWarning {
	position: fixed;
	top: 20pt;
	/* move the warning to the top, no matter what. The warning is typically rendered early in the dom, so it may be hidden */
	z-index: 10000;
	/* text-align center here and inline-block below will make my .panel be centered but be as wide as needed, 
	as long as i'm 100% wide, which left&right will ensure */
	left: 0;
	right: 0;
	text-align: center;
	/* this div is hidden, so make it invisible for mouse-events, otherwise anything underneath me wouldn't be accessible */
	pointer-events: none;
}

.KeepAliveWarning .panel {
    	box-shadow: 4px 4px 16px 0px black;
	display: inline-block;
}

/* ###################   NavBar   ################### */


/* Currently we do not need much additional spacing between navbar und content because of navbars sticky-top, but in case of need for an additional spacing...  */

nav.UseCaseNavBar {

}

/* This div will push the usecase content down to have a small spacing between navbar and usecase content */

.NavBarPlaceholder {
	height: 1rem;
}

/* ###################   translation   ################### */


	.translationField input, .translationField textarea, .translationField .StyledTextEditor  {
		box-shadow: 0px 0px 5px 5px rgba(0, 255, 0, 0.2);	
	}
	
	.translationField label {
		text-shadow: 0px 0px 10px rgba(0,255, 0, 0.8);	
	}

	/* There is a white background behind the toobar buttons which desturbes the 
	 * the text- and boxshadow effect */
	.translationField .panel .titleToolbar .toolbar {
		background: transparent;
	}


	.translationField.needsTranslation input, .translationField.needsTranslation textarea,.translationField.needsTranslation .StyledTextEditor ,.translationField.needsUpdate input, .translationField.needsUpdate .StyledTextEditor  {
		box-shadow: 0px 0px 5px 5px rgba(255, 0, 0, 0.2);	
	}

	.translationField.needsTranslation label , .translationField.needsUpdate label {
		text-shadow: 0px 0px 10px rgba(255, 0, 0, 0.8);	
	}

/* ###################   pictureChoiceDialog   ################### */


.flexWrapContainer {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: center;
}

.flexWrapContainer div.thumbnail {
	width: 200px;
	max-height: 300px;
	margin: 5px;
}

/* ###################   containerSpacing   ################### */


.Authoring-Container .card {
	margin: 0.25em;
}
.Authoring-Container a.btn-link {
	text-decoration: none;
}
.Authoring-Container a.btn-link:hover {
	text-decoration: underline;
}

/* ###################   previewImagesInList   ################### */


.list-group-item .ListItemButtons .preview-image {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
	padding-right: 0.5rem;
}
.inline-panel .list-group-item {
	padding-left: 0;
	padding-right: 0;
}

/* ###################   toolbar   ################### */


.toolbar {
	display: flex;
}

.toolbar.btn-group .btn {
	/* Normally the value is set to 1 by bootstrap for buttons in button groups. If this happens to be a toolbar at the same time,
	 *  this would cause the buttons to stretch to make the buttongroup fill the entire toolbar space.*/
	flex-grow: 0;
}

.titleToolbar .toolbar {
	justify-content: flex-end;
}
.footerToolbar .toolbar {
	justify-content: flex-start;
}
.inline-panel .toolbar {
	/* default to white so that the green or red background-color of the line doesn't shine through */
	background-color: white;
}
.inline-panel .status-icons .toolbar {
	background-color: transparent;
}
.inline-panel .titleToolbar {
	display: inline-block;
}
.inline-panel .TitleContainer {
	display: inline-block;
}
.card .card-header {
	display: flex;
	justify-content: space-between;
}

.card .card-label {
	padding: 0.5rem 1rem;
	margin: 0;
}

/* remove the top/bottom padding because each line has these anyway and it'd add too much space. It'd also add space around the background-color of each line.
Using > to mean only that one body that's directly inside the .card.list. Otherwise embedded editors' .card-body elements would not have a padding, too. */
.card.list > .card-body {
	padding: 0;
}
.status-icons .toolbar a {
	padding: 0.375rem; 
}

.footerToolbar .toolbar [title="Page-Navigation"] {
	/*center the page navigation*/
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

/* ###################   validationStyles   ################### */


.validation-hint .validation-message {
	color: var(--bs-warning, yellow);
}

.validation-error .validation-message {
	color: var(--bs-danger, red);
}

.validation-message {
	font-size:small;
}