:root {
	--colorApp: var(--colorAppMaja);
	--colorAppHover: var(--colorAppHoverMaja);
	--ck-z-modal: 2000;
}

/*#Nick - Toasters*/

.toast.toast-advanced{
	--fontSizeToastIcon: calc(3.2rem * 1.5);
	position: fixed;
	max-width: 30rem;
	bottom: 5%;
	left: 0;
	right: 0;
	margin: 0 auto 1rem;
	color: hsl(0, 0%, 100%);
	border-radius: var(--borderRadius);
	border-color: transparent;
	box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.3);
	z-index: 9999999;
	animation-name: none;
	animation-duration: unset;
	animation-fill-mode: none;
}

.toast.toast-advanced .toast-body{
	background-color: transparent;
	border-radius: var(--borderRadius);
}
.toast.toast-advanced .toast-body .toast-icon{
	
	color: hsl(0, 0%, 100%);
	border-radius: var(--borderRadius);
	font-size: var(--fontSizeToastIcon);
}


.toast.toast-advanced.toast-error .toast-body .toast-icon{	
	background-color: var(--colorError);	
}

.toast.toast-advanced.toast-success .toast-body .toast-icon{	
	background-color: var(--colorSuccess);	
}




/*#Nick - to be reviewed*/


	.file-input-container .input-box{
		min-height: 100px;
	}

	.image-preview-container{
		width: 100%;
		height: 200px;
		background: var(--colorHighlightBG);
		text-align: center;
		border: 1px dashed var(--n1Blue);
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		justify-content: center;	
	}

	.image-preview-container.image-preview-invalid{
		border: 1px solid var(--colorError);
	}

	.image-preview-container .image-preview{
		max-height: 100%;
		max-width: 100%;
		object-fit: contain;
	}

	.image-preview-container .image-alt-text p{
		font-size: 1rem;
		margin: 0;
	}

	#edit-answer-form .has-file .file-container,
	#edit-app-form .has-file .file-container{
		display: none;
	}

#edit-grammar-form.form-container .form-group, 
#edit-answer-form.form-container .form-group,
#dialogkopf-form.form-container .form-group,
#edit-app-form.form-container .form-group,
#actionModal .form-container .form-group,
#parameterModal .form-container .form-group{	
	align-items: start;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.modal-open .toast{
	z-index: 1051;
}

.form-container .form-group.has-error .form-control, .form-container .form-group.has-error .input-checkbox span:before, .form-container .form-group.has-error .select2-container .select2-selection, .has-error .custom--radio--label input[type="radio"] + span:before, .form-container .form-group.has-error .ck-editor {
    border: 1px solid var(--colorError) !important;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/*#dialogedit*/

	.dropdown-item.textcomplete-item.active { background-color: #e6e6e6; }
	.dropdown-item.textcomplete-item { cursor: pointer; }

	.bezierpoint1_0, .bezierpoint2_0, #bezierline1_0, #bezierline2_0 {
		display: none;
	}

	.connectorlabel {
		color: #fff !important;
		font-family: "Segoe UI" !important;
		background: #666666 !important;
		padding: 2px !important;
	}
	#diagram .edit {
		position: absolute;
	}
	#diagram .edit textarea {
		padding: 8px;
		resize: none;
		overflow: hidden;
	}

	/*Wegen Problemen mit z-Achse für textcomplete*/
		.modal-open .dropdown-menu.textcomplete-dropdown{
			z-index: 1050 !important;
			
			max-height: 12rem;
				overflow-y: auto;
			/*general.css:732 .select2-container--default .select2-results*/    		
				-webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
				box-shadow: 0 5px 10px rgb(0 0 0 / 10%);

		}
		
		
	/*Angelehnt an styles für select2;  general CSS:736 .select2-container-default .select2-results_option*/
		.dropdown-menu.textcomplete-dropdown .textcomplete-item{
			cursor: pointer;
			background: #fff;
			-webkit-transition: 0.3s;
			transition: 0.3s;
			font-family: regular;
			font-size: 11px;
			margin-bottom: 0;
			padding: 5px 10px;
			position: relative;
			word-break: break-word;
		}
		
		.dropdown-menu.textcomplete-dropdown .textcomplete-item.active{
			background-color: var(--colorApp);
			color: white;
		}


	/*wird verwendet im Modal Maja-Knoten bearbeiten im "Erweitert" Tab" für die Entfernen Buttons der eigenen Elemente, um grafische unannehmlichkeiten zu vermeiden*/	
		#actionModal .collapse.show .action-wrap button.delete{
			animation: fadeIn .5s;
		}
		
		#actionModal  .collapsing .action-wrap button.delete, 
		#actionModal .collapse:not(.show) .action-wrap button.delete{
			display:none;
		}
	/**/	



	/* ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! _ ! */
	/*#Nick - Angelehnt an ".content-area-dialog" von custom.css von partner.maja*/
		#diagram-container{
			height: calc(100vh - 20rem);
			background-color: aliceblue;	
		}
	/**/
	

	.legend-wrapper {
		position: sticky;
		bottom: 3rem !important;
		left: 0px;
		width: 400px;
		background: rgba(255, 255, 255, 0.5);
	}

	.legend-wrapper .accordion {
		position: relative;
		overflow: hidden;
		padding: 0;
	}

	.legend-wrapper .accordion .card{
		background: none;
		display: block;
		border: none !important;
	}

	.legend-wrapper .card, .legend-wrapper .card-header {
		padding: 0;
		margin-bottom: 0;
		cursor: pointer;
	}

	.legend-wrapper .card-header, .legend-wrapper .card-body {
		border: none;		
		background: transparent;
	}

	.legend-wrapper .card-header .card-title{
		border-bottom: 1px solid black;
		padding: 1rem 1rem .5rem 1rem;
		margin: 0;
	}

	.legend-wrapper .card-header:not(.collapsed) .card-title svg {
		transform: rotate(180deg);
		transition: all 0.2s;
	}

	.legend-wrapper .card-header .card-title svg {
		font-size: 1rem;
			color: var(--colorApp);
	}

	.legend-wrapper .card-body{		
		padding-right: 2rem;
		padding-left: 2rem;
		padding-top: 0rem;
	}

	.legend-wrapper .card-body:before {
		height: 0;
	}

	.legend-wrapper .card-body .legend-content {
		font-size: 14px;
	}

	/*general.css::5815   .product-tabs ul#producttabs*/
		.maja-prop-tabs ul.prop-nav-tabs {
			border: none;
		}
		/*angelehnt an .product-tabs ul#producttabs li a */	
		.maja-prop-tabs ul.prop-nav-tabs li a {
			background-color: rgba(243, 245, 249, 0.3);
			cursor: pointer;
			color: var(--n1Blue);
			padding: 1rem 2rem;
			border: none;
			border-radius: 0;
		}
		/*.product-tabs ul#producttabs li a:hover, .product-tabs ul#producttabs li a.active, .product-tabs .tab-content*/
		.maja-prop-tabs ul.prop-nav-tabs li a:hover, .maja-prop-tabs ul.prop-nav-tabs li a.active, .maja-prop-tabs  .tab-content {
			background-color: var(--colorHighlightBG) !important;
			color: var(--n1Blue) !important;
		}
		/*.product-tabs .tab-content*/
		.maja-prop-tabs .tab-content {
			padding: 3rem;
		}
	/**/


	/*angelehnt an .field-holder label aus partner.maja.ai test.css::41*/		
		.modal .actionbody .action-wrap label{
			position: relative;    
			line-height: 1.5;
			font-weight: 300;
		}
	/**/	


	/*custom classes*/
		.action-wrap{
			margin-bottom: 2rem;
			position: relative;
			padding: 1rem 0.5rem;
		}
		
		.action-wrap .action-header{
			position: absolute;
			margin: 0;
			top: -0.7rem;
			right: -0.7rem;
		}
		
		.action-wrap .action-header button.delete{
			font-size: 0.8rem;
		}

		.action-wrap .action-header .delete{
			background-color: var(--colorApp);
			height: 1.5rem;
			width: 1.5rem;
			border-radius: 50%;
			border-color: transparent;
			color: #fff;
		}
		
		.action-wrap .action-body{
			margin-bottom:1rem
		}

		.action-wrap .form-group{
			margin-bottom: 1rem;
		}

		.action-wrap.dialogentitytemplate .action-body{
			display:flex;
			align-items: center;
		}

		.action-wrap.dialogentitytemplate .action-body .form-group{
			width:100%
		}
		
		.action-wrap.dialogentitytemplate .action-body.attribute .form-group{
			margin-left:1rem
		}

		/*angelehnt an :nav.scss*/
			#actionModal .nav-tabs .nav-link {
				font-size: .9rem;    		
			}
			#actionModal .nav-tabs .nav-link.active {		
				font-weight: 600;
			}
		/**/

		#actionModal input[type=number]{
			text-align: right;
			/*-moz-appearance: textfield;*/
		}
		
		#actionModal .aktionen .btn-actionbody{
			border-color:transparent;
			color: var(--colorApp);
			background-color: transparent;
			display:flex;
			align-items: center;
		}
		
		#actionModal .aktionen .btn-actionbody svg{
			font-size: 1.2rem;
		}

		/*exakt gleich wie .form-container .form-block .form-headline h5 von general.css:3746*/	
			#actionModal.modal .form-container .form-block .form-headline .collapsible-headline h5{
				font-size: 0.875rem;
				line-height: 2rem;
				font-family: semi-bold;
				margin: 0 0 0 0.5rem;
			}
		/**/


		
		.answertemplate, .emailtemplate, .calculatetemplate, .majaactiontemplate, .selectentitytemplate, .entitytemplate, .dialogentitytemplate{
			background-color: #ffffffaa
		}

		@media (min-width: 992px){
			.majaactioncontainer.row .col-lg-6.majaactiontemplate{
				-ms-flex: 0 0 48%;
				flex: 0 0 48%;
				max-width: 48%
			}
		
			.majaactioncontainer.row .col-lg-6.majaactiontemplate:nth-child(odd){
				margin-right: 4%;
			}	
		}

		/*für erweiterte .has-error funktionen im Modal*/
			#stepprop-tabs .nav-item.has-error{
				border: 1px dotted #ff000077;
			}
		/**/

		/*anlehnung an general.css:441 .nav-pills .with-number .counter,*/			
			#stepprop-extended span.counter{
				display: -webkit-inline-box;
				display: -webkit-inline-flex;
				display: -ms-inline-flexbox;
				display: inline-flex;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				-ms-flex-pack: center;
				justify-content: center; 
				-webkit-box-align: center;
				-webkit-align-items: center; 
				-ms-flex-align: center;
				align-items: center;
				width: 1.75rem;
				height: 1.75rem;
				-webkit-border-radius: 50%;
				border-radius: 50%;
				background-color: var(--colorApp);
				color: #fff;
				margin-right: 1rem;
				font-size: 0.6875rem;
				font-family: semi-bold;
			}
			#stepprop-extended span.counter.empty{
				background-color: var(--colorBorder);
			}
		/**/
				
		#stepprop-extended .is-collapsible a.collapse-toggle .selection-arrow svg{
			font-size: 0.9rem
		}

		#stepprop-extended .row.action{
			padding: 0 calc(var(--XspacerMainContent) / 4);
		}
		
		#stepprop-extended .row.action .col-12.is-collapsible{
			padding: 0;
		}
		
		#stepprop-extended .row.action .col-12.is-collapsible .collapse,
		#stepprop-extended .row.action .col-12.is-collapsible .collapsing{
			margin: 0 calc(var(--XspacerMainContent) / 6)
		}
			
		.with-element-next{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.with-element-next .select2-container{
			width: calc(100% - var(--inputLineHeight)) !important;
		}
		
		.with-element-next  a{
			display: flex;
		}

		.with-element-next input~a, .with-element-next input~button, .with-element-next select~a, .with-element-next select~button{
			align-items: center;
			height: var(--inputLineHeight);
		}
		
		
		.with-element-next  a svg{
			color: var(--colorApp);
			font-size: .95rem;
			margin: 0 .52rem 0 .52rem;
		}


		
		.with-element-next  a.editanswer:not(.answerprepared) svg,
		.with-element-next  a.editanswer:not(.answerprepared):hover svg{
			color: var(--colorBorder);
			cursor: not-allowed;
		}
		.with-element-next .btn-actionbody {
				padding-top: 0;
				padding-bottom: 0;
		}		

		
		
		/*Generell, muss ggf. überschrieben werden*/
		/*	.select2-search--dropdown{
				padding: 1rem 1rem 0.65rem 1rem;
			}		
			
		
			.select2-container--default .select2-results__option{
				background: hsl(0, 0%, 100%);
				-webkit-transition: 0.3s;
				transition: 0.3s;
				font-family: regular;
				font-size: 0.69rem;
				margin-bottom: 0;
				padding: 0.31rem 1.68rem;
				position: relative;
				word-break: break-word;
			}
		*/

    /*.select2-dropdown-has-button .select2-results>.select2-results__options{
			overflow-x: clip;
		}

		.select2-dropdown-has-button .select2-results__option-has-button{
			background-color: var(--colorApp);
			color: white;
			margin-left: 1.00rem;			
			padding-left: 0.62rem;
			padding-right: 0.62rem;
			-webkit-transition: 0s;
			transition: 0s;
		}
		.select2-dropdown-has-button .select2-results__option-has-button.select2-results__option--highlighted:hover{
			background-color: var(--colorAppHover);
		}	
		
		.select2-dropdown-has-button .select2-option-add{
			display: flex;
			align-items: center;
		}

		.select2-dropdown-has-button .select2-option-add svg{		
			font-size: .88rem;
		}
		.select2-dropdown-has-button .select2-results__option--highlighted .select2-option-add svg{
			color: white;
		}*/