.phx-default-data-editor {
	background-color: extract(@CLR_1, 9);
	height: 100%;
	min-width: 590pt;
	// ขนาดที่กล่อง create ไม่หล่น
	// min-width: 671pt;
	position: relative;
	border-top: @EDITOR_CONTENT_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

	& > .background {
		background-color: @CLR_BRAND;

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 30%;
	}

	& > .wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	& > .wrapper > .content {
		position: relative;
		width: 100%;
		height: 100%;
	}

	& > .wrapper > .content > .wrapper {
		position: relative; 
		width: 100%;
		height: 100%; 
		padding-left: @EDITOR_CONTENT_PADDING_LEFT;
		padding-right: @EDITOR_CONTENT_PADDING_RIGHT;
		padding-bottom: @EDITOR_CONTENT_PADDING_BOTTOM;
		min-height: 540pt;
	}

	// & .phlox-editor-header{
	// 	width: 100%;
	// 	height: @EDITOR_PAGE_ACTION_BUTTON_HEIGHT;
	// 	padding: 0 10pt;
		
	// 	.page-info-wrapper {
	// 		width: auto;
	// 		padding-right: 15pt;
			
	// 		.page-info {
	// 			min-width: auto;
	// 		}
	// 	}

	// 	.page-action-wrapper {
	// 		width: auto;
			
	// 	}

	// 	phx-search-btn {
	// 		color: extract(@CLR_1, 9);
	// 		font-size: 21pt;
	// 	}
	// }

	& .phlox-editor-header{
		width: 100%;
		max-width: 100%;
		height: @EDITOR_PAGE_ACTION_BUTTON_HEIGHT;
		padding: 0 10pt;

		.page-info-wrapper {
			float: left;
			width: @HEADER_PADDING_LEFT;
			position: relative;
			z-index: 1;

			phx-search-btn {
				& .search-icon {
					color: extract(@CLR_1, 9);
					font-size: 21pt !important;
					width: fit-content;
					padding-left: 5pt;
				}
			}

			material-text-box {
				font-size: 8.91pt;
				position: absolute;
				top: -5.5pt;
				left: 34pt;
				color: extract(@CLR_1, 9);

				.mat-form-field-underline {
					background-color: extract(@CLR_1, 9);
				}

				.mat-form-field-ripple {
					background-color: extract(@CLR_1, 9);
				}

				.mat-form-field.mat-focused .mat-form-field-ripple {
					background-color: extract(@CLR_1, 9);
				}
			}
		}
		

		.page-header-center {
			padding-left: @HEADER_PADDING_LEFT;
			padding-right: @HEADER_PADDING_RIGHT;
			position: absolute;
			z-index: 0;
			width: 97%;
			
			.page-action-wrapper {
				color: extract(@CLR_1, 9);
				float: right;
				overflow: hidden;
			}

			ul.page-action {
				padding: 0;
			}

			ul.action-button-group {
				padding-left: 0;
			}

			.group > button {
				color: extract(@CLR_1, 9);
				font-size: 8.91pt;
				font-weight: lighter;
			}

			.more-menu .wrapper {
				color: extract(@CLR_1, 9);
				font-size: 8.91pt;
				font-weight: lighter;
			}
		}

		.page-view-wrapper {
			float: right;
			width: @HEADER_PADDING_RIGHT;
			position: relative;
			z-index: 1;

			.view-button-group {
				.nav();
				.navbar-nav();
				padding-top: 0;
				float: right;
			}
		}
	}


	& .phlox-editor-body{
		background-color: extract(@CLR_1, 9);
		.phlox-box-shadow(0, @EDITOR_CONTENT_SHADOW_VLEN, @EDITOR_CONTENT_SHADOW_BLUR, @EDITOR_CONTENT_SHADOW_SPREAD, rgba(147, 138, 138, 0.1));
		// box-shadow: 0px 2px 10px 1px rgba(147, 138, 138, 0.1)

		height: 100%;
		width: 100%;
		position: relative;

		// overide phx-tab-pane in form
		.phx-form-view {
			.phx-tab-pane {
				padding-bottom: 0;

				>.body { 

						>phx-component-wrapper.active + * {
							height: 100%;

							.phx-data-lang-selector {
								.component-pane {
									height: 100%;

									>.component-wrapper {
										height: 100%;
									}
								}
							}
							// end lang selector
						}
				}
			}
		}
		// end overide phx-tab-pane
	}

	.page-action {
	  &-wrapper {
	    // position: absolute;
	    // right: 0;
	    float: right;
	  }
	}

	.page-action {
	  .nav();
	  .navbar-nav();
	}

	.page-separate {
	  width: 2pt;
	  height: 30pt;
	  margin-top: 12pt;
	  border-right: 0.25pt solid rgba(255, 255, 255, 0.5);
	}

	.action-button-group {
	  .nav();
	  .navbar-nav();
	  padding-top: 0;
	  padding-right: 2pt;
	}

	// .view-button-group {
		//   .nav();
		//   .navbar-nav();
		//   padding-top: 0;
		//   float: right;
		// }
}