/*
//		Editor Controls
*/

/*		Toolbox		*/

#app-editor-main {
	
	position: fixed;
	top: 0;
	left: 0;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	width: 100%;
	min-height: 100%;
	
	z-index: 999;
	
	background: rgb(255, 255, 255, 1);
	
}

#app-editor-logo {
	
	width: 20%;
	
	background-image: url(/media/mullersoftworks.png);
	background-attachment: scroll;
	background-position: center;
	background-size: 25%;
	background-repeat: no-repeat;
	
}

#app-editor-breakpoints {
	
	position: sticky;
	top: 0;
	left: 20vw;
	
	display: flex;
	flex-direction: row;
	
	width: 80%;
	
	z-index: 1000;
	
}

#app-editor-viewport {
	
	display: flex;
	width: 100%;
	
}

#app-editor-toolbox {
	
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1000;
	
	max-width: 20%;
	height: 100vh;
	
	overflow: auto;
	
	margin-bottom: 0px;
	
}

#app-editor-toolbox-label {
	
	text-align: center;
	
	color: rgb(--ColorTextInvert);
	background-color: rgba(var(--ColorAccentBright), 1);
	
}

#app-editor-toolbox-status {
	
	display: flex;
	flex-direction: row;
	align-items: center;
	
}

#app-editor-toolbox-options {
	
	width: 100%;
	
}

.app-editor-important {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	align-items: center;
	
	padding: 0.25vw;
	
}

.app-editor-important i {
	
	color: rgb(var(--ColorWarn)) !important;
	
}

.app-editor-important span {
	
	font-weight: bold;
	padding-left: 0.5vw;
	
}

#app-editor-toolbox-status span {
	
	font-weight: bolder;
	
}

.app-editor-toolbox-status-OK {
	
	color: rgb(var(--ColorOK)) !important;
	
}

.app-editor-toolbox-status-WAIT {
	
	color: rgb(var(--ColorWarn)) !important;
	
}

.app-editor-toolbox-status-ERROR {
	
	color: rgb(var(--ColorError)) !important;
	
}

.app-editor-toolbox-group-heading {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: center;
	align-items: center;
	
	width: 100%;
	
}

.app-editor-toolbox-group-heading h6 {
	
	color: rgb(var(--ColorAccentDark));
	
	margin: 0px;
	font-weight: bolder;
	
}

.app-editor-toolbox-group-heading::after {
	
	content: "";
	clear: both;
	
	width: 100%;
	
	margin: 0.15vw;
	padding: 0.1vh;
	
	background-image: radial-gradient(
			circle,
			rgba(var(--ColorAccentDark), 1),
			rgba(var(--ColorAccentBright), 0));
	
}

.app-editor-toolbox-group {
	
	width: 100%;
	padding: 0.25vw;
	
}

.app-editor-toolbox-tool {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	
	width: 100%;
	padding: 0.5vw;
	
}

.app-editor-toolbox-tool span {
	
	padding: 0.75vw;
	font-weight: bold;
	
}

.app-editor-toolbox-tool:hover,active {
	
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 25%);
	
}

.app-editor-tool-disabled {
	
	background-color: #CCCCCC;
	pointer-events: none;
	
}

.app-editor-tool-enabled {
	
	animation: 1s infinite alternate glow; 
	
}

#app-editor-toolbox-control {
	
	position: sticky;
	top: 0;
	left: 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 2vw;
	height: 100vh;
	
	background-color: rgba(255, 255, 255, 0.8);
	
}

#app-editor-popup {
	
	position: absolute;
	
	display: none;
	flex-direction: column;
	
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	width: 100%;
	height: 100%;
	
	padding: 2vw;
	
	background-color: rgba(255, 255, 255, 0.6);
	
	z-index: 1100;
	
}

#app-editor-popup-close {
	
	position: sticky;
	top: 2vh;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	width: 4vw;
	
	padding:1vw;
	margin-left: auto;
	margin-right: auto;
	
	border-radius: 1vw 1vw 1vw 1vw;
	background-color: rgba(255, 255, 255, 1);
	
	opacity: 0.6;
	
}

#app-editor-popup-content {
	
	position: sticky;
	top: 8vh;
	
}

#app-editor-popup-close:active, #app-editor-popup-close:hover {

	opacity: 1;

}	

#app-editor-popup-content {
	
	
	
}

#app-editor-wrapper {
	
	position: relative;
	
	width: 100%;
	
	padding-top: 2vh;
	padding-bottom: 2vh;
	
	margin: auto;
	
}

#app-editor-window {
	
	min-width: 100%;
	min-height: 100vh;
	
	padding-top: 2vh;
	padding-bottom: 10vh;
	
}

/* 		Overlay Options		*/
.x-editor-component-options {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: center;
	align-items: center;
	
}

.x-editor-component-options-item {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	align-items: center;
	
	padding: 0.25vw;
	
}

.x-editor-component-options-item span {
	
	font-weight: bold;
	
	padding-left: 0.5vw;
	
}

/*
//	Editor To Customize Website
*/

/*		Editor-Specific		*/
/*		Effects			*/
.x-editor-active {
	
	border: 2px dashed rgb(var(--ColorOK));
	box-shadow: inset 0 0 1vw rgb(var(--ColorOK));
	
}

.x-editor-inactive {
	
	border: 2px dashed rgb(var(--ColorInfo));
	
}

.x-editor-disabled {
	
	filter: grayscale(100%);
	pointer-events: none;
	
}

.x-editor-hideBorder {
	
	border: 0px !important;
	box-shadow: none !important;
	
}

.x-editor-placeholder {
	
	width: 100%;
	height: 100%;
	
	min-width: 5vw;
	min-height: 5vh;
	
	background: rgba(255, 255, 255, 0.3);
	
}

.x-editor-dragging {
	
	padding: 2vw;
	
	box-shadow: inset 0 0 1vw rgb(var(--ColorWarn));
	
}

.x-editor-dragging:last-of-type {
	
	padding-bottom: 10vh;
	margin-bottom: 10vh;
	
}


/*		Containers		*/

.x-containers-width-full {
	
	width: 100%;
	
}

.x-containers-width-standard {
	
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
}

/*		Margin and Padding		*/

.x-margin-auto {
	
	margin-left: auto;
	margin-right: auto;
	
}

.x-padding-standard {
	
	padding: 2vw;
	
}

/*		Opacity			*/

.x-opacity-opaque {
	
	opacity: 1;
	
}

.x-opacity-glass {
	
	opacity: 0.9;
	
}

/*		Tray 		*/
.x-design-tray {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}

.x-design-tray-control {
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 100%;
	
}

/*		Components		*/
.x-editor-component {
	
	display: flex;
	
	min-width: 2vw;
	min-height: 2vw;
	
}

.x-editor-component:not(.x-editor-active):hover {
	
	box-shadow: inset 0 0 1vw rgb(var(--ColorWarn), 0.5);
	
}

.x-editor-component-overlay {
	
	display: none;
	flex-direction: column;
	flex-wrap: wrap;
	
	width: 100%;
	height: 100%;
	
	align-items: center;
	
	background-color: rgb(255, 255, 255);
	
	z-index: 1000;
	
}

.x-editor-component-option {
	
	display: none;
	background-color: rgb(255, 255, 255);
	
}

.x-editor-component-option-form {
	
	display: table;
	text-align: center;
	vertical-align: center;
	width: 100%;
	
}

.x-editor-component-option-form-input {
	
	display: table-row;
	
	padding: 0.5vw;
	
	width: 100%;
	
	font-weight: bold;
	
}

.x-editor-component-option-form-input span,
.x-editor-component-option-form-input input,
.x-editor-component-option-form-input select
{
	
	width: 50%;
	
}

.x-editor-component-option-form-input * {
	
	display: table-cell;
	
}

.x-editor-component-option-form-input input,
.x-editor-component-option-form-input select 
{
	
	margin: 0.5vw;
	border-radius: 0.25vw;
	
}

.x-editor-component-option-form-input i {
	
	position: relative;
	left: -12%;
	
}

/*		Live		*/
.x-live-component {
	
	display: flex;
	
	min-width: 2vw;
	min-height: 2vw;
	
}

#x-live-window {
	
	min-width: 100%;
	min-height: 100vh;
	
}

/* effects */
.app-editor-highlight {
	
	background-color: rgb(var(--ColorContrast));
	
}