/*
	IDE layout CSS file
*/
/* mm_selector component */
.mm_selector .scrtabs-tab-wrapper-container,
.mm_selector .scrtabs-tabs-fixed-container {
	height: 32px;
}

		.mm_selector .mm_list {
			display: inline-block;
			position: relative;
			height: 32px;
			white-space: nowrap;
			overflow: hidden;
			padding: 0;
			padding-right: 28px;
			margin: 0;
			border: 0;
			list-style-type: none;
		}

		.mm_selector li.mm_item {
			font-size: 16px;
			display: inline-block;
			margin: 0;
			line-height: 32px;
			padding: 0px 5px;
			text-transform: uppercase;
			position: relative;
			height: 32px;
			vertical-align: top;
		}

	.mm_selector li.mm_item:hover {
		cursor: pointer;
	}

		.mm_selector li.mm_item.active {
			font-size: 16px;
		}

		.mm_selector li.mm_item.replace_placeholder {
			background-color: #777;
			border-radius: 5px;
			vertical-align: top;
			min-width: auto;
		}

		.mm_selector .mm_list > li.accept_replace:before {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin-left: 1px;
			height: 32px;
			line-height: 30px;
			content: " ";
			border: 1px dashed #bbb;
		}

		.mm_selector .mm_list > li.accept_replace.accept_replace_on_hover:before {
			border-color: #666;
		}

		.mm_selector .mm_list > li.accept_replace.accept_replace_on_hover {
			background-color: #ebebeb;
		}

		.mm_selector .mm_list > li.accept_replace:first-child:before {
			margin-left: 0;
		}

			.mm_selector .mm_list li.new_mm_button {
				top: 0;
				width: 28px;
				text-align: center;
				position: absolute;
				right: 0px;
				padding: 0;
				height: 32px;
			}

				.mm_selector .mm_list li.new_mm_button > span {
					font-size: 19px;
					position: relative;
					top: 6px;
					cursor: pointer;
				}

		.mm_selector li.mm_item .edit_icon:before {
			display: none;
		}

		.mm_selector li.mm_item .efi-pencil {
			margin-left: 4px;
			font-size: 18px;
			cursor: text;
		}

		.scrtabs-tabs-fixed-container ul.nav-tabs > li .efi-trashcan {
			color: #ff5f08;
			/*font-size: 15px;*/
			cursor: pointer;
			margin-right:3px;
		}

		.mm_selector li.mm_item input {
			background: initial;
			outline: 0;
			border: 0;
			padding: 2px;
			height: 22px;
			border-bottom: 1px solid;
			margin-top: 5px;
		}

	.mm_selector li.mm_item.ui-sortable-helper {
		list-style-type: none;
		border: 0;
		box-shadow: 1px 1px 1px 1px #ccc;
		border-radius: 5px;
		padding: 2px 3px;
		background-color: #f5f6fa; /* TODO SKIN */
		opacity: .93;
	}

		.mm_selector li.mm_item.ui-sortable-helper .efi-pencil {
			display: none;
		}

	.mm_selector .screen_list {
		list-style-type: none;
		margin: 0;
		padding: 0;
		border: 0;
		height: 32px;
		white-space: nowrap;
		overflow: hidden;
	}

	.mm_selector .nav-tabs > li.screen_item {
		display: inline-block;
		line-height: 21px;
		padding: 0 7px;
		margin: 5px 0;
		height: 22px;
		vertical-align: top;
	opacity: 0.7;
	cursor: default;
	}

	.mm_selector .nav-tabs > li.screen_item.active {
		cursor: pointer;
		opacity: 1;
		font-weight: bold;
	}

	.mm_selector .nav-tabs > li.screen_item.active:hover {
		opacity: 0.9;
	}

	.mm_selector .nav-tabs > li.screen_item input::selection {
		background: black !important;
		color: white !important;
	}

	.mm_selector .nav-tabs > li.screen_item > span {
		display: inline-block;
	}

		.mm_selector .nav-tabs > li.screen_item:first-child > span {
			margin-left: 5px;
		}

		.mm_selector .nav-tabs > li.screen_item:last-child > span {
			margin-right: 5px;
		}

	.mm_selector li.screen_item + .not_in_menu { /* TODO SKIN */
		position: relative;
		width: auto;
		background: #fff;
		color: #1874f0;
		padding: 2px 7px;
		border-radius: 3px;
	}

	.mm_selector li.screen_item + .not_in_menu::before {
		position: absolute;
		content: '';
		left: -21px;
		top: 4px;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-right-color: #fff; /* TODO SKIN */
		border-right-width: 13px;
	}

		.mm_selector li.screen_item.replace_placeholder  + .not_in_menu::before {
			display: none;
		}

		.mm_selector li.screen_item.replace_placeholder + .not_in_menu { /* TODO SKIN */
			display: none;
		}

	.mm_selector li.screen_item span input {
		background: transparent;
		outline: 0;
		border: 0;
		padding: 2px;
		height: 22px;
		border-bottom: 1px solid;
	 }

	.mm_selector li.screen_item span input::selection {
		background-color: #eee;
	}

	.mm_selector li.screen_item .efi-pencil {
		margin-left: 4px;
		font-size:16px;
	}

	.mm_selector li.screen_item.ui-sortable-helper {
		list-style-type: none;
		border: 0;
		box-shadow: 1px 1px 0px 0px #ccc;
		border-radius: 5px;
		padding: 2px 3px;
		background-color: #1875f0;
		color: #f2f4f9;
	}

		.mm_selector li.screen_item.ui-sortable-helper .efi-pencil {
			display: none;
		}

	.mm_selector li.screen_item.replace_placeholder {
		background-color: #ffffff;
		border-radius: 5px;
		vertical-align: top;
		min-width: auto;
	}

	.ide_screen_designer .designer_canvas .layout_preview {
		height: calc(100% - 64px);
	}



/* END mm_selector component */


/* ide screen preview card */

.screen_layout_preview_card{
	overflow:hidden; 
	background: #fff;
}

.screen_layout_preview_card .card_header{
	font-size:14px;
	font-weight: bold;
	color: #787c90;
	height: 24px;
	margin-bottom: 6px;
	overflow: hidden;
}

.screen_layout_preview_card .split_thumb {
	background-color: #e0e6ef;
}

	.screen_layout_preview_card .card_header .header_buttons{
		line-height: 24px;
	}

	.screen_layout_preview_card .card_header .header_buttons .spec_button{
		background: white;
		padding: 1px 5px 2px;
		border-radius: 4px;
		font-size: 11px;
		vertical-align: top;
	}

	.screen_layout_preview_card .card_header .header_buttons .xmledit_button{
		font-size: 22px;
	}

	.screen_layout_preview_card .card_header .screen_label_text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 24px;
	}

	.screen_layout_preview_card .screen_layout_container{
		padding: 0px;
		border: solid 1px #e0e6ef;
		border-radius: 5px;
		overflow: hidden;
	}
			
.screen_layout_preview_card {
	height: 100%;
	padding: 6px 12px;
	padding-bottom: 12px;
}


.screen_layout_new_card {
	height: 100%;
	background-color: #fff;
}

.screen_layout_new_card .new_screen_button{
	position: absolute;
	top: 50%;
	font-size: 104px;
	text-align: center;
	color: #d8dde7;
	width: 100%;
	margin-top: -52px;
}

	.screen_layout_preview_card .screenlayout_preview .component {
		position: relative;
		height: 100%;
	}

	.screen_layout_preview_card .screenlayout_preview .component_header {
		height: 26px;
		font-size: 14px;
		line-height: 26px;
	}


	.screen_layout_preview_card .screenlayout_preview .component_header .component_tabs{
		height: 26px;
	}

	.screen_layout_preview_card .screenlayout_preview .component_header .component_tabs .component_tab{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 17px;
		line-height: 17px;
		padding: 1px 4px;
	}

	.screen_layout_preview_card .screenlayout_preview .component_header .component_tabs .component_tab.active {
		max-width: 51%;
		width: auto;
		height: 26px;
		line-height: 26px;
	}

	.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body {
		position: absolute;
		height: calc(100% - 26px);
		width: 100%;
	}

	.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon_wrapper {
		position: absolute;
		width: 100%;
		top: 40%;
	}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon{
			width: 72px;
			height: 72px;
			display: block;
			margin: 0 auto;
			background-repeat: no-repeat;
		}

		.screen_layout_preview_card .screenlayout_preview .component_body .panel_icon.medium {
			width: 60px;
			height: 60px;
			margin-top: -5px;
		}

		.screen_layout_preview_card .screenlayout_preview .component_body .panel_icon.small {
			width: 18px;
			height: 18px;
			margin-top: 5px;
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon:before {
			display: none;
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-es-grid-view {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-grid.svg);
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-es-graph-view {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-graph.svg);
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-es-card-view {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-card.svg);
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-es-calendar-view {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-calendar.svg);
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-es-iframe {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-iframe.svg);
			background-size: contain;
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-es-editformpanel {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-form.svg);
		}

		.screen_layout_preview_card .screenlayout_preview .screen_layout_container .component_body .panel_icon.efi-chart-bar-vert {
			background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-chart.svg);
		}


		.screen_layout_preview_card .screenlayout_preview .component_body .panel_edit_button{
			position: absolute;
			bottom: 7px;
			right: 8px;
		}

		.screen_layout_preview_card .screenlayout_preview .component_body .panel_edit_button > i{
			color: #4899EA;
			font-size: 23px;
		}

	.screen_layout_preview_card .screenlayout_preview .component_header .component_tabs .component_tab {
		display: inline-block;
	}


		.screen_layout_preview_card .screenlayout_preview .component .header ul li:hover span {
			background: #235E86;
		}


/* END ide screen preview card */

/* ide screen wizard */

.screen_wizard_wrapper {
	height: 100%;
	padding: 5px;
}

.screen_wizard.screen_component .panel-heading .nav-tabs {
	font-size: 0;
}

	.screen_wizard.screen_component .panel-heading .nav-tabs > li {
		font-size: 14px;
	}

	.screen_wizard.screen_component .panel-heading .nav-tabs .efi-trashcan {
		color: #ff5f08;
		/*font-size: 15px;*/
		cursor: pointer;
	}

.screen_wizard_page {
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 6px 10px;
	animation-duration: 0.20s;
	animation-timing-function: ease-in-out;
	-webkit-animation-duration: 0.20s;
	-webkit-animation-timing-function: ease-in-out;
}

	.screen_wizard_page.start_page {
		animation: none;
	}

		.screen_wizard_page.loading_page {
			text-align: center;
			padding-top: 5rem;
		}

	/* sliding animation */

	/* When the page enters, slide it from the right */
	.screen_wizard_page.ng-enter {
		animation-name: slideFromRight;
		-webkit-animation-name: slideFromRight;
	}
	/* When the page leaves, slide it to left(out of the user view) from the left corner,
	in other words slide it from the left(out of the view) to the left corner but in reverse order */
	.screen_wizard_page.ng-leave {
		animation-name: slideFromLeft;
		animation-direction: reverse;
		-webkit-animation-name: slideFromLeft;
		-webkit-animation-direction: reverse;
	}

	@keyframes slideFromRight {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes slideFromLeft {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@-webkit-keyframes slideFromRight {
		0% {
			-webkit-transform: translateX(100%);
		}

		100% {
			-webkit-transform: translateX(0);
		}
	}

	@-webkit-keyframes slideFromLeft {
		0% {
			-webkit-transform: translateX(-100%);
		}

		100% {
			-webkit-transform: translateX(0);
		}
	}
	/* sliding animation end */

.screen_wizard .subpage_selector {
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: height ease-out .2s;
}

	.screen_wizard .subpage_selector.closed {
		height: 61px;
	}

		.screen_wizard .subpage_selector .btn,
		.screen_wizard .subpage_selector .btn:focus { /* TODO SKIN */
			width: 216px;
			height: 120px;
			font-size: 14px;
			border: solid 1px #bac3d0;
			background-color: #fff;
			border-radius: 5px;
			text-align: center;
			color: #165bec;
			font-weight: bold;
		}

	.screen_wizard .subpage_selector.closed .btn{
		/*padding: 15px 25px;*/
		height: 55px;
		top: 0;
	}

	.screen_wizard .subpage_selector .btn:first-child {
		margin-right: 84px;
	}

	.screen_wizard .subpage_selector .btn:last-child {
		margin-left: 84px;
	}

	.screen_wizard .subpage_selector .btn span > i,
	.screen_wizard .subpage_selector .btn:focus span > i { /* TODO SKIN */
		display: block;
		background-image: url(../../ide/gfx/designer_card_icons.svg);
		width: 72px;
		height: 48px;
		margin: 0px auto 21px;
	}

	.screen_wizard .subpage_selector .btn span > i:before {
		display: none;
	}

	.screen_wizard .subpage_selector .btn.empty_screen_button span > i,
	.screen_wizard .subpage_selector .btn.empty_screen_button:focus span > i {
		background-position-x: -96px;
		background-position-y: -131px;
	}


	.screen_wizard .subpage_selector .btn.import_appblock_button span > i,
	.screen_wizard .subpage_selector .btn.import_appblock_button:focus span > i {
		background-position-x: 0;
		background-position-y: -131px;
	}

	.screen_wizard .subpage_selector .btn.import_block_button span > i,
	.screen_wizard .subpage_selector .btn.import_block_button:focus span > i {
		background-position-x: 0;
		background-position-y: -131px;
	}

	.screen_wizard_subpage {
		height: 100%;
		display: flex;
		flex-direction: column;
	}



/* screen_wizard - import block */
.import_block {
	margin: 0;
	padding: 0;
	padding-bottom: 40px;
	flex: 1 1 auto;
	height: 100%;
}

	.import_block .card-body {
		padding: 0px !important;
	}

	.import_block .component > .card-body {
		padding: 0px !important;
	}

	.import_block .block-port {
		height: 100%;
	}

	.import_block .document_textbox_input_container {
		background-color: #F5F5F5;
	}
	/* END screen_wizard - import block */

	/* screen_wizard - layout selector */
	.layout_item .component {
		position: relative;
		width: 100%;
		height: 100%;
		font-size: 12px;
		background: #fff;
	}


	.ide_layoutselector {
		margin: 0;
		padding: 15px 24px 10px;
		flex: 1 1 auto;
	}


		.ide_layoutselector .layout_item {
			display: inline-block;
			background: none;
			margin: 0px 24px;
			width: 216px;
			overflow: visible;
		}


		.ide_layoutselector [effector-screensplit-layout] {
			height: 144px;
		}

			.ide_layoutselector [effector-screensplit-layout] + span {
				display: block;
				text-align: center;
				margin-top: 9px;
				font-size: 14px;
				font-weight: bold;
				color: #165bec;
			}

		.ide_layoutselector .layout_item.selected {
			box-shadow: none;
		}

		.ide_layoutselector .layout_item:hover {
			box-shadow: none;
		}

		.ide_layoutselector .screen_layout_container {
			padding: 0;
			border-radius: 5px;
			border: solid 1px #bac3d0;
			overflow: hidden;
		}

			.ide_layoutselector .screen_layout_container .component .header span.active {
				height: 25px;
				width: 48px;
				display: inline-block;
				line-height: 21px;
				padding: 2px 5px;
				overflow: hidden;
				white-space: nowrap;
				max-width: 85%;
				text-overflow: ellipsis;
			}

			.ide_layoutselector .screen_layout_container .component .header span.active { /* TODO SKIN */
				background: #fff;
				color: #235E86;
				cursor: auto;
			}

		.ide_layoutselector .layout_item:hover .screen_layout_container {
			box-shadow: 4px 4px 0 0 rgba(139, 143, 161, 0.5);
		}

		.ide_layoutselector .layout_item.selected .screen_layout_container {
			box-shadow: 4px 4px 0 0 rgba(240, 46, 24, 0.6);
		}

		.ide_layoutselector .screen_layout_container .split_thumb {
			background-color: #bac3d0;
		}

		.ide_layoutselector .screen_layout_container .component .header {
			background-color: #bac3d0;
			text-align: left;
		}

.ide_layoutselector .layouts {
	height: 100%;
	text-align: center;
	overflow: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

	.ide_layoutselector div.footer {
		height: 48px;
		border-top: none;
		text-align: right;
	}

	/* END screen_wizard - layout selector */


	/* screen_wizard - appblock selector */

	.screen_wizard .appblock_selector {
		height: 100%;
		padding: 22px 24px;
		margin: 0;
		overflow: hidden;
	}


		.screen_wizard .appblock_selector .blocks {
			display: flex;
			flex-direction: column;
			float: left;
			overflow: auto;
			height: 100%;
			border-radius: 5px;
			border: solid 1px #bac3d0;
			background-color: #fff;
			width: 300px;
			margin-right: 24px;
		}

	.screen_wizard .appblock_selector  iframe {
		width: calc(100% - 324px);
		border-radius: 5px;
		border: solid 1px #bac3d0;
		float: left;
		background: #fff;
		height: 100%;
	}

	.screen_wizard .appblock_selector .blocks > div:hover {
		background-color: #f5f6fa;
	}

	.screen_wizard .appblock_selector .blocks > div > div {
		display: flex;
		align-items: center;
		height: 49px;
		border-bottom: solid 1.5px #bac3d0;
		margin: 0 12px;
	}
	
	.screen_wizard .appblock_selector .blocks > div.active {
		background-color: #e0e6ef;
	}


	.screen_wizard .appblock_selector .blocks > div.active > div {
		box-shadow: none;
		border: inherit;
		border: none;
		border-bottom: solid 1.5px #bac3d0;
	}

	.screen_wizard .appblock_selector .blocks > div > div span:nth-child(2) {
		font-size: 16px;
		color: #165bec;
		font-weight: bold;
	}

	.screen_wizard .appblock_selector .blocks > div > div span:last-child {
		display: none;
	}


	.screen_wizard .appblock_selector .blocks > div > div .block_item_icon {
		background-image: url(../../ide/gfx/designer_card_icons.svg);
		width: 36px;
		height: 24px;
		background-position: -498px -79px;
		padding-right: 50px;
	}

	/* END screen_wizard - appblock selector */
	
	/* screen_wizard - screen designer */

.ide_screen_designer {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content:space-between;
}

	.ide_screen_designer .wrapper {
		display: flex;
		overflow: hidden;
		flex-direction: row-reverse;
		padding: 10px 24px;
		flex: 1 auto;
	}


	.ide_screen_designer .toolbar {
		flex: 0 0 340px;
		width: 340px;
		max-width:340px;
		/*overflow: hidden;*/
		border-radius: 5px;
		border: solid 1px #bac3d0;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.ide_screen_designer .toolbar .toolbar_header {
		padding-right: 5px;
		line-height: 30px;
		border-bottom: 5px solid #fff;
		background: #eeeeee;
	}

		.ide_screen_designer .toolbar .toolbar_header a {
			display: inline-block;
			height: 30px;
			line-height: 30px;
			padding: 0 5px;
			vertical-align: bottom;
			font-size: 14px;
			font-weight: bold;
			color: #787c90;
		}

			.ide_screen_designer .toolbar .toolbar_header a.active {
				background: #fff;
				color: #262626;
			}


	.ide_screen_designer .toolbar .toolbar_body {
		padding: 0 12px;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}


		.ide_screen_designer .toolbar .toolbar_body .toolbar_controls {
			margin: 0 0 5px;
			border-bottom: 1px solid #ddd;
		}

			.ide_screen_designer .toolbar .toolbar_body .toolbar_controls > * {
				margin-top: 5px;
			}

				.ide_screen_designer .toolbar .toolbar_body .toolbar_controls > *:first-child {
					margin-top: 0;
				}

				.ide_screen_designer .toolbar .toolbar_body .toolbar_controls > *:last-child {
					margin-bottom: 5px;
				}


	/* TODO SKIN */
	/*.ide_screen_designer .toolbar .toolbar_body .toolbar_item { 
		width: 300px;
		height: 50px;
		margin: 5px auto;
		padding: 4px 4px 4px 89px;
		background: url(../../core/gfx/images/ide/skinbuilder/sb_card_style_group_bg.png) center center no-repeat;
		border: 1px solid #ccc;
		overflow: hidden;

	}*/

	/* TODO SKIN */
	/*.ide_screen_designer .toolbar .toolbar_body .toolbar_item:hover {
		box-shadow: 0px 0px 1px 0px #000;
	}*/

	.ide_screen_designer .toolbar .toolbar_body .toolbar_list {
		margin: 0 -10px 0 0;
		overflow: auto;
		padding-right: 10px;
		min-height: 200px;
	}

		.ide_screen_designer .toolbar .toolbar_body.excel_import .toolbar_list {
			height: calc(100% - 35px);
		}

	.ide_screen_designer .toolbar .toolbar_body .toolbar_item {
		background: none;
		min-height: 51px;
		margin: 0;
		border: 0;
		border-bottom: solid 1.5px #bac3d0;
		padding-left: 72px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
	}

	.ide_screen_designer .toolbar .toolbar_body .toolbar_item:hover {
		background-color: #f5f6fa;
	}

		.ide_screen_designer .toolbar .toolbar_body .toolbar_item.appblock {
			padding-right: 40px;
		}
		.ide_screen_designer .toolbar .toolbar_body .toolbar_item .efi-eye {
			position: absolute;
			right: 10px;
			color: #165bec;
			cursor: pointer;
		}
		/* TODO ezeket lehetne általánosan használható class-ba tenni*/
		.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon {
			width: 24px;
			height: 24px;
			display: inline-block;
			position: absolute;
			left: 12px;
			background-repeat: no-repeat;
		}

			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon:before {
				display: none;
			}


			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-grid-view {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-grid.svg);
			}


			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-card-view {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-card.svg);
			}

			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-calendar-view {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-calendar.svg);
			}

			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-iframe {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-iframe.svg);
				background-size: contain;
			}

			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-graph-view {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-graph.svg);
				background-size: contain;
			}

			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-editformpanel {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-form.svg);
			}

			/* MERGE issue?
					.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-es-card-view {
						background-position: -114px -79px;
					}
			*/

			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon.efi-chart-bar-vert {
				background-image: url(../../core/gfx/images/ide/screen_wizard/big-icon-chart.svg);
			}


			.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_icon + span {
				font-size: 16px;
				font-weight: bold;
				color: #165bec;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
			}

		.ide_screen_designer .toolbar .toolbar_body .toolbar_item.appblock .item_icon + span {
			white-space: normal;
			}

			.ide_screen_designer_toolbar_item_filename {
				font-size: 11px;
				color: #165bec;
				display: block;
				top: 56%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
			}

		.ide_screen_designer .toolbar .toolbar_body .toolbar_item.excel_import {
			padding-left: 113px;
		}

		.ide_screen_designer .toolbar .toolbar_body .toolbar_item .item_excel_icon {
			background-image: url(../../ide/gfx/designer_card_icons.svg);
			width: 36px;
			height: 24px;
			display: inline-block;
			position: absolute;
			top: 13px;
			left: 65px;
			background-position: -614px -149px;
		}

		.ide_screen_designer .toolbar .toolbar_body .ui-draggable-dragging .toolbar_item {
			border: 1px solid #ddd;
			border-radius: 5px;
		}


.ide_screen_designer .designer_canvas {
	overflow: hidden;
	margin-right: 24px;
	display: flex;
	flex-direction: column;
	flex: 1 auto;
}

.ide_screen_designer .canvas_toolbar {
	display: flex;
	align-items: center;
	margin: 0 0 10px 2px;
}

			.ide_screen_designer .canvas_toolbar .control-label {
				width: auto;
				margin: 0 5px;
			}

			.ide_screen_designer .canvas_toolbar .screen_name {
				display: flex;
				margin: 0 8px 0 4px;
			}

			.ide_screen_designer .canvas_toolbar .popup_window {
				display: flex;
				margin: 0 4px 0 0;
			}

				.ide_screen_designer .canvas_toolbar .popup_window label.control-label,
				.ide_screen_designer .canvas_toolbar .screen_name label.control-label {
					position: relative;
					bottom: -3px;
				}

				.ide_screen_designer .designer_canvas .inner_canvas {
					border: 1px solid #bac3d0;
					border-radius: 5px;
					overflow: hidden;
					height: 100%;
				}

		.ide_screen_designer .designer_canvas .layout_preview.without_mm_selector {
			height: 100%;
		}
	
	.ide_screen_designer .designer_canvas .split_thumb {
		background-color: #e0e6ef; /* TODO SKIN */
	}
		
	.designer_canvas .component{
		height: 100%;
		width: 100%;
		overflow: hidden;
		background: #fff;
	}

		.ide_screen_designer .designer_canvas .component .header {
			height: 30px;
			position: relative;
			white-space: nowrap;
			background-color: #e0e6ef;
		}

	.ide_screen_designer .designer_canvas .component .header ul {
		display: inline-block;
		position: relative;
		padding: 0;
		padding-right: 28px;
		list-style-type: none;
		margin: 0;
		border: 0;
	}

	.ide_screen_designer .designer_canvas .component .header ul li {
		display: inline-block;
		margin: 0;
		overflow: hidden;
		height: 30px;
	}

	.ide_screen_designer .designer_canvas .component .header ul li span {
		display: inline-block;
		cursor: pointer;
		padding: 0;
		margin: 9px 8px;
		border-right: 0;
		color: #787c90;
		font-size: 14px;
		font-weight: bold;
		line-height: 14px;
		background-color: transparent;
	}

	.ide_screen_designer .designer_canvas .component .header ul li.active {
		background-color: #fff;
	}

		.ide_screen_designer .designer_canvas .component .header ul li.active span {
			border-bottom: 1px solid #165bec;
			color: #165bec;
			font-weight: bold;
			margin: 6px 8px;
		}

		.ide_screen_designer .designer_canvas .component .header .efi-wd-edit:before {
			display: none;
		}

		.ide_screen_designer .designer_canvas .component .header .efi-wd-edit {
			background-image: url(../../core/gfx/images/icons.png);
			width: 13px;
			height: 13px;
			display: inline-block;
			margin-left: 7px;
			background-position-x: -81px;
			background-position-y: -160px;
		}

	.ide_screen_designer .designer_canvas .component .header ul li input {
		color: #165bec;
		font-weight: bold;
		font-size: 14px;
		height: 30px;
		border: 0;
		outline: 0;
		padding: 0 10px;
	}



	.ide_screen_designer .designer_canvas .component .header ul li.new_tab_button {
		width: 28px;
		text-align: center;
		position: absolute;
		right: 0px;
	}

	.ide_screen_designer .designer_canvas .component .header ul li.new_tab_button span {
		margin: 0;
		font-size: 25px;
		padding: 2px 0px;
		border: 0;
		background: none;
	}


	.ide_screen_designer .designer_canvas .component .header ul li.new_tab_button span i::before {
		display: none;
	}

	.ide_screen_designer .designer_canvas .component .header ul li.new_tab_button span i {
		background-image: url(../../core/gfx/images/icons.png);
		width: 13px;
		height: 13px;
		background-position-x: -110px;
		background-position-y: -184px;
		display: inline-block;
		position: relative;
		top: 6px;
	}

	.ide_screen_designer .designer_canvas .component .header .scrtabs-tab-wrapper-container,
	.ide_screen_designer .designer_canvas .component .header .scrtabs-tabs-fixed-container{
		height: 30px;
	}

	.ide_screen_designer .designer_canvas .component .header .scrtabs-tab-scroll-arrow {
		height: 32px;
		background-size: 12px !important;
	}

	.ide_screen_designer .designer_canvas .component .header .scrtabs-js-tab-scroll-arrow-right{
		border-left: 1px solid #ddd;
		background: url(../../core/gfx/images/_effector_webfont_svg_ext/angle-round-right-screenwizard-minormenu.svg) no-repeat 50% 50%;

	}

	.ide_screen_designer .designer_canvas .component .header .scrtabs-js-tab-scroll-arrow-left{
		border-right: 1px solid #ddd;
		background: url(../../core/gfx/images/_effector_webfont_svg_ext/angle-round-left-screenwizard-minormenu.svg) no-repeat 50% 50%;
	}


	.ide_screen_designer .designer_canvas .component .content {
		position: relative;
		height: calc(100% - 30px);
		background-size: min(80%, 260px) min(80%, 260px);
		background-repeat: no-repeat;
		background-position: center center;
		opacity: 0.8;
	}

		.ide_screen_designer .designer_canvas .component .content::before { /* TODO SKIN */
			position: absolute;
			content: "";
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%), linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%), linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,0) 40%);
		}

	.ide_screen_designer .designer_canvas .content.toolbar_item_onhover {
		opacity: 0.4;
	}

	.ide_screen_designer .designer_canvas .component .connected_forms_button::before {
		display: none;
	}

	.ide_screen_designer .designer_canvas .component .connected_forms_button {
		margin: 10px;
		bottom: 0;
		right: 0;
		/*background-image: url(../../ide/gfx/designer_card_icons.svg);*/
		/*width: 36px;*/
		/*height: 24px;*/
		/*background-position: -691px -147px;*/
		/*display: inline-block;*/
		position: absolute;
		font-size: 34px;
	}

	/* END screen_wizard - screen designer */

	/* END ide screen wizard */

	/* screen_layout direktíva */

	.screen_layout_container {
			height: 100%;
		}

		.screen_layout_container .split{
			width: 100%;
			height: 100%;
		}

		*[effector-screensplit-layout]{
			height: 100%;
		}

		/* vertical splitting */
		.screen_layout_container .split.split_vertical > .split_panel1,
.screen_layout_container .split.split_vertical > .split_panel2 {
			height: 100%;
			float: left;
		}
			
		.screen_layout_container .split.split_vertical > .split_thumb{
			height: 100%;
			float: left;
		}
			
.screen_layout_container .split.split_vertical > .split_panel2:after {
			clear: left;
		}
		
		/* horizontal splitting */
		.screen_layout_container .split.split_horizontal > .split_panel1,
.screen_layout_container .split.split_horizontal > .split_panel2 {
			width: 100%;
		}	
			
		.screen_layout_container .split.split_horizontal > .split_thumb{
			width: 100%;
		}

	/* END screen_layout direktíva */

/* menu_editor */
.menu_editor_page .menu_dropdown_label input,
.menu_editor_page .menu_dropdown_button input {
	background: transparent;
	padding: 0;
	text-decoration: underline;
	border: 0;
	outline: none;
}

.menu_editor_page .menu_dropdown_label input {
	text-transform: uppercase;
}

.menu_editor_page i.efi-logo-oriana-sign {
	margin-right: 5px;
	margin-left: -5px;
}

.menu_editor_page i.efi-pencil {
	margin-left: 7px;
	font-size: 14px;
}

.menu_editor_page i.efi-trashcan {
	margin-left: 7px;
	font-size: 15px;
	cursor: pointer;
}

.menu_editor_page .protected .menu_dropdown_label {
	background: transparent;
}
/* END menu_editor */
/* LEGACY IDE CSS TODO REFACTOR */
/* EffectorBasic */
.EBGeneratedPanel {
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

.EBComponentName {
    position: absolute;
    width: 100%;
    height: 18px;
    font-size: 11px;
    padding-top: 2px;
    padding-left: 6px;
}

.EBcontrol_element_button {
	position: relative; /* comboboxos dropdown miatt */
	height: 23px;
	border-radius: 2px;
	transition: color .20s linear, background-color .20s ease-in-out, border-color .20s ease-in-out;
	margin: 0 10px 0 0;
    cursor: default !important;
}

.EBcontrols_btn {
	border-radius: 2px;
    float: left;
	font: inherit;
	font-size: 13px;
	line-height: 22px;
    margin: 3px 0px 0px 16px;
	padding: 1px 5px;
}
/* EffectorBasic END */

/* WorkFlowDesign */
/*.WFDesign .card_list
{
	background-position: 0px 0px, 18px 0px, 0px 18px, 18px 18px;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat;
	background-attachment: local;
	top: 71px !important;
}

.WFDesign .effector_table_toolbar
{
	display: none;
}

.WFDesign .card_list_item_active
{
	box-shadow: none !important;
	overflow: visible !important;
}

.WFDesign .card_list_item {
    margin-top: 2px !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.WFDesignBlue .card_list {
    background-position: 0px 0px, 18px 0px, 0px 18px, 18px 18px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-attachment: local;
    top:71px !important;
}

.WFDesignBlue .effector_table_toolbar {
    display: none;
}

.WFDesignBlue .card_list_item_active {
    box-shadow: none !important;
    overflow: visible !important;
}

.WFDesignBlue .card_list_item {
    margin-top: 2px !important;
    overflow: visible !important;
    box-shadow: none;
}*/


.EditFormDesign .card_list_item_active {
    box-shadow: 4px 4px #D4D4D4 !important;
	background: #fcfcfc !important;
}

.EditFormDesign .card_list_item {
    box-shadow: none;
	background: none;
}

.EditFormDesign .card_list_item:hover {
    box-shadow: 4px 4px #D4D4D4 !important;
	background: #fcfcfc;
}

/*.WFDesignTask {
    z-index:9999;
}

.WFDesignTaskGray {
    z-index:9999;
}

.WFDesignTaskHLBottom {
    z-index:9999;
}

.WFDesignTaskHLTop {
    z-index:9999;
}

.WFDesignEmptyCard {
    z-index:9999;
}

.WFDesignArrow {
    z-index:9999;
}

.WFDesignBTNOtherCard { display: none; }
.WFDesignBTNEmptyCard { display: none; }
.WFDesignBTNArrowCard { display: none; }

.WFDesignTask .WFDesignBTNOtherCard { display: none; }
.WFDesignTask:hover .WFDesignBTNOtherCard { display: block; }

.WFDesignTaskHLBottom .WFDesignBTNOtherCard { display: none; }
.WFDesignTaskHLBottom:hover .WFDesignBTNOtherCard { display: block; }

.WFDesignTaskHLTop .WFDesignBTNOtherCard { display: none; }
.WFDesignTaskHLTop:hover .WFDesignBTNOtherCard { display: block; }

.WFDesignEmptyCard .WFDesignBTNEmptyCard { display: none; }
.WFDesignEmptyCard:hover .WFDesignBTNEmptyCard { display: block; }

.WFDesignArrow .WFDesignBTNArrowCard { display: none; }
.WFDesignArrow:hover .WFDesignBTNArrowCard { display: block; }

.WFWithoutActive .card_list_item_active {
    box-shadow: none !important;
}*/
/* WorkFlowDesign END */

.ide-toolbar-top {
	opacity: 0.3;
	position: absolute;
	right: 0;
	top: 18px;
}

.ide-toolbar-top .ide-badget {
	opacity: 0.7;
	margin: 0;
}

.ide-toolbar-top .ide-badget:hover{
	opacity: 1;
	transition: opacity .5s ease-in-out;
}

.listview_item_content_01:hover .ide-toolbar-top { 
	opacity: 1; 
	transition: opacity .5s ease-in-out;
}

.ide-toolbar {
	position: absolute;
	width: 98%;
	bottom: -3px;
}

.ide-toolbar-right {
	position: absolute;
	right: 0;
	top: 10px;
}

.ide-name {
	height: 33px;
	padding: 0px 10px 10px 20px;
	font-size: 15px;
	overflow: hidden;
}

.ide-badget { 
	padding: 5px;
	font-size: 11px;
	margin: 0px;
	transition: all .2s ease-in-out;
	opacity: 0.7;
	min-width: 250px;
	letter-spacing: 1px;
}

.ide-badget:hover {
	opacity: 1;
	transition: all .2s ease-in-out;
}

/* Menu Editor */
/* Inner Component */
.IDEInnerComponentCustom .inner_component {
	border-width: 0px;
	box-shadow: none;
}

.IDEInnerComponentCustom .effector_table_toolbar {
	display: none;
}

.IDEInnerComponentCustom .card_list_vertical .card_list_group {
	border-width: 0px;
}

.IDEInnerComponentCustom .panel {
	box-shadow: none;
}

.IDEInnerComponentCustom .card_list_vertical > div:first-child,
.IDEInnerComponentCustom .card_list_vertical .card_list_group_headers,
.IDEInnerComponentCustom .card_list_vertical .card_list_group h4 {
	display: none;
}

.IDEInnerComponentCustom .dgvc_card_wrapper div {
	padding-bottom: 0px !important;
}


/* Menu Editor */


	/* END LEGACY IDE CSS TODO REFACTOR */


.field_properties .dropdown-menu .dropdown-item,
.workflowstep_designer .dropdown-menu .dropdown-item {
	float:none;
	width: auto;
	margin: 0;
}
/* studio form editor */
.form_fields {
	top: 0%;
	left: 0%;
	width: 50%;
	height: 100%;
}

	.form_fields .fields .control-horizontalrule {
		margin: 12px 0;
	}

.field_properties {
	top: 0%;
	left: 50%;
	width: 50%;
	height: 100%;
}

	.form_editor :focus,
	.field_settings :focus {
		outline: none;
	}

.field_settings h2 {
	font-size: 16px;
	color: #262626;
	padding: 12px 0;
	margin: 0;
}

.form_editor .fill-audit-fields {
	display: flex;
	align-items: center;
}

.form_editor .fields {
	display: flex;
	flex-direction: column;
}
	
	.form_editor .fields .fieldset {
		border: 1px solid #bbb;
		cursor: move;
		margin-left: 10px;
		margin-right: 10px;
	}

	.form_editor .fields .fieldset.active {
		border: 2px dotted #f00;
		border-radius: 5px;
	}
	
	.form_editor .fields .virtualFieldset {
		border: 0px;
		margin-bottom: 0px;
		cursor: move;
		margin-right: 10px;
	}

	.form_editor .fields .dropZone {
		border: 0px;
		margin-bottom: 0px;
		cursor: default;
		margin-right: 10px;
		min-height: 10px;
	}

	.form_editor .fields .fieldset > legend {
		margin-left: 15px;
		padding-left: 5px;
		padding-right: 5px;
		color: #a11e5c;
		font-size: 14px;
		font-weight: bold;
		text-transform: uppercase;
		width: initial;
	}

	.form_editor .fields .fieldset > legend > label {
		margin-bottom: 0;
	}

		.form_editor .fields .fieldset > legend > a {
			display: none;
		}

			.form_editor .fields .fieldset > legend > a.efi-trashcan-v6 {
				color: #ff3600;
			}

	.form_editor .fields .fieldset > legend:hover > a {
		display: inline-block;
	}

	.form_editor .fields .fieldset > legend > i {
		font-size: 9px;
		color: #9a9ead;
		cursor: pointer;
		padding-left: 10px;
	}

		.form_editor .fields .fieldset > legend > i.efi-angle-round-right {
			font-size: 13px;
		}

	.form_editor .fields .group {
		position: relative;
		margin: 0 0 5px;
		padding: 3px 45px 3px 40px;
		font-size: 0;
		border: 2px dotted transparent;
		border-radius: 5px;
		height: 38px;
	}

	.form_editor .fields .group.active {
		border-color: #f00;
	}

	.form_editor .fields .group .efi-add-v6 {
		display: inline-block;
		color: #1875f0;
		font-size: 16px;
		vertical-align: middle;
		margin: 0 4px 0 6px;
		position: absolute;
		right: 24px;
		top: calc(50% - 9px);
	}

	.form_editor .fields .group .efi-trashcan-v6 {
		display: inline-block;
		vertical-align: middle;
		font-size: 16px;
		color: #ff3600;
		position: absolute;
		right: 5px;
		top: calc(50% - 9px);
	}

.pull-right {
	float: right !important;
}

.label-in-fieldset {
	flex-basis: calc(25% - 15px);
	max-width: calc(25% - 15px);
}

.col-sm-1.in-fieldset {
	flex-basis: calc(8.333333% + 15px);
	max-width: calc(8.333333% + 15px);
}

.col-sm-2.in-fieldset {
	flex-basis: calc(16.666667% + 15px);
	max-width: calc(16.666667% + 15px);
}

.col-sm-3.in-fieldset {
	flex-basis: calc(25% + 15px);
	max-width: calc(25% + 15px);
}

.col-sm-4.in-fieldset {
	flex-basis: calc(33.333333% + 15px);
	max-width: calc(33.333333% + 15px);
}

.col-sm-5.in-fieldset {
	flex-basis: calc(41.666667% + 15px);
	max-width: calc(41.666667% + 15px);
}

.col-sm-6.in-fieldset {
	flex-basis: calc(50% + 15px);
	max-width: calc(50% + 15px);
}

.col-sm-7.in-fieldset {
	flex-basis: calc(58.333333% + 15px);
	max-width: calc(58.333333% + 15px);
}

.col-sm-8.in-fieldset {
	flex-basis: calc(66.666667% + 15px);
	max-width: calc(66.666667% + 15px);
}

.col-sm-9.in-fieldset {
	flex-basis: calc(75% + 15px);
	max-width: calc(75% + 15px);
}

.col-sm-10.in-fieldset {
	flex-basis: calc(83.333333% + 15px);
	max-width: calc(83.333333% + 15px);
}

.col-sm-11.in-fieldset {
	flex-basis: calc(91.666667% + 15px);
	max-width: calc(91.666667% + 15px);
}

.col-sm-12.in-fieldset {
	flex-basis: calc(100% + 15px);
	max-width: calc(100% + 15px);
}

.new_group > div > button {
	margin-right:12px;
}

.form_editor .fields .group .drag-info {
	position: absolute;
	line-height: 22px;
	text-align: center;
	top: calc(50% - 8px);
	left: 12px;
	border: 1px solid #bbb;
	border-radius: 20px;
	width: 20px;
	height: 20px;
}

		.form_editor .fields .group .drag-info span {
			position: relative;
			color: #777;
			z-index: 1;
			font-weight: bold;
			font-size: 13px;
			min-width: 16px;
			display: inline-block;
			line-height: 19px;
		}

	.form_editor .fields .group .control_wrapper {
		display: inline-block;
		vertical-align: top;
		border-radius: 4px;
		position: relative;
		font-size: 14px;
	}

			.form_editor .fields .group .control_wrapper:hover {
				padding-right: 24px;
			}

		.form_editor .fields .group .control_wrapper .control {
			border: 2px dotted transparent;
			position: relative;
		}

		.form_editor .fields .group .control_wrapper .control.active {
			border-color: #f00;
			border-radius: 5px;
		}

			.form_editor .fields .group .control_wrapper .control input[name="field_caption"] {
				border: 2px dotted #f00;
				border-radius: 5px;
				line-height: 20px;
				color: #000;
				font-weight: bold;
				font-size: 14px;
				padding: 0 6px;
				margin: 0 3px;
				display: inline-block;
				width: 100%;
			}
			/* ie hack */
			@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
				.form_editor .fields .group .control_wrapper .control input[name="field_caption"] {
					height: 28px;
				}
			}

			.form_editor .fields .group .control_wrapper .control select {
				height: 24px;
			}

		.form_editor .fields .group .control_wrapper:first-child {
			margin: 0;
		}

			.form_editor .fields .group .control_wrapper .control .invisible_layer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: 0;
				z-index: 4;
			}

			.form_editor .fields .group .control_wrapper .edit_panel {
				display: none;
				z-index: 5;
				height: 100%;
				position: absolute;
				top: -2px;
				right: -1px;
				align-items: center;
				margin: 2px;
			}
			
			.form_editor .fields .group .control_wrapper:hover .edit_panel {
				display: flex;
			}

				.form_editor .fields .group .control_wrapper:hover .edit_panel .efi-trashcan-v6 {
					color: #ee722f;
					font-size: 18px;
					display: inline-block;
					position: static;
				}

		.form_editor .fields .group .control_wrapper .control.control_label {
			overflow: hidden;
			word-break: break-word;
		}

		.form_editor .fields .group .control_wrapper .control.control_label.active {
			border: 0;
		}

				.form_editor .fields .group .control_wrapper .control.control_label > div label {
					cursor: text;
					padding: 0 6px;
				}

				.form_editor .fields .group .control_wrapper .control.control_label.active > div label {
					border: 2px dotted #f00;
					border-radius: 5px;
				}

				.form_editor .fields .group .control_wrapper .control.control_label > div a.efi-pencil-v6 {
					display: none;
					top: 3px;
					right: 0;
					font-size: 20px;
					width: 16px;
					height: 16px;
					margin: 0 5px;
					overflow: hidden;
					color: #1875f0;
				}

				.form_editor .fields .group .control_wrapper:hover .control.control_label > div a.efi-pencil-v6 {
					display: block;
				}

					.form_editor .fields .group .control_wrapper .control.control_label > div a.efi-pencil-v6:before {
						margin: -2px;
					}


	.form_editor .fields .group .control_wrapper .control.control_label + .edit_panel > .efi-trashcan-v6,
	.form_editor .fields .group .control_wrapper .control.control_checkbox + .edit_panel > .efi-trashcan-v6 {
		position: static;
	}


	/* workflowstep designer */
.workflowstep_designer .card-body {
	display: none;
}

	.workflowstep_designer .card-body.active {
		display:block;
	}

	.system_task .card-body h2,
	.workflowstep_designer .card-body h2 {
		font-size: 16px;
		color: #262626;
		text-align: center;
		margin: 18px 0;
		text-transform: uppercase;
	}

			.system_task .card-body h2 i,
			.workflowstep_designer .card-body h2 i {
			color: #bbc3d1;
			display: inline-block;
			margin-right: 10px;
		}


.field_settings {
	margin-top: 6px;
}

	.rule_properties .existing_rules .existing_rule {
		margin: 0 0 24px;
		border-bottom: 1px solid #d3dae5;
	}

		.rule_properties .existing_rules .existing_rule > .form-horizontal {
			margin-top: 24px;
		}

		.rule_properties .existing_rules .existing_rule > label {
			margin: 0;
			font-size: 16px;
			color: #262626;
		}

			.rule_properties .existing_rules .existing_rule .efi-trashcan-v6 {
				color: #ff3600;
				font-size: 22px;
				margin: 0 0 0 5px;
			}


.excel_upload p {
	margin: 0;
	padding: 10px 0;
}

.column {
	display:inline-block;
	position: relative;
	margin: 4px 10px 0 0;
	border: 1px solid #ccc;
	padding: 5px;
	border-radius: 5px;
	background: #ddd;
	font-size: 12px;
	white-space: nowrap;
	width: auto !important;
	user-select: none;
	transition: background ease-in-out .3s;
}

	.column > div.colors {
		position: absolute;
		height: 20px;
		top: -10px;
		font-size: 0;
		left: -10px;
	}

		.column > div.colors > span.color {
			display: inline-block;
			height: 20px;
			width: 20px;
			border-radius: 20px;
			text-align: center;
			line-height: 20px;
			position: relative;
			font-size: 12px;
			transition: margin-left .3s ease, transform .3s ease;
		}

			.column > div.colors > span.color + span.color {
				margin-left: -17px;
			}

			.column > div.colors:hover > span.color + span.color {
				margin-left: -5px;
			}

		.column > div.colors > span.color:hover {
			z-index: 20;
			cursor: pointer;
			transform: scale(1.35);
		}

	.column > p + div {
		position: absolute;
		bottom: 30px;
		left: 20px;
		background: #fff;
		display: none;
		padding: 3px;
		border: 1px solid #ddd;
		border-radius: 3px;
	}

	.column p  {
		padding: 0;
		min-width: 75px;
	}

	.column p:hover + div {
		display: block;
	}

	.column.ui-draggable-dragging p + div {
		display: none;
	}

	.column p i {
		float: right;
		margin-top: 1px;
		margin-left: 10px;
		font-size:14px;
		cursor: pointer;
	}
/* studio form editor end */


/* wf designer */


.triggerlist .trigger {
	position: relative;
	border: 1px solid #bbc3d1;
	background-color: #fff;
	line-height: 32px;
	margin-bottom: 12px;
	padding: 0 12px 0 8px;
	color: #555;
	border-radius: 5px;
	font-size: 14px;
}

	.triggerlist .trigger:hover {
		box-shadow: 0px 1px 2px 0 rgba(24, 18, 22, 0.35);
	}

	.triggerlist .trigger.active {
		border: 2px dotted #f00;
	}

	.triggerlist .trigger span:first-child {
		display: inline-block;
		width: 18px;
		height: 18px;
		line-height: 18px;
		border-radius: 9px;
		background: #bbc3d1;
		color: #fff;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		margin-right: 8px;
		position: relative;
		top: -1px;
	}

		.triggerlist .trigger span .efi-next-v6 {
			position: relative;
			top: 1px;
			color: #4a8cff;
			font-size: 17px;
		}

	.triggerlist .trigger .efi-trashcan-v6 {
		display: none;
		position: absolute;
		right: 10px;
		top: 4px;
		font-size: 22px;
		color: #ff3600;
	}

		.triggerlist .trigger:hover .efi-trashcan-v6 {
			display: block;
		}
/* wf designer end */

/* META DATA, SYSTEM TASK */
.form_editor,
.trigger_properties,
.meta_attributes {
	height: 100%;
}

.system_task .col-sm-9 .control-textbox,
.system_task .col-sm-9 .control-combobox,
.meta_attributes .col-sm-9 .control-textbox {
	padding-right: 28px;
}

	.system_task .efi-trashcan-v6,
	.meta_attributes .efi-trashcan-v6 {
		position: absolute;
		font-size: 18px;
		top: 3px;
		right: 10px;
		color: #ff3600;
	}

.system_task .efi-pencil-v6,
.meta_attributes .efi-pencil-v6 {
	color: #165bec;
	font-size: 14px;
	vertical-align: middle;
	margin-left: 10px;
}

/* META DATA, SYSTEM TASK END */
.es_xml_editor .xml-editor {
	flex: 1 1 auto;
	overflow: auto;
}

.es_xml_editor .CodeMirror {
	height: 100%;
}

.scss-editor-controller {
	display: flex;
	flex-direction: column;
	height: 100%;
}

	.scss-editor-controller .codemirror-container {
		flex: 1;
		overflow: hidden;
	}

	.scss-editor-controller .fileinput-wrapper {
		position: relative;
		width: 100%;
	}

	.scss-editor-controller input[type="file"] {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
.workflowimport {
	text-align: left !important;
}
.workflowimport .control-label {
	text-align: left !important;
}

.xml_editor_title {
	text-transform: none !important;
}

/* CUSTOM BLOCK IMPORT EXPORT */

.card-header .block-port-title {
	margin: 7px 10px;
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.56;
	letter-spacing: 0.08px;
	color: #777777;
	text-transform: uppercase;
}

.card-header .block-port-title span {
	font-weight: bold;
  	color: #9874aa;
}

.block-port-main {
	/* flex: 1 1 100px; */
	flex-direction: column;
}

.block-port-main .stepped-progress-bar {
	display: flex;
	justify-content: center;
	height: 14%;
	padding-top: 10px;
}

.steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 60%;
  }
  .step {
	width: 14px;
	height: 14px;
	background: #aaa;
	border-radius: 50%;
	transition: background 1s;
	z-index: 1;
  }
	.step i {
		visibility: hidden;
		color: #fff;
		font-size: 9px;
	}
	.step .step-name {
		display: flex;
		justify-content: center;
		padding-top: 15px;
		font-size: 12px;
    	font-weight: bold;
    	line-height: 1.33;
    	color: #aaa;
		text-transform: uppercase;
	}
  .step.selected {
	position: relative;
	bottom: 3px;
	width: 22px;
	height: 22px;
	box-shadow: inset 0 0 0 1px #aaa, inset 0 0 0 4px #f7f7f7;
  }
	.step.selected .step-name {
		color: #777;
		padding-top: 18px;
	}
  .step.completed {
	border: 2px solid #008246;
	background: #008246; 
  }
  .step.completed i{
	visibility: visible;
  }
  .progress-line {
	position: absolute;
	width: 57%;
	height: 9px;
	border-bottom: 2px solid #ACACA6;
  }
  .percent {
	position: absolute;
	width: 0;
	height: 100%;
	border-bottom: 2px solid #008246;
	margin-top: 2px;
	z-index: 1;
	transition: width 1s;
  }

.block-port-main .list-name {
	padding-bottom: 22px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.33;
	color: #777;
	text-transform: uppercase;
}

.block-port-main .list-name i {
	color: #008246;
}

.block-port-data {
	height: 84%;
}

.block-container {
	display: flex;
	height: 100%;
}

.block-container export-screen-component, .block-container import-screen-component {
	width: 73%;
}

.block-container.export-block {
	justify-content: center;
}

.block-port-list {
	width: 27%;
	padding-right: 40px;
}

.export-block .block-port-list {
	margin-right: 8%;
	margin-left: 13%;
}

	.block-port-list .toolbar {
		display: flex;
		align-items: center;
	}

	.block-port-list .toolbar i {
		color: #9874aa;
	}

	.block-port-list .list-elements {
		height: 440px;
		overflow: auto;
		border: 1px solid #aaa;
	}

	.block-port-list .list-elements ul {
		padding-left: 14px;
	}

	.block-port-list .list-elements .screen-list {
		border-left: 2px solid #662b82;
		margin-left: 6px;
	}

	.block-port-list .list-elements div.screen-list {
		padding-left: 14px;
	}

	.block-port-list .list-elements li li, .block-port-list .list-elements div li {
		display: flex;
		align-items: baseline;
		padding-left: 10px;
	}

	.block-port-list .list-elements .selected-screen-item {
		border-left: 2px solid #a11e5c;
		margin: 5px 0;
	}

	.block-port-list .list-elements li i {
		padding-right: 5px;
		color: #662b82;
	}

	.block-port-list .list-elements .selected-screen-item .efi-check-box-checked2 {
		color: #a11e5c;
	}

	.block-port-list .list-elements li.selected {
		background-color: #a11e5c;
	}

	.block-port-list .list-elements li.selected .screen-name {
		color: #fff;
		padding-right: 10px;
	}

	.block-port-list .list-elements ul,
	.block-port-list .list-elements li {
		width: fit-content;
		list-style-type: none;
	}

	.block-port-list .list-elements .mm-info-container {
		display: flex;
		align-items: baseline;
	}

	.block-port-list .list-elements .mm-name {
		max-width: 260px;
		font-size: 14px;
		font-weight: bold;
		line-height: 1.36;
		color: #555;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-transform: uppercase;
	}

	.block-port-list .selectable-elements .mm-name {
		max-width: 220px;
	}

	.block-port-list .list-elements .mm-name {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.36;
		color: #555;
		text-transform: uppercase;
	}

	.block-port-list .list-elements .screen-name {
		max-width: 240px;
		color: #555;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.block-port-list .selectable-elements .screen-name {
		max-width: 210px;
	}

	.details-block .block-port-list .list-elements .screen-name {
		cursor: pointer;
	}

	.block-port-list .list-elements .control-checkbox {
		display: inline-block;
	}

	.block-port-list .list-elements .control-checkbox label {
		display: inline-flex;
		font-size: 14px;
	}

.block-port-details {
	width: 46%;
	padding-left: 23px;
	background-image: linear-gradient(#ccc, #ccc);
	background-repeat: no-repeat;
	background-size: 2px 93%;
	background-position: left bottom;
}

.export-block .block-port-details {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	width: 48%;
	padding-left: 11%;
}

	.block-port-details p {
		padding-top: 19%;
	}

	.block-port-details .checkbox-container {
		display: flex;
	}

	.block-port-details .description-container {
		max-height: 220px;
		overflow-y: auto;
	}

.block-container .port-notice-container {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.block-container .port-notice-container i {
	padding-bottom: 46px;
	font-size: 160px;
	color: #ccc;
}

.block-container .port-notice-container h3 {
	text-transform: uppercase;
}

.block-container .port-notice-container .attention-color {
	color: #e75118;
}

.block-container .big-notice-text {
	width: 31%;
	font-size: 20px;
	color: #555;
	padding-bottom: 29px;
}

.block-port-body {
	height: 100%;
}

.screen_wizard .card-header .card-header-controls a i {
	color: #9874aa;
}
.block-port-body .block-port-menu {
	display: flex;
	align-items: center;
	height: 32px;
}

.block-port-body .block-port-menu a {
	border: 1px solid #aaa;
	border-bottom: none;
	padding: 5px;
	margin-right: 5px;
	color: #888;
	background-color: #fff;
	text-transform: uppercase;
}

.block-port-body .block-port-menu .active {
	color: #682684;
	font-weight: bold;
	padding-bottom: 7px;
}

.block-port-body .conflict-icon {
	color: red;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 3px;
}

.block-port {
	display: flex;
	height: 94%;
	padding: 0 !important;
	border: 1px solid #aaa;
}

.block-port .toolbar {
	flex-basis: 20%;
	width: 20%;
	background-color: #f5f5f5;
}

.block-port .block-port-menu {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.67;
	letter-spacing: 0.08px;
	text-align: left;
	color: #555555;
}

.block-port .block-port-menu a {
	display: flex;
	align-items: center;
	height: 60px;
	margin-bottom: 1px;
	padding: 21px 37px 19px 14px;
	border: solid 0 #000000;
	background-color: #E6E6E6;
	color: #555555;
}

.block-port .block-port-menu a.active {
	background-color: #ffffff;
	color: #a51954;
}

.block-port .block-port-menu a i:first-child {
	padding: 0 14px;
}

.block-port .block-port-menu a .efi-sd-settings {
	font-size: 20px;
}

.block-port .block-port-menu a .efi-sd-xml, .block-port .block-port-menu a .efi-sd-workflow {
	font-size: 27px;
}

.block-port .block-port-menu a .efi-sd-database-object {
	font-size: 23px;
}

.block-port .block-port-menu a .efi-sd-dll {
	font-size: 24px;
}

.block-port .block-port-menu a .conflict-icon {
	margin-left: auto;
	font-size: 18px;
}

.block-port .block-port-menu a:not(.active):hover {
	background-color: #cfcfcf;
}

.block-port .block-port-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 54px;
}

.block-port .block-port-buttons button {
	display: flex;
	align-items: center;
	width: 150px;
	height: 30px;
	margin-bottom: 15px;
	font-size: 13px;
	letter-spacing: 0.1px;
	line-height: 13px;
	text-transform: uppercase;
}

.block-port .block-port-buttons button.block-port-doc-button {
	border: solid 1px #008246;
  	background-color: #D6EDDC;
	color: #008246;
}

.block-port .block-port-buttons button i {
	font-size: 23px;
}

.block-port .block-port-buttons .doc-language-text {
	width: 144px;
	font-size: 13px;
	line-height: 1.23;
	text-align: center;
	color: #555;
}

.block-port .block-port-content {
	flex-basis: 76%;
	background-color: #ffffff;
	padding: 25px 23px 0;
	overflow-y: auto;
}

.block-port .block-port-content .empty-data-container {
	display: flex;
	height: 45vh;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

	.block-port .block-port-content .empty-data-container .empty-data-big-icon {
		font-size: 200px;
		color: #dddddd;
	}

	.block-port .block-port-content .empty-data-container .empty-data-header {
		width: 380px;
		font-size: 24px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.12px;
		text-align: center;
		color: #777;
	}

	.block-port .block-port-content .empty-data-container .empty-data-info {
		width: 380px;
		font-size: 19px;
		line-height: 1.26;
		letter-spacing: 0.1px;
		text-align: center;
		color: #777;
	}


.block-port .block-port-content .col-sm-6 {
	margin-bottom: 35px;
}

	.block-port .block-port-content .conflict-filter-container,
	.block-port .block-port-content .text-filter-container {
		display: flex;
	}

	.block-port .block-port-content .conflict-filter-container {
		padding-left: 20px;
	}

	.block-port .block-port-content .text-filter-container {
		padding-left: 30px;
	}
	.block-port .block-port-content .text-filter-container > div {
		width: 100%;
	}
	
	.block-port .block-port-content .block-filter-label {
		width: auto;
		padding-right: 5px;
	}

	.block-port .block-port-content ul {
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
		list-style-type: none;
		font-size: 14px;
		padding-inline-start: 0px;
	}

.block-port .block-port-content ul li {
	display: flex;
	margin-bottom: 2px;
	cursor: default;
	margin-left: 15px;
}

.block-port .block-port-content ul .conflict-item {
	background-color: #fff2f2;
}

	.block-port .block-port-content ul li div {
		margin-left: 3px;
	}

	.block-port .block-port-content ul li div, .block-port .block-port-content ul li .list-item-content-container div {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.block-port .block-port-content ul li .list-item-content-container {
		display: flex;
		align-items: center;
		width: fit-content;
	}

	.block-port .block-port-content ul li .list-item-content-container:hover {
		background-color: #f5f5f5;
	}

	.block-port .block-port-content ul li .list-item-content-container i:hover {
		background-color: #E1E1E1;
	}

.block-port .block-port-content ul .export-list-item:hover i, ul .export-list-item i:hover {
	display: flex;
	cursor: pointer;
}

.block-port .block-port-content ul .export-list-item i {
	display: none;
	align-items: center;
	height: 100%;
	color: #9874aa;
	margin: 0 3px;
}

.block-port .block-port-content .sub-type {
	color: #a51954;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: default;
}

	.block-port .block-port-content input,
	.block-port .block-port-content .input-group-append .btn,
	.block-port .block-port-content .input-group-prepend .btn,
	.block-port .block-port-content textarea {
		background-color: #F5F5F5;
	}

	.block-port .block-port-content .input-group-prepend .btn {
		cursor: default;
		padding-left: 3px;
	}

	.block-port .block-port-content input:invalid {
		border-bottom: 1px solid #a51954;
	}

.block-port .block-port-content input:invalid + .input-group-append .btn {
	border-bottom: 1px solid #a51954;
}

.block-port .block-port-content .input-group .efi-card-filter {
	font-size: 17px;
	padding-top: 5px;
	color: #c0c0c0;
	margin-right: 30px;
}

.block-port .block-port-content .dropdown-items {
	display: flex;
	flex-direction: column;
	width: 96%;
	left: 10px;
	top: 24px;
}

.block-port .block-port-content .dropdown-items li {
	margin: 0;
}

.block-port .block-port-content .padding-inline {
	padding-inline-end: initial;
}

.block-port .block-port-right {
	flex-basis: 24%;
	padding: 30px 10px 0;
	background-color: #f5f5f5;
	font-family: Roboto;
	font-size: 13px;
	letter-spacing: 0.07px;
	color: #005555;
}

.block-port .block-port-right button, .block-port .block-port-content .empty-data-container button {
	min-width: 63px;
	max-width: 122px;
  	height: 24px;
	background-color: #E3D9E7;
	color: #682684;
	border: none;
	font-size: 14px;
	text-transform: uppercase;
}

.block-port .block-port-right .alert-notice {
	color: #ff0000;
}

.block-port .block-port-right .notice-text {
	color: #555555;
	line-height: 16px;
}

.block-port .sub-title {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.79;
	color: #777777;
	text-transform: uppercase;
	cursor: default;
}

.block-port hr {
	margin-bottom: 15px;
	border-width: 2px;
    border-color: #dbdbdb;
}

.block-port .empty-data-text {
	margin-bottom: 5px;
}

.block-port-footer {
	display: flex;
	height: 40px;
	justify-content: space-between;
	align-items: center;
	padding: 0 12px;
}

.export-footer {
	padding: 5px;
}

.block-port-main form .form-control.ng-invalid-required,
.ng-invalid-required + .input-group-append button,
.ng-invalid-required + .dropdown-menu + .input-group-append button {
	border-color: red;
}

/* SCREEN DESIGNER CONTROL SETTINGS */

.control-settings-container, .control-settings-container .form-horizontal {
	height: 100%;
}

.control-settings-container .form-horizontal .form-group {
	margin: 5px -10px;
}

.control-settings-container .button-dropdown-container {
	width: 600px;
	height: fit-content;
	margin-top: 10px;
}
.control-settings-container .button-dropdown-container:hover {
	box-shadow: 4px 4px 0 0 rgb(139 143 161 / 50%);
}

.control-settings-container .button-dropdown-container > .card_list_item:hover {
	box-shadow: none;
}

.control-settings-container .button-dropdown-container .card_list_item:not(:last-child) {
	margin-top: 0;
}

.control-settings-container .button-dropdown-container .card_list_item:last-child {
	width: 500px !important;
	float: right;
}

.control-settings-container .button-dropdown-container .card_list_item:last-child .data-container div {
	width: 415px !important;
}

.control-settings-container .button-dropdown-container .grouped-controls {
	display: flex;
	position: relative;
	flex-direction: column;
	min-height: 100px;
	background: #FFF;
	border: 1px #bac3d0;
	border-style: none solid solid;
	padding-bottom: 30px;
}

.control-settings-container .button-dropdown-container .grouped-controls .left-side {
	position: absolute;
	width: 70px;
	min-height: 99px;
	height: 100%;
	background: #F7F7F7;
	border: 1px #bac3d0;
	border-style: none solid none none;
}

.control-settings-container .button-dropdown-container .button-dropdown .efi-gears {
	cursor: pointer;
	color: #9a70ac;
}

.control-settings-container .button-dropdown-container .button-dropdown .efi-gears:hover {
	color: #815693;
}

.control-settings-container .main-dropzone {
	width: 100%;
	height: 87%;
	overflow-y: auto;
	padding-bottom: 50px;
}

.control-settings-container .dropzone.over {
	border: 2px dotted #682684;
}

.card-body .existing_rule .rule-title {
	font-size: x-large;
	font-weight: 500;
}