.bt_bb_dialog {
	position: fixed;
	z-index: 60000;
	background-clip: padding-box;
	left: 50%;
	background-color: $(darkFontColor);
	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.25);
}


.bt_bb_dialog_close {
	position: absolute;
	top: 0.7em;
	right: 0.7em;
	width: 2.5em;
	height: 2.5em;
	cursor: pointer;
	color: $(darkFontColor);
	text-align: center;
	vertical-align: middle;
	background: $(accentDark);
	border-radius: 50%;
	box-shadow: 0 0 0.8em 0.01em rgba(0,0,0,0.05);
	transition: background 300ms ease, box-shadow 300ms ease;

	.rtl & {
		right: auto;
		left: 0.7em;
	}
	&:hover {
		background: $(alternateColor);
		box-shadow: 0 0 0.8em 0.01em rgba(0,0,0,0.25);
	}
	&:after {
		content: '\e900';
		font: normal 1em/2.6em bold-builder;
		display: block;
	}
	.bt_bb_front_end_preview & {
		top: 1em;
		right: 1em;
	}
}

#bt_bb_dialog {
	visibility: hidden;
	overflow: hidden;
	border-radius: $(borderRadius);
	color: #999;
	text-align: left;
	top: 10%;
	min-width: 800px;
	.mce-fullscreen & {
		width: 100% !important;
		transform: translateX(0) !important;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.bt_bb_dialog_header {
		padding: 1.35em 1.2em;
		font-size: 1.35em;
		line-height: 1.1;
		background: $(accentColor);
		color: $(darkFontColor);
		position: relative;
		.rtl & {
			text-align: right;
		}
	}
	.bt_bb_dialog_header_tools {
		background: $(accentBright);
		display: flex;
		align-items: center;
		&:has(.bt_bb_group_tab.bt_bb_group_tab_active:only-child) {
			background: $(accentBright);
		}
		.bt_bb_group_tab {
			font-size: 1em;
			text-transform: uppercase;
			padding: 0.85em 1.6em;
			position: relative;
			text-align: center;
			flex: auto;
			color: $(darkFontColor);
			background: $(accentBright);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 300ms ease 0s;
			min-width: auto;
			text-wrap: nowrap;

			.rtl & {
				float: right;
			}
			&:hover:not(.bt_bb_group_tab_active) {
				background: #70bbf5;
			}
			&.bt_bb_group_tab_active {
				text-overflow: ellipsis;
				width: auto;
				box-shadow: none;
				border-top-left-radius: $(borderRadius);
				border-top-right-radius: $(borderRadius);
				color: $(lightFontColor);
				background: $(darkFontColor);
				z-index: 10;
				transform: translateY(-5px);
				transition: 0.4s ease-out;
				&:before {
					transform: translate(-50%,-50%) scale(1);
					width: 30%;
				}
				&:after {
					height: 7.5px;
					bottom: -6.5px;
				}
			}
			/* Line */
			&:before {
				content: ' ';
				display: block;
				position: absolute;
				left: 50%;
				right: 0;
				bottom: 0;
				height: 0.2em;
				background-color: $(alternateColor);
				transform: translate(-50%,-50%) scale(0);
				transition: all 260ms ease;
			}
			&:after {
				content: ' ';
				display: block;
				position: absolute;
				bottom: -1em;
				left: 0;
				width: 100%;
				height: 1em;
				background-color: $(darkFontColor);
				transition: all 300ms ease;
				
			}
		}
		&:after {
			content: ' ';
			display: table;
			width: 100%;
			clear: both;
		}
	}
	.bt_bb_dialog_content {
		overflow-y: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0.6em;
		border-bottom: 1px solid rgba(0,0,0,.05);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		text-align: left;
		justify-content: flex-start;
		.rtl & {
			text-align: right;
		}
		.bt_bb_dialog_pick_layout_container {
			text-align: center;
			line-height: 0px;
			padding: 1.2em 1em;
			flex: 0 0 100%;
			text-align: center;
			.bt_bb_dialog_pick_layout {
				display: inline-block;
				margin: 0.45em .45em;
				cursor: pointer;
				color: #7f7f7f;
				transition: color 300ms ease, background 300ms ease;
				border-radius: $(borderRadius);
				&:before {
					font: normal 3em/1 bold-builder;
					display: block;
					color: inherit;
					padding: .3rem .6rem;
				}
				&:hover {
					background: #F1F1F1;
					color: #000;
				}
			}
		}
		.bt_bb_dialog_enter_layout_container {
		    flex: 0 0 100%;
		    line-height: 0;
		    padding: 1em;
		    text-align: center;
			> div[class*="bt_bb_edit_layout_"] {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: .5em 1em;
				border-radius: $(borderRadius);
				transition: 300ms ease all;
				&:last-child {
					margin-bottom: 0;
				}
				b {
					font-weight: normal;
					flex: 0 0 120px;
					text-align: left;
					display: flex;
					&:before {
						display: block;
						font-family: bold-builder;
						font-size: 2.5em;
						width: 1em;
						text-align: center;
						margin-right: 10px;
						transition: 300ms ease all;
					}
				}
				.bt_bb_dialog_enter_layout {
					display: inline-block;
					padding: 0.6em 0.8em;
					font: 600 1.6em/1.15 'Open Sans',sans-serif;
					background-color: rgba(0,0,0,0.05);
					text-align: center;
					transition: 300ms ease all;
					&::placeholder {
						color: #cacaca;
						letter-spacing: 2px;
					}
				}
				&:hover {
					background: #F1F1F1;
					b:before {
						color: #000;
					}
					.bt_bb_dialog_enter_layout {
						background: $(darkFontColor);
					}
				}
			}
			> .bt_bb_edit_layout_xxl b:before {
				content: "\e95f";
				transform: scaleX(1.2);
			}
			> .bt_bb_edit_layout_xl b:before {
				content: "\e95f";
			}
			> .bt_bb_edit_layout_lg b:before {
				content: "\e95e";
			}
			> .bt_bb_edit_layout_md b:before {
				content: "\e95d";
			}
			> .bt_bb_edit_layout_sm b:before {
				content: "\e95c";
			}
			> .bt_bb_edit_layout_xs b:before {
				content: "\e95b";
			}
			> .bt_bb_layout_error_alert {
				background: #ffe1e0 !important;
				color: #cf0700 !important;
				b:before {
					color: #cf0700 !important;
				}
				.bt_bb_dialog_enter_layout {
					color: #cf0700;
					border-color: #cf0700;
					background: $(darkFontColor) !important;
				}
			}
		}
	}
	&.bt_bb_dialog_add_horizontal {
		.bt_bb_dialog_content {
			border-bottom: 1px solid $(rowBorder);
			overflow-x: hidden;
			overflow-y: auto;
		}
	}
	.bt_bb_dialog_tinymce {
		height: 0;
		.bt_bb_dialog_tinymce_editor_container {
			overflow-y: auto;
			max-height: 500px;
			width: 100%;
			border-bottom: 1px solid rgba(0,0,0,.05);
			#wp-bt_bb_tinymce-wrap {
				padding: 1em 2em;
			}
		}
	}
	&.bt_bb_dialog_tinymce_container .bt_bb_dialog_content{
		border: none;
	}
	&:after {
		content: ' ';
		clear: both;
		display: table;
		width: 100%;
	}
	&.bt_bb_dialog_add_horizontal_classic {
		.bt_bb_dialog_pick_layout_container {
			.bt_bb_dialog_pick_layout {
				margin: .85em 1.25em;
				&:before {
					padding: 0;
					font-size: 3.5em;
				}
				&:hover {
					background: transparent;
				}
			}
		}
		.bt_bb_dialog_enter_layout_container {
			.bt_bb_dialog_enter_layout {
				display: inline-block;
				padding: .6em .8em;
				font: 600 1.6em/1.15 'Open Sans',sans-serif;
				background-color: rgba(0,0,0,.05);
			}
		}
	}
} 

.bt_bb_dialog_11:before {
	content: '\e944';
}

.bt_bb_dialog_12_12:before {
	content: '\e945';	
}

.bt_bb_dialog_13_13_13:before {
	content: '\e946';
}

.bt_bb_dialog_14_14_14_14:before {
	content: '\e947';
}

.bt_bb_dialog_15_15_15_15_15:before {
	content: '\e969';
}

.bt_bb_dialog_23_13:before {
	content: '\e949';
}

.bt_bb_dialog_13_23:before {
	content: '\e948';
}

.bt_bb_dialog_34_14:before {
	content: '\e94a';
}

.bt_bb_dialog_14_34:before {
	content: '\e94b';
}

.bt_bb_dialog_14_24_14:before {
	content: '\e94d';
}

.bt_bb_dialog_14_24_14 {
	background-position: -200px 0px;
}

.bt_bb_dialog_enter_layout br {
	display: none;
}

.bt_bb_dialog_enter_layout * {
	display: inline;
}

.bt_bb_dialog_button.button.button-small {
	display: block;
	margin: 1.2em auto;
	text-align: center;
	background-color: $(accentColor);
	text-transform: uppercase;
	color: $(darkFontColor);
	cursor: pointer;
	border-radius: $(borderRadius);
	border: none;
	font-size: 1.1em;
	line-height: 1;
	height: auto;
	box-shadow: 0 0 0.75em 0 rgba(0,0,0,.2);
	padding: 0.95em 1.25em;
	transition: all 270ms ease;
	&:hover {
		background-color: $(alternateColor);
		box-shadow: 0 0 1em 0 rgba(0,0,0,.2);
	}
	#bt_bb_dialog & {
		float: right;
		margin: 1.2em 1em;
		.rtl & {
			float: left;
		}
	}
}

.bt_bb_dialog_inline_buttons {
	text-align: center;
}

.bt_bb_dialog_inline_buttons.bt_bb_left {
	text-align: left;
}

.bt_bb_dialog_inline_buttons input.button.button-small {
	margin: 10px 0px 0px 0px;
}

.bt_bb_dialog_image_container {
	margin-top: 5px;
	width: 100%;
	&:empty {
		margin-top: 0px;
	}
	&:after {
		content: ' ';
	    display: block;
	    clear: both;
	}
}

.bt_bb_sortable_item {
	width: 80px;
	height: 80px;
	float: left;
	outline: 3px solid #eee;
	outline-offset: -3px;
	background-image: url('../img/ajax-loader.gif');
	background-position: center;
	background-repeat: no-repeat;
}

.bt_bb_sortable_item i {
	float: right;
	margin: 1px;
	padding: 0px 1px 0px 1px;
	color: red;
	background: #eee;
	cursor: pointer;
}



.bt_bb_dialog_inline_buttons  input.bt_bb_dialog_select_images_button.button.button-small {
	margin-top: 5px;
}

#bt_bb_sc_mapper_accordion {
	> h3 {
		cursor: pointer;
		padding: 10px;
		color: #777;
		border-bottom: 1px solid rgba(0,0,0,.05);
		user-select: none;
		&:nth-last-child(2) {
			border-bottom: 0px;
		}
		&:focus {
			outline: 0;
		}
		&.bt_bb_map_header_active {
			background: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,0));
			border-bottom: 0px;
		}
		i {
			margin-right: 10px;
		}
		&.bt_bb_sc_mapper_unmapped {
			color: rgba(255,0,0,.5);
		}
	}
	> div {
		height: 0px;
		overflow: hidden;
		line-height: 0px;
		&:last-child {
			border-bottom: 0px;
		}
		&.bt_bb_map_item_active {
			height: auto;
			padding: 10px;
			border-bottom: 1px solid rgba(0,0,0,.05);
		}
	}
	.bt_bb_sc_map {
		width: 100%;
		resize: vertical;
		font-family: Courier New, Courier, monospace;
		tab-size: 3;
		margin: 0px;
		font-size: 12px;
		line-height: 16px;
	}
	.button {
		margin: 0px 10px 10px 0px;
	}
	.spinner {
		display: inline-block;
		float: none;
		margin-left: 0px;
	}
}


/* Interface Icons */
.bt_bb_dialog_content {

	/* General */
	.bt_bb_icon:before {
		content: '\e90d';
	}

	/* Elements */
	.bt_bb_icon_bt_bb_accordion:before, .bt_bb_icon_bt_bb_accordion_item:before {
		content: '\e901';
	}

	.bt_bb_icon_bt_bb_button:before {
		content: '\e902';
	}

	.bt_bb_icon_bt_bb_countdown:before {
		content: '\e903';
	}

	.bt_bb_icon_bt_bb_counter:before {
		content: '\e904';
	}

	.bt_bb_icon_bt_bb_custom_menu:before {
		content: '\e905';
	}

	.bt_bb_icon_bt_bb_google_maps:before {
		content: '\e910';
	}

	.bt_bb_icon_bt_bb_google_maps_location:before {
		content: '\e90f';
	}

	.bt_bb_icon_bt_bb_leaflet_map:before {
		content: '\e910';
	}

	.bt_bb_icon_bt_bb_leaflet_map_location:before {
		content: '\e90f';
	}

	.bt_bb_icon_bt_bb_grid:before {
		content: '\e908';
	}

	.bt_bb_icon_bt_bb_grid_gallery:before {
		content: '\e906';
	}

	.bt_bb_icon_bt_bb_header:before {
		content: '\e90a';
	}

	.bt_bb_icon_bt_bb_icons:before {
		content: '\e90b';
	}

	.bt_bb_icon_bt_bb_image:before, .bt_bb_icon_bt_bb_content_slider_item:before {
		content: '\e90c';
	}

	.bt_bb_icon_bt_bb_row_inner:before {
		content: '\e90d';
	}

	.bt_bb_icon_bt_bb_latest_posts:before {
		content: '\e90e';
	}

	.bt_bb_icon_bt_bb_percentage_bar:before {
		content: '\e911';
	}

	.bt_bb_icon_bt_bb_price_list:before {
		content: '\e912';
	}

	.bt_bb_icon_bt_bb_hr:before {
		content: '\e914';
	}

	.bt_bb_icon_bt_bb_service:before {
		content: '\e915';
	}

	.bt_bb_icon_bt_bb_clients:before { /* MISSING */
		content: '\e917';
	}

	.bt_bb_icon_bt_bb_slider:before, .bt_bb_icon_bt_bb_content_slider:before {
		content: '\e916';
	}

	.bt_bb_icon_bt_bb_tabs:before, .bt_bb_icon_bt_bb_tabs_item:before {
		content: '\e919';
	}

	.bt_bb_icon_bt_bb_text:before {
		content: '\e91a';
	}

	.bt_bb_icon_bt_bb_twitter:before {
		content: '\e91b';
	}

	.bt_bb_icon_bt_bb_icon:before { /* MISSING */
		content: '\e959';
	}

	:any(.bt_bb_icon_bt_bb_separator:before, .bt_bb_icon_bt_cc_separator:before) {
		content: '\e914';
	}
	:any(.bt_bb_icon_bt_bb_cc_element:before) {
		content: '\e967';
	}
	:any(.bt_bb_icon_bt_bb_cost_calculator:before, .bt_bb_icon_bt_bb_cost_calculator_simple:before, .bt_bb_icon_bt_cc:before) {
		content: '\e967';
	}
	:any(.bt_bb_icon_bt_bb_cost_calculator_item:before, .bt_bb_icon_bt_cc_item:before) {
		content: '\e902';
	}

	:any(.bt_bb_icon_bt_bb_cost_calculator_group:before, .bt_bb_icon_bt_cc_group:before) {
		content: '\e965';
	}

	:any(.bt_bb_icon_bt_bb_cost_calculator_multiply:before, .bt_bb_icon_bt_cc_multiply:before) {
		content: '\e966';
	}

	:any(.bt_bb_icon_bt_bb_cost_calculator_text:before, .bt_bb_icon_bt_cc_text:before) { 
		content: '\e960';
	}

	:any(.bt_bb_icon_bt_bb_cost_calculator_slider:before, .bt_bb_icon_bt_cc_slider:before) { 
		content: '\e962';
	}

	:any(.bt_bb_icon_bt_bb_cost_calculator_switch:before, .bt_bb_icon_bt_cc_switch:before) {
		content: '\e961';
	}

	:any(.bt_bb_icon_bt_bb_cost_calculator_select:before, .bt_bb_icon_bt_cc_select:before) {
		content: '\e964';
	}

	.bt_bb_icon_bt_bb_video:before {
		content: '\e956';
	}

	.bt_bb_icon_bt_bb_headline:before {
		content: '\e90a';
	}

	/* Deprecated */
	.bt_bb_icon_bt_bb_cost_calculator_simple {
		opacity: 0.3;
	}
	.bt_bb_icon_bt_bb_masonry_post_grid {
		opacity: 0.3;
		&:before {
			content: '\e955';
		}
	}
	.bt_bb_icon_bt_bb_masonry_image_grid {
		opacity: 0.3;
		&:before {
			content: '\e908';
		}	
	}

	:any(.bt_bb_icon_bt_bb_raw_content:before, .bt_bb_icon_bt_cc_raw_html:before) {
		content: '\e94e';
	}
	
	.bt_bb_icon_bt_bb_progress_bar:before {
		content: '\e902';
	}
	
	.bt_bb_icon_bt_bb_instagram:before {
		content: '\e95a';
	}

	.bt_bb_icon_bt_bb_contact_form_7:before {
		content: '\e968';
	}

	.bt_bb_icon_bt_bb_css_image_grid:before {
		content: '\e96a';
	}

	.bt_bb_icon_bt_bb_css_post_grid:before {
		content: '\e955';
	}

	.bt_bb_icon_bt_bb_hero_posts:before,
	.bt_bb_icon_hero_products_bt_bb:before {
		content: '\e908';
	}

	.bt_bb_icon_bt_bb_shortcode:before {
		content: '\e96d';
	}

	.bt_bb_icon_bt_bb_bold_timeline:before {
		content: '\e915';
	}
	
} /* /bt_bb_dialog_item */


/*
.bt_bb_toolbar > span::first-letter {
	font-size: 3em;
	color: red;
}*/

#bt_bb_front_end_preview_container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 60000;
	pointer-events: none;
}

#bt_bb_front_end_preview_container .bt_bb_dialog {
	position: static;
	pointer-events: all;
}

#bt_bb_front_end_preview {
	display: none;
	font-size: 1.35em;
	border-radius: $(borderRadius);
	overflow: hidden;
	.bt_bb_dialog_header {
		padding: .825em 1.2em;
		font-size: 1em;
		line-height: 1;
		background: $(accentColor);
		color: $(contrastFontColor);
		position: relative;
		display: flex;
		align-items: center;
		.rtl & {
			text-align: right;
		}
		.bt_bb_front_end_preview_resize {
			order: 2;
			margin: 0 5px;
			&:before {
				cursor: pointer;
				font-family: bold-builder;
				font-size: 1.25em;
				border-radius: 50%;
				width: 1.75em;
				height: 1.75em;
				display: block;
				text-align: center;
				line-height: 1.75em;
				background: #0367B4;
				color: rgba(255,255,255,.8);
				transition: 300ms ease all;
			}
			&:hover {
				&:before {
					box-shadow: 0 0 0.8em 0.01em rgba(0,0,0,.25), 0 0 0 2px $(darkFontColor);
					background: #2196f3;
					color: $(darkFontColor);
				}
			}
			&.bt_bb_front_end_preview_selected {
				pointer-events: none;
				&:before {
					background: $(darkFontColor);
					color: #000;
				}
			}
		}
		.bt_bb_front_end_preview_xxl {
			margin-left: auto;
		}
		.bt_bb_front_end_preview_xs {
			margin-right: auto;
		}
		.bt_bb_front_end_preview_xxl:before {
			content: "\e95f";
			transform: scale(1.2);
		}
		.bt_bb_front_end_preview_xl:before {
			content: "\e95f";
		}
		.bt_bb_front_end_preview_lg:before {
			content: "\e95e";
		}
		.bt_bb_front_end_preview_md:before {
			content: "\e95d";
		}
		.bt_bb_front_end_preview_sm:before {
			content: "\e95c";
		}
		.bt_bb_front_end_preview_xs:before {
			content: "\e95b";
		}
		> span {
			order: 1;
		}
		.bt_bb_front_end_preview_close {
			order: 10;
		}
	}
	&.bt_bb_front_end_preview_xl,
	&.bt_bb_front_end_preview_lg,
	&.bt_bb_front_end_preview_md,
	&.bt_bb_front_end_preview_sm,
	&.bt_bb_front_end_preview_xs {
		transition: 300ms ease width;
	}
}

#bt_bb_front_end_preview iframe {
	width: 100%;
	height: calc(100% - 62px);
	border-radius: $(borderRadius);
}

#bt_bb_dialog .mce-i-resize {
	display: none;
}

.bt_bb_front_end_preview_loading {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -32px 0 0 -32px;
	.bt_bb_fe_loader {
	  width: 64px;
	  height: 64px;
	  margin: 0;
	  .sk-cube {
		  width: 33%;
		  height: 33%;
		  background-color: $(accentColor);
		  float: left;
		  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
		  &.sk-cube1 {animation-delay: 0.2s;}
		  &.sk-cube2 {animation-delay: 0.3s;}
		  &.sk-cube3 {animation-delay: 0.4s;}
		  &.sk-cube4 {animation-delay: 0.1s;}
		  &.sk-cube5 {animation-delay: 0.2s;}
		  &.sk-cube6 {animation-delay: 0.3s;}
		  &.sk-cube7 {animation-delay: 0;}
		  &.sk-cube8 {animation-delay: 0.1s;}
		  &.sk-cube9 {animation-delay: 0.2s;}
		}
	}
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
	transform: scale3D(1,1,1);
  } 35% {
	transform: scale3D(0,0,1);
  } 
}

@media screen and (max-width: 992px) {
	#bt_bb_dialog {
		min-width: 80%;
		.bt_bb_dialog_content {
			.bt_bb_dialog_item {
				&[data-param_name="publish_datetime"], &[data-param_name="expiry_datetime"] {
					flex: 0 0 100%;
					i {
						text-align: right;
					}
				}
			}
		}
		.bt_bb_dialog_content .bt_bb_dialog_item[data-param_name="row_width"][data-type="radio"] label {
			flex-basis: calc(33% - 2em);
		}
		.bt_bb_dialog_content .bt_bb_dialog_item[data-param_name="row_width"][data-type="radio"] label[for="bt_bb_row_row_width7"] {
			margin-right: 20em;
		}
	}
}


.bt_bb_responsive_override_container {
	display: flex;
	flex-wrap: wrap;
	.bt_bb_responsive_override {
		display: flex;
		flex: 1 1 20%;
		#bt_bb_fe_dialog_content_wrapper & {
			flex: 1 1 50%;
		}
		.bt_bb_ro {
			flex-basis: 2em;
			margin-top: .5em;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.5em;
			flex-shrink: 0;
			&:before {
				font: normal 1em/1 bold-builder;
			}
		}
		.bt_bb_ro_xl:before {
			content: '\e95f';
		}
		
		.bt_bb_ro_lg:before {
			content: '\e95e';
		}

		.bt_bb_ro_md:before {
			content: '\e95d';
		}

		.bt_bb_ro_sm:before {
			content: '\e95c';
		}

		.bt_bb_ro_xs:before {
			content: '\e95b';
		}

	}
}

@media screen and (max-width: 1200px) {
	.bt_bb_responsive_override_container {
		.bt_bb_responsive_override {
			flex: 1 1 50%;
		}
	}
}
@media screen and (max-width: 768px) {
	.bt_bb_responsive_override_container {
		.bt_bb_responsive_override {
			flex: 1 1 100%;
		}
	}
}
